Skip to content

[Waste] Always have quarter/three-quarter image/collections even on mobile #5730

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[Waste] Always have quarter/three-quarter image/collections even on mobile #5730

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
99a7e49
[Bromley] Tidy garden overdue message location.
dracos Nov 6, 2025
014d90b
[Waste] Nicer mobile display of bin days.
dracos Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions templates/web/base/waste/_service_missed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
[% END %]
</span>
[% ELSIF unit.next AND unit.next.state == 'In progress' %]
<span class="waste-service-descriptor" style="margin-top: 1.5em;">A missed collection cannot be reported on the day of collection until the crew have finished their round.</span>
<span class="waste-service-descriptor">A missed collection cannot be reported on the day of collection until the crew have finished their round.</span>
[% ELSIF NOT no_default %]
<span class="waste-service-descriptor" style="margin-top: 1.5em;">
<span class="waste-service-descriptor">
[% PROCESS 'waste/_service_missed_fallback.html' %]
</span>
[% END %]
Expand Down
37 changes: 30 additions & 7 deletions templates/web/base/waste/bin_days.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h3 class="govuk-heading-m waste-service-name">

[% SET image = c.cobrand.image_for_unit(unit) ~%]
[% IF image %]
<div class="govuk-grid-column-one-quarter text-centered">
<div class="govuk-grid-column govuk-grid-column-always-one-quarter text-centered">
[% IF c.cobrand.moniker == 'peterborough' %]
<h3 id="[% unit.service_name %]" class="govuk-heading-m waste-service-name">[% unit.service_name %]</h3>
[% END %]
Expand All @@ -84,7 +84,7 @@ <h3 id="[% unit.service_name %]" class="govuk-heading-m waste-service-name">[% u
<img src="[% image %].png" srcset="[% image %].png 1x, [% image %]@2x.png 2x" alt="" class="waste-service-image">
[% END %]
</div>
<div class="govuk-grid-column-three-quarters">
<div class="govuk-grid-column govuk-grid-column-always-three-quarters">
[% ELSE %]
<div class="govuk-grid-column-full">
[% IF c.cobrand.moniker == 'peterborough' %]
Expand All @@ -103,6 +103,25 @@ <h3 id="[% unit.service_name %]" class="govuk-heading-m waste-service-name">[% u

[% END %]

[% IF c.cobrand.moniker == 'bromley' AND unit.garden_overdue AND unit.garden_waste AND NOT waste_features.garden_renew_disabled %]
<div class="govuk-warning-text overdue">
<div class="govuk-warning-text__img">
<span class="govuk-warning-text__icon" aria-hidden="true">!</span>
</div>
<div class="govuk-warning-text__content">
<span class="govuk-warning-text__assistive">Warning</span>
<h3 class="govuk-heading-l govuk-warning-text__heading">Your subscription is now overdue.</h3>
Collections have been paused. They’ll start again when you renew.
[% WRAPPER 'waste/_garden_status_messages.html' %]
<form method="post" action="[% c.uri_for_action('waste/garden/renew', [ property.id ]) %]">
<input type="hidden" name="token" value="[% csrf_token %]">
<input type="submit" value="Renew subscription today" class="govuk-button">
</form>
[% END %]
</div>
</div>
[% END %]

[% IF !unit.garden_overdue %]

[% IF unit.garden_due AND NOT pending_subscription AND NOT waste_features.garden_disabled AND NOT waste_features.garden_renew_disabled %]
Expand Down Expand Up @@ -196,6 +215,10 @@ <h3 class="govuk-heading-l govuk-warning-text__heading">Your subscription is soo
</dl>
[% END %]
[% IF c.cobrand.moniker == 'peterborough' %]<hr>[% END %]
</div>
</div>
<div class="govuk-grid-row">
<div class="govuk-grid-column govuk-grid-column-wide-three-quarters">
<div class="waste-services-launch-panel" id="panel-[% unit.service_id %]">
[% PROCESS waste/services.html %]
</div>
Expand All @@ -222,15 +245,15 @@ <h3 id="bulky-waste" class="govuk-heading-m waste-service-name">[%
</p>
[% END %]
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter text-centered">
<div class="govuk-grid-column govuk-grid-column-always-one-quarter text-centered">
[% ELSE %]
<div class="govuk-grid-row waste-service-wrapper">
<div class="govuk-grid-column-one-quarter">
<div class="govuk-grid-column govuk-grid-column-always-one-quarter">
<h3 id="bulky-waste" class="govuk-heading-m">Bulky Waste</h3>
[% END %]
<img src="[% image %].png" srcset="[% image %].png 1x, [% image %]@2x.png 2x" alt="" class="waste-service-image">
</div>
<div class="govuk-grid-column-three-quarters">
<div class="govuk-grid-column govuk-grid-column-always-three-quarters">
[% IF c.cobrand.moniker == 'peterborough' %]<hr>[% END %]
[% IF property.commercial_property %]
[% PROCESS waste/_bulky_waste_message.html %]
Expand All @@ -252,10 +275,10 @@ <h3 id="bulky-waste" class="govuk-heading-m waste-service-name">Small items</h3>
</p>
[% END %]
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter text-centered">
<div class="govuk-grid-column govuk-grid-column-always-one-quarter text-centered">
<img src="[% image %].png" srcset="[% image %].png 1x, [% image %]@2x.png 2x" alt="" class="waste-service-image">
</div>
<div class="govuk-grid-column-three-quarters">
<div class="govuk-grid-column govuk-grid-column-always-three-quarters">
[% PROCESS 'waste/bulky/_bin_days_list.html' type='small_items' %]
</div>
</div>
Expand Down
10 changes: 4 additions & 6 deletions templates/web/bexley/waste/services_extra.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<div class="govuk-grid-row" id="in-cab-logs">
[% IF property.garden_signup_eligible %]
<h3 class="govuk-heading-m waste-service-name">
Brown Wheelie Bin
</h3>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter text-centered">
<div class="govuk-grid-column govuk-grid-column-always-one-quarter text-centered">
<img src="/i/waste-containers/bexley/garden-waste-brown-bin.png" alt="" class="waste-service-image">
</div>
<div class="govuk-grid-column-three-quarters">
<div class="govuk-grid-column govuk-grid-column-always-three-quarters">
<div class="waste-services-launch-panel" id="panel-GA-240">
<p><strong>Status:</strong> You do not have a Garden waste collection.
</p>
Expand All @@ -24,10 +23,10 @@ <h3 class="govuk-heading-m waste-service-name">
Brown Wheelie Bin
</h3>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter text-centered">
<div class="govuk-grid-column govuk-grid-column-always-one-quarter text-centered">
<img src="/i/waste-containers/bexley/garden-waste-brown-bin.png" alt="" class="waste-service-image">
</div>
<div class="govuk-grid-column-three-quarters">
<div class="govuk-grid-column govuk-grid-column-always-three-quarters">
<div class="waste-services-launch-panel" id="panel-GA-240">
<p><strong>Status:</strong> We're currently unable to check your garden waste subscription status.
</p>
Expand Down Expand Up @@ -134,4 +133,3 @@ <h3>[% tag.reason %]</h3>
[% END %]
</details>
[% END %]
</div>
45 changes: 0 additions & 45 deletions templates/web/bromley/waste/_service_missed.html
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions templates/web/bromley/waste/_service_missed_fallback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Please note that missed collections can only be reported within 2 working days of your scheduled collection day.
3 changes: 3 additions & 0 deletions templates/web/bromley/waste/_service_missed_open.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
A [% unit.service_name FILTER lower %] collection has been reported as missed
[% IF unit.report_open.report %] – <a href="[% unit.report_open.report.url %]" class="waste-service-link">check status</a>[% END %]

4 changes: 2 additions & 2 deletions templates/web/bromley/waste/services_extra.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
[% IF domestic_collection %]
<h3 class="govuk-heading-m waste-service-name">Batteries, small electrical items and textiles</h3>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter text-centered">
<div class="govuk-grid-column govuk-grid-column-always-one-quarter text-centered">
<img src="/i/waste-containers/electricals-batteries-textiles.png"
srcset="/i/waste-containers/electricals-batteries-textiles.png 1x, /i/waste-containers/[email protected] 2x"
alt="" class="waste-service-image">
</div>
<div class="govuk-grid-column-three-quarters">
<div class="govuk-grid-column govuk-grid-column-always-three-quarters">
<p>Please only present one small bag each week as we cannot handle high
volumes. If we do not collect your items, please bring them back inside and
present them for collection next week.</p>
Expand Down
4 changes: 2 additions & 2 deletions templates/web/merton/waste/_service_missed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
[% IF NOT unit.report_allowed AND NOT unit.report_locked_out AND NOT (unit.next AND unit.next.state == 'In progress') AND NOT no_default %]
<span class="waste-service-descriptor" style="margin-top: 1.5em;">
<span class="waste-service-descriptor">
[% PROCESS 'waste/_service_missed_fallback.html' %]
</span>
[% ELSIF unit.report_open %]
Expand All @@ -22,5 +22,5 @@
[% END %]
</span>
[% ELSIF unit.next AND unit.next.state == 'In progress' %]
<span class="waste-service-descriptor" style="margin-top: 1.5em;">A missed collection cannot be reported on the day of collection until the crew have finished their round.</span>
<span class="waste-service-descriptor">A missed collection cannot be reported on the day of collection until the crew have finished their round.</span>
[% END %]
18 changes: 18 additions & 0 deletions web/cobrands/sass/_waste.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,24 @@ body.waste {
}
}

.govuk-grid-column {
box-sizing: border-box;
padding: 0 15px;
}
.govuk-grid-column-always-one-quarter {
width: 25%;
float: left;
}
.govuk-grid-column-always-three-quarters {
width: 75%;
float: left;
}
@media (min-width: $large-screen) {
.govuk-grid-column-wide-three-quarters {
margin-left: 25%;
}
}

.waste__collections,
.waste__summary {
.govuk-summary-list {
Expand Down