cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Combine small.scss into common.scss

Browse source 
We've moved away from the idea of having extra rules for small screens,
and instead follow the bootstrap convention of designing for small
screens first and overriding those rules if needed for larger screens.

Having a separate file remaining for a limited number of small screen
rules is therefore counter-productive. Moving the remaining rules into
common.scss, adjacent to the related rules for larger screen, makes
the behaviour easier to understand, as well as making it easier to
refactor the rules to a small-screen-first approach.
This commit is contained in:
Andy Allan 2022-09-14 15:44:35 +01:00
parent 35392c1a2f
commit 5ab682dbbd
4 changed files with 119 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

119
app/assets/stylesheets/common.scss
View file

@ -242,6 +242,95 @@ body.compact-nav {
} }
} }
body.small-nav {
#menu-icon {
display: inline-block !important;
}
nav.primary,
nav.secondary {
float: none !important;
position: relative;
display: block;
clear: both;
}
header {
height: auto;
min-height: $headerHeight;
background: #fff;
&.closed nav {
display: none;
}
.search_forms {
display: block;
}
}
#sidebar .search_forms,
#edit_tab,
#export_tab {
display: none;
}
nav.primary {
padding: 0;
ul, li {
border: none;
border-radius: 0;
width: 100%;
}
ul {
border-top: 1px solid #eee;
li {
border-bottom: 1px solid #eee;
border-right: none;
> a {
border-radius: 0;
width: 100%;
text-align: center;
font-size: 15px;
}
}
}
.btn-group {
width: 100%;
padding: 10px;
}
}
nav.secondary {
.user-menu {
width: 100%;
}
}
#compact-secondary-nav {
display: none;
}
.compact-hide {
display: inline-block;
}
.overlay-sidebar #sidebar .welcome.visible {
display: none;
}
.overlay-sidebar #sidebar #banner {
display: none;
}
.leaflet-top.leaflet-right {
top: 10px !important;
}
}
/* Utility for styling notification numbers */ /* Utility for styling notification numbers */
.count-number { .count-number {
@ -441,6 +530,36 @@ body.compact-nav {
} }
} }
@media (max-width: 767.98px) {
body.map-layout {
#sidebar, #map {
position: relative;
overflow-x: hidden;
width: 100%;
height: 50%;
}
.overlay-sidebar {
#sidebar {
position: absolute;
width: 350px;
height: auto;
overflow: hidden;
}
#map {
height: 100%;
}
}
#map-ui {
z-index: 9999;
width: 100%;
overflow-y: scroll;
}
}
}
.layers-ui, .layers-ui,
.share-ui { .share-ui {
li:last-child { li:last-child {

1
app/assets/stylesheets/screen-ltr.css
View file

@ -1,4 +1,3 @@
/* /*
*= require ltr/common *= require ltr/common
*= require ltr/small
*/ */

1
app/assets/stylesheets/screen-rtl.css
View file

@ -1,4 +1,3 @@
/* /*
*= require rtl/common *= require rtl/common
*= require rtl/small
*/ */

122
app/assets/stylesheets/small.scss
View file

@ -1,122 +0,0 @@
@import "parameters";
/* Styles specific to a small screen, such as iPhone, Android, etc... */
body.small-nav {
#menu-icon {
display: inline-block !important;
}
nav.primary,
nav.secondary {
float: none !important;
position: relative;
display: block;
clear: both;
}
header {
height: auto;
min-height: $headerHeight;
background: #fff;
&.closed nav {
display: none;
}
.search_forms {
display: block;
}
}
#sidebar .search_forms,
#edit_tab,
#export_tab {
display: none;
}
nav.primary {
padding: 0;
ul, li {
border: none;
border-radius: 0;
width: 100%;
}
ul {
border-top: 1px solid #eee;
li {
border-bottom: 1px solid #eee;
border-right: none;
> a {
border-radius: 0;
width: 100%;
text-align: center;
font-size: 15px;
}
}
}
.btn-group {
width: 100%;
padding: 10px;
}
}
nav.secondary {
.user-menu {
width: 100%;
}
}
#compact-secondary-nav {
display: none;
}
.compact-hide {
display: inline-block;
}
.overlay-sidebar #sidebar .welcome.visible {
display: none;
}
.overlay-sidebar #sidebar #banner {
display: none;
}
.leaflet-top.leaflet-right {
top: 10px !important;
}
}
@media (max-width: 767.98px) {
body.map-layout {
#sidebar, #map {
position: relative;
overflow-x: hidden;
width: 100%;
height: 50%;
}
.overlay-sidebar {
#sidebar {
position: absolute;
width: 350px;
height: auto;
overflow: hidden;
}
#map {
height: 100%;
}
}
#map-ui {
z-index: 9999;
width: 100%;
overflow-y: scroll;
}
}
}