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

dropdown, automatique positionning
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-21 16:43:10 +01:00
parent d7a8611376
commit 2f7473be0a
4 changed files with 49 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@
top: 100%; top: 100%;
left: 0; left: 0;
min-width: 180px; min-width: 180px;
margin-top: 4px; margin-top: var(--padding-inner);
background-color: var(--color-bg); background-color: var(--color-bg);
border: var(--border); border: var(--border);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
@ -21,20 +21,20 @@
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 100; z-index: 100;
&::before{
content: "◀";
transform: rotate(90deg);
font-size: 14px;
position: absolute;
top: -13px;
left: 16px;
}
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: var(--padding-inner); padding: var(--padding-inner);
} }
li {
// border-bottom: var(--border-light);
&:last-child {
border-bottom: none;
}
}
a, button { a, button {
display: block; display: block;
width: 100%; width: 100%;
@ -58,6 +58,11 @@
&--align-right .dropdown__content { &--align-right .dropdown__content {
left: auto; left: auto;
right: 0; right: 0;
&::before{
left: auto;
right: 16px;
}
} }
// Variante : dropdown à droite du bouton // Variante : dropdown à droite du bouton
@ -82,3 +87,5 @@
} }
} }
} }

17
assets/css/style.css
View file

@ -1017,7 +1017,7 @@ button.sort[data-sort-type=up] .arrow {
top: 100%; top: 100%;
left: 0; left: 0;
min-width: 180px; min-width: 180px;
margin-top: 4px; margin-top: var(--padding-inner);
background-color: var(--color-bg); background-color: var(--color-bg);
border: var(--border); border: var(--border);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
@ -1027,14 +1027,19 @@ button.sort[data-sort-type=up] .arrow {
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 100; z-index: 100;
} }
.dropdown__content::before {
content: "◀";
transform: rotate(90deg);
font-size: 14px;
position: absolute;
top: -13px;
left: 16px;
}
.dropdown__content ul { .dropdown__content ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: var(--padding-inner); padding: var(--padding-inner);
} }
.dropdown__content li:last-child {
border-bottom: none;
}
.dropdown__content a, .dropdown__content button { .dropdown__content a, .dropdown__content button {
display: block; display: block;
width: 100%; width: 100%;
@ -1054,6 +1059,10 @@ button.sort[data-sort-type=up] .arrow {
left: auto; left: auto;
right: 0; right: 0;
} }
.dropdown--align-right .dropdown__content::before {
left: auto;
right: 16px;
}
.dropdown--position-right .dropdown__content { .dropdown--position-right .dropdown__content {
top: 0; top: 0;
left: 100%; left: 100%;

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

File diff suppressed because one or more lines are too long

22
assets/js/dropdown.js
View file

@ -12,11 +12,27 @@ export function initDropdowns() {
// Ferme les autres dropdowns ouverts // Ferme les autres dropdowns ouverts
dropdowns.forEach(other => { dropdowns.forEach(other => {
if (other !== dropdown) { if (other !== dropdown) {
other.classList.remove('is-open'); other.classList.remove('is-open', 'dropdown--align-right');
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
} }
}); });
const isOpening = !dropdown.classList.contains('is-open');
if (isOpening) {
// Vérifie s'il y a la place à droite
const content = dropdown.querySelector('.dropdown__content');
const triggerRect = trigger.getBoundingClientRect();
const contentWidth = content.offsetWidth || 300;
const spaceRight = window.innerWidth - triggerRect.left;
if (spaceRight < contentWidth) {
dropdown.classList.add('dropdown--align-right');
} else {
dropdown.classList.remove('dropdown--align-right');
}
}
// Toggle le dropdown actuel // Toggle le dropdown actuel
dropdown.classList.toggle('is-open'); dropdown.classList.toggle('is-open');
trigger.classList.toggle('is-selected'); trigger.classList.toggle('is-selected');
@ -26,7 +42,7 @@ export function initDropdowns() {
// Ferme tous les dropdowns au clic extérieur // Ferme tous les dropdowns au clic extérieur
document.addEventListener('click', () => { document.addEventListener('click', () => {
dropdowns.forEach(dropdown => { dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open'); dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
}); });
}); });
@ -35,7 +51,7 @@ export function initDropdowns() {
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
dropdowns.forEach(dropdown => { dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open'); dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
}); });
} }