diff --git a/app/views/case_logs/_tasklist.html.erb b/app/views/case_logs/_tasklist.html.erb index 8d20a0cee..6c240d616 100644 --- a/app/views/case_logs/_tasklist.html.erb +++ b/app/views/case_logs/_tasklist.html.erb @@ -1,10 +1,8 @@ -
<%= section.description.html_safe %>
diff --git a/app/views/case_logs/edit.html.erb b/app/views/case_logs/edit.html.erb index 7b5f868d7..6c8b38e93 100644 --- a/app/views/case_logs/edit.html.erb +++ b/app/views/case_logs/edit.html.erb @@ -7,23 +7,25 @@ <%= turbo_frame_tag "case_log_form", target: "_top" do %>You’ve completed <%= get_subsections_count(@case_log, :completed) %> of <%= get_subsections_count(@case_log, :all) %> sections.
-- <% next_incomplete_section = get_next_incomplete_section(@case_log).id %> - You have completed <%= get_subsections_count(@case_log, :completed) %> of <%= get_subsections_count(@case_log, :all) %> sections.
++ <% next_incomplete_section = get_next_incomplete_section(@case_log) %> +
+ <%= render "tasklist" %> diff --git a/app/webpacker/styles/_section-skip-link.scss b/app/webpacker/styles/_section-skip-link.scss new file mode 100644 index 000000000..32e683b82 --- /dev/null +++ b/app/webpacker/styles/_section-skip-link.scss @@ -0,0 +1,9 @@ +.app-section-skip-link { + @include govuk-visually-hidden-focusable; + @include govuk-typography-common; + @include govuk-link-decoration; + @include govuk-link-style-text; + + display: inline-block; + padding: govuk-spacing(2) govuk-spacing(3); +} diff --git a/app/webpacker/styles/_task-list.scss b/app/webpacker/styles/_task-list.scss index 603a6d55c..5d977419f 100644 --- a/app/webpacker/styles/_task-list.scss +++ b/app/webpacker/styles/_task-list.scss @@ -1,28 +1,19 @@ - -// Task list pattern - .app-task-list { list-style-type: none; padding-left: 0; margin-top: 0; margin-bottom: 0; + @include govuk-media-query($from: tablet) { - min-width: 550px; + min-width: 400px; } } -.app-task-list__section { - display: table; +.app-task-list__section-heading { @include govuk-font($size:24, $weight: bold); -} - -.app-task-list__section-number { - display: table-cell; - - @include govuk-media-query($from: tablet) { - min-width: govuk-spacing(6); - padding-right: 0; - } + display: table; + margin-top: govuk-spacing(0); + margin-bottom: govuk-spacing(4); } .app-task-list__items { @@ -30,17 +21,13 @@ @include govuk-responsive-margin(9, "bottom"); list-style: none; padding-left: 0; - @include govuk-media-query($from: tablet) { - padding-left: govuk-spacing(6); - } } .app-task-list__item { + @include govuk-clearfix; border-bottom: 1px solid $govuk-border-colour; - margin-bottom: 0 !important; padding-top: govuk-spacing(2); padding-bottom: govuk-spacing(2); - @include govuk-clearfix; } .app-task-list__item:first-child { @@ -49,16 +36,13 @@ .app-task-list__task-name { display: block; + @include govuk-media-query($from: 450px) { float: left; } } -// The `app-task-list__task-completed` class was previously used on the task -// list for the completed tag (changed in 86c90ec) – it's still included here to -// avoid breaking task lists in existing prototypes. -.app-task-list__tag, -.app-task-list__task-completed { +.app-task-list__tag { margin-top: govuk-spacing(2); margin-bottom: govuk-spacing(1); @@ -68,21 +52,3 @@ margin-bottom: 0; } } - - -//custom -.app-task-list { - &__item:target { - } - &--no-numbers &__items { - @include govuk-media-query($from: tablet) { - padding-left: 0; - } - } -} - -.app-task-list__item:target, -.tasklist_item_highlight{ - background-color: $govuk-focus-colour; - box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; -} diff --git a/app/webpacker/styles/application.scss b/app/webpacker/styles/application.scss index 7761e4891..e9d79b7bf 100644 --- a/app/webpacker/styles/application.scss +++ b/app/webpacker/styles/application.scss @@ -15,6 +15,7 @@ $govuk-global-styles: true; @import "accessible-autocomplete"; @import "input"; @import "related-navigation"; +@import "section-skip-link"; @import "task-list"; @import "tab-navigation"; diff --git a/spec/features/form/tasklist_page_spec.rb b/spec/features/form/tasklist_page_spec.rb index f0ecd6ea0..ba731e05e 100644 --- a/spec/features/form/tasklist_page_spec.rb +++ b/spec/features/form/tasklist_page_spec.rb @@ -33,12 +33,12 @@ RSpec.describe "Task List" do it "shows the number of completed sections if no sections are completed" do visit("/logs/#{empty_case_log.id}") - expect(page).to have_content("You’ve completed 0 of 9 sections.") + expect(page).to have_content("You have completed 0 of 9 sections.") end it "shows the number of completed sections if one section is completed" do answer_all_questions_in_income_subsection(empty_case_log) visit("/logs/#{empty_case_log.id}") - expect(page).to have_content("You’ve completed 1 of 9 sections.") + expect(page).to have_content("You have completed 1 of 9 sections.") end end