Make nav-controls responsive and hide on extra small screens
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
This commit is contained in:
parent
4beae990b3
commit
ad5acec6e5
|
@ -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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
|
|
||||||
> .dropdown {
|
> .dropdown {
|
||||||
|
margin-left: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .btn {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: calc(100% - 151px);
|
|
||||||
|
|
||||||
/* Small devices (tablets, 768px and up) */
|
|
||||||
@media (min-width: $screen-sm-min) { width: 150px; }
|
|
||||||
|
|
||||||
/* 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;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $screen-xs-max) {
|
/* Hide on extra small devices (phones) */
|
||||||
.nav-controls {
|
@media (max-width: $screen-xs-max) {
|
||||||
padding-top: 15px;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (tablets, 768px and lower) */
|
||||||
|
@media (max-width: $screen-sm-max) {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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?
|
||||||
|
|
Loading…
Reference in New Issue