aboutsummaryrefslogtreecommitdiffstats
path: root/web/cobrands/sass/_layout.scss
diff options
context:
space:
mode:
Diffstat (limited to 'web/cobrands/sass/_layout.scss')
-rw-r--r--web/cobrands/sass/_layout.scss237
1 files changed, 130 insertions, 107 deletions
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index cdb15e691..e0913b0ee 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -3,13 +3,15 @@
$image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default;
$layout_front_stats_color: $primary !default;
+$mappage-header-height: 4em !default;
.internal-link-fixed-header {
display: block;
- /* 5em is roughly the height of .nav-wrapper-2 (4em) plus the border-top on
- .nav-wrapper-2 (4px), plus the padding-top on .item-list__item (0.5em). */
- padding-top: 5em;
- margin-top: -5em;
+ /* Roughly the height of .nav-wrapper-2 (mappage-header-height) plus the
+ * border-top on .nav-wrapper-2 (4px), plus the padding-top on
+ * .item-list__item (0.5em). */
+ padding-top: $mappage-header-height + 1em;
+ margin-top: -($mappage-header-height + 1em);
}
//hacks for desk/mob only stuff
@@ -43,16 +45,6 @@ h1 {
position: relative;
}
-//z-index stack order gets reset to 0 in ie6/7 if you position anything,
-//so to fix things we give it a high value (don't ask me why)
-//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
-//this affects #site-logo
-.ie6, .ie7 {
- .container {
- z-index:100;
- }
-}
-
.wrapper{
display: table;
caption-side: top;
@@ -106,27 +98,22 @@ h1 {
.container {
position: static;//reset position so the nav links become clickable
}
+
+ .ie6 &,
+ .ie7 & {
+ height: 3em;
+ // Without this, the #site-logo is unclickable.
+ // Something to do with broken z-index nesting in IE6-7.
+ z-index: 2;
+ }
}
+
#site-logo {
top: 0.9em;
#{$left}: auto;
position: absolute;
z-index: 3;
}
-.ie6, .ie7 {
- #site-header {
- height:3em;
- .container {
- //ie broken z-index bug: the site-logo won't appear if we don't do this
- //doesn't seem to render the nav link unclickable like in other browsers
- position: relative;
- }
- }
- #site-logo {
- position: absolute;
- top:-3.25em;
- }
-}
#nav-link {
#{$right}: auto;
@@ -236,18 +223,42 @@ h1 {
// map page - has fixed header and different styling
body.mappage {
+
+ .wrapper .table-cell,
+ .nav-wrapper {
+ // No need for the table-cell stuff now we're using absolute positioning
+ display: block;
+ }
+
.container {
width: auto;
+ position: static;
}
.content {
- float: $left;
- padding: 1em 1em 10em;
+ width: auto;
+ padding: 0;
margin: 0;
}
+ #site-header {
+ // With the exception of the #site-logo child, the rest of
+ // #site-header gets entirely hidden behind .nav-wrapper-2
+ position: absolute;
+ z-index: auto;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: $mappage-header-height;
+ }
+
#site-logo {
+ position: absolute;
#{$left}: 12px;
+ // Also inherits...
+ // `top: 0.9em`
+ // `z-index: 3`
+ // ...from the non-mappage version, above
}
#main-nav {
@@ -255,6 +266,27 @@ body.mappage {
margin-#{$right}: 1em;
}
+ .nav-wrapper {
+ .nav-wrapper-2 {
+ position: absolute;
+ z-index: auto;
+ top: 0;
+ left: 0;
+ right: 0;
+ background: $map_nav_bg;
+
+ // Watch out! If the nav links break onto two lines, the header will
+ // get taller, and overlap the top of #map_sidebar and #map_box.
+ // (But at least the nav links will be legible.)
+ min-height: $mappage-header-height;
+
+ // Count the 4px border-top as part of the height (mappage-header-height)
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+ }
+
.nav-menu--main a, .nav-menu--main span {
padding: 1.4em 0.75em 1.35em;
}
@@ -264,17 +296,6 @@ body.mappage {
margin: 0.9em 0.25em 0.85em;
}
- .nav-wrapper{
- .nav-wrapper-2{
- position: fixed;
- background: $map_nav_bg;
- }
- }
-
- #site-logo{
- position: fixed;
- }
-
#user-meta {
max-width: none;
p {
@@ -348,6 +369,42 @@ body.mappage {
}
}
+#map_box {
+ position: absolute;
+ z-index: auto;
+ top: $mappage-header-height;
+ bottom: 0;
+ #{$right}: 0;
+ #{$left}: 29em; // width of sidebar
+ width: auto; // stretch from right edge of sidebar to left edge of window
+ height: auto; // stretch from bottom of header to bottom of window
+ margin: 0;
+
+ .with-notes & {
+ #{$left}: 44em;
+ }
+}
+
+#map_sidebar {
+ position: absolute;
+ z-index: auto;
+ top: $mappage-header-height;
+ #{$left}: 0;
+ bottom: 0;
+ width: 27em; // width of sidebar, minus padding
+ padding: 1em 1em 3em 1em; // extra padding-bottom to clear the .shadow-wrap element
+ overflow: auto; // vertical scrollbar when list is taller than window
+ background-color: #fff; // since no longer in the flow inside .content
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+
+ .with-notes & {
+ width: 42em;
+ // TODO: Should have a bitmap image fallback for old browsers!!
+ background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+ background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+ }
+}
+
#skip-this-step {
display: block;
color: inherit;
@@ -598,17 +655,6 @@ body.authpage {
}
}
-// map box (fallback for non js really as most users
-// will have fullscreen map)
-#map_box{
- position: absolute;
- height: 29em;
- width: 29em;
- #{$right}: 1em;
- top: 3em;
- z-index:1;
-}
-
// Openlayers map controls (overrides)
#fms_pan_zoom_panup,
#fms_pan_zoom_pandown,
@@ -765,13 +811,22 @@ body.authpage {
&.static {
padding: 0 0 1em;
position: static;
+ width: auto; // avoid horizontal scrollbar as drawer opens (on devices with permanent scroll bars)
}
}
+
// The padding is for the fading out when it's fixed positioned, which it isn't in IE6.
.ie6 .shadow-wrap {
padding-top: 0;
}
+// Old versions of IE don't have box-sixing, so negative margins leave a 2em gap.
+// We can set a fixed width instead, which might result in a horizontal scrollbar
+// while the drawer is opening. Quel dommage.
+.iel8 .shadow-wrap.static {
+ width: 29em;
+}
+
// If JS is disabled, these are still CSS positioned, so don't want behind shining through.
#report-share, #report-updates-data {
background-color: #fff;
@@ -781,24 +836,14 @@ body.authpage {
margin-bottom: 0;
}
-// pokes over the RHS with a little triangle
.big-green-banner {
top: auto;
- #{$right}: -1.25em;
- margin-#{$left}: -2em;
+ margin: (-1em/1.375) (-1em/1.375) 0 (-1em/1.375);
font-size: 1.375em;
- padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em);
+ padding: flip(1em 2em 1em 1em, 1em 1em 1em 2em);
background: $col_click_map inline-image("../fixmystreet/images/chevron-white-#{$right}.svg") $right center no-repeat;
- background-size: 27px+36px 33px;
- &:before {
- left: flip(auto, 0);
- right: flip(0, auto);
- top: -0.5em;
- position: absolute;
- border-top: 0.5em solid transparent;
- border-#{$left}: 0.5em solid $col_click_map_dark;
- border-bottom:none;
- }
+ background-size: 43px 33px;
+
span {
display: block;
font-size: 80%;
@@ -849,14 +894,6 @@ body.authpage {
}
}
-
-// for pulling elements fullwidth regardless
-// of .contents' padding
-.full-width{
- margin: flip(0 0 0em -1em, 0 -1em 0 0);
- width: 29em;
-}
-
/*FORMS*/
input[type=text],
input[type=password],
@@ -876,40 +913,32 @@ textarea.form-error {
@include border-radius(0 0 0.25em 0.25em);
}
-#report-a-problem-sidebar {
- position: absolute;
- #{$left}: 29em;
- width: 15em;
- @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
+// If the form is .with-notes, limit the width of the inputs
+// to make space for the #report-a-problem-sidebar.
+#side-form, #side {
+ .with-notes & {
+ width: 27em;
+ }
}
-// Report a problem sidebar notes
+// Notes presented alongside the reporting form
#report-a-problem-sidebar {
- top:5em;
- div {
- padding:1em;
- font-size:0.75em;
- background:#eeeeee;
- }
- .sidebar-notes {
- background:#333333;
- color:#ffffff;
+ margin-bottom: 2em;
+
+ // If the parent is .with-notes we know we have space to
+ // float the sidebar content to the side of the form.
+ .with-notes & {
+ float: #{$right};
+ width: 13em;
+ margin-#{$right}: -15em;
}
-}
-.ie6, .ie7 {
- #report-a-problem-sidebar {
- #{$left}: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
- z-index: 1;
+
+ div {
+ font-size: 0.75em;
}
-}
-.no-js #report-a-problem-sidebar {
- position: static;
- width: auto;
- @include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
- .sidebar-tips,
.sidebar-notes {
- font-size:1em;
+ color: #666;
}
}
@@ -1139,12 +1168,6 @@ body.frontpage {
background-position: 50% 50%;
}
- //Map becomes percentage width
- #map_box{
- #{$left}: 32em;
- width:auto;
- }
-
//Revert to mobile use of the .full-width class
.full-width{
width: auto;
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-26 20:57:07 +0000