Style and markup tweaks to login page

hammerlab · Jul 7, 2015 · 01bc9d3 · 01bc9d3
1 parent 35889d0
commit 01bc9d3
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 31 deletions.
diff --git a/cycledash/static/scss/header.scss b/cycledash/static/scss/header.scss
@@ -20,7 +20,7 @@ nav.navigation ul {
 }
 nav.navigation li {
   display: inline-block;
-  padding: 0 0 0 1em;
+  padding: 0 1em 0 0;
 }
 nav.navigation a {
   color: black;
@@ -35,15 +35,24 @@ nav.navigation .active a:hover {
 nav.navigation .active {
   font-weight: bold;
 }
-nav #user-login-logout {
-  float: right;
-  display: inline-block;
+#navigation-list {
+  float: left;
 }
-
 nav #user-login-logout {
   float: right;
+  display: inline-block;
+  .active:hover {
+    text-decoration: none;
+  }
+  li {
+    padding: 0;
+  }
   #logout {
     border: none;
     background: none;
+    padding: 0;
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
diff --git a/cycledash/static/scss/style.scss b/cycledash/static/scss/style.scss
@@ -112,7 +112,16 @@ form.centered-form {
   border: 1px solid $color-border-light;
   border-radius: $radius;
   margin: 2em auto;
-  padding: 1em 2em 2em 2em;
+  padding: 1em;
+  h2 {
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+  }
+}
+.create-account {
+  display: block;
+  text-align: center;
 }
 section#api-docs > section {
   @extend %card;

diff --git a/cycledash/templates/about.html b/cycledash/templates/about.html
@@ -9,9 +9,9 @@
 {{ nav("about", current_user) }}
 <main>
   <section class="about-intro">
-    <h1>Welcome to CycleDash <img class="cycle" src="static/img/cycle-dash.png" width=100></h1>
+    <h1>Welcome to Cycledash <img class="cycle" src="static/img/cycle-dash.png" width=100></h1>
     <p>
-      CycleDash is an open-source somatic variant caller analysis and
+      Cycledash is an open-source somatic variant caller analysis and
       visualization tool. The
       <a href="https://github.com/hammerlab/cycledash" target="_blank">source can be found</a>
       on GitHub, and is developed by
@@ -34,7 +34,7 @@ <h4>Required</h4>
           <dd>
             The path on HDFS where the VCF can be found.
             (e.g. <tt>/users/cycledasher/pt-123.vcf</tt>)
-            This should be immutable, as CycleDash expects
+            This should be immutable, as Cycledash expects
             to be able to find the VCF here at any time.
           </dd>
           <dt>projectName</dt>

diff --git a/cycledash/templates/login.html b/cycledash/templates/login.html
@@ -9,24 +9,24 @@
 {{ nav("login", current_user) }}
 <main id="login">
   <form class="centered-form" method="POST">
-    <h2>Login to Cycledash</h3>
+    <h2>Cycledash Login</h3>
     {% if errors %}
     <p class="bg-danger form-errors">{{errors}}</p>
     {% endif %}
-    <div class="form-group add-form-input-half">
+    <div class="form-group">
       <label class="control-label">Username</label>
-      <input class="form-control" "type="text"
-             placeholder="username" name="username">
+      <input class="form-control" type="text"
+             name="username">
     </div>
     <div class="form-group add-form-input-half">
       <label class="control-label">Password</label>
       <input class="form-control" type="password"
-             placeholder="password" name="password">
+             name="password">
     </div>
-    <div className='form-group add-form-input-full'>
-      <button class="btn btn-info btn-block"type="submit">Log in</button>
+    <div class="form-group">
+      <button class="btn btn-primary btn-block" type="submit">Log In</button>
     </div>
-    <a href="/register">Register here if you don't have an account</a>
+    <a class="create-account" href="/register">Create an account</a>
   </form>
 </main>
 {% endblock %}
diff --git a/cycledash/templates/macros/nav.html b/cycledash/templates/macros/nav.html
@@ -1,8 +1,8 @@
 {% macro nav(active, current_user) -%}
 <nav class="navigation">
   <div class="container">
-    <a class="header-logo" href="/">Home</a>
     <ul id="navigation-list">
+      <li><a class="header-logo" href="/">Home</a></li>
       <li class="{{ 'active' if active == 'runs' else '' }}">
         <a href="/">Projects</a>
         {% if active == 'examine' %} &raquo;
@@ -22,9 +22,7 @@
           <button id="logout">Log out {{ current_user['username'] }}</button>
         </form>
         {% else %}
-        <a href="/login">
-          <span class="{{ 'active' if active == 'login' else '' }}">Log in</span>
-        </a>
+        <a class="{{ 'active' if active == 'login' else '' }}" href="/login">Log in</a>
         {% endif %}
       </li>
     </ul>

diff --git a/cycledash/templates/register.html b/cycledash/templates/register.html
@@ -9,34 +9,34 @@
 {{ nav("register", current_user) }}
 <main id="register">
   <form class="centered-form" method="POST">
-    <h2>Register for Cycledash</h3>
+    <h2>Create a Cycledash Account</h3>
     {% if errors %}
     <p class="bg-danger form-errors">{{errors}}</p>
     {% endif %}
     <div class="form-group add-form-input-half">
       <label class="control-label">Username</label>
-      <input class="form-control" "type="text"
-             placeholder="username" name="username">
+      <input class="form-control" type="text"
+             name="username">
     </div>
     <div class="form-group add-form-input-half">
       <label class="control-label">Email</label>
-      <input class="form-control" "type="text"
-             placeholder="email" name="email">
+      <input class="form-control" type="text"
+             name="email">
     </div>
     <div class="form-group add-form-input-half">
       <label class="control-label">Password</label>
-      <p class="help-block">Password must be 8 characters or more.</p>
       <input class="form-control" type="password"
-             placeholder="password" name="password1">
+             name="password1">
+      <p class="help-block">Password must be 8 characters or more.</p>
     </div>
     <div class="form-group add-form-input-half">
       <label class="control-label">Confirm password</label>
       <input class="form-control" type="password"
-             placeholder="confirm password" name="password2">
+            name="password2">
     </div>
     <div className='form-group add-form-input-full'>
-      <button class="btn btn-info btn-block" type="submit">
-        Register
+      <button class="btn btn-primary btn-block" type="submit">
+        Create Account
       </button>
     </div>
   </form>