EDERCMS-230 UI changes

techdivision · Sep 26, 2024 · 4d84d9c · 4d84d9c
1 parent 2895f3d
commit 4d84d9c
Show file tree

Hide file tree

Showing 11 changed files with 210 additions and 138 deletions.
diff --git a/404.html b/404.html
@@ -10,55 +10,22 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:title" content="Page not found">
   <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
-  <script type="module">
-    window.addEventListener('load', () => {
-      if (document.referrer) {
-        const { origin, pathname } = new URL(document.referrer);
-        if (origin === window.location.origin) {
-          const backBtn = document.createElement('a');
-          backBtn.classList.add('button', 'error-button-back');
-          backBtn.href = pathname;
-          backBtn.textContent = 'Go back';
-          backBtn.title = 'Go back';
-          const btnContainer = document.querySelector('.button-container');
-          btnContainer.append(backBtn);
-        }
-      }
-    });
-  </script>
+  <script src="/scripts/404.js" type="module" crossorigin="use-credentials"></script>
+  <link rel="stylesheet" href="/styles/theme.css">
   <link rel="stylesheet" href="/styles/styles.css">
-  <style>
-    main.error {
-      min-height: calc(100vh - var(--nav-height));
-      display: flex;
-      align-items: center;
-    }
-
-    main.error .error-number {
-      width: 100%;
-    }
-
-    main.error .error-number text {
-      font-family: monospace;
-    }
-  </style>
   <link rel="stylesheet" href="/styles/lazy-styles.css">
 </head>
 
 <body>
   <header></header>
   <main class="error">
     <div class="section">
-      <svg viewBox="1 0 38 18" class="error-number">
-        <text x="0" y="17">404</text>
-      </svg>
-      <h2 class="error-message">Page Not Found</h2>
+      <h2 class="error-message" data-translate="true">The page has not been found</h2>
       <p class="button-container">
-        <a href="/" class="button secondary error-button-home">Go home</a>
+        <a href="/" class="button secondary error-button-home" data-translate="true">Go home</a>
       </p>
     </div>
   </main>
   <footer></footer>
 </body>
-
 </html>
diff --git a/blocks/brand-overview/brand-overview.css b/blocks/brand-overview/brand-overview.css
@@ -114,7 +114,7 @@ main .section.brand-overview-container {
       /* button wrapper */
 
       .button-wrapper {
-        gap: var(--spacing-simple);
+        gap: var(--spacing-half);
 
         @media (width >= 1200px) {
           display: flex;

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -49,6 +49,10 @@
   line-height: var(--body-line-height-m);
   color: var(--color-white);
   background-color: var(--color-red);
+
+  &::after {
+    bottom: 0.5em;
+  }
 }
 
 .cards .cards-card-body {

diff --git a/blocks/contact-banner/contact-banner.css b/blocks/contact-banner/contact-banner.css
@@ -27,17 +27,12 @@
 
       > div {
         flex: 1;
-        max-width: 50%;
+        max-width: calc(50% - var(--spacing-simple) / 2);
       }
     }
 
     > div {
       min-height: 300px;
-
-      @media (width >= 900px) {
-        flex: 1;
-        max-width: 50%;
-      }
     }
   }
 
@@ -56,6 +51,7 @@
 
     & > div {
       align-items: stretch;
+      margin-bottom: 0;
 
       > div:not(:first-child) {
         padding: 20px;
@@ -75,25 +71,38 @@
           }
 
           &:nth-child(2) {
+            height: 3em;
             margin-bottom: var(--spacing-half);
           }
 
           &:first-child,
           &:nth-child(2) {
             font-weight: var(--font-weight-bold);
           }
+
+          a {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            display: inline-block;
+            max-width: calc(100% - 2em);
+          }
         }
       }
     }
 
     /* image */
 
