aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-xtemplates/web/base/around/_updates.html2
-rw-r--r--templates/web/base/report/display_tools.html2
-rw-r--r--templates/web/base/reports/_rss.html2
-rw-r--r--web/cobrands/bromley/base.scss11
-rw-r--r--web/cobrands/bromley/images/report-tools.pngbin0 -> 830 bytes
-rw-r--r--web/cobrands/bromley/images/report-tools.svg1
-rw-r--r--web/cobrands/fixmystreet/images/report-tools.pngbin0 -> 836 bytes
-rw-r--r--web/cobrands/fixmystreet/images/report-tools.svg1
-rw-r--r--web/cobrands/fixmystreet/images/share.pngbin435 -> 0 bytes
-rw-r--r--web/cobrands/oxfordshire/layout.scss8
-rw-r--r--web/cobrands/sass/_base.scss174
-rw-r--r--web/cobrands/sass/_layout.scss75
12 files changed, 138 insertions, 138 deletions
diff --git a/templates/web/base/around/_updates.html b/templates/web/base/around/_updates.html
index 458983e8f..6121b218b 100755
--- a/templates/web/base/around/_updates.html
+++ b/templates/web/base/around/_updates.html
@@ -1,5 +1,5 @@
<div class="shadow-wrap">
- <ul id="key-tools" class="singleton">
+ <ul id="key-tools">
<li><a class="feed" id="key-tool-around-updates" href="[% email_url | html %]">[% loc("Get updates") %]</a></li>
</ul>
</div>
diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html
index c477fd8dd..bb76cc388 100644
--- a/templates/web/base/report/display_tools.html
+++ b/templates/web/base/report/display_tools.html
@@ -3,7 +3,7 @@
[% IF c.user_exists AND c.cobrand.users_can_hide AND c.user.belongs_to_body( problem.bodies_str ) %]
<li><form method="post" action="/report/delete/[% problem.id %]" id="remove-from-site-form">
<input type="hidden" name="token" value="[% csrf_token %]">
- <input type="submit" id="key-tool-report-abuse" class="abuse btn" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site" value="[% loc('Remove from site') %]">
+ <button type="submit" id="key-tool-report-abuse" class="abuse" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">[% loc('Remove from site') %]</button>
</form></li>
[% ELSIF c.cobrand.moniker != 'zurich' %]
<li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[%
diff --git a/templates/web/base/reports/_rss.html b/templates/web/base/reports/_rss.html
index f2d164bfa..fdb833315 100644
--- a/templates/web/base/reports/_rss.html
+++ b/templates/web/base/reports/_rss.html
@@ -1,5 +1,5 @@
<div class="shadow-wrap">
- <ul id="key-tools"[% IF NOT children.size %] class="singleton"[% END %]>
+ <ul id="key-tools">
<li><a rel="nofollow" id="key-tool-updates-area" class="feed" href="[% rss_url %]">[%
IF c.cobrand.moniker == 'bromley' AND thing == 'council';
'Get updates of reports in Bromley';
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index e6c29bed2..768a3ec67 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -95,9 +95,14 @@ a:active {
// Darken the "key tools" links because we've darkened our background and as a
// result they have very little contrast
-.shadow-wrap ul#key-tools li a,
-.shadow-wrap ul#key-tools li input[type=submit] {
- background-color: darken(#f5f5f5, 10%);
+#key-tools {
+ a, button {
+ background-color: darken(#f5f5f5, 10%);
+
+ &:after {
+ @include svg-background-image("/cobrands/bromley/images/report-tools");
+ }
+ }
}
.item-list--reports__item a {
diff --git a/web/cobrands/bromley/images/report-tools.png b/web/cobrands/bromley/images/report-tools.png
new file mode 100644
index 000000000..4720d427f
--- /dev/null
+++ b/web/cobrands/bromley/images/report-tools.png
Binary files differ
diff --git a/web/cobrands/bromley/images/report-tools.svg b/web/cobrands/bromley/images/report-tools.svg
new file mode 100644
index 000000000..d812b350b
--- /dev/null
+++ b/web/cobrands/bromley/images/report-tools.svg
@@ -0,0 +1 @@
+<svg width="112" height="16" viewBox="0 0 112 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M104 1c.3 0 .6.2.8.4l7 12.3c.2.2.2.6 0 .9 0 .2-.4.4-.7.4H97a.9.9 0 0 1-.8-.4.9.9 0 0 1 0-1l7.1-12.2c.2-.2.5-.4.8-.4zm-1 10.2v2h2v-2h-2zm0-6.1v5h2v-5h-2z" fill="#999" fill-rule="nonzero"/><g transform="translate(81)"><path stroke="#999" stroke-width="2" d="M11 3L3 8l8 5"/><circle fill="#999" cx="11" cy="3" r="3"/><circle fill="#999" cx="3" cy="8" r="3"/><circle fill="#999" cx="11" cy="13" r="3"/></g><path d="M68.8 13.1a1.9 1.9 0 1 1-3.8 0 1.9 1.9 0 0 1 3.8 0zM65 5.8v2.8c3.5 0 6.4 2.9 6.4 6.4h2.8c0-5-4.1-9.2-9.2-9.2zm0-2c6.2 0 11.2 5 11.2 11.2H79A14 14 0 0 0 65 1v2.8zM18 0h6.5L31 8l-6.5 8H18l6.5-8M48 2v6.5L40 15l-8-6.5V2l8 6.5M48 14V7.5L56 1l8 6.5V14l-8-6.5M14 0H7.5L1 8l6.5 8H14L7.5 8" fill="#999" fill-rule="nonzero"/></g></svg> \ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/report-tools.png b/web/cobrands/fixmystreet/images/report-tools.png
new file mode 100644
index 000000000..5a6a2cdfc
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/report-tools.png
Binary files differ
diff --git a/web/cobrands/fixmystreet/images/report-tools.svg b/web/cobrands/fixmystreet/images/report-tools.svg
new file mode 100644
index 000000000..6512fde8a
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/report-tools.svg
@@ -0,0 +1 @@
+<svg width="112" height="16" viewBox="0 0 112 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M104 1c.3 0 .6.2.8.4l7 12.3c.2.2.2.6 0 .9 0 .2-.4.4-.7.4H97a.9.9 0 0 1-.8-.4.9.9 0 0 1 0-1l7.1-12.2c.2-.2.5-.4.8-.4zm-1 10.2v2h2v-2h-2zm0-6.1v5h2v-5h-2z" fill="#D1D1D1" fill-rule="nonzero"/><g transform="translate(81)"><path stroke="#D1D1D1" stroke-width="2" d="M11 3L3 8l8 5"/><circle fill="#D1D1D1" cx="11" cy="3" r="3"/><circle fill="#D1D1D1" cx="3" cy="8" r="3"/><circle fill="#D1D1D1" cx="11" cy="13" r="3"/></g><path d="M68.8 13.1a1.9 1.9 0 1 1-3.8 0 1.9 1.9 0 0 1 3.8 0zM65 5.8v2.8c3.5 0 6.4 2.9 6.4 6.4h2.8c0-5-4.1-9.2-9.2-9.2zm0-2c6.2 0 11.2 5 11.2 11.2H79A14 14 0 0 0 65 1v2.8zM18 0h6.5L31 8l-6.5 8H18l6.5-8M48 2v6.5L40 15l-8-6.5V2l8 6.5m8 5.5V7.5L56 1l8 6.5V14l-8-6.5M14 0H7.5L1 8l6.5 8H14L7.5 8" fill="#D1D1D1" fill-rule="nonzero"/></g></svg> \ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/share.png b/web/cobrands/fixmystreet/images/share.png
deleted file mode 100644
index 6eb1b6cdb..000000000
--- a/web/cobrands/fixmystreet/images/share.png
+++ /dev/null
Binary files differ
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index fc89b854f..ff5a2c009 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -225,11 +225,9 @@ h4.static-with-rule {
}
}
-.shadow-wrap {
- ul#key-tools {
- @include box-shadow(0 0 1em 1em $oxfordshire_very_light_green);
- border-top-width: 2px;
- }
+#key-tools {
+ @include box-shadow(0 0 1em 1em $oxfordshire_very_light_green);
+ border-top-width: 2px;
}
#oxford-wrapper #front-main #postcodeForm div {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 3b471182d..4627b98c8 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -568,71 +568,81 @@ ul.error {
}
}
-// #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 {
margin: 0 -1em;
- ul#key-tools{
- @include list-reset-soft;
- margin-bottom: 1em;
- display: table;
- width:100%;
- li{
- display: table-cell;
- vertical-align: bottom;
- text-align: center;
- border-#{$right}: 0.25em solid #fff;
- &:last-child {
- border-#{$right}: none;
- }
- input[type=submit] {
- width: 100%;
- border: none;
- }
- a, input[type=submit] {
- display: block;
- background-color: #f5f5f5;
- background-repeat: no-repeat;
- color: #333 !important;
- padding:4em 2em 1em;
- text-transform:uppercase;
- font: {
- size:0.6875em;
- family: $meta-font;
- weight: normal;
- }
- line-height: 1.2em;
- white-space: normal;
- border-radius: 0;
- &:hover, &.hover {
- text-decoration:none;
- background-color:#333;
- color: #fff !important;
- }
- &.abuse {
- background-image: url($image-sprite);
- background-position: center -2424px;
- }
- &.feed {
- background-image: url($image-sprite);
- background-position: center -2563px;
- }
+}
- &.share {
- background-image: url('/cobrands/fixmystreet/images/share.png');
- background-position: center 25%;
- }
- &.chevron {
- background-image: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg");
- background-position: center 25%;
- background-size: 20px 25px;
- }
- &.chevron.hover {
- background-size: auto auto;
- }
- &.hover {
- background-image: url($image-sprite);
- background-position: center -2064px;
- }
+#key-tools {
+ @include list-reset-soft;
+ margin-bottom: 1em;
+ display: table;
+ width: 100%;
+
+ li {
+ display: table-cell;
+ vertical-align: bottom;
+ text-align: center;
+ border-#{$right}: 0.25em solid #fff;
+
+ &:last-child {
+ border-#{$right}: none;
+ }
+ }
+
+ button {
+ width: 100%;
+ border: none;
+ }
+
+ a, button {
+ display: block;
+ background-color: #f5f5f5;
+ background-repeat: no-repeat;
+ color: #333 !important;
+ padding: 1em;
+ text-transform: uppercase;
+ font-size: 0.6875em;
+ font-family: $meta-font;
+ font-weight: normal;
+ line-height: 1.2em;
+ white-space: normal;
+ border-radius: 0;
+
+ &:hover, &.hover {
+ text-decoration:none;
+ background-color:#333;
+ color: #fff !important;
+ }
+
+ &:after {
+ content: "";
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ margin-#{$left}: 0.5em;
+ vertical-align: -0.25em;
+ background-size: 112px 16px;
+ background-repeat: no-repeat;
+ @include svg-background-image('/cobrands/fixmystreet/images/report-tools');
+ }
+
+ &.abuse:after {
+ background-position: -96px 0;
+ }
+
+ &.feed:after {
+ background-position: -64px 0;
+ }
+
+ &.share:after {
+ background-position: -80px 0;
+ }
+
+ &.chevron:after {
+ @if ($right == 'right') {
+ background-position: -16px 0;
+ } @else {
+ background-position: 0 0;
}
}
}
@@ -640,16 +650,16 @@ ul.error {
//because display:table doesn't work we float
.ie7 {
- .shadow-wrap {
- ul#key-tools{
- background:#f5f5f5;
- li{
- float: $left;
- a {
- padding-#{$left}: 1.5em;
- padding-#{$right}: 3em;
- }
- }
+ #key-tools {
+ background: #f5f5f5;
+
+ li {
+ float: $left;
+ }
+
+ a {
+ padding-#{$left}: 1.5em;
+ padding-#{$right}: 3em;
}
}
}
@@ -1288,14 +1298,28 @@ input.final-submit {
line-height: 1.2em;
margin-bottom: 1em;
padding-bottom: 0.8em;
- padding-#{$left}: 22px;
- background: transparent url(/cobrands/fixmystreet/images/chevron-grey-#{$left}.svg) #{$left} 0 no-repeat;
- background-size: 13px 16px;
border-bottom: 1px solid #eee;
&:link, &:visited, &:hover {
color: #666;
}
+
+ &:before {
+ content: "";
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ margin-#{$right}: 0.5em;
+ vertical-align: -0.15em;
+ background-size: 112px 16px;
+ background-repeat: no-repeat;
+ @include svg-background-image('/cobrands/fixmystreet/images/report-tools');
+ @if ($right == 'right') {
+ background-position: 0 0;
+ } @else {
+ background-position: -16px 0;
+ }
+ }
}
.problem-header {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 7fd33a53f..545701279 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -678,58 +678,6 @@ body.authpage {
overflow: hidden;
padding-top: 2em;
- ul#key-tools {
- border-top: 0.25em solid $primary;
- margin: 0;
- @include box-shadow(0 0 1em 1em #fff);
- li {
- border:none;
- a, input[type=submit] {
- font-size: 0.75em;
- line-height: 18px; // match `body`
- color:#666;
- padding: flip(0.5em 1.5em 0.5em 0, 0.5em 0 0.5em 1.5em);
- text-transform:none;
- &.abuse {
- background-image:url($image-sprite);
- background-position: flip(right, -337px) -2935px;
- }
- &.feed {
- background-image:url($image-sprite);
- background-position: flip(right, -337px) -3074px;
- }
- &.share {
- min-width: 5em;
- background-image: url(/cobrands/fixmystreet/images/share.png);
- background-position: flip(80%, 20%) 50%;
- }
- &.chevron {
- border-#{$right}: solid 1em transparent;
- padding-#{$right}: 0.5em;
- background-position: $right 50%;
- background-size: 12px 15px;
- }
- &.chevron.hover {
- // Reset things that changed
- border-#{$right}: none;
- padding-#{$right}: 1.5em;
- background-size: auto auto;
- }
- &.hover {
- background-image: url($image-sprite);
- background-position: flip(right, -337px) -1876px;
- }
- }
- }
- &.singleton {
- li {
- text-align: $right;
- a {
- padding-#{$right}: 3em;
- }
- }
- }
- }
&.static {
padding: 0 0 1em;
position: static;
@@ -737,6 +685,29 @@ body.authpage {
}
}
+#key-tools {
+ border-top: 0.25em solid $primary;
+ margin: 0;
+ @include box-shadow(0 0 1em 1em #fff);
+
+ li {
+ border-#{$right}: none; // undo border-right/left from _base.scss
+
+ // Cancel centre alignment, if the *only child* in list.
+ &:first-child:last-child {
+ text-align: $right;
+ }
+ }
+
+ a, button {
+ font-size: 0.75em;
+ line-height: 18px; // match `body`
+ color: #666;
+ padding: 0.5em;
+ text-transform: none; // undo uppercase from _base.scss
+ }
+}
+
// If JS is disabled, these are still CSS positioned, so don't want behind shining through.
#report-share, #report-updates-data {
background-color: #fff;
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-04 21:34:22 +0000