ER-886 Completed module styling update (#1283)

DFE-Digital · Jul 29, 2024 · d68e6d9 · d68e6d9
1 parent 95b8040
commit d68e6d9
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 32 deletions.
diff --git a/app/assets/stylesheets/module-overview.scss b/app/assets/stylesheets/module-overview.scss
@@ -76,6 +76,20 @@ $progress-bar-container-width: 81px;
   }
 }
 
+section.completed {
+  background-color: govuk-colour('light-grey');
+  border-radius: 6px;
+  padding: govuk-spacing(7);
+
+  @include govuk-media-query($until: tablet) {
+    padding: govuk-spacing(4);
+  }
+}
+
+.govuk-table {
+  margin-bottom: 0;
+}
+
 .module-section--item {
   font-size: 1.1875rem;
 
@@ -95,7 +109,7 @@ $progress-bar-container-width: 81px;
 
   ul > li:last-child {
     margin-bottom: 0;
-}
+  }
 }
 
 #module-call-to-action {

diff --git a/app/views/learning/show.html.slim b/app/views/learning/show.html.slim
@@ -13,37 +13,42 @@
 
 = render 'cms_debug'
 
-#started.govuk-grid-row
-  .govuk-grid-column-full
-    h2.govuk-heading-m Modules in progress
-    - if current_user.course.current_modules.none?
-      - if current_user.course.completed_modules.none?
-        p You have not started any modules. To begin the training course, start an available module.
-      - else
-        p You have not started any modules. Please choose an available module.
-    - else
-      .grid-container
-        - current_user.course.current_modules.each do |mod|
-          = render 'card', mod: mod, progress: module_progress(mod)
-
-- if current_user.course.available_modules.any? || current_user.course.course_completed?
-  hr.govuk-section-break.govuk-section-break--visible.govuk-section-break--l
-  #available.govuk-grid-row
+- if current_user.course.completed_modules.all? && current_user.course.upcoming_modules.none?
+  #started.govuk-grid-row
     .govuk-grid-column-full
-      h2.govuk-heading-m
-        | Available modules
-        - if current_user.content_changes.new_modules?
-          span.govuk-tag
-            = t('my_learning.new_tag.section')
-      - if current_user.course.available_modules.any?
+      p You have completed all available modules. You may use the links below to revisit any of the course content.
+- else
+  #started.govuk-grid-row
+    .govuk-grid-column-full
+      h2.govuk-heading-m Modules in progress
+      - if current_user.course.current_modules.none?
+        - if current_user.course.completed_modules.none?
+          p You have not started any modules. To begin the training course, start an available module.
+        - else
+          p You have not started any modules. Please choose an available module.
+      - else
         .grid-container
-          - current_user.course.available_modules.each do |mod|
-            = render 'card', mod: mod, progress: false
+          - current_user.course.current_modules.each do |mod|
+            = render 'card', mod: mod, progress: module_progress(mod)
 
-      - elsif current_user.course.course_completed?
-        p You do not have any modules available.
+  - if current_user.course.available_modules.any? || current_user.course.course_completed?
+    hr.govuk-section-break.govuk-section-break--visible.govuk-section-break--l
+    #available.govuk-grid-row
+      .govuk-grid-column-full
+        h2.govuk-heading-m
+          | Available modules
+          - if current_user.content_changes.new_modules?
+            span.govuk-tag
+              = t('my_learning.new_tag.section')
+        - if current_user.course.available_modules.any?
+          .grid-container
+            - current_user.course.available_modules.each do |mod|
+              = render 'card', mod: mod, progress: false
 
-- if current_user.course.upcoming_modules.any?
+        - elsif current_user.course.course_completed?
+          p You do not have any modules available.
+
+  - if current_user.course.upcoming_modules.any?
   hr.govuk-section-break.govuk-section-break--visible.govuk-section-break--l
   #upcoming.govuk-grid-row
     .govuk-grid-column-full
@@ -60,9 +65,9 @@
                 course_overview_path + mod.card_anchor
 
 - if current_user.course.completed_modules.any?
-  hr.govuk-section-break.govuk-section-break--visible.govuk-section-break--l
-  #completed.govuk-grid-row
-    .govuk-grid-column-three-quarters-from-desktop
-      = completed_modules_table
+  section.completed class=(current_user.course.completed_modules.all? && current_user.course.upcoming_modules.none? ? '' : 'govuk-!-margin-top-7')
+    #completed.govuk-grid-row
+      .govuk-grid-column-full
+        = completed_modules_table
 
 = render 'debug'