Commit ad5acec6 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Make nav-controls responsive and hide on extra small screens

Signed-off-by: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
parent 4beae990
...@@ -39,6 +39,8 @@ ...@@ -39,6 +39,8 @@
} }
.top-area { .top-area {
@include clearfix;
border-bottom: 1px solid #EEE; border-bottom: 1px solid #EEE;
.nav-text { .nav-text {
...@@ -47,6 +49,11 @@ ...@@ -47,6 +49,11 @@
display: inline-block; display: inline-block;
width: 50%; width: 50%;
line-height: 28px; line-height: 28px;
/* Small devices (phones, tablets, 768px and lower) */
@media (max-width: $screen-sm-min) {
width: 100%;
}
} }
.nav-links { .nav-links {
...@@ -54,6 +61,11 @@ ...@@ -54,6 +61,11 @@
width: 50%; width: 50%;
margin-bottom: 0px; margin-bottom: 0px;
border-bottom: none; border-bottom: none;
/* Small devices (phones, tablets, 768px and lower) */
@media (max-width: $screen-sm-min) {
width: 100%;
}
} }
.nav-controls { .nav-controls {
...@@ -65,37 +77,51 @@ ...@@ -65,37 +77,51 @@
margin-bottom: 0px; margin-bottom: 0px;
> .dropdown { > .dropdown {
margin-left: 10px;
display: inline-block; display: inline-block;
} }
input { > .btn {
display: inline-block; display: inline-block;
width: calc(100% - 151px); margin-left: 10px;
margin-top: -3px;
}
/* Small devices (tablets, 768px and up) */ input {
@media (min-width: $screen-sm-min) { width: 150px; } display: inline-block;
/* Medium devices (desktops, 992px and up) */ /* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { width: 200px; } @media (min-width: $screen-md-min) { width: 200px; }
/* Large devices (large desktops, 1200px and up) */ /* 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 { &.input-short {
width: 135px; /* Medium devices (desktops, 992px and up) */
margin-left: 10px; @media (min-width: $screen-md-min) { width: 170px; }
float: right;
/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { width: 210px; }
}
} }
.dropdown-toggle.btn { .dropdown-toggle.btn {
margin-top: -3px; margin-top: -3px;
} }
}
/* Hide on extra small devices (phones) */
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
.nav-controls { display: none;
padding-top: 15px; }
/* Small devices (tablets, 768px and lower) */
@media (max-width: $screen-sm-max) {
width: 100%;
text-align: left;
input {
width: 300px;
}
} }
} }
} }
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
== #{pluralize(@all_forks.size, 'fork')}: #{full_count_title} == #{pluralize(@all_forks.size, 'fork')}: #{full_count_title}
.nav-controls .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' } spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
.dropdown.prepend-left-10 .dropdown
%button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'} %button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'}
%span.light sort: %span.light sort:
- if @sort.present? - if @sort.present?
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment