aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/cobrands/fixmystreet/base.scss106
-rw-r--r--web/cobrands/fixmystreet/layout.scss41
-rw-r--r--web/js/fixmystreet.js18
-rw-r--r--web/js/map-OpenLayers.js6
4 files changed, 132 insertions, 39 deletions
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 1fd4968f6..75ec856eb 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -238,6 +238,30 @@ fieldset{
margin: 1em;
}
+// input placeholders, these need to be on separate lines as if the browser
+// can't understand a selector it will invalidate the whole line.
+::-webkit-input-placeholder {
+ color: #888888;
+ font: {
+ style:italic;
+ size:0.9375em;
+ }
+}
+:-moz-placeholder {
+ color: #888888;
+ font: {
+ style:italic;
+ size:0.9375em;
+ }
+}
+:-ms-placeholder {
+ color: #888888;
+ font: {
+ style:italic;
+ size:0.9375em;
+ }
+}
+
input[type=text],
input[type=password],
input[type=email],
@@ -247,15 +271,14 @@ textarea{
margin: 0 0 0 -0.5em;
}
-
textarea{
border: 0.125em solid #888888;
@include border-radius(0.25em);
display: block;
font-size: 1em;
line-height: 1.5em;
- color: #888888;
font-family: 'helvetica', 'arial',sans-serif;
+ min-height:8em;
}
input[type=text],
@@ -266,10 +289,8 @@ input[type=email] {
display: block;
font-size: 1em;
line-height: 1.5em;
- color: #888888;
}
-
label{
display: block;
margin-top: 1.25em;
@@ -282,6 +303,47 @@ label{
}
}
+.form-box {
+ margin: 0 -2em 0.25em -2em;
+ background:#eeeeee;
+ padding:1em 2em 1em 2em;
+ max-width:25em;
+ .form-txt-submit-box {
+ min-height:3em;
+ input[type=password],
+ input[type=text] {
+ width: 69%;
+ float:left;
+ }
+ input[type=submit] {
+ float:right;
+ width:24%;
+ margin-right:0.25em;
+ padding-top:0.9em;
+ padding-bottom:0.8em;
+ }
+ }
+ >input[type=text] {
+ margin-bottom:1em;
+ // margin-top:1em;
+ }
+ .title {
+ font-size:1.25em;
+ margin:0.5em 0;
+ }
+ h5 {
+ margin:0;
+ font: {
+ size:1.125em;
+ weight:normal;
+ }
+ strong {
+ font-size:2em;
+ margin-right:0.25em;
+ }
+ }
+}
+
/* LAYOUT */
@@ -413,11 +475,13 @@ input.red-btn{
}
.button-right,
-a.button-right {
+.button-left,
+a.button-right,
+a.button-left {
+ @include inline-block;
cursor:pointer;
font-size: 1em;
line-height: 1;
- padding:0.5em 2em 0.5em 0.5em;
margin:0;
border:1px solid #999;
color:#333;
@@ -430,6 +494,25 @@ a.button-right {
border:1px solid #666;
}
}
+.button-right,
+a.button-right,
+:hover.button-right,
+a:hover.button-right {
+ padding:1em 3em 1em 1em;
+ background-image: url(images/sprite.png);
+ background-repeat:no-repeat;
+ background-position:right -686px;
+}
+
+.button-left,
+a.button-left,
+:hover.button-left,
+a:hover.button-left {
+ padding:1em 1em 1em 3em;
+ background-image: url(images/sprite.png);
+ background-repeat:no-repeat;
+ background-position:-18px -802px;
+}
@@ -516,7 +599,6 @@ a.button-right {
}
-
// this is the user's logged in details or the login link etc
#user-meta {
ul {
@@ -525,6 +607,16 @@ a.button-right {
}
+// only on mobile, this is a sidebar on desk (#report-a-poblem-sidebar)
+a.rap-notes-trigger,
+a:hover.rap-notes-trigger {
+ display:block;
+ margin:0 1.25em 0 0.5em;
+}
+.rap-notes {
+ margin:1em 0;
+}
+
// this is a bit of a hack to get some differentation between desk and mobile
.desk-only {
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index 8724d3ff4..3f1555a57 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -205,34 +205,29 @@ textarea{
/* Report a problem page*/
-.report-a-poblem-page {
- width: 41.25em;
- #map_box {
- width:15em;
+
+#report-a-poblem-sidebar {
+ position:absolute;
+ left:29.5em;
+ top:2em;
+ width:15em;
+ z-index: -1;
+ @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
+ .sidebar-tips {
+ background:#eeeeee;
+ padding:1em;
+ font-size:0.75em;
}
- #report-a-poblem-main {
- width: 27em;
- }
- #report-a-poblem-sidebar {
- position:absolute;
- left:28.5em;
- top:0;
- width:15.25em;
- .sidebar-tips {
- background:#eeeeee;
- padding:1em;
- font-size:0.75em;
- }
- .sidebar-notes {
- background:#333333;
- padding:1em;
- color:#ffffff;
- font-size:0.75em;
- }
+ .sidebar-notes {
+ background:#333333;
+ padding:1em;
+ color:#ffffff;
+ font-size:0.75em;
}
}
+
/* MEDIA QUERIES */
@media only screen and (min-width: 640px) and (max-width: 960px) {
.container {
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index b6e7d3a79..c382a9645 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -210,21 +210,29 @@ $(function(){
*/
//desktop
if($('#report-a-poblem-sidebar:visible').length > 0){
- $('.content[role=main]').addClass('report-a-poblem-page');
- heightFix('#report-a-poblem-sidebar:visible', '.content.report-a-poblem-page', 26);
+ heightFix('#report-a-poblem-sidebar:visible', '.content', 26);
}
//show/hide on mobile
$('.mobile #report-a-poblem-sidebar').after('<a href="#" class="rap-notes-trigger button-right">How to send successful reports</a>').hide();
$('.mobile').on('click', '.rap-notes-trigger', function(e){
e.preventDefault();
- $('.mobile .report-a-poblem-page').after('<div class="content rap-notes"></div>').hide();
- $('#report-a-poblem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close btn">close</a>');
+ //check if we've already moved the notes
+ if($('.rap-notes').length > 0){
+ //if we have, show and hide .content
+ $('.mobile .content').hide();
+ $('.rap-notes').show();
+ }else{
+ //if not, move them and show, hiding .content
+ $('.mobile .content').after('<div class="content rap-notes"></div>').hide();
+ $('#report-a-poblem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-left">BACK</a>');
+ }
});
$('.mobile').on('click', '.rap-notes-close', function(e){
+ //hide notes, show .content
e.preventDefault();
- $('.mobile .report-a-poblem-page').show();
+ $('.mobile .content').show();
$('.rap-notes').hide();
});
}); \ No newline at end of file
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 02392360b..b121c6bfc 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -216,8 +216,7 @@ $(function(){
$('#side-form').hide();
$('#side').show();
$('#sub_map_links').show();
- $('.content[role=main]').addClass('report-a-poblem-page');
- heightFix('#report-a-poblem-sidebar:visible', '.content.report-a-poblem-page', 26);
+ heightFix('#report-a-poblem-sidebar:visible', '.content', 26);
fixmystreet.page = 'around';
});
@@ -373,8 +372,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
}
$('#side').hide();
$('#sub_map_links').hide();
- $('.content[role=main]').addClass('report-a-poblem-page');
- heightFix('#report-a-poblem-sidebar:visible', '.content.report-a-poblem-page', 26);
+ heightFix('#report-a-poblem-sidebar:visible', '.content', 26);
fixmystreet.page = 'new';
location.hash = 'report';
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-13 03:56:31 +0000