aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--templates/web/fixmystreet/header.html2
-rw-r--r--web/cobrands/fixmystreet/base.scss128
-rw-r--r--web/cobrands/fixmystreet/layout.scss143
-rw-r--r--web/js/fixmystreet.js11
4 files changed, 225 insertions, 59 deletions
diff --git a/templates/web/fixmystreet/header.html b/templates/web/fixmystreet/header.html
index e1066c7b5..97d7f525d 100644
--- a/templates/web/fixmystreet/header.html
+++ b/templates/web/fixmystreet/header.html
@@ -32,7 +32,7 @@
<div class="wrapper">
- <header id="header" role="banner">
+ <header id="site-header" role="banner">
<div class="container">
<a href="/" id="site-logo">FixMyStreet</a>
<a href="#main-nav" id="nav-link">Main Navigation</a>
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 8613dad09..6136ad698 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -70,7 +70,7 @@
/* Opera has a bug (from around 10.5 upwards to current 11.6) with showing the
* table caption *at all* if the header is set to a font-face :( */
-noindex:-o-prefocus, #header {
+noindex:-o-prefocus, #site-header {
font-family: sans-serif;
}
@@ -201,9 +201,13 @@ pre {
font-family: monospace;
}
-// huh? We're confused and it breaks our other stuff :S
img {
+ // huh? We're confused and it breaks our other stuff :S
// max-width: 100%;
+
+ //do this otherwise IE will just not display
+ //any img without a height defined
+ height:auto;
}
select, input, textarea {
@@ -377,48 +381,47 @@ label{
// Padding creates page margins on mobile
.container{
padding: 0 1em;
- // width:100%;
- // box-sizing: border-box;
}
// Use full width to reverse .container margins
-.full-width{
+.full-width {
margin: 0 -1em;
}
-// #header creates grey bar in mobile, .nav-wrapper-2 is used on desktop
-#header{
+// #site-header creates grey bar in mobile, .nav-wrapper-2 is used on desktop
+#site-header{
border-top: 0.25em solid $primary;
height: 4em;
@include background(linear-gradient(#000, #222 10%, #222 90%, #000));
.container {
min-height:4em;
}
- #site-logo{
- width: 175px;
- height: 40px;
- margin-top: 0.75em;
- background: url('images/sprite.png') -3px -3px no-repeat;
- display: block;
- text-indent: -999999px;
- position: absolute;
- z-index:2;
- }
- #nav-link {
- width: 50px;
- height: 48px;
- background: url('images/sprite.png') -5px -916px no-repeat;
- display: block;
- text-indent: -999999px;
- position: absolute;
- right:2em;
- top:-2px;
- &:hover {
- top:2px;
- }
+}
+#site-logo{
+ display: block;
+ width: 175px;
+ height: 40px;
+ top: 0;
+ background: url('images/sprite.png') -3px -3px no-repeat;
+ text-indent: -999999px;
+ position: absolute;
+ z-index:2;
+}
+#nav-link {
+ width: 50px;
+ height: 48px;
+ background: url('images/sprite.png') -5px -916px no-repeat;
+ display: block;
+ text-indent: -999999px;
+ position: absolute;
+ right:2em;
+ top:-2px;
+ &:hover {
+ top:2px;
}
}
+
#main-nav{
ul{
@include list-reset-soft;
@@ -462,7 +465,6 @@ label{
// #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic
-
.shadow-wrap {
@extend .full-width;
ul#key-tools{
@@ -510,6 +512,21 @@ label{
}
}
+//because display:table doesn't work we float
+.ie6, .ie7 {
+ .shadow-wrap {
+ ul#key-tools{
+ background:#f5f5f5;
+ li{
+ float:left;
+ a {
+ padding-left:1.5em;
+ padding-right:3em;
+ }
+ }
+ }
+ }
+}
/*BUTTONS*/
@@ -621,11 +638,24 @@ a:hover.button-left {
text-align:right;
img {
margin:-0.5em -1em 0 0.5em;
+ height:auto;
}
}
}
}
}
+//display:table fixes
+.ie7, .ie7 {
+ .issue-list li .update-wrap {
+ .update-text {
+ float:left;
+ width:19em;
+ }
+ .update-img {
+ float:right;
+ }
+ }
+}
.issue-list-a {
margin: 0 0 1em 0;
@@ -656,6 +686,7 @@ a:hover.button-left {
text-align:right;
img {
margin:0 -1em 0 0.5em;
+ height:auto;
}
}
.text {
@@ -675,6 +706,30 @@ a:hover.button-left {
}
}
}
+//display:table fixes
+.ie6, .ie7 {
+ .issue-list-a {
+ overflow:hidden;
+ li a {
+ clear:both;
+ width:auto;
+ display:block;
+ overflow:hidden;
+ .text {
+ float:left;
+ width:18em;
+ }
+ .img {
+ float:right;
+ }
+ }
+ }
+}
+.ie8 {
+ .issue-list-a li a {
+ width:25em;
+ }
+}
#map_box{
background: #333;
@@ -737,6 +792,18 @@ a:hover.rap-notes-trigger {
}
}
+//display:table fixes
+.ie6, .ie7 {
+ #problems-nav {
+ clear:both;
+ margin:0;
+ padding:0;
+ ul li {
+ float:left;
+ }
+ }
+}
+
.big-green-banner {
position: relative;
background: $contrast1;
@@ -830,7 +897,6 @@ a:hover.rap-notes-trigger {
}
}
-
#front-howto {
#front_stats {
display:table;
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index c02bd554e..453cede6f 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -14,8 +14,6 @@
body {
// temp map background
background:url(images/temp-map.jpg) center fixed;
- z-index: -2;
- position: relative;
// temp map background
}
@@ -26,15 +24,32 @@ body {
padding: 0em;
width: 60em;
position: relative;
- box-sizing: content-box;
}
-.wrapper{
+//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
+.ie7, .ie7 {
+ .container {
+ z-index:100;
+ }
+}
+
+.wrapper{
display: table;
caption-side: top;
width: 100%;
}
+//pad the top of the wrapper to allow space for the menu to fit in
+//when its positioned absolute below
+.ie6, .ie7 {
+ .wrapper{
+ padding-top:4em;
+ }
+}
+
.nav-wrapper{
display: table-caption;
.nav-wrapper-2{
@@ -49,22 +64,42 @@ body {
}
-// Resets a lot of the mobile styling. #header only used to help position logo on desktop
-#header{
+//position absolute the menu as ie doesn't like display:table
+.ie6, .ie7 {
+ .nav-wrapper {
+ position: absolute;
+ top:0;
+ left:0;
+ .nav-wrapper-2 {
+ // position static as well so we fix lots of the z-index issues
+ // and revert to normal scrolling
+ position:static;
+ }
+ }
+}
+
+// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop
+#site-header {
height: auto;
background: none;
border-top: 0px;
- #site-logo{
- margin-top: 0.75em;
- position: fixed;
- z-index: 3;
- }
- #nav-link {
- left:-999999px;
+}
+#site-logo {
+ top: 0.75em;
+ position: fixed;
+ z-index: 3;
+}
+#nav-link {
+ left:-999999px;
+}
+//fix logo position as a result of fiddling the with position attributes
+//on the parent elements
+.ie6, .ie7 {
+ #site-logo {
+ position: absolute;
+ top:-3.25em;
}
}
-
-
#main-nav{
margin: 0 auto;
padding: 0em;
@@ -240,7 +275,9 @@ input[type=email],
textarea{
width: 25em;
}
-
+.form-box {
+ max-width:25em;
+}
/* Report a problem page*/
@@ -281,14 +318,14 @@ body.frontpage {
background: #1a1a1a;
height:6em;
}
- #header{
+ #site-header{
height:10em;
- #site-logo{
- margin-top:2em;
- width: 300px;
- height: 60px;
- background-position:-2px -108px;
- }
+ }
+ #site-logo{
+ top:2em;
+ width: 300px;
+ height: 60px;
+ background-position:-2px -108px;
}
#user-meta {
p {
@@ -297,6 +334,19 @@ body.frontpage {
}
}
}
+.ie6, .ie7 {
+ body.frontpage {
+ .wrapper{
+ // padding-top:8em;
+ }
+ #site-logo{
+ position:relative;
+ top:-2em;
+ width:60em;
+ margin:0 auto;
+ }
+ }
+}
#front-main {
background:$primary;
@@ -370,6 +420,26 @@ body.frontpage {
margin:0;
}
}
+
+.ie6, .ie7 {
+ .front-tablewrapper {
+ display:block;
+ >div {
+ width:48%;
+ display:block;
+ float: left;
+ border:none !important;
+ }
+ #front-howto,
+ #front-mobileapps {
+ margin-right:2%;
+ }
+ #front-recently,
+ #front-ads {
+ margin-left:2%;
+ }
+ }
+}
.bordered {
margin:0 -1em;
padding:0 1em;
@@ -391,6 +461,14 @@ body.frontpage {
}
}
+.ie6, .ie7 {
+ #front_stats {
+ div {
+ float:left;
+ }
+ }
+}
+
#front-mobileapps {
background:none;
padding:0;
@@ -400,6 +478,7 @@ body.frontpage {
margin-top:0;
}
ul {
+ @include list-reset;
li {
border-bottom:none;
float:left;
@@ -434,6 +513,11 @@ body.frontpage {
}
}
}
+.ie6, .ie7 {
+ #front-mobileapps {
+ margin:0 0.5em;
+ }
+}
#front-ads {
ul {
@@ -447,6 +531,17 @@ body.frontpage {
}
}
}
+.ie6, .ie7 {
+ #front-ads {
+ ul {
+ width:100%;
+ li {
+ float:left;
+ width:45%
+ }
+ }
+ }
+}
@@ -487,7 +582,7 @@ body.frontpage {
margin-top: 3em;
}
//therefore header needs to open up
- #header {
+ #site-header {
height:6em;
}
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index d88d66db4..10390f40e 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -56,15 +56,20 @@ function heightFix(elem1, elem2, offset){
*/
function tabs(elem)
{
- var target = elem.attr('href');
+ var href = elem.attr('href');
+ //stupid IE sometimes adds the full uri into the href attr, so trim
+ var start = href.indexOf('#'),
+ target = href.slice(start, href.length);
+
if(!$(target).hasClass('open'))
{
//toggle class on nav
$('.tab-nav .active').removeClass('active');
elem.addClass('active');
+
//hide / show the right tab
- $('.tab.open').removeClass('open').hide();
- $(target).addClass('open').show();
+ $('.tab.open').hide().removeClass('open');
+ $(target).show().addClass('open');
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-27 00:40:41 +0000