Changeset 55e98e4 in OpenWorkouts-current

Timestamp:

Jan 16, 2019, 8:14:17 PM (5 years ago)

Author:

Segundo Fdez <segun.2@…>

Branches:

current, feature/docs, master

Children:

5cbc4a0

Parents:

816820d

Message:

Added login and sign up pages design. Organize styles and added navigation with ui common styles

Location:

ow

Files:

• static/css/main.css (modified) (1 diff)
• static/css/modules/header.css (added)
• static/css/pages/login.css (modified) (2 diffs)
• static/css/ui/buttons.css (added)
• static/css/ui/form.css (added)
• static/css/variables.css (modified) (1 diff)
• templates/login.pt (modified) (1 diff)
• templates/signup.pt (modified) (2 diffs)

ow/static/css/main.css

@@ -8 +8 @@
 @import "variables.css";
 
+/* UI */
+@import "ui/form.css";
+@import "ui/buttons.css";
+
 /* Common styles */
 @import "common.css";
 
+/* Modules */
+@import "modules/header.css";
+
 /* Pages */
 @import "pages/login.css";

ow/static/css/pages/login.css

@@ -1 @@
-
-/* logo
----------------------------------------------------------------------- */
-.logo {
-    font-size: 24px;
-    line-height: 1em;
-    font-weight: 800;
-    text-transform: uppercase;
-    margin: 0;
-    span{
-        transition: all 250ms ease-in-out;
-    }
-    &:hover{
-        span{
-            color: var(--color-app);
-        }
-    }
-}
-.logo-open {
-    display: block;
-    color: var(--color-app);
-}
-.logo-work,
-.logo-outs {
-    color: var(--color-app-light);
-}
-
-
-
+/* ==========================================================================
+   Login page
+   ========================================================================== */
 
 .login-content {
@@ -35 +9 @@
     justify-content: center;
     align-items: center;
-    height: 85vh;
+    min-height: calc(100vh - 98px);
     padding: 1em 0;
-    /*
-    background-blend-mode: multiply;
-    background-color: var(--color-app);
-    */
 }
 
-    /* Provisional */
-    .message {
-        padding: .5em;
-        margin: 0;
-        text-align: center;
-        font-size: 13;
-        &.message-error{
-            color: white;
-            background-color: red;
-        }
-    }
-    form{
-        width: 100%;
-        max-width: 350px;
-    }
+.login-content form {
+    max-width: 380px;
+    background-color: rgba(0,0,0,0.8);
+    border-radius: 6px;
+    padding: 2em  1.5em;
+}
 
-    legend {
-        display: none;
-    }
 
-    fieldset {
-        border: none;
-        background-color: var(--color-main-medium);
-        border-radius: 6px;
-        padding: 2em;
-        >div {
-            margin-bottom: 1.5em;
-        }
-    }
-    input {
-        width: 100%;
-        padding: .5em .75em;
-        border: 1px solid transparent;
-        border-radius: 2px;
-        &:focus{
-            border-color: var(--color-app);
-        }
-    }
+.login-content label {
+    color: white;
+}
 
-    label {
-        display: block;
-        font-size: 14;
-        color: white;
-        margin-bottom: .25em;
-    }
-    .button {
-        transition: all 500ms ease-in-out;
-        background-color: var(--color-app);
-        color: white;
-        margin-bottom: 1em;
-        text-transform: uppercase;
-        &:hover {
-            background-color: darken(var(--color-app), 10%);
-        }
-    }
+.login-content a {
+    color: var(--color-main-light);
+    font-size: 13px;
+    text-decoration: none;
+    margin-right: .75em;
+}
+
+.login-content a:hover {
+    color: white;
+}
+
+
+
+
+
+
+
+
+/* Provisional */
+.message {
+    padding: .5em;
+    margin: 0;
+    border-radius: 4px;
+    text-align: center;
+    font-size: 13px;
+}
+
+.message.message-error{
+    background-color: var(--color-app-dark);
+    color: white;
+    margin-bottom: .5em;
+}

ow/static/css/variables.css

@@ -4 +4 @@
     --color-main: #151515;
     --color-main-dark: #454545;
-    --color-main-medium: #666;
+    --color-main-medium: #999;
     --color-main-light: #ccc;
     --color-main-xtralight: #f5f5f5;
 
+    --color-app-dark: #e81029;
     --color-app: #EE4056;
     --color-app-medium: #ee0000;

ow/templates/login.pt

@@ -34 +34 @@
                      type="password" i18n:attributes="placeholder">
             </div>
-            <input class="button" type="submit" name="submit" value="Login">
+            <div>
+              <input class="button button-action" type="submit" name="submit" value="Login">
+            </div>
             <a class="login-remember" href="#" i18n:translate="">
-              Forgot your password?</a> |
+              Forgot your password?</a>
             <a class="join-now" href="" i18n:translate=""
                tal:attributes="href request.resource_url(context, 'signup')">

ow/templates/signup.pt

@@ -12 +12 @@
       <!-- Login -->
 
-      <div class="signup-content">
+      <div class="login-content">
 
         <form method="post" name="signup" action="">
@@ -57 +57 @@
           </fieldset>
 
-          <input class="button" type="submit" name="submit" value="Sign up!">
+          <input class="button button-action" type="submit" name="submit" value="Sign up!">
 
         </form>