Skip to content

Waste nicer mobile view #5793

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
lucascumsille wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Waste nicer mobile view #5793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6f38286
[Bromley] Tidy garden overdue message location.
dracos Nov 6, 2025
ff3f187
[Waste] Nicer mobile display of bin days.
dracos Nov 6, 2025
7d9df50
[Waste] New layout for Bin days serviced
lucascumsille Dec 23, 2025
b7e4c69
[Waste] Minor styling/spacing improvements 'Your bin days' page
lucascumsille Dec 23, 2025
97337b9
fixup! [Waste] New layout for Bin days serviced
dracos Jan 13, 2026
fe86ccb
fixup! [Waste] New layout for Bin days serviced
dracos Jan 13, 2026
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
507 changes: 269 additions & 238 deletions templates/web/base/waste/bin_days.html
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 19 additions & 17 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,14 @@
<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">
[% IF property.garden_signup_eligible %]
<div class="waste-service-grid">
<div class="waste-service-grid--service-name">
<h3 class="govuk-heading-m waste-service-name">
Brown Wheelie Bin
</h3>
</div>
<div class="waste-service-grid--service-image">
<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="waste-service-grid--service-description">
<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 @@ -19,15 +20,17 @@ <h3 class="govuk-heading-m waste-service-name">
</div>
</div>
</div>
[% ELSIF property.garden_api_error %]
<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">
[% ELSIF property.garden_api_error %]
<div class="waste-service-grid">
<div class="waste-service-grid--service-name">
<h3 class="govuk-heading-m waste-service-name">
Brown Wheelie Bin
</h3>
</div>
<div class="waste-service-grid--service-image">
<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="waste-service-grid--service-description">
<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 All @@ -37,7 +40,7 @@ <h3 class="govuk-heading-m waste-service-name">
</div>
</div>
</div>
[% END %]
[% END %]

[%# Allow superusers to see red tags and service updates for debugging purposes %]
[% IF c.user.is_superuser %]
Expand Down Expand Up @@ -134,4 +137,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 %]

10 changes: 6 additions & 4 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,14 @@
[% 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="waste-service-grid">
<div class="waste-service-grid--service-name">
<h3 class="govuk-heading-m waste-service-name">Batteries, small electrical items and textiles</h3>
</div>
<div class="waste-service-grid--service-image">
<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="waste-service-grid--service-description">
<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 %]
48 changes: 47 additions & 1 deletion 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 All @@ -72,6 +90,35 @@ body.waste {
}
}

.waste-service-grid {
display: grid;
column-gap: 1rem;
row-gap: 0;

grid-template-columns: 25% 75%;
grid-template-areas:
"image name"
"description description";

&--service-name {
grid-area: name;
}

&--service-image {
grid-area: image;
}

&--service-description {
grid-area: description;
}

@media (min-width: $large-screen) {
grid-template-areas:
"name name"
"image description";
}
}

.waste-service-image {
max-width: 100%;
max-height: 140px;
Expand Down Expand Up @@ -153,7 +200,6 @@ body.waste {

.waste-service-name.govuk-heading-m {
margin-top: 1.5em;
border-bottom: 1px solid #808080;
padding-bottom: 0.5em;
}

Expand Down