diff options
| -rw-r--r-- | templates/web/base/report/_inspect.html | 24 | ||||
| -rw-r--r-- | templates/web/base/report/_main.html | 8 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet.com/base.scss | 13 | ||||
| -rw-r--r-- | web/cobrands/oxfordshire/base.scss | 13 | ||||
| -rw-r--r-- | web/cobrands/oxfordshire/layout.scss | 7 | ||||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 64 | ||||
| -rw-r--r-- | web/cobrands/sass/_mixins.scss | 55 |
7 files changed, 112 insertions, 72 deletions
diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html index a4501aebd..1296a9243 100644 --- a/templates/web/base/report/_inspect.html +++ b/templates/web/base/report/_inspect.html @@ -20,10 +20,10 @@ <input type="hidden" name="latitude" value="[% problem.latitude %]"> </p> <p> - <a href="https://www.google.com/maps/dir/Current+Location/[% problem.latitude %],[% problem.longitude %]" class="btn btn-block btn--navigate">[% loc('Navigate to this problem') %]</a> + <a href="https://www.google.com/maps/dir/Current+Location/[% problem.latitude %],[% problem.longitude %]" class="btn btn--block btn--navigate">[% loc('Navigate to this problem') %]</a> </p> <p> - <a href="#" class="btn btn-block btn--geolocate" id="geolocate_link">[% loc('Set to my current location') %]</a> + <a href="#" class="btn btn--block btn--geolocate" id="geolocate_link">[% loc('Set to my current location') %]</a> </p> </div> @@ -97,8 +97,8 @@ <p> <input type="hidden" name="token" value="[% csrf_token %]"> - <a href="[% c.uri_for( '/report', problem.id ) %]" class="btn">[% loc('Cancel') %]</a> - <input type="submit" value="[% loc('Save changes') %]" name="save" /> + <a class="btn" href="[% c.uri_for( '/report', problem.id ) %]">[% loc('Cancel') %]</a> + <input class="btn" type="submit" value="[% loc('Save changes') %]" name="save" /> </p> </div> @@ -112,7 +112,7 @@ <textarea rows="2" name="public_update" id="public_update" class="form-control" required>[% public_update | html %]</textarea> </p> <p> - <input type="submit" value="[% loc('Save changes + send') %]" name="save_inspected" /> + <input class="btn" type="submit" value="[% loc('Save changes + send') %]" name="save_inspected" /> </p> [% ELSE %] <p> @@ -123,6 +123,20 @@ [% END %] </p> [% END %] + + [% IF problem.get_extra_metadata('inspected') %] + [% IF problem.whensent %] + <p>[% loc("<strong>Note:</strong> This report has been sent onwards for action. Any changes made won't be passed on.") %]</p> + [% ELSE %] + <p>[% loc("<strong>Note:</strong> This report hasn't yet been sent onwards for action. Any changes made may not be passed on.") %]</p> + [% END %] + [% END %] + + <p> + <input type="hidden" name="token" value="[% csrf_token %]"> + <a class="btn" href="[% c.uri_for( '/report', problem.id ) %]">[% loc('Cancel') %]</a> + <input class="btn btn-primary" type="submit" value="[% loc('Save changes') %]" name="save" /> + </p> </div> [% END %] diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html index a85bca08f..049b24d7d 100644 --- a/templates/web/base/report/_main.html +++ b/templates/web/base/report/_main.html @@ -126,10 +126,10 @@ %] <div class="moderate-display segmented-control" role="menu"> [% IF permissions.moderate %] - <a id="moderate-report" role="menuitem" aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a> + <a class="btn" id="moderate-report" role="menuitem" aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a> [% END %] [% IF !hide_inspect_button AND permissions.keys.grep('report_inspect|report_edit_category|report_edit_priority').size %] - <a href="/report/[% problem.id %]/inspect" role="menuitem"> + <a class="btn" href="/report/[% problem.id %]/inspect" role="menuitem"> [%~ IF permissions.report_inspect ~%] [%~ loc('Inspect') ~%] [%~ ELSE ~%] @@ -139,9 +139,9 @@ [% END %] [% IF c.user.has_permission_to('planned_reports', problem.bodies_str_ids) %] [%~ IF c.user.is_planned_report(problem) ~%] - <label for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label> + <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label> [%~ ELSE ~%] - <label for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label> + <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label> [%~ END ~%] [% END %] </div> diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index 869654b87..905f20f41 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -152,6 +152,19 @@ } } +.btn-primary { + @include button-reset( + mix($primary, #fff, 50%), + $primary, + mix($primary, #ccc, 30%), + inherit, + darken($primary, 3%), + darken(mix($primary, #fff, 50%), 3%), + mix($primary, #ccc, 30%), + inherit + ); +} + .variant1 { #site-header { border-top-color: #fff; diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss index 12f92b531..16ec91244 100644 --- a/web/cobrands/oxfordshire/base.scss +++ b/web/cobrands/oxfordshire/base.scss @@ -70,3 +70,16 @@ dd, p { margin-bottom: 0; } } + +.btn-primary { + @include button-reset( + $oxfordshire_button_top, + $oxfordshire_button_bottom, + $oxfordshire_button_border, + #fff, + darken($oxfordshire_button_bottom, 3%), + darken($oxfordshire_button_top, 3%), + $oxfordshire_button_border, + #fff + ); +} diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index c44e91586..0a0b49fc2 100644 --- a/web/cobrands/oxfordshire/layout.scss +++ b/web/cobrands/oxfordshire/layout.scss @@ -286,11 +286,12 @@ h4.static-with-rule { #oxford-wrapper #front-main #postcodeForm div { border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green + width: 24em; // up from default 20em #pc { - padding: 0 2%; - width: 89%; - height: 38px; + padding: 0 0 0 2%; + width: 20em; + height: 40px; } } diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 60f992410..98f578fa2 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -701,22 +701,22 @@ footer { /*BUTTONS*/ -// Default style set for buttons, inputs and .btn class. Red and green class available. -// NB: a.btn is included in the selector otherwise a:visited is more specific and -// the wrong text colour is applied. -button, input[type=submit], .btn, a.btn { +.btn { @include button-reset; } -.green-btn, -button.green-btn, -input.green-btn{ +.btn + .btn { + // Ensure extra space between inline buttons placed next to each other. + margin-#{$left}: 0.5em; +} + +.btn-primary, +.green-btn { @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff); } -.red-btn, -button.red-btn, -input.red-btn{ +.btn-danger, +.red-btn { @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff); } @@ -726,20 +726,9 @@ input.final-submit { float: $right; } -// TODO: Sort out this a/a:visited/a.btn hideousness -.btn-block, -a.btn-block { - display: block; - text-align: center; -} - .btn--facebook { @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff); - &:visited { - color: #fff; - } - img { margin-right: 0.5em; vertical-align: -0.2em; @@ -751,10 +740,6 @@ a.btn-block { .btn--twitter { @include button-reset(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff); - &:visited { - color: #fff; - } - img { margin-right: 0.5em; vertical-align: -0.2em; @@ -801,7 +786,7 @@ a.btn-block { .btn--block { display: block; - width: auto; + text-align: center; } // Under the button to override its text transform and width @@ -1847,32 +1832,33 @@ table.nicetable { & > * { display: block; - margin: 0; - padding: 0.75em 0.5em; text-align: center; - background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat; - border: 1px solid #ccc; border-right-width: 0; // avoid double border between items - font-weight: bold; - color: inherit !important; - text-decoration: none !important; - cursor: pointer; float: left; // float fallback for browsers that don't support flexbox flex: 1 0 auto; + } - &:hover { - background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat; - } + .btn { + padding: 0.75em 0.5em; + border-radius: 0; + } + + .btn + .btn { + margin-#{$left}: 0; } & > :first-child { - border-radius: 0.25em 0 0 0.25em; + border-radius: 4px 0 0 4px; } & > :last-child { - border-radius: 0 0.25em 0.25em 0; + border-radius: 0 4px 4px 0; border-right-width: 1px; // reinstate border on last item } + + & > :first-child:last-child { + border-radius: 4px; + } } // A special case of segmented control, where each "button" (or label) is diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss index a1a278ad0..f5bf1fbdf 100644 --- a/web/cobrands/sass/_mixins.scss +++ b/web/cobrands/sass/_mixins.scss @@ -1,32 +1,45 @@ $direction: 'left' !default; // Button reset -@mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){ +// Uses !important a few times to quickly reset +// styles from a:link, a:hover, a:visited etc. +@mixin button-reset($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit){ display: inline-block; - cursor:pointer; - font:{ - size: 0.875em; - family: Helmet, Freesans, sans-serif; - weight:bold; - } - text-transform:uppercase; - line-height: 1.375em; - padding: 0.7em 0.5em 0.5em; - margin:0; + margin: 0; + padding: 0.75em 1em; width: auto; height: auto; vertical-align: top; + text-align: center; + + font-size: 1em; + line-height: 1em; + font-weight: bold; + font-family: inherit; + text-decoration: none !important; + color: $text !important; + + cursor: pointer; + background: $bg-bottom; + @include linear-gradient($bg-top, $bg-bottom); + + border: 1px solid $border; @include border-radius(4px); - background: $c1; - @include linear-gradient($c1, $c2); - border:1px solid $c3; - color:$c4; - &:hover, &:hover:enabled { - background:$c5; - @include linear-gradient($c6, $c5); - text-decoration: none; - border:1px solid $c7; - color:$c8; + + &:hover, + &:focus { + background: $hover-bg-bottom; + @include linear-gradient($hover-bg-top, $hover-bg-bottom); + text-decoration: none !important; + border-color: $hover-border; + color: $hover-text !important; + } + + &:disabled { + background: $bg-bottom; + border-color: $border; + color: desaturate(darken($bg-bottom, 50%), 50%) !important; + cursor: default; } } |