From ad5acec6e5aa1376e5711cdac531db8f9cca3d01 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> Date: Wed, 3 Feb 2016 01:50:53 +0100 Subject: [PATCH] Make nav-controls responsive and hide on extra small screens Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> --- app/assets/stylesheets/framework/nav.scss | 54 +++++++++++++++++------ app/views/projects/forks/index.html.haml | 4 +- 2 files changed, 42 insertions(+), 16 deletions(-) diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 1d042dfb43..6410656847 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 3fa7155bab..acb2353d3c 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? -- 2.30.9