diff options
| author | Zarino Zappia <mail@zarino.co.uk> | 2019-02-20 11:45:31 +0000 |
|---|---|---|
| committer | Matthew Somerville <matthew-github@dracos.co.uk> | 2019-02-25 12:18:59 +0000 |
| commit | 30695f4dba18b2c476babf0f3bf1f4a79a099923 (patch) | |
| tree | 9ae3d3c6eeecc24efc070d64ce2bed3a4aadabeb | |
| parent | e481c2fd127c46024b1b15587981dca00eada44c (diff) | |
Add space below "map page" contents on narrow screens
Moving the 4em padding from _layout.scss to _base.scss helps separate
the content on /report/<id> and /report/new pages from the nav below.
| -rw-r--r-- | web/cobrands/sass/_base.scss | 17 | ||||
| -rw-r--r-- | web/cobrands/sass/_layout.scss | 13 |
2 files changed, 17 insertions, 13 deletions
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 276db90ae..8348dfcd7 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -1768,6 +1768,23 @@ img.pin { height: 10em; // eg: at the top of individual report pages } +#map_sidebar { + // Chrome/Safari count padding-bottom as part of the scrollable content in + // an overflow:scroll element (technically in contravention of the spec), + // whereas Firefox/IE render the padding outside the scrollable area. + // In desktop mode, we need padding at the bottom of the sidebar, to stop + // .shadow-wrap from obscuring content at the bottom of the sidebar. So we + // use an :after pseudo-element instead of padding. + // In mobile mode, the extra space here still helps differentiate the page + // content on report/reporting pages, from the nav immediately below. + // https://bugzilla.mozilla.org/show_bug.cgi?id=748518 + &:after { + content: ""; + display: block; + height: 4em; + } +} + // When you're in the reporting flow on mobile, we hide the site-header // and make the map full screen to reduce distractions. JavaScript also // tweaks the text content of some of the map-related elements, to make diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 8735da4f5..7d2b99c9b 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -268,19 +268,6 @@ body.mappage.admin { width: $mappage-sidebar-width--medium + $mappage-actions-width--medium; } } - - // Chrome/Safari count padding-bottom as part of the scrollable content in - // an overflow:scroll element (technically in contravention of the spec), - // whereas Firefox/IE render the padding outside the scrollable area. - // We need padding at the bottom of the sidebar, to stop .shadow-wrap from - // obscuring content at the bottom of the sidebar. So we use an :after - // pseudo-element instead of padding. - // https://bugzilla.mozilla.org/show_bug.cgi?id=748518 - &:after { - content: ""; - display: block; - height: 4em; - } } // This goes inside #map_sidebar, and establishes a flex container allowing |