-    .columns-img-col img {
-      width: 100%;
-      max-width: 300px;
-      margin: 0 auto;
-      height: 100%;
-      object-fit: cover;
+    .columns-img-col {
+      margin-bottom: 0;
+
+      img {
+        width: 100%;
+        max-width: 300px;
+        margin: 0 auto;
+        height: 100%;
+        object-fit: cover;
+      }
     }
 
     &.one-quarter-three-quarter > div > div:first-child {

diff --git a/blocks/dates/dates.css b/blocks/dates/dates.css
@@ -14,30 +14,35 @@
   align-items: center;
   justify-content: space-around;
   background-color: var(--color-gray-light);
-}
+  padding: var(--spacing-half) 0;
 
-.dates-container .dates.block > div {
-  position: relative;
-  padding-left: var(--spacing-double);
-}
+  p {
+    margin: 0;
+  }
 
-.dates-container .dates.block > div::before {
-  content: url('../../icons/arrow-right.svg');
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 30px;
-  transform: translateY(-50%);
-}
+  & > div {
+    position: relative;
+    padding-left: var(--spacing-double);
 
-.dates-container .dates.block > div:first-child::before {
-  content: url('../../icons/calendar.svg');
-}
+    &::before {
+      content: url('../../icons/arrow-right.svg');
+      position: absolute;
+      left: 0;
+      top: 50%;
+      width: 30px;
+      transform: translateY(-50%);
+    }
+
+    &:first-child::before {
+      content: url('../../icons/calendar.svg');
+    }
 
-.dates-container .dates.block > div .date {
-  color: var(--link-color);
-  font-size: var(--heading-font-size-m);
-  line-height: var(--heading-line-height-m);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
+    .date {
+      color: var(--link-color);
+      font-size: var(--heading-font-size-m);
+      line-height: var(--heading-line-height-m);
+      font-weight: var(--font-weight-bold);
+      text-transform: uppercase;
+    }
+  }
 }
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -249,7 +249,6 @@ header nav .nav-sections {
   display: none;
   visibility: hidden;
   grid-area: sections;
-  padding: 0 var(--spacing-simple);
 }
 
 header nav .nav-sections ul {
@@ -269,8 +268,9 @@ header nav .nav-sections[aria-expanded='true'] {
 }
 
 header nav .nav-sections .default-content-wrapper > ul {
-  max-height: calc(100vh - (2 * var(--nav-height)));
+  max-height: calc(100vh - (1 * var(--nav-height)));
   overflow-y: auto;
+  padding: 0 var(--spacing-simple);
 }
 
 header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul > li {
@@ -282,10 +282,15 @@ header nav .mobile-menu > li {
   padding-top: var(--spacing-half);
 }
 
+
+header nav .mobile-menu li > span {
+  padding-right: var(--spacing-half);
+  cursor: pointer;
+}
+
 header nav .mobile-menu > li > span {
   font-weight: var(--font-weight-bold);
   position: relative;
-  padding-right: var(--spacing-half);
 }
 
 header nav .mobile-menu > li > span::after {
@@ -303,6 +308,11 @@ header nav .mobile-menu > li > span::after {
   border-width: 2px 2px 0 0;
 }
 
+header nav .mobile-menu > li ul {
+  margin-top: 5px;
+  padding-left: var(--spacing-half);
+}
+
 header nav .mobile-menu > li > ul {
   display: none;
 }
@@ -512,52 +522,45 @@ header nav .mobile-menu li.is-visible > ul {
 
 /* breadcrumbs */
 .breadcrumbs {
-  width: 100%;
   max-width: var(--page-width);
-  overflow: hidden;
   margin: 0 auto;
   font-size: var(--body-font-size-s);
-  background: none;
+  line-height: var(--body-line-height-s);
 
-  @media (width >= 900px) {
-    padding: 0 var(--spacing-simple);
-  }
-}
-
-.breadcrumbs ol {
-  display: flex;
-  flex-flow: wrap;
-  list-style: none;
-  padding: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  gap: 1ch;
-}
+  ol {
+    display: flex;
+    flex-flow: wrap;
+    list-style: none;
+    padding: 0;
+    gap: 1ch;
 
-.breadcrumbs ol li {
-  padding-inline-start: 0;
-  opacity: 0.7;
+    li {
+      padding-inline-start: 0;
+      opacity: 0.7;
 
-  a:any-link, span {
-    color: var(--text-color);
-    margin-right: 4px;
-  }
-}
+      &:not(:last-child)::after {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        transform: rotate(45deg);
+        border-radius: 0 1px 0 0;
+        border-style: solid;
+        border-color: currentcolor;
+        border-width: 2px 2px 0 0;
+      }
 
-.breadcrumbs ol li:not(:last-child)::after {
-  content: '';
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  transform: rotate(45deg);
-  border-radius: 0 1px 0 0;
-  border-style: solid;
-  border-color: currentcolor;
-  border-width: 2px 2px 0 0;
-}
+      &:last-of-type {
+        opacity: 1;
+      }
 
-.breadcrumbs ol li:last-of-type {
-  opacity: 1;
+      a:any-link,
+      span {
+        color: var(--text-color);
+        margin-right: 4px;
+      }
+    }
+  }
 }
 
 /* search */
@@ -567,8 +570,8 @@ header nav .mobile-menu li.is-visible > ul {
   @media (width >= 900px) {
     display: block;
   }
-}
 
-.header .search-bar-container .block {
-  margin-bottom: 0;
+  .block {
+    margin-bottom: 0;
+  }
 }
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -224,7 +224,9 @@ function buildBreadcrumbs(breadcrumbsElement) {
   const ol = document.createElement('ol');
   ol.append(...crumbs.map((item) => {
     const li = document.createElement('li');
-    if (item['aria-current']) li.setAttribute('aria-current', item['aria-current']);
+    if (item['aria-current']) {
+      li.setAttribute('aria-current', item['aria-current']);
+    }
     if (item.url) {
       const a = document.createElement('a');
       a.href = item.url;

diff --git a/blocks/text-box/text-box.css b/blocks/text-box/text-box.css
@@ -12,6 +12,10 @@
 .text-box {
   padding: var(--spacing-half) var(--spacing-simple);
   color: var(--color-white);
+
+  p:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .text-box.red a,