Merge pull request #827 from SynBioHub/issue806

Reorganize header layout
SynBioHub · Feb 12, 2019 · ddb0b00 · ddb0b00
2 parents 313175f + d919691
commit ddb0b00
Show file tree

Hide file tree

Showing 25 changed files with 139 additions and 185 deletions.
diff --git a/public/styles/site/synbiohub.less b/public/styles/site/synbiohub.less
@@ -78,20 +78,28 @@ a {
 .login .username {
 }
 
-.top-search-form {
-    margin-left: 50px;
-    margin-top: 1.2em;
-}
-
-.top-search-form input, .main-search-form input {
+.main-search-form input {
     font-size: .9em;
     border: 1px solid white;
     margin-left: -8px;
     color: #2C3E50;
     background: #ECF0F1 url("../images/search_icon.svg") no-repeat 5px 50%;
     background-size: 20px;
     border-radius: 4px 0 0px 4px;
-    padding: 5px 6px 5px 25px;
+	padding: 5px 6px 5px 25px;
+}
+
+.top-search-form input {
+    font-size: .9em;
+    border: 1px solid white;
+    color: #2C3E50;
+    border-radius: 4px 0 0px 4px;
+    padding: 5px 6px 5px 9px;
+}
+
+.top-search-form .submit {
+    background-color: #2C3E50;
+	margin-left: 0px;
 }
 
 .entry-detail-table {
@@ -205,7 +213,7 @@ a {
 .sbol_breadcrumbs ul {
     list-style: none;
     margin: 0;
-    height: 40px;
+    height: 100%;
     -webkit-padding-start: 0px;
 }
 
@@ -361,7 +369,7 @@ a {
 
 .sbol-breadcrumbs {
     background-color: @baseColor;
-    height: 55px;
+    height: 66px;
     margin-top: 65px;
 }
 
@@ -378,6 +386,7 @@ a {
 .sbol-breadcrumbs ul li {
     padding: 17px;
     float: left;
+    height: 100%;
 }
 
 .sbol-breadcrumbs ul li a {

diff --git a/templates/layouts/admin.jade b/templates/layouts/admin.jade
@@ -3,7 +3,7 @@ extends ./default.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-cogs
             |  Admin
 

diff --git a/templates/layouts/default.jade b/templates/layouts/default.jade
@@ -17,22 +17,12 @@ block body
                         div.pull-left
                             h1(style='margin-left: 15px;') #{config.instanceName}
 
-                if section != 'search'
-                    div.pull-left
-                        form(action='search').top-search-form
-                            input.sbh-autocomplete(type='text',name='q',placeholder=('Search ' + config.instanceName) value=(searchQuery || ''))
-                            button(type='submit').submit Search
-
                 div.pull-right.menu
                     ul
                         li
                             a(href='/submit')
                                 span.fa.fa-cloud-upload
                                 span.blue-text  Submit
-                        li
-                            a(href='/about')
-                                span.fa.fa-info-circle
-                                span.blue-text  About
 
                         if locals.user
                             li
@@ -72,8 +62,14 @@ block body
 
         block intro
 
-        div.sbol-breadcrumbs
+        div.sbol-breadcrumbs(style="display: flex")
             block breadcrumbs
+            ul(style="flex-grow: 1")
+                li(style="width: 100%; height: 100%")
+                    form(action='search').top-search-form
+                        input.sbh-autocomplete(type='text',name='q',placeholder=('Search ' + config.instanceName) value=(searchQuery || ''),style="width: 96%")
+                        button.inactive(type='submit').submit
+                            span.fa.fa-search
 
         block content
 

diff --git a/templates/layouts/identified.jade b/templates/layouts/identified.jade
@@ -18,11 +18,8 @@ block jsState
 block breadcrumbs
     ul
         li.inactive
-            a(href='/search')
-                span.fa.fa-search
-                |  Search
-        li
-            a(href=meta.url) #{meta.uri} 
+            span.fa.fa-eye
+            |  View
 
 block content
 

diff --git a/templates/views/advanced-search.jade b/templates/views/advanced-search.jade
@@ -41,7 +41,7 @@ block head
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-search
             |  Advanced Search
 

diff --git a/templates/views/browse.jade b/templates/views/browse.jade
@@ -43,7 +43,7 @@ block head
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-search
             |  Search
 

diff --git a/templates/views/clone.jade b/templates/views/clone.jade
@@ -3,7 +3,7 @@ extends ../layouts/default.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-cloud-upload
             |  Copy
 

diff --git a/templates/views/copyFromRemote.jade b/templates/views/copyFromRemote.jade
@@ -3,7 +3,7 @@ extends ../layouts/default.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-cloud-upload
             |  Copy
 
@@ -100,4 +100,4 @@ block content
                                         |    Overwrite Existing Objects
                         div.row
                             div.col-md-12
-                                button(type='submit').btn.btn-primary.btn-lg Copy
+                                button(type='submit').btn.btn-primary.btn-lg Copy
diff --git a/templates/views/createCollection.jade b/templates/views/createCollection.jade
@@ -41,7 +41,7 @@ block head
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-search
             |  Create Collection
 

diff --git a/templates/views/jobs.jade b/templates/views/jobs.jade
@@ -3,7 +3,7 @@ extends ../layouts/default.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-tasks
             |  Jobs
 

diff --git a/templates/views/makePublic.jade b/templates/views/makePublic.jade
@@ -3,7 +3,7 @@ extends ../layouts/default.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-cloud-upload
             |  Make Public
 

diff --git a/templates/views/manage.jade b/templates/views/manage.jade
@@ -5,7 +5,7 @@ include ../mixins/search-result.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-align-left
             |  Manage Submissions
 

diff --git a/templates/views/search.jade b/templates/views/search.jade
@@ -43,7 +43,7 @@ block head
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-search
             |  Search
 

diff --git a/templates/views/selectBenchlingRemote.jade b/templates/views/selectBenchlingRemote.jade
@@ -3,7 +3,7 @@ extends ../layouts/default.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-cloud-upload
             |  Select Benchling Remote Instance
 

diff --git a/templates/views/selectICERemote.jade b/templates/views/selectICERemote.jade
@@ -3,7 +3,7 @@ extends ../layouts/default.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-cloud-upload
             |  Select ICE Remote Instance
 

diff --git a/templates/views/shared.jade b/templates/views/shared.jade
@@ -3,7 +3,7 @@ include ../mixins/search-result.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive
             span.fa.fa-bolt
             |  Shared with Me
 
@@ -21,4 +21,4 @@ block content
             div.search-results
 
                 each submission in searchResults
-                    +search-result-collection(submission)
+                    +search-result-collection(submission)
diff --git a/templates/views/submit.jade b/templates/views/submit.jade
@@ -3,7 +3,7 @@ extends ../layouts/default.jade
 
 block breadcrumbs
     ul
-        li
+        li.inactive 
             span.fa.fa-cloud-upload
             |  Submit
 

diff --git a/tests/previousresults/getrequest__.html b/tests/previousresults/getrequest__.html
@@ -117,14 +117,6 @@ <h1 style="margin-left: 15px">
       </h1>
      </div>
     </a>
-    <div class="pull-left">
-     <form action="search" class="top-search-form">
-      <input class="sbh-autocomplete" name="q" placeholder="Search Test Synbiohub" type="text" value=""/>
-      <button class="submit" type="submit">
-       Search
-      </button>
-     </form>
-    </div>
     <div class="pull-right menu">
      <ul>
       <li>
@@ -136,15 +128,6 @@ <h1 style="margin-left: 15px">
         </span>
        </a>
       </li>
-      <li>
-       <a href="/about">
-        <span class="fa fa-info-circle">
-        </span>
-        <span class="blue-text">
-         About
-        </span>
-       </a>
-      </li>
       <li>
        <a href="/login">
         <span class="fa fa-sign-in">
@@ -160,14 +143,25 @@ <h1 style="margin-left: 15px">
   </nav>
   <div class="clearfix">
   </div>
-  <div class="sbol-breadcrumbs">
+  <div class="sbol-breadcrumbs" style="display: flex">
    <ul>
     <li>
      <span class="fa fa-home">
      </span>
      Home
     </li>
    </ul>
+   <ul style="flex-grow: 1">
+    <li style="width: 100%; height: 100%">
+     <form action="search" class="top-search-form">
+      <input class="sbh-autocomplete" name="q" placeholder="Search Test Synbiohub" style="width: 96%" type="text" value=""/>
+      <button class="inactive submit" type="submit">
+       <span class="fa fa-search">
+       </span>
+      </button>
+     </form>
+    </li>
+   </ul>
   </div>
   <div class="container container-fluid">
    <div class="row">

diff --git a/tests/previousresults/getrequest__after_admin_login.html b/tests/previousresults/getrequest__after_admin_login.html
@@ -117,14 +117,6 @@ <h1 style="margin-left: 15px">
       </h1>
      </div>
     </a>
-    <div class="pull-left">
-     <form action="search" class="top-search-form">
-      <input class="sbh-autocomplete" name="q" placeholder="Search Test Synbiohub" type="text" value=""/>
-      <button class="submit" type="submit">
-       Search
-      </button>
-     </form>
-    </div>
     <div class="pull-right menu">
      <ul>
       <li>
@@ -136,15 +128,6 @@ <h1 style="margin-left: 15px">
         </span>
        </a>
       </li>
-      <li>
-       <a href="/about">
-        <span class="fa fa-info-circle">
-        </span>
-        <span class="blue-text">
-         About
-        </span>
-       </a>
-      </li>
       <li>
        <a href="/login">
         <span class="fa fa-sign-in">
@@ -160,14 +143,25 @@ <h1 style="margin-left: 15px">
   </nav>
   <div class="clearfix">
   </div>
-  <div class="sbol-breadcrumbs">
+  <div class="sbol-breadcrumbs" style="display: flex">
    <ul>
     <li>
      <span class="fa fa-home">
      </span>
      Home
     </li>
    </ul>
+   <ul style="flex-grow: 1">
+    <li style="width: 100%; height: 100%">
+     <form action="search" class="top-search-form">
+      <input class="sbh-autocomplete" name="q" placeholder="Search Test Synbiohub" style="width: 96%" type="text" value=""/>
+      <button class="inactive submit" type="submit">
+       <span class="fa fa-search">
+       </span>
+      </button>
+     </form>
+    </li>
+   </ul>
   </div>
   <div class="container container-fluid">
    <div class="row">
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ extends ./default.jade @@
     block breadcrumbs
         ul
-            li
+            li.inactive
                 span.fa.fa-cogs
                 |  Admin
@@ Expand Down @@