Make nav-controls responsive and hide on extra small screens

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

2 files changed, 42 insertions, 16 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 1d042dfb439..6410656847f 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -39,6 +39,8 @@
 }
 
 .top-area {
+  @include clearfix;
+
   border-bottom: 1px solid #EEE;
 
   .nav-text {
@@ -47,6 +49,11 @@
     display: inline-block;
     width: 50%;
     line-height: 28px;
+
+    /* Small devices (phones, tablets, 768px and lower) */
+    @media (max-width: $screen-sm-min) {
+      width: 100%;
+    }
   }
 
   .nav-links {
@@ -54,6 +61,11 @@
     width: 50%;
     margin-bottom: 0px;
     border-bottom: none;
+
+    /* Small devices (phones, tablets, 768px and lower) */
+    @media (max-width: $screen-sm-min) {
+      width: 100%;
+    }
   }
 
   .nav-controls {
@@ -65,37 +77,51 @@
     margin-bottom: 0px;
 
     > .dropdown {
+      margin-left: 10px;
       display: inline-block;
     }
 
-    input {
+    > .btn {
       display: inline-block;
-      width: calc(100% - 151px);
+      margin-left: 10px;
+      margin-top: -3px;
+    }
 
-      /* Small devices (tablets, 768px and up) */
-      @media (min-width: $screen-sm-min) { width: 150px; }
+    input {
+      display: inline-block;
 
       /* Medium devices (desktops, 992px and up) */
       @media (min-width: $screen-md-min) { width: 200px; }
 
       /* Large devices (large desktops, 1200px and up) */
-      @media (min-width: $screen-lg-min) { width: 300px; }
-    }
+      @media (min-width: $screen-lg-min) { width: 250px; }
 
-    .btn-new {
-      width: 135px;
-      margin-left: 10px;
-      float: right;
+      &.input-short {
+        /* Medium devices (desktops, 992px and up) */
+        @media (min-width: $screen-md-min) { width: 170px; }
+
+        /* Large devices (large desktops, 1200px and up) */
+        @media (min-width: $screen-lg-min) { width: 210px; }
+      }
     }
 
     .dropdown-toggle.btn {
       margin-top: -3px;
     }
-  }
 
-  @media (max-width: $screen-xs-max) {
-    .nav-controls {
-      padding-top: 15px;
+    /* Hide on extra small devices (phones) */
+    @media (max-width: $screen-xs-max) {
+      display: none;
+    }
+
+    /* Small devices (tablets, 768px and lower) */
+    @media (max-width: $screen-sm-max) {
+      width: 100%;
+      text-align: left;
+
+      input {
+        width: 300px;
+      }
     }
   }
 }
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index 3fa7155bab7..acb2353d3ca 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -6,10 +6,10 @@
     == #{pluralize(@all_forks.size, 'fork')}: #{full_count_title}
 
   .nav-controls
-    = search_field_tag :filter_projects, nil, placeholder: 'Search forks', class: 'projects-list-filter form-control',
+    = search_field_tag :filter_projects, nil, placeholder: 'Search forks', class: 'projects-list-filter form-control input-short',
       spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
-    .dropdown.prepend-left-10
+    .dropdown
       %button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'}
         %span.light sort:
         - if @sort.present?