kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Make nav-controls responsive and hide on extra small screens

Browse source 
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
This commit is contained in:
Dmitriy Zaporozhets 2016-02-03 01:50:53 +01:00
parent 4beae990b3
commit ad5acec6e5
2 changed files with 42 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/assets/stylesheets/framework/nav.scss
View file

@ -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;
}
> .btn {
display: inline-block;
margin-left: 10px;
margin-top: -3px;
}
input {
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) */
@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;
}
}
}
}

4
app/views/projects/forks/index.html.haml
View file

@ -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?