aboutsummaryrefslogtreecommitdiffstats
path: root/web/cobrands
diff options
context:
space:
mode:
Diffstat (limited to 'web/cobrands')
-rw-r--r--web/cobrands/bromley/_colours.scss5
-rw-r--r--web/cobrands/bromley/base.scss53
-rw-r--r--web/cobrands/bromley/bromley-logo.jpgbin0 -> 20898 bytes
-rw-r--r--web/cobrands/bromley/bromley-logo.s.jpgbin0 -> 5908 bytes
-rw-r--r--web/cobrands/bromley/bromley.scss110
-rw-r--r--web/cobrands/bromley/favicon.icobin0 -> 61798 bytes
-rw-r--r--web/cobrands/bromley/favicon.pngbin0 -> 840 bytes
-rw-r--r--web/cobrands/bromley/fms-logo.pngbin0 -> 4740 bytes
-rw-r--r--web/cobrands/bromley/layout.scss148
-rw-r--r--web/cobrands/bromley/main-menu-hover-home-right.gifbin0 -> 4299 bytes
-rw-r--r--web/cobrands/bromley/main-menu1.gifbin0 -> 12809 bytes
-rw-r--r--web/cobrands/bromley/tab-blue.pngbin0 -> 826 bytes
-rw-r--r--web/cobrands/fixmystreet/_base.scss95
-rw-r--r--web/cobrands/fixmystreet/_colours.scss1
-rw-r--r--web/cobrands/fixmystreet/_layout.scss116
-rw-r--r--web/cobrands/fixmystreet/fixmystreet.js254
16 files changed, 499 insertions, 283 deletions
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index c0376274e..e178c9db2 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -1,8 +1,9 @@
/* COLOURS */
-$primary: rgb(76,120,168);
+$primary: rgb(91,120,147);
$primary_b: #000000;
$primary_text: #ffffff;
-$contrast1: #00BD08;
+$contrast1: rgb(91,120,147);
+$contrast1_dark: darken(rgb(91,120,147), 10%);
$contrast2: #AA8D11;
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 4594f832f..9c5ff2b0f 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -5,3 +5,56 @@
@import "../fixmystreet/_base";
+a, a:visited {
+ color: #369;
+ &:hover, &:active {
+ color: #369;
+ }
+}
+
+h1.main {
+ color: $primary;
+ text-align: center;
+ margin: 0.5em 0;
+}
+
+// Want a white header, and logo is slightly bigger
+#site-header {
+ @include background(linear-gradient(#ddd, #fff 10%, #fff));
+ height: 4em;
+}
+
+// Colour tab to match colour scheme
+#nav-link {
+ width: 50px;
+ height: 48px;
+ background: url('/cobrands/bromley/tab-blue.png') 0 0 no-repeat;
+}
+
+// Change logo to logo of council
+#site-logo {
+ display: block;
+ width: 80px;
+ height: 44px;
+ top: 0.9em;
+ background: url('/cobrands/bromley/bromley-logo.s.jpg') 0 0 no-repeat;
+}
+
+#problems-nav {
+ border-bottom:0.25em solid $primary;
+ ul li a {
+ text-transform: none;
+ &.active {
+ background: $primary;
+ color: #fff;
+ }
+ }
+}
+
+.big-green-banner {
+ text-transform: none;
+}
+
+#form_sign_in {
+ margin-top: 1em;
+}
diff --git a/web/cobrands/bromley/bromley-logo.jpg b/web/cobrands/bromley/bromley-logo.jpg
new file mode 100644
index 000000000..28da8b7ea
--- /dev/null
+++ b/web/cobrands/bromley/bromley-logo.jpg
Binary files differ
diff --git a/web/cobrands/bromley/bromley-logo.s.jpg b/web/cobrands/bromley/bromley-logo.s.jpg
new file mode 100644
index 000000000..16f632848
--- /dev/null
+++ b/web/cobrands/bromley/bromley-logo.s.jpg
Binary files differ
diff --git a/web/cobrands/bromley/bromley.scss b/web/cobrands/bromley/bromley.scss
new file mode 100644
index 000000000..91ec75fea
--- /dev/null
+++ b/web/cobrands/bromley/bromley.scss
@@ -0,0 +1,110 @@
+/* Parts of Bromley's main CSS needed for its header/footer and adjusted (see
+ * bottom) to not be affected by main FixMyStreet CSS. Not very sustainable;
+ * perhaps we should wrap all council CSS within a SCSS #council ID? Hmm.
+ */
+
+@import "compass";
+
+// Bits of Bromley's forms.css, adjusted
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=file],
+textarea,
+select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding: 8px;
+@include border-radius(0); }
+
+.green-btn, button.green-btn, input.green-btn {
+ background: #5b7189 url("https://www.bromley.gov.uk/site/styles/css_img/button.gif") repeat-x 0 -1px; border: 1px solid #8e9eb0; color: #fff; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-weight: normal; margin: 0; min-height: 23px; outline: 1px solid #405062; padding: 4px 8px; text-transform: uppercase; }
+.green-btn:hover, button.green-btn:hover, input.green-btn:hover { background: #5b7189; border: 1px solid #8e9eb0; }
+.form-txt-submit-box input[type=submit] {
+ padding-top: 0; padding-bottom: 0; width: auto;
+}
+
+
+h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; }
+body { color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; }
+
+// #header renamed to #bromley-header
+#bromley-header { padding: 0 18px 0 25px; }
+
+.header-nav {float:right; background:url('https://www.bromley.gov.uk/site/styles/css_img/header-nav.gif') no-repeat; overflow:hidden; width:651px; height:34px; line-height:34px; padding:0 20px;}
+.header-nav li {float:left; width:130px; text-align:center; background:url('https://www.bromley.gov.uk/site/styles/css_img/header-nav-divider.gif') top right no-repeat;}
+.header-nav li:last-child {background:none;}
+.header-nav a:link, .header-nav a:visited {color:#fff; text-decoration:none;}
+.header-nav a:hover, .header-nav a:active {text-decoration:underline;}
+
+/* -------- For Google translate select box only */
+.header-nav div#google_translate_element .goog-te-gadget { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
+.header-nav div#google_translate_element .goog-te-gadget .goog-te-combo { margin:5px 0 0 5px; padding:0 0 0 2px; background: #9b9b9b; color: #fff; border: 1px solid #606060; font-size: 12px; width: 138px;}
+.header-nav div#google_translate_element .goog-te-gadget .goog-te-combo option { background:#fff; color: #666; padding: 1px 0; margin: 0; }
+/* --- */
+
+.logo {padding:10px 0;}
+
+.sign-in {float:right; margin-top:-87px; width: 650px; text-align: right;}
+.sign-in a:link, .sign-in a:visited {color:#333; font-weight:bold; text-decoration:none;}
+.sign-in a:hover, .sign-in a:active {text-decoration:underline;}
+
+.main-menu {background:url('https://www.bromley.gov.uk/site/styles/css_img/main-menu.gif') no-repeat; width:689px; height:45px; margin-top:-60px; float:right; clear:right;}
+.main-menu li {float:left; width:126px; padding-right:2px; text-align:center; font:150%/45px 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;}
+.main-menu li a:link, .main-menu li a:visited {color:#fff; display:block; text-decoration:none;}
+.main-menu li a:hover, .main-menu li a:active {background:url('https://www.bromley.gov.uk/site/styles/css_img/main-menu-hover.gif') repeat-x;}
+.main-menu li.home a:hover, .main-menu li.home a:active {background:url('https://www.bromley.gov.uk/site/styles/css_img/main-menu-hover-home.gif') repeat-x;}
+
+//#search { float: right; padding: 10px 17px; width: 270px; }
+//#search label {display:none;}
+//#search input { background: #ececec; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; line-height: 9px; padding: 6px 5px 4px; width: 184px; }
+//#search input.button { background: #fff; border: 1px solid #8596a8; color: #333; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-size:133%; height: 27px; line-height: 27px; padding: 0; vertical-align: top; width: 70px; }
+
+// #footer renamed to #bromley-footer, fixed font size.
+#bromley-footer { background: #666 url('https://www.bromley.gov.uk/site/styles/css_img/footer.gif') top center no-repeat; clear: both; width:100%; padding:30px 15px 50px; margin-left:-15px; color:#fff; font-size:92%;}
+#bromley-footer a:link,
+#bromley-footer a:visited { color: #fff; text-decoration: none; }
+#bromley-footer a:hover,
+#bromley-footer a:active { text-decoration: underline;}
+#bromley-footer img { float: right; margin-top: -18px; }
+#bromley-footer .footer-nav { float: right; height:35px; margin-top: -15px; }
+#bromley-footer .footer-nav li { border-right:1px solid #fff; float: left; line-height: 1; padding: 0 20px; }
+#bromley-footer .footer-nav li:last-child { border: none; }
+
+// Bromley IE specific CSS
+.ie6 {
+ div { zoom: 1; }
+ #bromley-wrapper { padding: 0; }
+ #bromley-footer { margin: 0; }
+ //#search input { padding: 8px 5px 2px; }
+ //#search input.button { padding: 0; width: 68px; line-height: 24px; }
+ input.button { overflow: visible; width: 1%; }
+}
+.ie7 {
+ div { zoom: 1; }
+ //#search input { padding: 8px 5px 2px; }
+ //#search input.button { padding: 0; width: 68px; line-height: 24px; }
+ input.button { overflow: visible; }
+}
+.ie8 {
+ //#search input { padding: 8px 5px 2px; }
+ //#search input.button { padding: 0; line-height: 24px; }
+}
+
+// mySociety additions
+#bromley-header { font-size: 12px; }
+.header-nav ul { margin: 0; }
+.header-nav li { list-style-type: none; }
+// Width is actually 637, but that causes wrap-around, need to ask for fixes and corner image
+.main-menu { background: url('/cobrands/bromley/main-menu1.gif') no-repeat; width: 638px; }
+.main-menu ul { margin: 0; }
+.main-menu li { list-style-type: none; color: #ccf; }
+.main-menu li.last { padding-right: 0; }
+.main-menu li.last a:hover, .main-menu li.last a:active {background:url('/cobrands/bromley/main-menu-hover-home-right.gif') repeat-x;}
+//#search input { display: inline; margin: 0; @include border-radius(0em); }
+//#search input.button { font-weight: normal; text-transform: none; }
+#bromley-footer { padding-bottom: 60px; }
+#bromley-footer .footer-nav li { list-style-type: none; }
+#bromley-footer p { margin: 0; }
+
+#bromley-powered-by {
+ clear: both;
+}
+
diff --git a/web/cobrands/bromley/favicon.ico b/web/cobrands/bromley/favicon.ico
new file mode 100644
index 000000000..cf0577755
--- /dev/null
+++ b/web/cobrands/bromley/favicon.ico
Binary files differ
diff --git a/web/cobrands/bromley/favicon.png b/web/cobrands/bromley/favicon.png
new file mode 100644
index 000000000..0acd804e7
--- /dev/null
+++ b/web/cobrands/bromley/favicon.png
Binary files differ
diff --git a/web/cobrands/bromley/fms-logo.png b/web/cobrands/bromley/fms-logo.png
new file mode 100644
index 000000000..23bea6b0f
--- /dev/null
+++ b/web/cobrands/bromley/fms-logo.png
Binary files differ
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index 3dc34c6c7..eef0ee679 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -1,11 +1,155 @@
@import "_colours";
@import "../fixmystreet/_layout";
-body {
- background: #fff;
+body { background: #9b9b9b url('https://www.bromley.gov.uk/site/styles/css_img/repeater.gif') repeat-x; }
+#bromley-wrapper { background: #fff url('https://www.bromley.gov.uk/site/styles/css_img/header-corners.gif') center 110px no-repeat; margin: 1px auto 0; padding: 0 15px; width: 955px;}
+.offline #bromley-wrapper { padding: 0 15px 20px; }
+
+// So that map appears underneath the header
+.wrapper {
+ position: relative;
+}
+.ie6, .ie7 {
+ .wrapper {
+ padding-top: 1em;
+ }
+}
+
+// To prevent font size larger interfering with the fixed Bromley layout
+.container { width: auto; }
+.full-width { width: 464px; }
+.shadow-wrap { width: 464px; }
+#map_box { width: 464px; }
+.content { width: 432px; }
+body.fullwidthpage .content { width: auto; }
+body.twothirdswidthpage .content {
+ width: 640px;
+ aside {
+ left: 672px;
+ width: 208px;
+ padding: 16px;
+ }
+ .sticky-sidebar {
+ left: 672px;
+ aside {
+ top:7em;
+ }
+ }
+}
+.ie6, .ie7 {
+ body.mappage .container {
+ width: 464px;
+ margin-left: 0;
+ }
}
#front-main {
background: $primary;
+ @include border-radius(1em 1em 0 0);
+ margin: 2em 1em 0;
+ padding-top: 0;
+ // layout sets this because base has it slightly lighter
+ h2 {
+ color: $primary_text;
+ }
+ a#geolocate_link {
+ color: $primary_text;
+ }
+}
+
+// Don't want gap that normal site has
+body.frontpage {
+ .table-cell {
+ .content {
+ margin-top: 0;
+ }
+ }
+}
+
+// Don't want FixMyStreet logo on desktop, and we have a skip to content in
+// Bromley header
+#site-header {
+ display: none;
+}
+
+#user-meta {
+ display: none;
+}
+
+// Currently hiding, but do want some internal navigation somewhere at the end
+.nav-wrapper {
+ display: none;
+}
+
+// White background, so no shadow or margin needed.
+.content {
+ margin: 0;
+ @include box-shadow(none);
+}
+.ie6, .ie7, .ie8 {
+ .content {
+ margin: 0;
+ border: none;
+ }
+}
+
+// As map can scroll and isn't at the top, give it an edge
+#map_box {
+ border: solid 1px #999;
+ top: 1em;
+ right: 0em;
+ margin: 0;
+}
+
+// Perhaps fix map location (should be in central?)
+.ie6 #map_box, .ie7 #map_box {
+ right: -480px;
+}
+
+.general-sidebar-notes,
+#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;
+ }
+}
+
+.ie7 .big-green-banner {
+ right: 0;
+}
+
+// Pull OpenLayers navigation down a bit
+#fms_pan_zoom {
+ top: 0.5em !important;
+}
+
+// Fix location of aside sidebar
+body.twothirdswidthpage {
+ .content {
+ aside {
+ @include box-shadow(none);
+ }
+ .sticky-sidebar {
+ top: 1em;
+ aside {
+ position: absolute;
+ top: 0;
+ }
+ }
+ }
+}
+
+// So as not to interfere with the Bromley footer, make the fixed nav static.
+.shadow-wrap {
+ position: static;
+ padding-top: 0;
+ margin-bottom: 1em;
+ ul#key-tools {
+ border-top: none;
+ border-bottom: 1px solid $primary;
+ }
}
diff --git a/web/cobrands/bromley/main-menu-hover-home-right.gif b/web/cobrands/bromley/main-menu-hover-home-right.gif
new file mode 100644
index 000000000..80c11c782
--- /dev/null
+++ b/web/cobrands/bromley/main-menu-hover-home-right.gif
Binary files differ
diff --git a/web/cobrands/bromley/main-menu1.gif b/web/cobrands/bromley/main-menu1.gif
new file mode 100644
index 000000000..21ab45668
--- /dev/null
+++ b/web/cobrands/bromley/main-menu1.gif
Binary files differ
diff --git a/web/cobrands/bromley/tab-blue.png b/web/cobrands/bromley/tab-blue.png
new file mode 100644
index 000000000..62e6285b7
--- /dev/null
+++ b/web/cobrands/bromley/tab-blue.png
Binary files differ
diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss
index 644b015b5..4d3b36888 100644
--- a/web/cobrands/fixmystreet/_base.scss
+++ b/web/cobrands/fixmystreet/_base.scss
@@ -31,9 +31,6 @@ h1 {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
-#front-main h1 {
- margin-top: 0.7em;
-}
h1#reports_heading span {
display: none;
}
@@ -145,12 +142,23 @@ img {
//do this otherwise IE will just not display
//any img without a height defined
height:auto;
+ max-width: 100%;
+}
+// So that map popups display correctly
+#popup img {
+ max-width: none;
}
select, input, textarea {
font-size: 99%;
max-width: 95%;
}
+.ie7 {
+ select, input, textarea {
+ max-width: none;
+ }
+}
+
// To deal with bug from drop-down being wider than holder
select {
width: 100%;
@@ -247,10 +255,27 @@ input[type=password],
input[type=email],
input[type=file],
textarea {
+ @include box-sizing(border-box);
width: 100%;
// adjust so the sides line up
padding: 0.5em;
- margin: 0 0 0 -0.5em;
+}
+.ie7 {
+ input[type=text],
+ input[type=password],
+ input[type=email],
+ input[type=file],
+ textarea {
+ max-width: 95%;
+ }
+ // In order to work around the IE7 specific issue of inheriting left margins
+ // http://techblog.willshouse.com/2009/07/12/ie6ie7-form-element-margin-inheritance-bug/
+ fieldset > input[type=text],
+ fieldset > input[type=password],
+ fieldset > input[type=email],
+ fieldset > textarea {
+ margin-left: -1em;
+ }
}
textarea {
@@ -294,7 +319,6 @@ label{
margin: 0 -2em 0.25em -2em;
background:#eeeeee;
padding:1em 2em 1em 2em;
- max-width:26em;
>input[type=text] {
margin-bottom:1em;
}
@@ -303,7 +327,7 @@ label{
margin:0.5em 0;
}
h5 {
- margin:0;
+ margin:0 0 1em;
font: {
size:1.125em;
weight:normal;
@@ -319,6 +343,14 @@ label{
// it looks okay.
.ie6 .form-box {
margin: 0 0 0.25em 0;
+ padding: 1em;
+}
+// Prevent grey displaying oddly by giving it a width, and stop odd left margin issue
+.ie7 .form-box {
+ width: 100%;
+ > input[type=text] {
+ margin-left: 2em;
+ }
}
.form-txt-submit-box {
@@ -350,8 +382,14 @@ p.form-error {
background:#ff0000;
color:#fff;
padding:0 0.5em;
- margin:0 0 0 -0.5em;
@include border-radius(0.25em 0.25em 0 0);
+ a {
+ color: white;
+ text-decoration: underline;
+ }
+ a:hover {
+ text-decoration: none;
+ }
}
input.form-error,
@@ -364,7 +402,6 @@ ul.error {
background:#ff0000;
color:#fff;
padding:0 0.5em;
- margin:0 0 0 -0.5em;
@include border-radius(0.25em);
}
@@ -457,7 +494,8 @@ p.label-valid {
&#mysoc-menu{
li {
a {
- background:$primary;
+ color: $primary_text;
+ background: $primary;
&#mysoc-logo {
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAAyCAMAAABf9whNAAAACW9GRnMAAADwAAAAJgAMZizzAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAAANlBMVEUAAAAiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiL///90WH2CAAAAEHRSTlMADx8vP09fb3+Pn6+/z9/v+t8hjgAAAAFiS0dEEeK1PboAAAGqSURBVFjD7ZbNjtwgEAY/oIE2YKj3f9ocPDOZ3eN6FCUKdWsJQ+H+saXNZrPZbDabzf/GovwdIhH8LUzHn/PqI32Jcw1v0fjidQf30EZPqmMURXeT5F5kbYwqSQbeWpAU6xg961pT+mgm+WR4Ke6SzG9JwQRWB6iaTClCzQBLknT0AibZAnCBSx2ALACGQ5JOznsmq1TA82LKIalC6Jwh5seaMGdUWKxiJQpclWVqLNlJsxThUIB6z8Qft3FQgEODrs4qUuj9qoljpAr2euKkmxVIjzrpTBUI90xMGgzJQGrMAEUGrGKQn6c7/HbngT1MMqRO1wdNDA6WpNgW5Ld38s1kuLt7fPbO5Lg7Z76ZaLJoV3WAa6wsxbmiyrMMruyMVxc3SaqvAv+YSQWS1Fs9oAi8jQKmsGB4zwJXgdO9VWnAkaUAHJ81CTAkLYAm5ZbB/QhSmm9d7Ff7Splr5jaI90zMgpQsScHsGmRFUsheH6O1jecR5m5BZlFSzF5NkpJ7lMJ85etDlPWjHdMJ6aMiFdYPdgzw6Q90Yvwo2+fM+3dps9lsNpvNP8gvi7UYry9B6TcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDUtMDJUMTk6NDY6NTErMDE6MDAcdbR4AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA1LTAyVDE5OjQ2OjUxKzAxOjAwbSgMxAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=');
background-repeat:no-repeat;
@@ -485,7 +523,8 @@ p.label-valid {
#user-meta {
p {
position: relative;
- background:$primary;
+ color: $primary_text;
+ background: $primary;
padding:1em 6em 1em 1em;
a {
position: absolute;
@@ -518,7 +557,11 @@ p.label-valid {
&:last-child {
border-right:none;
}
- a {
+ input[type=submit] {
+ width: 100%;
+ border: none;
+ }
+ a, input[type=submit] {
display: block;
background-color: #f5f5f5;
background-repeat: no-repeat;
@@ -529,7 +572,7 @@ p.label-valid {
size:0.6875em;
family: Helmet, Freesans, sans-serif;
}
- &:hover, &.hover, &.active {
+ &:hover, &.hover {
text-decoration:none;
background-color:#333;
color:#fff;
@@ -546,7 +589,7 @@ p.label-valid {
background-image:url('/cobrands/fixmystreet/images/sprite.png');
background-position:center -2716px;
}
- &.hover, &.active {
+ &.hover {
background-image:url('/cobrands/fixmystreet/images/sprite.png');
background-position:center -2064px;
}
@@ -717,7 +760,7 @@ a:hover.button-left {
width: 0;
height: 0;
border-left: 0.5em solid transparent;
- border-bottom: 0.5em solid #4B8304;
+ border-bottom: 0.5em solid $contrast1_dark;
}
}
@@ -753,7 +796,7 @@ a:hover.button-left {
color:#fff;
background: $contrast1;
&:before {
- border-bottom: 0.5em solid #4B8304;
+ border-bottom: 0.5em solid $contrast1_dark;
}
}
}
@@ -838,6 +881,7 @@ a:hover.button-left {
}
.img {
text-align:right;
+ width: 90px;
img {
height:auto;
}
@@ -906,7 +950,7 @@ a:hover.button-left {
width:20px;
height:20px;
opacity: 0.5;
- background:#fff url(images/sprite.png) -16px -1098px no-repeat;
+ background:#fff url(/cobrands/fixmystreet/images/sprite.png) -16px -1098px no-repeat;
//hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/
font: 0/0 a;
color: transparent;
@@ -1286,7 +1330,8 @@ table.nicetable {
.promo {
@extend .full-width;
- background:$primary;
+ color: $primary_text;
+ background: $primary;
padding:1em;
margin-bottom:1em;
overflow:hidden;
@@ -1299,10 +1344,10 @@ table.nicetable {
width:16px;
height:16px;
text-indent:-999999px;
- background:url(images/sprite.png) -341px -263px no-repeat;
+ background:url(/cobrands/fixmystreet/images/sprite.png) -341px -263px no-repeat;
@include border-radius(4px);
&:hover {
- background:#222 url(images/sprite.png) -341px -223px no-repeat;
+ background:#222 url(/cobrands/fixmystreet/images/sprite.png) -341px -223px no-repeat;
}
}
}
@@ -1333,7 +1378,8 @@ table.nicetable {
}
a {
@include inline-block;
- background:$primary;
+ color: $primary_text;
+ background: $primary;
padding-left:0.5em;
padding-right:0.5em;
color:#1a1a1a;
@@ -1347,7 +1393,7 @@ table.nicetable {
// this is a bit of a hack to get some differentation between desk and mobile
.desk-only {
- display:none !important;
+ display:none;
}
// hide anything with this class if js is working
@@ -1366,6 +1412,7 @@ table.nicetable {
/* Front page */
#front-main {
text-align:center;
+ margin: 1em;
h2 {
font: {
style:italic;
@@ -1374,6 +1421,9 @@ table.nicetable {
}
color:#4d4d4d;
}
+ p {
+ margin: 0.5em 0 0;
+ }
#postcodeForm {
@extend .full-width;
padding:1em;
@@ -1392,7 +1442,7 @@ table.nicetable {
display:table-cell;
margin:0;
padding:0.25em 2%;
- width:82%;
+ width:86%;
border:none;
background:none;
line-height:1.5em;
@@ -1460,7 +1510,6 @@ table.nicetable {
#front-recently {
.issue-list-a {
border-bottom:none;
- margin-bottom:0;
}
}
diff --git a/web/cobrands/fixmystreet/_colours.scss b/web/cobrands/fixmystreet/_colours.scss
index 2463cdeeb..1a62d0282 100644
--- a/web/cobrands/fixmystreet/_colours.scss
+++ b/web/cobrands/fixmystreet/_colours.scss
@@ -5,4 +5,5 @@ $primary_b: #F3B11E;
$primary_text: #222;
$contrast1: #00BD08;
+$contrast1_dark: #4B8304;
$contrast2: #AA8D11;
diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss
index b4c108ce9..cdd7a41e2 100644
--- a/web/cobrands/fixmystreet/_layout.scss
+++ b/web/cobrands/fixmystreet/_layout.scss
@@ -3,10 +3,10 @@
//hacks for desk/mob only stuff
.desk-only {
- display:block !important;
+ display: block;
}
.mob-only {
- display:none !important;
+ display: none;
}
body {
@@ -147,7 +147,8 @@ h1 {
@include background(linear-gradient(#000, #444 10%, #444 95%, #111));
}
a.report-a-problem-btn {
- background:$primary;
+ color: $primary_text;
+ background: $primary;
padding:0.25em;
margin:0.5em;
color:#333;
@@ -197,28 +198,23 @@ h1 {
// .content Is the white box
// The narrow single column box
-.content{
+.content {
width: 27em;
margin-top: 3em;
- background: #fff;
- padding: 1em;
- padding-bottom: 3em;
- margin-left: 0.5em;
margin-bottom: -1em;
+ margin-left: 0.5em;
+ padding: 1em 1em 3em;
+ background: #fff;
@include box-shadow(0px 0px 6px 1px #000);
}
.ie6, .ie7, .ie8 {
.content {
// If no box-shadow, just want a boring black border to stand it out from the map.
- border: 1px solid black;
+ border: 1px solid #666;
//take off margins so we line up properly
- margin: 0;
+ margin: 0 0 0 0.5em;
}
}
-//weird margining thing for ie8
-.ie8 .content {
- margin-top:3em;
-}
// map page - has fixed header and different styling
body.mappage {
@@ -253,7 +249,7 @@ body.mappage {
.container {
float: left;
width: 27em;
- margin-left: 1.4em;
+ margin-left: 0.7em;
}
.nav-wrapper{
z-index:1;
@@ -266,13 +262,6 @@ body.mappage {
}
}
}
-.ie6 {
- body.mappage {
- .container {
- margin-left: 0.7em;
- }
- }
-}
//ie8 needs different stuff on .nav-wrapper so we
//have to define all the rest of it again as this resets
//the z-index base yet again :S
@@ -415,10 +404,6 @@ body.twothirdswidthpage {
&.m-app-iphone {
background-position: -12px -3610px;
}
- &.m-app-iphone-streetreport {
- background-position: -12px -3678px;
- height:50px;
- }
&.m-app-droid {
background-position: -12px -3756px;
}
@@ -438,10 +423,6 @@ body.twothirdswidthpage {
}
.ie6 #footer-mobileapps ul li a {
background:url(/cobrands/fixmystreet/images/ie_mobileapps.gif) -1px -1px no-repeat;
- &.m-app-iphone-streetreport {
- background-position: -1px -69px;
- height:50px;
- }
&.m-app-droid {
background-position: -1px -148px;
}
@@ -596,7 +577,7 @@ body.twothirdswidthpage {
@include box-shadow(-0em 0px 1em 1em #fff);
li {
border:none;
- a {
+ a, input[type=submit] {
font-size: 0.75em;
color:#666;
padding: 0.5em 1.5em 0.5em 0;
@@ -652,9 +633,14 @@ body.twothirdswidthpage {
top:-0.5em;
position: absolute;
border-top: 0.5em solid transparent;
- border-left: 0.5em solid #4B8304;
+ border-left: 0.5em solid $contrast1_dark;
border-bottom:none;
}
+ span {
+ display: block;
+ font-size: 80%;
+ padding-top: 0.5em;
+ }
}
.ie6 .big-green-banner {
background: $contrast1 url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat;
@@ -676,7 +662,7 @@ body.twothirdswidthpage {
background-position:-324px -326px;
background-repeat:no-repeat;
&:before {
- border-bottom: 0.75em solid #4B8304;
+ border-bottom: 0.75em solid $contrast1_dark;
}
}
}
@@ -702,18 +688,13 @@ input[type=text],
input[type=password],
input[type=email],
textarea{
- width: 25em;
-}
-.form-box {
- max-width:25em;
+ max-width: 25em;
}
-
/* form errors */
div.form-error,
p.form-error {
display:block;
- width:24.7em;
}
input.form-error,
@@ -743,7 +724,7 @@ textarea.form-error {
}
}
.ie6, .ie7 {
- #report-a-problem-sidebar {
+ #report-a-problem-sidebar, .general-sidebar-notes {
left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
}
}
@@ -782,19 +763,15 @@ textarea.form-error {
body.frontpage {
.table-cell {
- // we do this so we can have full screen width elements
- >.container {
- width:100%;
- }
.content {
- margin:14em auto 0 auto;
+ margin: 1em auto 0;
}
}
.nav-wrapper-2{
height:6em;
}
#site-header{
- height:9em;
+ height:8em;
}
#site-logo{
top:3em;
@@ -807,7 +784,7 @@ body.frontpage {
p {
top:-4em;
right:0;
- color: $primary;
+ color:$primary;
background:none;
@include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
a {
@@ -833,7 +810,7 @@ body.frontpage {
.ie6, .ie7 {
body.frontpage {
#site-header {
- height:3em;
+ height:4em;
}
#site-logo {
top:-1em;
@@ -846,24 +823,13 @@ body.frontpage {
.ie6 body.frontpage #site-logo {
background:url(/cobrands/fixmystreet/images/ie_front_logo.gif) 0 0 no-repeat;
}
-//weird margining thing for ie8
-.ie8 body.frontpage {
- #front-main {
- top:-12em;
- }
- .table-cell .content {
- margin-top:12em;
- }
-}
// big yellow bit full screen width
#front-main {
color: $primary_text;
background: $primary url(/cobrands/fixmystreet/images/tile-y.jpg);
- position:absolute;
- width:100%;
- left:0;
- top:-15em;
+ margin: 0;
+ padding: 1em;
#front-main-container {
max-width: 57em;
margin:0 auto;
@@ -876,6 +842,7 @@ body.frontpage {
#postcodeForm {
background:none;
overflow:hidden;
+ padding-bottom: 0;
margin-right:0.5em;
label {
margin:0.5em 0;
@@ -889,8 +856,8 @@ body.frontpage {
display:block;
float:left;
padding:0.25em 0.5em;
- height:1.5em;
- width:16em;
+ height:2em;
+ width:17em;
}
input#submit {
display:block;
@@ -901,27 +868,40 @@ body.frontpage {
}
}
}
+ a {
+ color: $primary_text;
+ text-decoration: underline;
+ &:hover {
+ text-decoration: none;
+ }
+ }
a#geolocate_link {
background:none;
color:#222;
- margin:-1em 0 0.5em 0;
+ text-decoration: none;
+ padding-bottom: 0;
&:hover {
text-decoration:underline;
background:none;
}
}
}
-.ie6, .ie7 {
- #front-main {
- top:2em;
+.ie7 #front-main {
+ #postcodeForm {
+ div {
+ input#pc {
+ height:1.5em;
+ width:16em;
+ }
+ }
}
}
-
#front-howto {
border-right:1em solid #fff;
#front_stats {
background:none;
+ color: #222;
border-top:0.25em solid $primary;
padding-top:1em;
div {
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 9d5151189..09dbc46a7 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -3,33 +3,6 @@
* FixMyStreet JavaScript
*/
-function form_category_onchange() {
- var cat = $('#form_category');
- var args = {
- category: cat.val()
- };
-
- if ( typeof fixmystreet !== 'undefined' ) {
- args.latitude = fixmystreet.latitude;
- args.longitude = fixmystreet.longitude;
- } else {
- args.latitude = $('input[name="latitude"]').val();
- args.longitude = $('input[name="longitude"]').val();
- }
-
- $.getJSON('/report/new/category_extras', args, function(data) {
- if ( data.category_extra ) {
- if ( $('#category_meta').size() ) {
- $('#category_meta').html( data.category_extra);
- } else {
- $('#form_category_row').after( data.category_extra );
- }
- } else {
- $('#category_meta').empty();
- }
- });
-}
-
/*
* general height fixing function
*
@@ -80,12 +53,12 @@ function tabs(elem, indirect) {
$(function(){
var $html = $('html');
- $html.removeClass('no-js').addClass('js');
-
-
- // Preload the new report pin
- document.createElement('img').src = '/i/pin-green.png';
+ var cobrand;
+ if (window.location.href.indexOf('bromley') != -1) {
+ cobrand = 'bromley';
+ }
+ // Deal with switching between mobile and desktop versions on resize
var last_type;
$(window).resize(function(){
var type = $('#site-header').css('borderTopWidth');
@@ -106,7 +79,9 @@ $(function(){
}
if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
// Immediately go full screen map if on around page
- $('#site-header').hide();
+ if (cobrand != 'bromley') {
+ $('#site-header').hide();
+ }
$('#map_box').prependTo('.wrapper').css({
position: 'absolute',
top: 0, left: 0, right: 0, bottom: 0,
@@ -128,167 +103,61 @@ $(function(){
} else {
// Make map full screen on non-mobile sizes.
$html.removeClass('mobile');
- var map_pos = 'fixed', map_height = '100%';
- if ($html.hasClass('ie6')) {
- map_pos = 'absolute';
- map_height = $(window).height();
+ if (cobrand == 'bromley') {
+ var bromley_right;
+ if ($html.hasClass('ie6') || $html.hasClass('ie7')) {
+ bromley_right = '-480px';
+ } else {
+ bromley_right = '0em';
+ }
+ // Do the same as CSS (in case resized from mobile).
+ $('#map_box').prependTo('.content').css({
+ zIndex: 1, position: 'absolute',
+ top: '1em', left: '', right: bromley_right, bottom: '',
+ width: '464px', height: '464px',
+ margin: 0
+ });
+ } else if ($html.hasClass('ie6')) {
+ $('#map_box').prependTo('.wrapper').css({
+ zIndex: 0, position: 'absolute',
+ top: 0, left: 0, right: 0, bottom: 0,
+ width: '100%', height: $(window).height(),
+ margin: 0
+ });
+ } else {
+ $('#map_box').prependTo('.wrapper').css({
+ zIndex: 0, position: 'fixed',
+ top: 0, left: 0, right: 0, bottom: 0,
+ width: '100%', height: '100%',
+ margin: 0
+ });
}
- $('#map_box').prependTo('.wrapper').css({
- zIndex: 0, position: map_pos,
- top: 0, left: 0, right: 0, bottom: 0,
- width: '100%', height: map_height,
- margin: 0
- });
if (typeof fixmystreet !== 'undefined') {
- fixmystreet.state_map = 'full';
+ if (cobrand == 'bromley') {
+ //$('#bromley-footer').hide();
+ } else {
+ fixmystreet.state_map = 'full';
+ }
}
if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
// Remove full-screen-ness
- $('#site-header').show();
+ var banner_text;
+ if (cobrand == 'bromley') {
+ banner_text = 'Click map to report a problem<span>Yellow pins show existing reports</span>';
+ } else {
+ $('#site-header').show();
+ banner_text = 'Click map to report a problem';
+ }
$('#fms_pan_zoom').css({ top: '4.75em !important' });
$('.big-green-banner')
.removeClass('mobile-map-banner')
.prependTo('#side')
- .text('Click map to report a problem');
+ .html(banner_text);
}
$('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
}
last_type = type;
- });
-
- //add mobile class if small screen
- $(window).resize();
-
- $('#pc').focus();
-
- $('input[type=submit]').removeAttr('disabled');
- /*
- $('#mapForm').submit(function() {
- if (this.submit_problem) {
- $('input[type=submit]', this).prop("disabled", true);
- }
- return true;
- });
- */
-
- if (!$('#been_fixed_no').prop('checked') && !$('#been_fixed_unknown').prop('checked')) {
- $('#another_qn').hide();
- }
- $('#been_fixed_no').click(function() {
- $('#another_qn').show('fast');
- });
- $('#been_fixed_unknown').click(function() {
- $('#another_qn').show('fast');
- });
- $('#been_fixed_yes').click(function() {
- $('#another_qn').hide('fast');
- });
-
- // FIXME - needs to use translated string
- jQuery.validator.addMethod('validCategory', function(value, element) {
- return this.optional(element) || value != '-- Pick a category --'; }, validation_strings.category );
-
- jQuery.validator.addMethod('validName', function(value, element) {
- var validNamePat = /\ba\s*n+on+((y|o)mo?u?s)?(ly)?\b/i;
- return this.optional(element) || value.length > 5 && value.match( /\S/ ) && !value.match( validNamePat ); }, validation_strings.category );
-
- var form_submitted = 0;
- var submitted = false;
-
- $("form.validate").validate({
- rules: {
- title: { required: true },
- detail: { required: true },
- email: { required: true },
- update: { required: true },
- rznvy: { required: true }
- },
- messages: validation_strings,
- onkeyup: false,
- onfocusout: false,
- errorElement: 'div',
- errorClass: 'form-error',
- // we do this to stop things jumping around on blur
- success: function (err) { if ( form_submitted ) { err.addClass('label-valid').removeClass('label-valid-hidden').html( '&nbsp;' ); } else { err.addClass('label-valid-hidden'); } },
- errorPlacement: function( error, element ) {
- element.before( error );
- },
- submitHandler: function(form) {
- if (form.submit_problem) {
- $('input[type=submit]', form).prop("disabled", true);
- }
-
- form.submit();
- },
- // make sure we can see the error message when we focus on invalid elements
- showErrors: function( errorMap, errorList ) {
- if ( submitted && errorList.length ) {
- $(window).scrollTop( $(errorList[0].element).offset().top - 120 );
- }
- this.defaultShowErrors();
- submitted = false;
- },
- invalidHandler: function(form, validator) { submitted = true; }
- });
-
- $('input[type=submit]').click( function(e) { form_submitted = 1; } );
-
- /* set correct required status depending on what we submit
- * NB: need to add things to form_category as the JS updating
- * of this we do after a map click removes them */
- $('#submit_sign_in').click( function(e) {
- $('#form_category').addClass('required validCategory').removeClass('valid');
- $('#form_name').removeClass();
- } );
-
- $('#submit_register').click( function(e) {
- $('#form_category').addClass('required validCategory').removeClass('valid');
- $('#form_name').addClass('required validName');
- } );
-
- $('#problem_submit > input[type="submit"]').click( function(e) {
- $('#form_category').addClass('required validCategory').removeClass('valid');
- $('#form_name').addClass('required validName');
- } );
-
- $('#update_post').click( function(e) {
- $('#form_name').addClass('required').removeClass('valid');
- } );
-
- $('#form_category').change( form_category_onchange );
-
- // Geolocation
- if (geo_position_js.init()) {
- $('#postcodeForm').after('<a href="#" id="geolocate_link">&hellip; or locate me automatically</a>');
- $('#geolocate_link').click(function(e) {
- e.preventDefault();
- // Spinny thing!
- if($('.mobile').length){
- $(this).append(' <img src="/cobrands/fixmystreet/images/spinner-black.gif" alt="" align="bottom">');
- }else{
- $(this).append(' <img src="/cobrands/fixmystreet/images/spinner-yellow.gif" alt="" align="bottom">');
- }
- geo_position_js.getCurrentPosition(function(pos) {
- $('img', this).remove();
- var latitude = pos.coords.latitude;
- var longitude = pos.coords.longitude;
- location.href = '/around?latitude=' + latitude + ';longitude=' + longitude;
- }, function(err) {
- $('img', this).remove();
- if (err.code == 1) { // User said no
- } else if (err.code == 2) { // No position
- $(this).html("Could not look up location");
- } else if (err.code == 3) { // Too long
- $('this').html("No result returned");
- } else { // Unknown
- $('this').html("Unknown error");
- }
- }, {
- enableHighAccuracy: true,
- timeout: 10000
- });
- });
- }
+ }).resize();
/*
* Report a problem page
@@ -361,10 +230,15 @@ $(function(){
/*
* Show stuff on input focus
*/
- $('.form-focus-hidden').hide();
- $('.form-focus-trigger').on('focus', function(){
- $('.form-focus-hidden').fadeIn(500);
- });
+ var form_focus_data = $('.form-focus-trigger').map(function() {
+ return $(this).val();
+ }).get().join('');
+ if (!form_focus_data) {
+ $('.form-focus-hidden').hide();
+ $('.form-focus-trigger').on('focus', function(){
+ $('.form-focus-hidden').fadeIn(500);
+ });
+ }
/*
* Show on click - pretty generic
@@ -479,12 +353,12 @@ $.fn.drawer = function(id, ajax) {
});
};
- if ($('html.mobile').length) {
+ if ($('html.mobile').length || cobrand == 'bromley') {
$('#council_wards').hide().removeClass('hidden-js').find('h2').hide();
$('#key-tool-wards').click(function(e){
e.preventDefault();
$('#council_wards').slideToggle('800', function(){
- $('#key-tool-wards').toggleClass('active');
+ $('#key-tool-wards').toggleClass('hover');
});
});
} else {
@@ -575,7 +449,11 @@ $.fn.drawer = function(id, ajax) {
*/
if (!$('html.mobile').length) {
if (!($('body').hasClass('frontpage'))){
- heightFix(window, '.content', -176);
+ var offset = -176;
+ if (cobrand == 'bromley') {
+ offset = -110;
+ }
+ heightFix(window, '.content', offset);
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-03 21:11:02 +0000