Merge pull request #226 from kellydesent/search

updated styling
ioos · May 20, 2020 · 257c36a · 257c36a
2 parents 70fb818 + ebb673c
commit 257c36a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/public/css/main.css b/public/css/main.css
@@ -241,9 +241,6 @@ button#search-data-button.btn.btn-default.open span::before
   font-family: 'Roboto Slab', Times, serif;
 }
 
-#search-input-collapse {
-  margin-left: -30px;;
-}
 
 #grid-container > .container-fluid .well {
   margin-bottom: 0;
@@ -465,6 +462,21 @@ button#search-data-button.btn.btn-default.open span::before
   }
 }
 
+.search-bar {
+  background-color: #003087;
+  padding: 12px;
+  margin-left: -15px;
+  margin-right: -15px;
+}
+
+.search-title {
+  color: #ffffff;
+  font-size: 18px;
+  padding-top: 5px;
+  text-align: center;
+  font-weight: 600;
+}
+
 .orange {
   background-image: linear-gradient(-167deg, #F5A623 67%, #F09C0F 100%, #ED9400 100%);
 }

diff --git a/views/index.html b/views/index.html
@@ -7,16 +7,20 @@
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <div id="grid-container" class="container">
-  <div class="container-fluid">
+  <div class="container">
     <div class="row">
-      <div class="col-md-6">
+
+      <div class="col-md-12" style="padding-bottom: 8px;">
         <!-- <button id="search-data-button" class="btn btn-default open" type="button" data-toggle="collapse" data-target="#search-input-collapse" aria-expanded="false" aria-controls="search-input-collapse">
           <span>Search IOOS Data</span>
         </button> -->
         <div id="search-input-collapse">
-          <div class="">
-            <div class="input-group">
-              <input type="text" class="form-control" placeholder="Search IOOS Data, E.g. Environment" aria-describedby="basic-addon">
+          <div class="well search-bar">
+            <div class="col-md-3">
+              <p class="search-title">Search IOOS Data:</p>
+            </div>
+            <div class="input-group col-md-9">
+              <input type="text" class="form-control" placeholder="E.g. Environment" aria-describedby="basic-addon">
               <span class="input-group-btn">
                 <button class="btn btn-default" type="button">
                   <span class="glyphicon glyphicon-search" aria-hidden="true"></span>