studio-variable/index-main
4
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

dropdown bottom bar mobile
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-25 17:13:46 +01:00
parent 662a55863d
commit bde54fa66d
6 changed files with 41 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

14
assets/css/components/_dropdown.scss
View file

@ -151,7 +151,6 @@
width: calc(100vw - var(--padding-body)*2);
left: auto;
right: 0;
background-color: blue!important;
.modal--share {
width: 100%;
@ -167,13 +166,6 @@
#bottom-bar {
@media #{$x-small} {
}
.dropdown .dropdown__content {
top: auto;
@ -193,7 +185,13 @@
bottom: -13px;
left: auto;
right: 10%;
@media #{$x-small} {
left: 20%;
right: auto;
}
}
}

6
assets/css/components/_modal-share.scss
View file

@ -4,7 +4,7 @@
background-color: var(--color-bg);
.title {
font-size: var(--fs-xsmall);
font-size: var(--fs-small);
line-height: 1.2;
padding: var(--padding-inner);
padding-bottom: 0px;
@ -23,7 +23,7 @@
list-style: none;
li{
font-size: var(--fs-xsmall);
font-size: var(--fs-small);
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
@ -34,7 +34,7 @@
align-items: center;
gap: 2ch;
text-decoration: none;
font-size: var(--fs-xsmall);
font-size: var(--fs-small);
}
.icon {
width: 16px;

13
assets/css/style.css
View file

@ -1126,7 +1126,7 @@ button.sort[data-sort-type=up] .arrow {
background-color: var(--color-bg);
}
.modal--share .title {
font-size: var(--fs-xsmall);
font-size: var(--fs-small);
line-height: 1.2;
padding: var(--padding-inner);
padding-bottom: 0px;
@ -1147,7 +1147,7 @@ button.sort[data-sort-type=up] .arrow {
list-style: none;
}
.modal--share .socials li {
font-size: var(--fs-xsmall);
font-size: var(--fs-small);
border-bottom: var(--border-light);
}
.modal--share .socials li:first-of-type {
@ -1158,7 +1158,7 @@ button.sort[data-sort-type=up] .arrow {
align-items: center;
gap: 2ch;
text-decoration: none;
font-size: var(--fs-xsmall);
font-size: var(--fs-small);
}
.modal--share .socials li .icon {
width: 16px;
@ -1353,7 +1353,6 @@ button.sort[data-sort-type=up] .arrow {
width: calc(100vw - var(--padding-body) * 2);
left: auto;
right: 0;
background-color: blue !important;
}
.dropdown .dropdown__content .modal--share {
width: 100%;
@ -1379,6 +1378,12 @@ button.sort[data-sort-type=up] .arrow {
left: auto;
right: 10%;
}
@media screen and (max-width: 560px) {
#bottom-bar .dropdown .dropdown__content::before {
left: 20%;
right: auto;
}
}
#bottom-bar .dropdown.is-open .dropdown__content {
transform: translateX(0);
}

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

21
assets/js/dropdown.js
View file

@ -1,4 +1,4 @@
export function initDropdowns(responsiveSmall) {
export function initDropdowns(responsiveSmall, responsiveSmallX) {
const dropdowns = document.querySelectorAll('.dropdown');
function updateBodyOverflow(isOpen, dropdownElement = null) {
@ -33,6 +33,8 @@ export function initDropdowns(responsiveSmall) {
if (other !== dropdown) {
other.classList.remove('is-open', 'dropdown--align-right');
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
const otherContent = other.querySelector('.dropdown__content');
if (otherContent) otherContent.style.transform = '';
}
});
@ -56,6 +58,19 @@ export function initDropdowns(responsiveSmall) {
dropdown.classList.toggle('is-open');
trigger.classList.toggle('is-selected');
// Décalage horizontal pour #bottom-bar sur petit écran
if (dropdown.closest('#bottom-bar') && window.innerWidth < responsiveSmallX) {
if (dropdown.classList.contains('is-open')) {
requestAnimationFrame(() => {
const rect = content.getBoundingClientRect();
const paddingBody = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--padding-body')) || 0;
content.style.transform = `translateX(${-rect.left + paddingBody}px)`;
});
} else {
content.style.transform = '';
}
}
// Gère l'overflow du body sur mobile
updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
});
@ -70,6 +85,8 @@ export function initDropdowns(responsiveSmall) {
}
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
const c = dropdown.querySelector('.dropdown__content');
if (c) c.style.transform = '';
});
updateBodyOverflow(false);
});
@ -80,6 +97,8 @@ export function initDropdowns(responsiveSmall) {
dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
const c = dropdown.querySelector('.dropdown__content');
if (c) c.style.transform = '';
});
updateBodyOverflow(false);
}

3
assets/js/script.js
View file

@ -10,6 +10,7 @@ import { initSort } from './sort.js';
const responsiveMedium = 1080;
const responsiveSmall = 768;
const responsiveSmallX = 560;
window.onload = async function () {
console.log("SCRIPT LOADED");
@ -20,7 +21,7 @@ window.onload = async function () {
copyLink();
playVideo();
initDropdowns(responsiveSmall);
initDropdowns(responsiveSmall, responsiveSmallX);
initSwipers();
progressBar();