From 3a9b9c7e96855c9bc9b4e74da63b8d780aab523f Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 28 Mar 2024 15:53:44 +0100
Subject: [PATCH] Docs: Fix back to top issues + `.navbar` (#347)

* Fix back to top issues + `.navbar`

* Fix tarteaucitron

* fix(review)
---
 docs/_includes/footer.html         |  8 +-----
 docs/_includes/header.html         |  2 --
 docs/_includes/tarteaucitron.html  | 39 ++++++++++--------------------
 docs/_layouts/main.html            | 20 ++++++++++++++-
 docs/about/Cookies_docs.md         |  1 +
 docs/about/License_docs.md         |  1 +
 docs/about/Team_docs.md            |  1 +
 docs/guidelines/typography_docs.md |  1 +
 docs/index.md                      |  1 +
 9 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 5fd803de..ad510806 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -1,4 +1,4 @@
-<footer class="footer navba position-sticky top-100" data-bs-theme="dark">
+<footer class="footer navbar position-sticky top-100" data-bs-theme="dark">
   <h2 class="visually-hidden">Sitemap & information</h2>
   <div class="container-xxl footer-terms">
     <ul class="navbar-nav gap-md-3">
@@ -12,12 +12,6 @@ <h2 class="visually-hidden">Sitemap & information</h2>
   </div>
 </footer>
 
-<nav aria-label="Back to top" class="back-to-top">
-  <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary" data-bs-label="Back to top">
-    <span class="visually-hidden">Back to top</span>
-  </a>
-</nav>
-
 <script>
 /*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index be582aab..6a30ad88 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -13,8 +13,6 @@
   </symbol>
 </svg>
 
-<a id="top"></a>
-
 <header class="sticky-top" data-bs-theme="dark">
   <div class="navbar navbar-expand-lg" aria-label="Global header of ODS Flutter">
     <div class="container-xxl">
diff --git a/docs/_includes/tarteaucitron.html b/docs/_includes/tarteaucitron.html
index 84b3a82c..06997ff6 100644
--- a/docs/_includes/tarteaucitron.html
+++ b/docs/_includes/tarteaucitron.html
@@ -8,13 +8,13 @@
         padding: 1.25rem 0;
         background-color: var(--bs-body-bg);
         background-clip: padding-box;
+        border:var(--bs-border-width) solid var(--bs-border-color-subtle);
         transform: translateX(-50%)
     }
 
     [id="tarteaucitron"] [role="heading"] {
         display: block;
         font-weight: 700;
-        color: #000
     }
 
     @media (min-width: 480px) {
@@ -62,6 +62,7 @@
         font-weight: 700;
         color: #fff;
         background: #000;
+        border-top: var(--bs-border-width) solid var(--bs-border-color-subtle);
         --max-width: 312px
     }
 
@@ -105,22 +106,6 @@
         font-size: .875rem
     }
 
-    [id="tarteaucitronCloseAlert"] {
-        --bs-btn-color: #000;
-        --bs-btn-bg: #fff;
-        --bs-btn-border-color: #fff;
-        --bs-btn-hover-color: #fff;
-        --bs-btn-hover-bg: #000;
-        --bs-btn-hover-border-color: #000;
-        --bs-btn-focus-shadow-rgb: #fff;
-        --bs-btn-active-color: #000;
-        --bs-btn-active-bg: #ff7900;
-        --bs-btn-active-border-color: #ff7900;
-        --bs-btn-disabled-color: #ccc;
-        --bs-btn-disabled-bg: #fff;
-        --bs-btn-disabled-border-color: #ccc
-    }
-
     [id="tarteaucitronClosePanel"] {
         position: absolute;
         right: 1.25rem 0;
@@ -162,7 +147,7 @@
     }
 
     [id="tarteaucitronInfo"] {
-        padding: .625rem 1.25rem 0;
+        padding: .625rem 0;
         margin-bottom: 1.25rem;
         font-weight: 700
     }
@@ -190,7 +175,7 @@
     .tarteaucitronMainLine {
         padding-bottom: 1.25rem;
         margin-bottom: 1.25rem;
-        border-bottom: var(--bs-border-width) solid #ddd
+        border-bottom: var(--bs-border-width) solid var(--bs-border-color-subtle);
     }
 
     [id="tarteaucitronServices"] {
@@ -223,8 +208,8 @@
         min-height: inherit;
         content: "";
         background-color: currentcolor;
-        -webkit-mask: var(--o-check-icon) no-repeat 50% / .875rem .875rem;
-        mask: var(--o-check-icon) no-repeat 50% / .875rem .875rem
+        -webkit-mask: var(--bs-check-icon) no-repeat 50% / .875rem .875rem;
+        mask: var(--bs-check-icon) no-repeat 50% / .875rem .875rem
     }
 
     .tarteaucitronAllow::before {
@@ -242,8 +227,8 @@
         min-height: inherit;
         content: "";
         background-color: currentcolor;
-        -webkit-mask: var(--o-close-icon) no-repeat 50% / .875rem .875rem;
-        mask: var(--o-close-icon) no-repeat 50% / .875rem .875rem
+        -webkit-mask: var(--bs-close-icon) no-repeat 50% / .875rem .875rem;
+        mask: var(--bs-close-icon) no-repeat 50% / .875rem .875rem
     }
 
     .tarteaucitronDeny::before {
@@ -302,10 +287,12 @@
         window.addEventListener('tac.open_alert', () => {
             const alert = document.getElementById('tarteaucitronAlertBig')
 
-            document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-info', 'btn-inverse', 'ms-lg-2')
-            alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'btn-inverse', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0')
+            alert.setAttribute('data-bs-theme', 'dark')
+
+            document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-secondary', 'ms-lg-2')
+            alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0')
             alert.querySelector('.tarteaucitronAllow').innerHTML = tarteaucitron.lang.acceptAll
-            alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'btn-inverse', 'mx-sm-2', 'my-2', 'my-lg-0')
+            alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'mx-sm-2', 'my-2', 'my-lg-0')
             alert.querySelector('.tarteaucitronDeny').innerHTML = tarteaucitron.lang.denyAll
         }, { once: true })
 
diff --git a/docs/_layouts/main.html b/docs/_layouts/main.html
index 19f411ad..97bb723e 100644
--- a/docs/_layouts/main.html
+++ b/docs/_layouts/main.html
@@ -34,15 +34,25 @@
                 z-index: 1045;
             }
         }
+        @media (min-width: 1024px) {
+            body > .container-xxl,
+            body > .container-xxl > .row {
+                min-height: calc(100vh - 280px);
+            }
+        }
     </style>
 
     <title>{{ page.title }} - ODS Flutter</title>
 </head>
 
 <body>
+    {% if page.back-to-top != false %}
+    <a id="top"></a>
+    {% endif %}
+
     {% include header.html %}
 
-    <div class="container-xxl pt-4 pt-lg-5 mb-4 mb-lg-5">
+    <div class="container-xxl my-4 my-lg-5">
         <div class="row">
 
             <div class="col-lg-3" aria-label="Global navigation of ODS iOS">
@@ -125,6 +135,14 @@ <h1>{{ page.description }}</h1>
 
     {% include footer.html %}
 
+    {% if page.back-to-top != false %}
+    <nav aria-label="Back to top" class="back-to-top">
+      <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary" data-bs-label="Back to top">
+        <span class="visually-hidden">Back to top</span>
+      </a>
+    </nav>
+    {% endif %}
+
     {% include scripts.html %}
 
     {% include tarteaucitron.html %}
diff --git a/docs/about/Cookies_docs.md b/docs/about/Cookies_docs.md
index 15499adc..d0a88dd9 100644
--- a/docs/about/Cookies_docs.md
+++ b/docs/about/Cookies_docs.md
@@ -2,4 +2,5 @@
 layout: main
 title: Cookies
 content_page: Cookies.md
+back-to-top: false
 ---
diff --git a/docs/about/License_docs.md b/docs/about/License_docs.md
index 18b9fd1f..0948a327 100644
--- a/docs/about/License_docs.md
+++ b/docs/about/License_docs.md
@@ -2,4 +2,5 @@
 layout: main
 title: License
 content_page: License.md
+back-to-top: false
 ---
diff --git a/docs/about/Team_docs.md b/docs/about/Team_docs.md
index 92cde2e9..63d62250 100644
--- a/docs/about/Team_docs.md
+++ b/docs/about/Team_docs.md
@@ -2,4 +2,5 @@
 layout: main
 title: Team
 content_page: Team.md
+back-to-top: false
 ---
diff --git a/docs/guidelines/typography_docs.md b/docs/guidelines/typography_docs.md
index da3bdf9a..9b2544d8 100644
--- a/docs/guidelines/typography_docs.md
+++ b/docs/guidelines/typography_docs.md
@@ -2,4 +2,5 @@
 layout: main
 title: Typography
 content_page: typography.md
+back-to-top: false
 ---
diff --git a/docs/index.md b/docs/index.md
index 46df08f7..38c98823 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -2,6 +2,7 @@
 layout: main
 title: Integration
 description: Getting started with Orange Design System for Flutter
+back-to-top: false
 ---
   
 {% include_relative home_content.md %}