Mobile finessing (#942)

* Mobile finessing * round 2
DFE-Digital · Nov 3, 2023 · 0c30552 · 0c30552
1 parent 598ac73
commit 0c30552
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 152 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -114,6 +114,12 @@ pre.code-tip {
   font-weight: normal;
 }
 
+.govuk-fieldset__legend {
+  @include govuk-media-query($until: tablet) {
+    display: none;
+  }
+}
+
 .light-grey-box {
   padding: govuk-spacing(5);
   margin-bottom: govuk-spacing(5);

diff --git a/app/assets/stylesheets/card.scss b/app/assets/stylesheets/card.scss
@@ -1,140 +1,3 @@
-.govuk-card__flex-container {
-  display: flex;
-  flex-wrap: wrap;
-  width:100%;
-}
-
-.govuk-card__flex-item {
-  display: flex;
-  overflow: hidden;
-}
-
-.govuk-card {
-  border-bottom: govuk-colour("blue") 3px solid;
-  box-sizing: border-box;
-  padding: 20px;
-  max-width: 300px;
-
-  &--contained {
-    background-color: govuk-colour("light-grey");
-  }
-
-  &--contained--on-background {
-    background-color: govuk-colour("white");
-  }
-}
-
-.card-container img {
-  max-width: 100%;
-}
-
-.govuk-card--borderless {
-  border: 0;
-  padding-bottom: 0;
-}
-
-.govuk-card--selectable {
-  position: relative;
-
-  h3 {
-    color: govuk-colour("blue");
-  }
-}
-
-.govuk-card--selectable > a {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.govuk-card--selectable:hover {
-  background-color: govuk-colour("blue");
-}
-
-.govuk-card--selectable:hover > .govuk-card__content > h3,
-.govuk-card--selectable:hover > .govuk-card__content > p,
-.govuk-card--selectable:hover > .govuk-card__content > h3 > a,
-.govuk-card--selectable:hover > .govuk-card__actions > ul > li > a {
-  color: govuk-colour("white") !important;
-}
-
-.govuk-card--selectable:hover .govuk-card__content a,
-.govuk-card--selectable:hover  .govuk-card__actions  ul > li > a:hover {
-  color: lighten(#fff, 30%) !important;
-}
-
-.govuk-card--selectable > a:focus {
-  background-color: initial !important;
-}
-
-.govuk-card__hero {
-  line-height: 0;
-}
-
-.gov-card__img{
-  display: block;
-  width: 100%
-}
-
-.govuk-card__content {
-  padding-bottom: 0;
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.govuk-card__actions {
-  padding-top:10px;
-  padding-bottom: 0;
-}
-
-.govuk-card__actions > .govuk-c-button {
-  margin-bottom: 0;
-}
-
-.govuk-card__height{
-  min-height:300px;
-}
-
-@media screen and (max-width:1320px) {
-  .govuk-card__height{
-    min-height:375px;
-  }
-}
-
-@media screen and (max-width:1037px) {
-  .govuk-card__height{
-    min-height:410px;
-  }
-}
-
-@media screen and (max-width:912px) {
-  .govuk-card__height{
-    min-height:430px;
-  }
-}
-
-@media screen and (max-width:885px) {
-  .govuk-card__height{
-    min-height:500px;
-  }
-}
-
-@media screen and (max-width:812px) {
-  .govuk-card__height{
-    min-height:530px;
-  }
-}
-
-@media screen and (max-width:812px) {
-  .govuk-card__height{
-    min-height:220px;
-  }
-}
-
 .grid-container {
   display: flex;
   flex-direction: column;
@@ -145,32 +8,40 @@
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     grid-gap: 30px;
   }
+
+}
+
+.card-container img {
+  max-width: 100%;
 }
 
 .card {
   position: relative;
-  background-color: govuk-colour("light-grey");
-  border-bottom: 3px solid govuk-colour("blue");
-  max-width: 300px;
+  background-color: govuk-colour('light-grey');
+  border-bottom: 3px solid govuk-colour('blue');
+
+  @include govuk-media-query($from: tablet) {
+    max-width: 300px;
+  }
 
   &-container {
     padding: 20px;
   }
 
   &:hover, &:focus-within {
-    background-color: govuk-colour("blue");
+    background-color: govuk-colour('blue');
     a {
-      color: govuk-colour("white");
+      color: govuk-colour('white');
     }
   }
 
   &:hover &-link--retake {
     &:hover {
-      color: govuk-colour("light-grey");
+      color: govuk-colour('light-grey');
     }
 
     &:focus {
-      color: govuk-colour("black");
+      color: govuk-colour('black');
     }
   }
 
@@ -188,7 +59,7 @@
       box-shadow: none;
 
       .card-container & {
-        color: govuk-colour("black");
+        color: govuk-colour('black');
       }
     }
   }
@@ -200,7 +71,7 @@
 
   &-link--header {
     text-decoration: none;
-    color: govuk-colour("blue");
+    color: govuk-colour('blue');
 
     &:after {
       position: absolute;

diff --git a/app/assets/stylesheets/dfe-header.scss b/app/assets/stylesheets/dfe-header.scss
@@ -11,6 +11,11 @@
   margin: 0 auto;
   max-width: $govuk-page-width;
 
+  @include govuk-media-query($until: tablet) {
+    padding-left: govuk-spacing(3);
+    padding-right: govuk-spacing(3);
+  }
+
   &.dfe-header__container.dfe-header-f-header-flex {
     display: flex;
     flex-wrap: wrap;

diff --git a/app/assets/stylesheets/prompt.scss b/app/assets/stylesheets/prompt.scss
@@ -11,6 +11,7 @@ $prompt-hue: govuk-colour('turquoise');
   border-top: $prompt-hue solid 10px;
   margin: govuk-spacing(5) govuk-spacing(0);
   padding-left: govuk-spacing(4);
+  padding-right: govuk-spacing(4);
 
   .svg-inline--fa {
     position: relative;
@@ -25,12 +26,8 @@ $prompt-hue: govuk-colour('turquoise');
   }
 
   .govuk-grid-column-three-quarters {
-    padding: govuk-spacing(3) govuk-spacing(0);
+    padding: govuk-spacing(3);
 
-    @media (max-width: 40em) {
-      padding-left: govuk-spacing(3);
-    }
-
     @media(min-width: 40em) and (max-width: 61.5em) {
       padding-left: govuk-spacing(7);
     }

diff --git a/app/assets/stylesheets/section-intro.scss b/app/assets/stylesheets/section-intro.scss
@@ -1,5 +1,10 @@
 #section-intro-panel {
   padding: govuk-spacing(7);
+
+  @include govuk-media-query($until: tablet) {
+    padding: govuk-spacing(6);
+  }
+
   background-color: govuk-colour('light-grey');
   border-radius: 6px;
 

diff --git a/app/controllers/training/modules_controller.rb b/app/controllers/training/modules_controller.rb
@@ -10,7 +10,7 @@ class ModulesController < ApplicationController
                   :mods,
                   :module_table
 
-    layout 'hero'
+    layout 'hero', only: :show
 
     def index
       track('course_overview_page', cms: true)