Merge pull request #1730 from nationalarchives/fix-hover-static-page-…

…cards fix hover on static pages
nationalarchives · Jan 10, 2025 · 7a47720 · 7a47720
2 parents 3c084ed + 235e7aa
commit 7a47720
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 342 deletions.
diff --git a/ds_judgements_public_ui/sass/includes/_info_card.scss b/ds_judgements_public_ui/sass/includes/_info_card.scss
@@ -0,0 +1,101 @@
+.info-cards {
+  display: flex;
+  flex-direction: column;
+  gap: $space-4;
+
+  @media (min-width: $grid-breakpoint-medium) {
+    flex-direction: row;
+  }
+}
+
+.info-cards-landing {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: $space-4 !important;
+
+  @media (min-width: $grid-breakpoint-medium) {
+    flex-direction: row !important;
+  }
+}
+
+.info-card {
+  display: flex;
+  flex-direction: column;
+  gap: $space-4;
+
+  padding: $space-8 $space-4;
+
+  text-decoration: none;
+
+  background-color: colour-var("accent-background-light");
+  border-top: 4px solid $color-yellow;
+
+  &:focus {
+    outline-offset: $space-2;
+  }
+
+  &:hover {
+    background-color: colour-var("accent-background");
+
+    h3 {
+      text-decoration: none;
+    }
+  }
+
+  h3 {
+    margin: 0;
+    color: colour-var("link");
+    text-decoration: underline;
+    text-decoration-color: colour-var("link");
+
+    &:hover {
+      color: colour-var("link-hover");
+    }
+  }
+
+  p {
+    margin: 0;
+    color: colour-var("accent-font-base");
+  }
+}
+
+.info-card-landing {
+  display: flex;
+  flex-direction: column;
+  gap: $space-4;
+
+  padding: $space-8 $space-4;
+
+  text-decoration: none;
+
+  background-color: colour-var("accent-background-light");
+  border-top: 4px solid $color-yellow;
+
+  &:focus {
+    outline-offset: $space-2;
+  }
+
+  &:hover {
+    background-color: colour-var("accent-background");
+
+    h3 {
+      text-decoration: none;
+    }
+  }
+
+  h3 {
+    margin: 0;
+    color: colour-var("link");
+    text-decoration: underline;
+    text-decoration-color: colour-var("link");
+
+    &:hover {
+      color: colour-var("link-hover");
+    }
+  }
+
+  p {
+    margin: 0;
+    color: colour-var("accent-font-base");
+  }
+}
diff --git a/ds_judgements_public_ui/sass/includes/govuk_overrides/_grid.scss b/ds_judgements_public_ui/sass/includes/govuk_overrides/_grid.scss
@@ -12,77 +12,6 @@
   }
 }
 
-.govuk-grid-column-two-thirds__info_cards {
-  display: flex;
-  flex-direction: row;
-  gap: $space-1;
-  margin-left: $space-2;
-}
-
-.govuk-grid-column-one-third__info_cards {
-  max-width: 20rem;
-  margin: $space-2;
-  padding: $space-1 $space-7;
-
-  text-decoration: underline;
-  text-decoration-color: colour-var("link");
-
-  background-color: colour-var("accent-background-light");
-  border-top: 4px solid $color-yellow;
-
-  &:hover {
-    text-decoration: none;
-    background-color: colour-var("accent-background");
-  }
-
-  @media (max-width: $grid-breakpoint-medium) {
-    min-width: 150%;
-    height: 6rem;
-  }
-}
-
-.govuk-grid-column-one-third__grid_info_card_heading:hover {
-  color: $color-dark-blue;
-  text-decoration: none;
-}
-
-.govuk-grid-column-one-third__grid_info_card_heading {
-  color: colour-var("link");
-  text-decoration-color: colour-var("link");
-  text-decoration-line: underline;
-  text-wrap: wrap;
-}
-
-.govuk-grid-column-one-third__grid_info_card_heading:visited {
-  color: colour-var("link-visited");
-  text-decoration-color: colour-var("link-visited");
-  text-decoration-line: underline;
-}
-
-.govuk-grid-column-one-third__grid_info_card_heading:hover {
-  color: colour-var("link");
-  text-decoration: none;
-}
-
-.govuk-grid-column-one-third__grid_info_card_text {
-  color: colour-var("accent-font-base");
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  @media (max-width: $grid-breakpoint-medium) {
-    margin: -1rem;
-    visibility: hidden;
-  }
-}
-
-.grid-background-link {
-  text-decoration: none;
-  text-decoration-line: none;
-}
-
 .govuk-grid-column-full {
   margin-bottom: -15px;
 
@@ -127,96 +56,6 @@
   }
 }
 
