diff --git a/app/components/finance/npq/payment_overviews/contract_info.html.erb b/app/components/finance/npq/payment_overviews/contract_info.html.erb index 918f5b483b..ee7d01977c 100644 --- a/app/components/finance/npq/payment_overviews/contract_info.html.erb +++ b/app/components/finance/npq/payment_overviews/contract_info.html.erb @@ -1,31 +1,34 @@ -
- - <%= t("finance.contract_information") %> - -
- - - - - - - - - - <% @npq_contracts.each do |contract| %> - - - - - - <% end %> - -
- <%= t("finance.contract.course_identifier") %> - - <%= t("finance.contract.recruitment_target") %> - - <%= t("finance.per_participant") %> -
<%= contract.course_identifier %><%= contract.recruitment_target %><%= number_to_pounds contract.per_participant %>
-
-
+
+
+
+ + <%= t("finance.contract_information") %> + +
+ + + + + + + + + + <% @npq_contracts.each do |contract| %> + + + + + + <% end %> + +
+ <%= t("finance.contract.course_identifier") %> + + <%= t("finance.contract.recruitment_target") %> + + <%= t("finance.per_participant") %> +
<%= contract.course_identifier %><%= contract.recruitment_target %><%= number_to_pounds contract.per_participant %>
+
+
+
diff --git a/app/components/finance/npq/payment_overviews/course.html.erb b/app/components/finance/npq/payment_overviews/course.html.erb index efc9d89f28..2fd00cfa0e 100644 --- a/app/components/finance/npq/payment_overviews/course.html.erb +++ b/app/components/finance/npq/payment_overviews/course.html.erb @@ -16,13 +16,13 @@ Payment details - +
- - + + @@ -30,8 +30,8 @@ - - + + <% if calculator.refundable_declarations_count.positive? %> @@ -39,8 +39,8 @@ - - + + <% end %> <% end %> @@ -49,16 +49,16 @@ - - + + <% if calculator.targeted_delivery_funding_refundable_declarations_count > 0 %> - - + + <% end %> <% end %> @@ -66,8 +66,8 @@ - - + +
<%= t("finance.payment_type") %> <%= t("finance.course.participants") %><%= t("finance.course.payment_per_participant") %><%= t("finance.total") %><%= t("finance.course.payment_per_participant") %><%= t("finance.total") %>
<%= t("finance.output_payment.label") %> <%= calculator.billable_declarations_count %><%= number_to_pounds calculator.output_payment_per_participant %><%= number_to_pounds calculator.output_payment_subtotal %><%= number_to_pounds calculator.output_payment_per_participant %><%= number_to_pounds calculator.output_payment_subtotal %>
Clawbacks - <%= type.humanize %> <%= count %><%= number_to_pounds -calculator.output_payment_per_participant %><%= number_to_pounds -(count * calculator.output_payment_per_participant) %><%= number_to_pounds -calculator.output_payment_per_participant %><%= number_to_pounds -(count * calculator.output_payment_per_participant) %>
<%= t("finance.targeted_delivery_funding.caption") %> <%= calculator.targeted_delivery_funding_declarations_count %><%= number_to_pounds calculator.targeted_delivery_funding_per_participant %><%= number_to_pounds calculator.targeted_delivery_funding_subtotal %><%= number_to_pounds calculator.targeted_delivery_funding_per_participant %><%= number_to_pounds calculator.targeted_delivery_funding_subtotal %>
Clawbacks <%= calculator.targeted_delivery_funding_refundable_declarations_count %><%= number_to_pounds -calculator.targeted_delivery_funding_per_participant %><%= number_to_pounds -calculator.targeted_delivery_funding_refundable_subtotal %><%= number_to_pounds -calculator.targeted_delivery_funding_per_participant %><%= number_to_pounds -calculator.targeted_delivery_funding_refundable_subtotal %>
<%= t("finance.service_fee.caption") %> <%= calculator.recruitment_target %><%= number_to_pounds calculator.service_fees_per_participant %><%= number_to_pounds calculator.monthly_service_fees %><%= number_to_pounds calculator.service_fees_per_participant %><%= number_to_pounds calculator.monthly_service_fees %>
diff --git a/app/views/finance/ecf/statements/show.html.erb b/app/views/finance/ecf/statements/show.html.erb index 809dcf439d..747049aa1a 100644 --- a/app/views/finance/ecf/statements/show.html.erb +++ b/app/views/finance/ecf/statements/show.html.erb @@ -165,14 +165,14 @@ <% table.head do |head| %> <% head.row do |row| %> <% row.cell(header: true, text: "Number of participants") %> - <% row.cell(header: true, text: "Fee per participant") %> + <% row.cell(header: true, text: "Fee per participant", numeric: true) %> <% row.cell(header: true, text: "Payments", numeric: true) %> <% end %> <% table.body do |body| %> <% body.row do |row| %> <% row.cell(text: @calculator.uplift_additions_count) %> - <% row.cell(text: number_to_pounds(@calculator.uplift_fee_per_declaration)) %> + <% row.cell(text: number_to_pounds(@calculator.uplift_fee_per_declaration), numeric: true) %> <% row.cell(text: number_to_pounds(@calculator.uplift_additions_count * @calculator.uplift_fee_per_declaration), numeric: true) %> <% end %> <% end %> @@ -188,7 +188,7 @@ <% head.row do |row| %> <% row.cell(header: true, text: "Adjustment type") %> <% row.cell(header: true, text: "Number of participants") %> - <% row.cell(header: true, text: "Fee per participant") %> + <% row.cell(header: true, text: "Fee per participant", numeric: true) %> <% row.cell(header: true, text: "Payments", numeric: true) %> <% end %> @@ -196,7 +196,7 @@ <% body.row do |row| %> <% row.cell(text: "Uplift clawbacks") %> <% row.cell(text: @calculator.uplift_deductions_count) %> - <% row.cell(text: number_to_pounds(-@calculator.uplift_fee_per_declaration)) %> + <% row.cell(text: number_to_pounds(-@calculator.uplift_fee_per_declaration), numeric: true) %> <% row.cell(text: number_to_pounds(@calculator.uplift_deductions_count * -@calculator.uplift_fee_per_declaration), numeric: true) %> <% end %> diff --git a/app/views/layouts/_application.html.erb b/app/views/layouts/_application.html.erb index 9d59574bd5..7210b3c8e9 100644 --- a/app/views/layouts/_application.html.erb +++ b/app/views/layouts/_application.html.erb @@ -70,7 +70,7 @@ <%= render "cookies/banner" %> <% end %> - <%= govuk_header(service_name:) do |header| + <%= govuk_header(service_name:, container_classes: ("govuk-width-container__wide" if wide_container_view?)) do |header| if user_signed_in? header.navigation_item(text: "Sign out", href: destroy_user_session_path) end diff --git a/app/webpacker/styles/application.scss b/app/webpacker/styles/application.scss index d826fdd237..cf17517b84 100644 --- a/app/webpacker/styles/application.scss +++ b/app/webpacker/styles/application.scss @@ -55,10 +55,9 @@ $govuk-image-url-function: frontend-image-url; } .govuk-width-container__wide { - @media (min-width: 1110px) { - min-width: 1250px; + @media (min-width: 1280px) { + max-width: 1250px; + margin-left: auto; + margin-right: auto; } - - margin-left: auto; - margin-right: auto; } diff --git a/app/webpacker/styles/components/statement_selector.scss b/app/webpacker/styles/components/statement_selector.scss index 7a704c8d36..1cec41c233 100644 --- a/app/webpacker/styles/components/statement_selector.scss +++ b/app/webpacker/styles/components/statement_selector.scss @@ -3,14 +3,18 @@ .govuk-form-group { display: inline-block; - margin-right: 20px; margin-bottom: 0; + margin-right: 8px; + + @include govuk-media-query($until: desktop) { + width: 100% !important; + } } select { @extend .govuk-\!-width-full; // hack as form builder does not seem to support injecting of classes where needed - @include govuk-media-query($until: tablet) { + @include govuk-media-query($until: desktop) { margin-bottom: 15px; } } diff --git a/app/webpacker/styles/lead_providers/statements.scss b/app/webpacker/styles/lead_providers/statements.scss index 583da07dc2..1bb92a5d84 100644 --- a/app/webpacker/styles/lead_providers/statements.scss +++ b/app/webpacker/styles/lead_providers/statements.scss @@ -8,8 +8,8 @@ grid-template-columns: 1fr; grid-template-rows: 1fr; grid-auto-flow: row; - grid-row-gap: 0; - grid-column-gap: 0; + grid-row-gap: 1rem; + grid-column-gap: 1rem; .duvet { border-top: 1px solid #b1b4b6; @@ -55,6 +55,10 @@ display: flex; justify-content: space-between; } + + h4.govuk-heading-l { + font-size: 1.9rem; + } } .app-application__panel { @@ -64,17 +68,12 @@ border: none; flex: 1 1 100%; margin-bottom: 0 !important; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: row; grid-row-gap: 1rem; grid-column-gap: 1rem; - @media (min-width: 40.625em) { - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(3, auto); - } - @media (min-width: 68.75em) { grid-template-columns: 1fr; grid-template-rows: 1fr repeat(3, auto); @@ -88,6 +87,16 @@ @media (min-width: 40.625em) { margin-bottom: 10px; } + + @media (max-width: 558px) { + .table-responsive-max-width { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + } + } } .app-application-card__header { @@ -104,6 +113,9 @@ .finance-panel { padding: 20px 20px 10px 20px; background-color: #f8f8f8; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; &.finance-panel__summary { display: grid;