From 2a8464001efce8c76e8109af7eb68d9e86105692 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 28 Oct 2021 17:08:13 +0200
Subject: chore: add legal notice

In France, legal notice is required for any website.
---
 htdocs/src/js/app.js                | 15 ++++++++++++++-
 htdocs/src/js/i18n/locales/en.js    |  4 ++++
 htdocs/src/js/i18n/locales/fr.js    |  4 ++++
 htdocs/src/scss/layout/_footer.scss | 18 ++++++++++++++++--
 htdocs/src/scss/layout/_main.scss   | 15 +++++++++++++++
 htdocs/src/scss/layout/_nav.scss    |  4 ++--
 6 files changed, 55 insertions(+), 5 deletions(-)

(limited to 'htdocs/src')

diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js
index efb4c33..4f5f5a5 100644
--- a/htdocs/src/js/app.js
+++ b/htdocs/src/js/app.js
@@ -327,6 +327,18 @@ function printRequestedPage() {
   }
 }
 
+/**
+ * Replace the legal notice link and text.
+ */
+function replaceLegalNoticeLink() {
+  const link = document.querySelector('.nav__link--legal');
+  link.href = translate('footer.legalNotice.link');
+  link.textContent = translate('footer.legalNotice.txt');
+}
+
+/**
+ * Translate all text available in HTML templates.
+ */
 function translateHTMLContent() {
   const brandingDesc = document.querySelector('.branding__description');
   const navLabel = document.querySelector('.nav__label');
@@ -335,7 +347,7 @@ function translateHTMLContent() {
   brandingDesc.textContent = translate('branding.description');
   navLabel.textContent = translate('nav.title');
   license.title = translate('footer.license');
-  instructions.textContent = translate('main.instructions');
+  if (instructions) instructions.textContent = translate('main.instructions');
 }
 
 /**
@@ -357,6 +369,7 @@ function setAppLocale() {
 function init() {
   setAppLocale();
   translateHTMLContent();
+  replaceLegalNoticeLink();
   loadWebpackStyles();
   printProjectsNav();
   updateView();
diff --git a/htdocs/src/js/i18n/locales/en.js b/htdocs/src/js/i18n/locales/en.js
index c21b739..9717528 100644
--- a/htdocs/src/js/i18n/locales/en.js
+++ b/htdocs/src/js/i18n/locales/en.js
@@ -25,6 +25,10 @@ const en = {
     },
   },
   footer: {
+    legalNotice: {
+      txt: 'Legal notice',
+      link: 'legal-notice.html',
+    },
     license: 'License MIT',
   },
 };
diff --git a/htdocs/src/js/i18n/locales/fr.js b/htdocs/src/js/i18n/locales/fr.js
index af1d83c..9c93012 100644
--- a/htdocs/src/js/i18n/locales/fr.js
+++ b/htdocs/src/js/i18n/locales/fr.js
@@ -25,6 +25,10 @@ const fr = {
     },
   },
   footer: {
+    legalNotice: {
+      txt: 'Mentions légales',
+      link: 'mentions-legales.html',
+    },
     license: 'Licence MIT',
   },
 };
diff --git a/htdocs/src/scss/layout/_footer.scss b/htdocs/src/scss/layout/_footer.scss
index b405114..7dce0dc 100644
--- a/htdocs/src/scss/layout/_footer.scss
+++ b/htdocs/src/scss/layout/_footer.scss
@@ -2,8 +2,15 @@
 @use "../abstracts/mixins" as mix;
 
 .footer {
+  align-items: center;
   background: fun.get-var(color-bg-secondary);
   border-top: fun.convert-px(1) solid fun.get-var(color-border-light);
+  display: flex;
+  flex-flow: row wrap;
+  font-family: fun.get-var(font-family-secondary);
+  font-size: fun.get-var(font-size-md);
+  gap: fun.get-var(spacing-3xs);
+  justify-content: center;
   padding: fun.get-var(spacing-sm) fun.get-var(spacing-md)
     calc(#{fun.get-var(toolbar-height)} + #{fun.get-var(spacing-sm)});
 
@@ -13,14 +20,21 @@
       padding: fun.get-var(spacing-sm) fun.get-var(spacing-md);
     }
   }
+
+  .nav {
+    display: inline-flex;
+    gap: fun.get-var(spacing-3xs);
+
+    &::after {
+      content: "/";
+    }
+  }
 }
 
 .copyright {
   align-items: center;
   display: flex;
   flex-flow: row wrap;
-  font-family: fun.get-var(font-family-secondary);
-  font-size: fun.get-var(font-size-md);
   gap: fun.get-var(spacing-3xs);
   justify-content: center;
 }
diff --git a/htdocs/src/scss/layout/_main.scss b/htdocs/src/scss/layout/_main.scss
index 8ab842b..33c118e 100644
--- a/htdocs/src/scss/layout/_main.scss
+++ b/htdocs/src/scss/layout/_main.scss
@@ -55,6 +55,21 @@ noscript {
   }
 }
 
+.legal-notice {
+  height: 100%;
+  overflow-y: auto;
+  padding: clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)});
+  scrollbar-color: fun.get-var(color-primary-light-opacity)
+    fun.get-var(color-bg-tertiary);
+  width: 100%;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      grid-column: 1 / -1;
+    }
+  }
+}
+
 .project-preview {
   background: fun.get-var(color-bg);
   flex: 0 1 100%;
diff --git a/htdocs/src/scss/layout/_nav.scss b/htdocs/src/scss/layout/_nav.scss
index 33346b5..98e4cb5 100644
--- a/htdocs/src/scss/layout/_nav.scss
+++ b/htdocs/src/scss/layout/_nav.scss
@@ -16,11 +16,11 @@
     }
   }
 
-  &__item {
+  &:not(&--footer) &__item {
     margin: fun.get-var(spacing-2xs) 0;
   }
 
-  &__link {
+  &:not(&--footer) &__link {
     background-image: linear-gradient(
       to left,
       #{fun.get-var(color-bg)} 0,
-- 
cgit v1.2.3