-.govuk-grid-column-two-thirds__info_terms_use {
-  display: flex;
-  flex-direction: row;
-  gap: 0;
-
-  margin-top: -22px;
-  margin-left: $space-2;
-
-  text-decoration: none;
-
-  @media (max-width: $grid-breakpoint-medium) {
-    float: left;
-    flex-direction: column;
-    width: 75%;
-  }
-}
-
-.govuk-grid-column-one-third__info_terms_use {
-  max-width: 23rem;
-  height: 16rem;
-  margin: $space-2;
-  padding: $space-1 $space-5;
-
-  text-decoration: underline;
-  text-decoration-color: colour-var("link");
-
-  background-color: colour-var("accent-background-light");
-  border-top: 4px solid $color-yellow;
-
-  &:hover {
-    text-decoration: none;
-    background-color: colour-var("accent-background");
-  }
-
-  @media (max-width: $grid-breakpoint-medium) {
-    width: 100%;
-    height: 6rem;
-  }
-
-  @media (min-width: $grid-breakpoint-large) {
-    max-width: 23rem;
-    height: 12rem;
-  }
-}
-
-.govuk-grid-column-two-thirds__info_about_fcl {
-  display: flex;
-  flex-direction: row;
-  gap: 0;
-
-  margin-top: -22px;
-  margin-left: $space-2;
-
-  text-decoration: none;
-
-  @media (max-width: $grid-breakpoint-medium) {
-    float: left;
-    flex-direction: column;
-    width: 75%;
-  }
-}
-
-.govuk-grid-column-one-third__info_about_fcl {
-  max-width: 23rem;
-  height: 16rem;
-  margin: $space-2;
-  padding: $space-1 $space-5;
-
-  text-decoration: underline;
-  text-decoration-color: colour-var("link");
-
-  background-color: colour-var("accent-background-light");
-  border-top: 4px solid $color-yellow;
-
-  &:hover {
-    text-decoration: none;
-    background-color: colour-var("accent-background");
-  }
-
-  @media (max-width: $grid-breakpoint-medium) {
-    width: 100%;
-    height: 6rem;
-  }
-
-  @media (min-width: $grid-breakpoint-large) {
-    max-width: 23rem;
-    height: 12rem;
-  }
-}
-
 .govuk-grid-column-one-third__grid_info_heading {
   color: colour-var("link");
   text-decoration-color: colour-var("link");
@@ -318,36 +157,3 @@
     width: 66.6666666667%;
   }
 }
-
-.govuk-grid-column-one-third__info_cards_help {
-  max-width: 20rem;
-  margin: $space-2;
-  padding: $space-1 $space-4;
-
-  text-decoration: underline;
-  text-decoration-color: colour-var("link");
-
-  background-color: colour-var("accent-background-light");
-  border-top: 4px solid $color-yellow;
-
-  &:hover {
-    text-decoration: none;
-    background-color: colour-var("accent-background");
-  }
-
-  @media (max-width: $grid-breakpoint-medium) {
-    min-width: 150%;
-    height: 6rem;
-  }
-
-  @media (width >= 770px) {
-    height: 12rem;
-    padding-bottom: $space-10;
-  }
-
-  @media (min-width: $grid-breakpoint-large) {
-    max-width: 23rem;
-    height: 11rem;
-    padding-bottom: none;
-  }
-}
diff --git a/ds_judgements_public_ui/sass/main.scss b/ds_judgements_public_ui/sass/main.scss
@@ -72,6 +72,7 @@ $govuk-focus-colour: colour-var("focus-outline");
 @import "includes/service_introduction";
 @import "includes/standard_text_template";
 @import "includes/copy_to_clipboard_link";
+@import "includes/info_card";
 
 // Cookies
 @import "includes/cookie_banner_overrides";

diff --git a/ds_judgements_public_ui/templates/includes/info_cards_about_find_case_law.html b/ds_judgements_public_ui/templates/includes/info_cards_about_find_case_law.html
@@ -4,25 +4,19 @@ <h2 id="section-pages">Pages in this section</h2>
   </div>
 </div>
 
-<div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds__info_about_fcl">
-    <a href="{% url 'courts_and_tribunals_in_fcl' %}" class="grid-background-link" aria-label="Courts and tribunals in Find Case Law">
-      <div class="govuk-grid-column-one-third__info_about_fcl">
-        <h3 class="govuk-grid-column-one-third__grid_info_heading">Courts and tribunals in Find Case Law</h3>
-        <p class="govuk-grid-column-one-third__grid_info_card_text">Learn which judgments and decisions this service provides.</p>
-      </div>
-    </a>
-    <a href="{% url 'computational_licence_form' %}"  class="grid-background-link" aria-label="Reuse Find Case Law records">
-      <div class="govuk-grid-column-one-third__info_about_fcl">
-        <h3 class="govuk-grid-column-one-third__grid_info_heading">Reuse Find Case Law records</h3>
-        <p class="govuk-grid-column-one-third__grid_info_card_text">Read what you’re allowed to do with records from this service.</p>
-      </div>
-    </a>
-    <a href="{% url 'terms_and_policies' %}"  class="grid-background-link" aria-label="Terms and policies">
-      <div class="govuk-grid-column-one-third__info_about_fcl">
-        <h3 class="govuk-grid-column-one-third__grid_info_heading">Terms and policies</h3>
-        <p class="govuk-grid-column-one-third__grid_info_card_text">Find out the rules and policies that apply to this service.</p>
-      </div>
-    </a>
-  </div>
+<div class="info-cards">
+  <a class="info-card" href="{% url 'courts_and_tribunals_in_fcl' %}" aria-label="Courts and tribunals in Find Case Law">
+    <h3>Courts and tribunals in Find Case Law</h3>
+    <p>Learn which judgments and decisions this service provides.</p>
+  </a>
+
+  <a class="info-card" href="{% url 'computational_licence_form' %}" aria-label="Reuse Find Case Law records">
+    <h3>Reuse Find Case Law records</h3>
+    <p>Read what you’re allowed to do with records from this service.</p>
+  </a>
+
+  <a class="info-card" href="{% url 'terms_and_policies' %}" aria-label="Terms and policies">
+    <h3>Terms and policies</h3>
+    <p>Find out the rules and policies that apply to this service.</p>
+  </a>
 </div>