Docs: Fix back to top issues + .navbar (#347)

* Fix back to top issues + `.navbar` * Fix tarteaucitron * fix(review)
Orange-OpenSource · Mar 28, 2024 · 3a9b9c7 · 3a9b9c7
1 parent 1343508
commit 3a9b9c7
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}