diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index ce83a1d93..ed444899f 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -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 */ .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, .share-ui { li:last-child { diff --git a/app/assets/stylesheets/screen-ltr.css b/app/assets/stylesheets/screen-ltr.css index 838c9198f..a0890d1e0 100644 --- a/app/assets/stylesheets/screen-ltr.css +++ b/app/assets/stylesheets/screen-ltr.css @@ -1,4 +1,3 @@ /* *= require ltr/common - *= require ltr/small */ diff --git a/app/assets/stylesheets/screen-rtl.css b/app/assets/stylesheets/screen-rtl.css index 91d9fa3ed..c0f4d793a 100644 --- a/app/assets/stylesheets/screen-rtl.css +++ b/app/assets/stylesheets/screen-rtl.css @@ -1,4 +1,3 @@ /* *= require rtl/common - *= require rtl/small */ diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss deleted file mode 100644 index 2247b4bbe..000000000 --- a/app/assets/stylesheets/small.scss +++ /dev/null @@ -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; - } - } -}