From 9fab260eee6034f833cf3e30066237196ca17e24 Mon Sep 17 00:00:00 2001 From: natdeanlewissoftwire Date: Tue, 23 Jan 2024 10:30:30 +0000 Subject: [PATCH] feat: update formatting so 4 tabs don't wrap on small screen sizes, but links still wrap in list view --- .../document_list_component.html.erb | 1 + app/components/document_list_component.rb | 5 +- app/frontend/styles/_document-list.scss | 4 - app/frontend/styles/_tab.scss | 9 + app/frontend/styles/application.scss | 1 + .../layouts/_collection_resources.html.erb | 180 ++++++++++-------- app/views/start/index.html.erb | 2 +- 7 files changed, 112 insertions(+), 90 deletions(-) create mode 100644 app/frontend/styles/_tab.scss diff --git a/app/components/document_list_component.html.erb b/app/components/document_list_component.html.erb index c5b7affc5..60f33e965 100644 --- a/app/components/document_list_component.html.erb +++ b/app/components/document_list_component.html.erb @@ -1,3 +1,4 @@ +

<%= label %>

<% items.each do |item| %>
diff --git a/app/components/document_list_component.rb b/app/components/document_list_component.rb index 253370c98..e5ad9c843 100644 --- a/app/components/document_list_component.rb +++ b/app/components/document_list_component.rb @@ -1,8 +1,9 @@ class DocumentListComponent < ViewComponent::Base - attr_reader :items + attr_reader :items, :label - def initialize(items:) + def initialize(items:, label:) @items = items + @label = label super end end diff --git a/app/frontend/styles/_document-list.scss b/app/frontend/styles/_document-list.scss index be4efe92f..e8cef0625 100644 --- a/app/frontend/styles/_document-list.scss +++ b/app/frontend/styles/_document-list.scss @@ -11,10 +11,6 @@ } } -.app-document-list__tab { - @include govuk-font($size: 16); -} - .app-document-list__item-title { @include govuk-font($size: 16); margin: 0 0 govuk-spacing(1); diff --git a/app/frontend/styles/_tab.scss b/app/frontend/styles/_tab.scss new file mode 100644 index 000000000..97145c3c1 --- /dev/null +++ b/app/frontend/styles/_tab.scss @@ -0,0 +1,9 @@ +.app-tab__small-headers { + @include govuk-font(16); +} + +@media (min-width: 35.375em) { + .app-tab__list-view { + min-width: 35.375em; + } +} diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss index 6309425de..a81214894 100644 --- a/app/frontend/styles/application.scss +++ b/app/frontend/styles/application.scss @@ -38,6 +38,7 @@ $govuk-breakpoints: ( @import "metadata"; @import "related-navigation"; @import "section-skip-link"; +@import "tab"; @import "table-group"; @import "tag"; @import "task-list"; diff --git a/app/views/layouts/_collection_resources.html.erb b/app/views/layouts/_collection_resources.html.erb index aa79d2dac..915a50de4 100644 --- a/app/views/layouts/_collection_resources.html.erb +++ b/app/views/layouts/_collection_resources.html.erb @@ -5,95 +5,109 @@

Collection resources

<% end %>

Use the 2023 to 2024 forms for lettings that start and sales that complete between 1 April 2023 and 31 March 2024.

-<%= govuk_tabs(title: "Collection resources", classes: ["app-document-list__tab"]) do |c| %> +
+<%= govuk_tabs(title: "Collection resources", classes: ["app-tab__small-headers"]) do |c| %> <% if FormHandler.instance.lettings_form_for_start_year(2024) && FormHandler.instance.lettings_form_for_start_year(2024).edit_end_date > Time.zone.today %> - <% c.with_tab(label: "Lettings 2024/25") do %> - <%= render DocumentListComponent.new(items: [ - { - name: "Download the lettings log for tenants (2024 to 2025)", - href: download_24_25_lettings_form_path, - metadata: file_type_size_and_pages("2024_25_lettings_paper_form.pdf", number_of_pages: 8), - }, - { - name: "Download the lettings bulk upload template (2024 to 2025) – New question ordering", - href: download_24_25_lettings_bulk_upload_template_path, - metadata: file_type_size_and_pages("bulk-upload-lettings-template-2024-25.xlsx"), - }, - { - name: "Download the lettings bulk upload specification (2024 to 2025)", - href: download_24_25_lettings_bulk_upload_specification_path, - metadata: file_type_size_and_pages("bulk-upload-lettings-specification-2024-25.xlsx"), - }, - ]) %> + <% c.with_tab(label: "Lettings 24/25") do %> + <%= render DocumentListComponent.new( + items: [ + { + name: "Download the lettings log for tenants (2024 to 2025)", + href: download_24_25_lettings_form_path, + metadata: file_type_size_and_pages("2024_25_lettings_paper_form.pdf", number_of_pages: 8), + }, + { + name: "Download the lettings bulk upload template (2024 to 2025) – New question ordering", + href: download_24_25_lettings_bulk_upload_template_path, + metadata: file_type_size_and_pages("bulk-upload-lettings-template-2024-25.xlsx"), + }, + { + name: "Download the lettings bulk upload specification (2024 to 2025)", + href: download_24_25_lettings_bulk_upload_specification_path, + metadata: file_type_size_and_pages("bulk-upload-lettings-specification-2024-25.xlsx"), + }, + ], + label: "Lettings 2024/25" + ) %> <% end %> - <% c.with_tab(label: "Sales 2024/25") do %> - <%= render DocumentListComponent.new(items: [ - { - name: "Download the sales log for buyers (2024 to 2025)", - href: download_24_25_sales_form_path, - metadata: file_type_size_and_pages("2024_25_sales_paper_form.pdf", number_of_pages: 8), - }, - { - name: "Download the sales bulk upload template (2024 to 2025) – New question ordering", - href: download_24_25_sales_bulk_upload_template_path, - metadata: file_type_size_and_pages("bulk-upload-sales-template-2024-25.xlsx"), - }, - { - name: "Download the sales bulk upload specification (2024 to 2025)", - href: download_24_25_sales_bulk_upload_specification_path, - metadata: file_type_size_and_pages("bulk-upload-sales-specification-2024-25.xlsx"), - }, - ]) %> + <% c.with_tab(label: "Sales 24/25") do %> + <%= render DocumentListComponent.new( + items: [ + { + name: "Download the sales log for buyers (2024 to 2025)", + href: download_24_25_sales_form_path, + metadata: file_type_size_and_pages("2024_25_sales_paper_form.pdf", number_of_pages: 8), + }, + { + name: "Download the sales bulk upload template (2024 to 2025) – New question ordering", + href: download_24_25_sales_bulk_upload_template_path, + metadata: file_type_size_and_pages("bulk-upload-sales-template-2024-25.xlsx"), + }, + { + name: "Download the sales bulk upload specification (2024 to 2025)", + href: download_24_25_sales_bulk_upload_specification_path, + metadata: file_type_size_and_pages("bulk-upload-sales-specification-2024-25.xlsx"), + }, + ], + label: "Sales 2024/25" + ) %> <% end %> <% end %> <% if FormHandler.instance.lettings_form_for_start_year(2023) && FormHandler.instance.lettings_form_for_start_year(2023).edit_end_date > Time.zone.today %> - <% c.with_tab(label: "Lettings 2023/24") do %> - <%= render DocumentListComponent.new(items: [ - { - name: "Download the lettings log for tenants (2023 to 2024)", - href: download_23_24_lettings_form_path, - metadata: file_type_size_and_pages("2023_24_lettings_paper_form.pdf", number_of_pages: 8), - }, - { - name: "Download the lettings bulk upload template (2023 to 2024) – New question ordering", - href: download_23_24_lettings_bulk_upload_template_path, - metadata: file_type_size_and_pages("bulk-upload-lettings-template-2023-24.xlsx"), - }, - { - name: "Download the lettings bulk upload template (2023 to 2024) – Legacy version", - href: download_23_24_lettings_bulk_upload_legacy_template_path, - metadata: file_type_size_and_pages("bulk-upload-lettings-legacy-template-2023-24.xlsx"), - }, - { - name: "Download the lettings bulk upload specification (2023 to 2024)", - href: download_23_24_lettings_bulk_upload_specification_path, - metadata: file_type_size_and_pages("bulk-upload-lettings-specification-2023-24.xlsx"), - }, - ]) %> + <% c.with_tab(label: "Lettings 23/24") do %> + <%= render DocumentListComponent.new( + items: [ + { + name: "Download the lettings log for tenants (2023 to 2024)", + href: download_23_24_lettings_form_path, + metadata: file_type_size_and_pages("2023_24_lettings_paper_form.pdf", number_of_pages: 8), + }, + { + name: "Download the lettings bulk upload template (2023 to 2024) – New question ordering", + href: download_23_24_lettings_bulk_upload_template_path, + metadata: file_type_size_and_pages("bulk-upload-lettings-template-2023-24.xlsx"), + }, + { + name: "Download the lettings bulk upload template (2023 to 2024) – Legacy version", + href: download_23_24_lettings_bulk_upload_legacy_template_path, + metadata: file_type_size_and_pages("bulk-upload-lettings-legacy-template-2023-24.xlsx"), + }, + { + name: "Download the lettings bulk upload specification (2023 to 2024)", + href: download_23_24_lettings_bulk_upload_specification_path, + metadata: file_type_size_and_pages("bulk-upload-lettings-specification-2023-24.xlsx"), + }, + ], + label: "Lettings 2023/24" + ) %> <% end %> - <% c.with_tab(label: "Sales 2023/24") do %> - <%= render DocumentListComponent.new(items: [ - { - name: "Download the sales log for buyers (2023 to 2024)", - href: download_23_24_sales_form_path, - metadata: file_type_size_and_pages("2023_24_sales_paper_form.pdf", number_of_pages: 8), - }, - { - name: "Download the sales bulk upload template (2023 to 2024) – New question ordering", - href: download_23_24_sales_bulk_upload_template_path, - metadata: file_type_size_and_pages("bulk-upload-sales-template-2023-24.xlsx"), - }, - { - name: "Download the sales bulk upload template (2023 to 2024) – Legacy version", - href: download_23_24_sales_bulk_upload_legacy_template_path, - metadata: file_type_size_and_pages("bulk-upload-sales-legacy-template-2023-24.xlsx"), - }, - { - name: "Download the sales bulk upload specification (2023 to 2024)", - href: download_23_24_sales_bulk_upload_specification_path, - metadata: file_type_size_and_pages("bulk-upload-sales-specification-2023-24.xlsx"), - }, - ]) %> + <% c.with_tab(label: "Sales 23/24") do %> + <%= render DocumentListComponent.new( + items: [ + { + name: "Download the sales log for buyers (2023 to 2024)", + href: download_23_24_sales_form_path, + metadata: file_type_size_and_pages("2023_24_sales_paper_form.pdf", number_of_pages: 8), + }, + { + name: "Download the sales bulk upload template (2023 to 2024) – New question ordering", + href: download_23_24_sales_bulk_upload_template_path, + metadata: file_type_size_and_pages("bulk-upload-sales-template-2023-24.xlsx"), + }, + { + name: "Download the sales bulk upload template (2023 to 2024) – Legacy version", + href: download_23_24_sales_bulk_upload_legacy_template_path, + metadata: file_type_size_and_pages("bulk-upload-sales-legacy-template-2023-24.xlsx"), + }, + { + name: "Download the sales bulk upload specification (2023 to 2024)", + href: download_23_24_sales_bulk_upload_specification_path, + metadata: file_type_size_and_pages("bulk-upload-sales-specification-2023-24.xlsx"), + }, + ], + label: "Sales 2023/24" + ) %> <% end %> <% end %> <% end %> +
diff --git a/app/views/start/index.html.erb b/app/views/start/index.html.erb index 79abb5df7..b885ef717 100644 --- a/app/views/start/index.html.erb +++ b/app/views/start/index.html.erb @@ -22,7 +22,7 @@

Use your account details to sign in.

If you need to set up a new account, speak to your organisation’s CORE data coordinator. If you don’t know who that is, <%= govuk_link_to("contact the helpdesk", GlobalConstants::HELPDESK_URL) %>.

You can <%= govuk_mail_to("dluhc.digital-services@levellingup.gov.uk", "request an account", subject: "CORE: Request a new account") %> if your organisation doesn’t have one.

-

<%= govuk_link_to guidance_path do %>Guidance for submitting social housing lettings and sales data (CORE)<% end %>

+

<%= govuk_link_to guidance_path do %>Guidance for submitting social housing lettings and sales data (CORE)<% end %>

<%= render partial: "layouts/collection_resources" %>