Examples: new app download page

NOTICE.txt

@@ -36,6 +36,19 @@ Any use or displaying shall constitute an infringement under intellectual proper
 
 dist/img/orange-logo.svg
 nuget/boosted.png
+site/content/docs/**/examples/download-app/img/Banner_image.png
+site/content/docs/**/examples/download-app/img/Buttons.png
+site/content/docs/**/examples/download-app/img/Buttons_dark.png
+site/content/docs/**/examples/download-app/img/Card.png
+site/content/docs/**/examples/download-app/img/Card_dark.png
+site/content/docs/**/examples/download-app/img/Components.png
+site/content/docs/**/examples/download-app/img/Components_dark.png
+site/content/docs/**/examples/download-app/img/Emphasis.png
+site/content/docs/**/examples/download-app/img/Emphasis_dark.png
+site/content/docs/**/examples/download-app/img/Input.png
+site/content/docs/**/examples/download-app/img/Input_dark.png
+site/content/docs/**/examples/download-app/img/List.png
+site/content/docs/**/examples/download-app/img/List_dark.png
 site/layouts/partials/icons.html
 site/layouts/partials/icons/download.svg
 site/static/docs/**/assets/brand/OBS-logo.svg

build/vnu-jar.js

@@ -35,7 +35,10 @@ execFile('java', ['-version'], (error, stdout, stderr) => {
     'An “aria-disabled” attribute whose value is “true” should not be specified on an “a” element that has an “href” attribute.',
     // Boosted mod: `role="img"` is needed for `<img "src=.svg" alt="">`
     'The “img” role is unnecessary for element “img”.',
-    '.*Consider using the “h1” element as a top-level heading only.*'
+    '.*Consider using the “h1” element as a top-level heading only.*',
+    // Boosted mod: use of tarteaucitron template for mastermedia videos.
+    'Attribute “videoid” not allowed on element “div” at this point.',
+    'Attribute “classlist” not allowed on element “div” at this point.'
   ].join('|')
 
   const args = [

site/assets/js/application.js

@@ -35,6 +35,10 @@
       const html = document.querySelector('html')
       const btt = document.querySelector('.back-to-top')
 
+      if (!btt) {
+        return
+      }
+
       // 100(px) comes from:
       //   - 40px of back-to-top component
       //   - 40px of navbar-minimized

site/assets/js/tac.js

@@ -74,7 +74,27 @@
       const toggle = document
         .createRange()
         .createContextualFragment(
-          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1] === '!googletagmanager=true' ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
+          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
+        )
+      ask.innerHTML = ''
+      ask.append(toggle)
+      ask.classList.add('mb-3')
+    },
+    { once: true }
+  )
+
+  document.addEventListener(
+    'mastermedia_added',
+    () => {
+      const ask = document.querySelector(
+        '#mastermediaLine .tarteaucitronAsk'
+      )
+      const choiceEvent =
+        'tarteaucitron.userInterface.respond(document.getElementById(\'mastermediaAllowed\'),document.getElementById(\'mastermediaAllowed\').checked);'
+      const toggle = document
+        .createRange()
+        .createContextualFragment(
+          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="mastermediaAllowed" aria-describedby="tacCLmastermedia" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!mastermedia=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="mastermediaAllowed">Google Tag Manager</label><input id="mastermediaDenied" class="d-none"></div>`
         )
       ask.innerHTML = ''
       ask.append(toggle)
@@ -98,7 +118,8 @@ if (typeof tarteaucitron !== 'undefined') {
   })
 
   tarteaucitron.user.googletagmanagerId = 'GTM-P6H78BQ';
-  (tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager')
+  (tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');
+  (tarteaucitron.job = tarteaucitron.job || []).push('mastermedia')
   dataLayer = [{
     site_name: 'accessibility-boosted',
     phase: 'prod',

site/assets/scss/_variables.scss

@@ -39,5 +39,4 @@ $bd-callout-variants: info, warning, danger !default;
 $zindex-skippy: 1080;
 $offset-top: 7rem;
 $sidebar-height: subtract(100vh, $offset-top);
-$tac-prefix: "tarteaucitron";
 // End mod

site/assets/scss/docs.scss

@@ -57,6 +57,4 @@ $enable-cssgrid: true;
 @import "anchor";
 
 // Boosted mod
-@import "mixins";
 @import "boosted";
-@import "tarteaucitron";

site/assets/scss/tac.scss

@@ -0,0 +1,9 @@
+// Load Bootstrap variables and mixins
+@import "../../../scss/functions";
+@import "../../../scss/variables";
+@import "../../../scss/mixins";
+
+$tac-prefix: "tarteaucitron";
+
+@import "mixins";
+@import "tarteaucitron";

site/content/docs/5.3/examples/download-app/download-app.css

@@ -0,0 +1,250 @@
+.border-translucent {
+  --bs-border-color: var(--bs-border-color-translucent);
+}
+
+@media (max-width: 479.98px) {
+  h3,
+  .h3 {
+    font-size: 1.125rem;
+    line-height: 1.111111;
+    letter-spacing: -.0125rem;
+  }
+}
+
+.icons-sm {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.icons-md {
+  width: 3.125rem;
+  height: 3.125rem;
+}
+
+.icons-lg {
+  width: 4.375rem;
+  height: 4.375rem;
+}
+
+@media (min-width: 768px) {
+  .icons-sm {
+    width: 3.125rem;
+    height: 3.125rem;
+  }
+
+  .icons-md {
+    width: 3.75rem;
+    height: 3.75rem;
+  }
+
+  .icons-lg {
+    width: 6.25rem;
+    height: 6.25rem;
+  }
+}
+
+.out-of-grid {
+  position: static;
+}
+
+.out-of-grid img {
+  width: 100%;
+  min-width: 100%;
+  min-height: 165px;
+}
+
+@media (min-width: 1024px) {
+  .out-of-grid {
+    position: absolute;
+  }
+
+  .out-of-grid img {
+    width: auto;
+  }
+}
+
+[data-bs-theme="light"] .dark-show {
+  display: none;
+}
+
+[data-bs-theme="dark"] .dark-show + * {
+  display: none;
+}
+
+iframe,
+.mastermedia-player {
+  min-height: 10.625rem;
+}
+
+footer .nav-link:hover {
+  text-decoration: underline;
+}
+
+.images img {
+  border-radius: 12% / 5%;
+  box-shadow: 10px 15px 50px -5px rgba(var(--bs-link-color-rgb), .2);
+  transition: transform .3s ease-in-out;
+  transform-origin: center;
+}
+
+@media (min-width: 768px) {
+  .images.active > :hover img {
+    transform: scale(1.2);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .images.active > :hover img {
+    transform: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .images > .col {
+    transform: translateY(-50px);
+  }
+
+  .images.active > .col {
+    animation: enter .75s 4 alternate, enter-smooth 1.25s 1 forwards ease-in-out;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .images > .col {
+    transform: none;
+  }
+
+  .images.active > .col {
+    animation: none;
+  }
+}
+
+@keyframes enter {
+  0% {
+    transform: translateY(-50px);
+    animation-timing-function: cubic-bezier(.5, 0, 1, .5);
+  }
+  100% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, .5, .5, 1);
+  }
+}
+
+@keyframes enter-smooth {
+  0% {
+    transform: translateY(-50px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.images.active > :nth-child(1) {
+  animation-delay: 0ms, 3000ms;
+}
+
+.images.active > :nth-child(2) {
+  animation-delay: 100ms, 3100ms;
+}
+
+.images.active > :nth-child(3) {
+  animation-delay: 200ms, 3200ms;
+}
+
+.images.active > :nth-child(4) {
+  animation-delay: 300ms, 3300ms;
+}
+
+.images.active > :nth-child(5) {
+  animation-delay: 400ms, 3400ms;
+}
+
+.images.active > :nth-child(6) {
+  animation-delay: 500ms, 3500ms;
+}
+
+.ticks > li {
+  opacity: 0;
+}
+
+.ticks.active > li {
+  animation: enter-start-smooth .75s 1 forwards ease-in-out;
+}
+
+@media (prefers-reduced-motion) {
+  .ticks > li {
+    opacity: 1;
+  }
+
+  .ticks.active > li {
+    animation: none;
+  }
+}
+
+@keyframes enter-start-smooth {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.ticks.active > :nth-child(2) {
+  animation-delay: 250ms;
+}
+
+.ticks.active > :nth-child(3) {
+  animation-delay: 500ms;
+}
+
+.ticks.active > :nth-child(4) {
+  animation-delay: 750ms;
+}
+
+.ticks.active > :nth-child(5) {
+  animation-delay: 1000ms;
+}
+
+.ticks.active > :nth-child(6) {
+  animation-delay: 1250ms;
+}
+
+.steps > * {
+  opacity: 0;
+}
+
+.steps.active > * {
+  animation: enter-bottom-smooth .75s 1 forwards ease-in-out;
+}
+
+@media (prefers-reduced-motion) {
+  .steps > * {
+    opacity: 1;
+  }
+
+  .steps.active > * {
+    animation: none;
+  }
+}
+
+@keyframes enter-bottom-smooth {
+  0% {
+    opacity: 0;
+    transform: translateY(75px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.steps.active > :nth-child(2) {
+  animation-delay: .75s;
+}
+
+.steps.active > :nth-child(3) {
+  animation-delay: 2s;
+}

site/content/docs/5.3/examples/download-app/download-app.js

@@ -0,0 +1,39 @@
+/* global boosted: false */
+
+(() => {
+  'use strict'
+
+  // For a proper redirection on the different stores, please copy paste the code below and adapt the links.
+  // Please visit https://developer.android.com/distribute/marketing-tools/linking-to-google-play?hl=fr#UriSummary for more Android information.
+  // Please visit https://stackoverflow.com/a/2337601 for more iOS information.
+
+  // if (!(/windows phone/i.test(navigator.userAgent)) && /android/i.test(navigator.userAgent)) {
+  //   window.location.href = 'https://play.google.com/apps/testing/com.orange.ods.app/'
+  // }
+
+  if (/ipad|iphone|ipod/i.test(navigator.userAgent)) {
+    window.location.href = 'itms-apps://apps.apple.com/fr/app/id6446178285'
+  }
+
+  // End of copy paste
+  // We use `itms-apps` instead of `https` for phones. (https://stackoverflow.com/a/2337601)
+
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('active')
+      }
+    })
+  })
+
+  observer.observe(document.querySelector('.images.row'))
+  observer.observe(document.querySelector('.ticks'))
+  observer.observe(document.querySelector('.steps#ios-steps'))
+  observer.observe(document.querySelector('.steps#android-steps'))
+
+  // Instantiate the carousel
+  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
+    .forEach(carousel => {
+      boosted.Carousel.getOrCreateInstance(carousel)
+    })
+})()