-
Notifications
You must be signed in to change notification settings - Fork 55
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Examples: new app download page #1915
Changes from 40 commits
e9aec93
1659112
7cc775c
49eb64a
c73fa99
f2c4d59
bd0d0ce
c62ddf7
670ae9d
6246da6
d2b752f
3ddc6a0
30dbd78
e11a535
6fe4573
f4c93af
fe7823f
3dbd3f5
e0ad02c
bd53c23
bd9d3ea
481a1c1
ac00211
e33fa55
e096874
c27e4a8
373719d
5ffaee3
68edeee
c23119d
545798e
0d95016
491241b
c1a9a58
e873164
6bf6ca1
160fb5c
77a01cd
81cc582
2461596
1adecec
3432959
e9d9255
5eeaf6a
fb1a2e4
8eecc4a
e63049d
b08f3e2
0cd4e05
06de54a
02cd44f
cd2b7e8
ff4f1ff
934ad95
ae63096
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,254 @@ | ||
.btn-secondary { | ||
julien-deramond marked this conversation as resolved.
Show resolved
Hide resolved
|
||
background-color: transparent; | ||
} | ||
|
||
.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) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just saw this article: https://nicolas-hoizey.com/articles/2023/04/07/running-css-animations-only-if-both-the-device-and-the-user-allow-it/ I think it could be a good way to improve a11y and general performance. Should we give it a try? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah we could but I don't think that we should do it in v5 due to the lack of support ? Or maybe if we introduce the actual as fallback ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes it may be too soon to use it. I think we can wait for a better support but it will be a really interesting feature soon... There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll create a feature request once this PR is merged. |
||
.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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
/* global boosted: false */ | ||
|
||
(() => { | ||
'use strict' | ||
|
||
// For a proper redirection on the different stores, please copy paste the code below and adapt the links. | ||
|
||
// 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) | ||
}) | ||
})() |
julien-deramond marked this conversation as resolved.
Show resolved
Hide resolved
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"Google Tag Manager" should prolly be changed