Просмотр исходного кода

Revert "fix #79 Bug: Top menu is not shown properly"

This reverts commit d825f4f32487f45f1411aad1ad4f4fc093a75683.
Yuki Takei 8 лет назад
Родитель
Сommit
2707a4984b
2 измененных файлов с 23 добавлено и 45 удалено
  1. 1 7
      resource/css/_layout.scss
  2. 22 38
      resource/css/_search.scss

+ 1 - 7
resource/css/_layout.scss

@@ -13,15 +13,9 @@
       border-radius: 0;
       border: none;
       margin-bottom: 0;
-      display: flex;
 
       box-shadow: 0 3px 10px 0px rgba(0,0,0,.3);
 
-      .navbar-header {
-        flex-grow: 1;
-        display: flex;
-      }
-
       .navbar-brand {
         font-weight: bold;
         img {
@@ -59,7 +53,7 @@
       }
 
       .navbar-toggle {
-        margin-left: 15px;
+        position: absolute;
         top: 0;
         right: 0;
       }

+ 22 - 38
resource/css/_search.scss

@@ -26,43 +26,12 @@
 }
 
 .search-top {
-  flex-grow: 1;
-  display: flex;
-
-  %flexgrow {
-    flex-grow: 1;
-    display: flex;
-  }
-
-  // set flex-grow
-  .search-box {
-    @extend %flexgrow;
-    .form-group {
-      @extend %flexgrow;
-    }
-    .input-group {
-      @extend %flexgrow;
-    }
-  }
-
   .search-top-input-group {
 
     // using react-bootstrap-typeahead
     // see: https://github.com/ericgio/react-bootstrap-typeahead
-    .bootstrap-typeahead {
-      @extend %flexgrow;
-      max-width: 480px;
-
-      .bootstrap-typeahead-input {
-        @extend %flexgrow;
-        input {
-          @extend %flexgrow;
-        }
-      }
-
-    }
-    .input-group-btn {
-      flex-basis: 39px;
+    .bootstrap-typeahead-input input {
+      width: 400px;
     }
 
     .search-top-clear {
@@ -159,11 +128,24 @@
 // Smartphone and Tablet
 @media (max-width: $screen-sm-max) {
   .search-top {
+    margin-top: 4px 0 0 0;
     padding: 0;
-    margin-right: 0;
     border-style: none !important;
     box-shadow: none !important;
     -webkit-box-shadow: none !important;
+
+    .search-form {
+      width: 76%;
+    }
+
+    .search-top-input-group {
+      .search-top-input {
+        width: 100%;
+      }
+      .btn {
+        z-index: 10;
+      }
+    }
   }
 
   .search-result {
@@ -184,10 +166,12 @@
 // Smartphone
 @media (max-width: $screen-xs-max) {
   .search-top {
-    .search-top-input-group {
-      .btn {
-        z-index: 10;
-      }
+    .search-form {
+      min-width: 40%;
+      max-width: 50%;
+      width: 50%;
+    }
+    .search-box {
     }
   }
 }