From 95b8040c8b94240fbcfc29725669950a1d9a420b Mon Sep 17 00:00:00 2001
From: Katherine Martin <78093815+martikat@users.noreply.github.com>
Date: Mon, 29 Jul 2024 13:45:29 +0100
Subject: [PATCH] ER-922 Review Summary Page Update (#1273)

---
 app/assets/stylesheets/card.scss              |  4 +++
 app/assets/stylesheets/module-overview.scss   | 33 ++++++++++++++++---
 app/decorators/module_overview_decorator.rb   |  2 +-
 .../training/modules/_subsection.html.slim    | 10 +++---
 config/locales/en.yml                         |  1 +
 .../module_overview_decorator_spec.rb         |  8 ++---
 spec/lib/seed_snippets_spec.rb                |  2 +-
 7 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/card.scss b/app/assets/stylesheets/card.scss
index 9afd8ef74..77d15918a 100644
--- a/app/assets/stylesheets/card.scss
+++ b/app/assets/stylesheets/card.scss
@@ -115,6 +115,10 @@
     }
   }
 
+  .govuk-tag {
+    max-width: 100%;
+  }
+
   &:hover &-link--retake {
     &:hover {
       color: govuk-colour('light-grey');
diff --git a/app/assets/stylesheets/module-overview.scss b/app/assets/stylesheets/module-overview.scss
index ea2cfb37f..d4e99224d 100644
--- a/app/assets/stylesheets/module-overview.scss
+++ b/app/assets/stylesheets/module-overview.scss
@@ -20,6 +20,10 @@ $progress-bar-container-width: 81px;
   display: grid;
   grid-template-columns: $progress-bar-container-width auto;
 
+  @include govuk-media-query($until: tablet) {
+    grid-template-columns: 50px auto;
+  }
+
   .icon {
     border-radius: 50%;
     width: $icon-diameter;
@@ -29,6 +33,7 @@ $progress-bar-container-width: 81px;
     align-items: center;
     font-weight: bold;
     z-index: 2;
+    position: absolute;
 
     &.completed {
       background-color: govuk-colour('blue');
@@ -55,11 +60,7 @@ $progress-bar-container-width: 81px;
     border-left: 1px solid govuk-colour('mid-grey');
     position: relative;
     z-index: 1;
-    right: $line-shift + 7.5px;
-    
-    @include govuk-media-query($from: tablet) {
-      right: $line-shift + 10px;
-    }
+    right: -18px;
   }
 
   .module-section--container {
@@ -75,6 +76,28 @@ $progress-bar-container-width: 81px;
   }
 }
 
+.module-section--item {
+  font-size: 1.1875rem;
+
+  ul {
+    list-style-type: disc;
+    padding-left: 15px;
+    margin-bottom: 0;
+
+    @include govuk-media-query($until: tablet) {
+      padding-left: 10px;
+    }
+  }
+
+  li {
+    list-style: square;
+  }
+
+  ul > li:last-child {
+    margin-bottom: 0;
+}
+}
+
 #module-call-to-action {
   @include govuk-responsive-margin(8, 'top');
 }
diff --git a/app/decorators/module_overview_decorator.rb b/app/decorators/module_overview_decorator.rb
index 819d81cbf..2cc0ba085 100644
--- a/app/decorators/module_overview_decorator.rb
+++ b/app/decorators/module_overview_decorator.rb
@@ -93,7 +93,7 @@ def heading(page)
   # @param pages [Array<Training::Page, Training::Question, Training::Video>]
   # @return [String]
   def page_count(pages)
-    "(Pages #{pages.size})" unless pages.one?
+    I18n.t('my_learning.page_count', num: pages.size) unless pages.one?
   end
 
   # @param submodule [Integer]
diff --git a/app/views/training/modules/_subsection.html.slim b/app/views/training/modules/_subsection.html.slim
index 83a3f7d17..27856edcd 100644
--- a/app/views/training/modules/_subsection.html.slim
+++ b/app/views/training/modules/_subsection.html.slim
@@ -1,6 +1,8 @@
 span.module-section--item
-  - if next_page_name
-    = govuk_link_to heading, training_module_page_path(mod_name, next_page_name)
-  - else
-    = heading
+  ul
+    li
+      - if next_page_name
+        = govuk_link_to heading, training_module_page_path(mod_name, next_page_name)
+      - else
+        = heading
 span.progress-indicator= progress_indicator(status)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d28ee53fd..2b0beca66 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -292,6 +292,7 @@ en:
     new_tag:
       card: NEW
       section: NEW MODULE AVAILABLE
+    page_count: (%{num} pages)
 
   my_learning_log:
     title: Learning log
diff --git a/spec/decorators/module_overview_decorator_spec.rb b/spec/decorators/module_overview_decorator_spec.rb
index 31b0c424a..53e9fd239 100644
--- a/spec/decorators/module_overview_decorator_spec.rb
+++ b/spec/decorators/module_overview_decorator_spec.rb
@@ -21,10 +21,10 @@
 
     it 'counts pages' do
       expect(output.map { |s| s[:page_count] }).to eq [
-        '(Pages 4)',
-        '(Pages 5)',
-        '(Pages 20)',
-        '(Pages 9)',
+        '(4 pages)',
+        '(5 pages)',
+        '(20 pages)',
+        '(9 pages)',
         nil,
       ]
     end
diff --git a/spec/lib/seed_snippets_spec.rb b/spec/lib/seed_snippets_spec.rb
index 9235f7bbf..e410b3529 100644
--- a/spec/lib/seed_snippets_spec.rb
+++ b/spec/lib/seed_snippets_spec.rb
@@ -5,7 +5,7 @@
   subject(:locales) { described_class.new.call }
 
   it 'converts all translations' do
-    expect(locales.count).to be 200
+    expect(locales.count).to be 201
   end
 
   it 'dot separated key -> Page::Resource#name' do