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

create dropdown
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:33:15 +01:00
parent d28c90aefe
commit d7a8611376
9 changed files with 275 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

34
assets/css/components/_buttons.scss
View file

@ -32,31 +32,61 @@ button:disabled{
.btn--small{
display: block;
height: calc(var(--h-block)*0.75);
border: var(--border);
border: var(--border-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
line-height: 1;
overflow: hidden;
white-space: nowrap;
a{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 1ch;
padding-top: 2px;
}
.icon{
--size: 10px;
height: var(--size);
width: var(--size);
position: relative;
top: -8px;
svg{
width: 100%;
fill: var(--color-txt);
}
}
&.no-link{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 1ch;
padding-top: 2px;
}
&:hover{
color: currentColor;
border-color: currentColor;
background-color: var(--grey-800);
}
}
.btn--small.is-selected{
background-color: var(--color-txt);
border-color: var(--color-txt);
color: var(--color-bg);
a{ color: var(--color-bg); }
svg{ fill: var(--color-bg); }
}
.btn--bold,

84
assets/css/components/_dropdown.scss Normal file
View file

@ -0,0 +1,84 @@
.dropdown {
position: relative;
display: inline-block;
&__trigger {
cursor: pointer;
}
&__content {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
margin-top: 4px;
background-color: var(--color-bg);
border: var(--border);
border-radius: var(--radius-btn);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 100;
ul {
list-style: none;
margin: 0;
padding: var(--padding-inner);
}
li {
// border-bottom: var(--border-light);
&:last-child {
border-bottom: none;
}
}
a, button {
display: block;
width: 100%;
padding: 0.75em 1ch;
font-size: var(--fs-small);
text-align: left;
text-decoration: none;
color: var(--color-txt);
background: none;
border: none;
cursor: pointer;
&:hover {
background-color: var(--grey-800);
}
}
}
// Positionnement par défaut : sous le bouton, aligné à gauche
// Variante : aligné à droite
&--align-right .dropdown__content {
left: auto;
right: 0;
}
// Variante : dropdown à droite du bouton
&--position-right .dropdown__content {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 4px;
}
&.is-open {
.dropdown__content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
&--position-right.is-open {
.dropdown__content {
transform: translateX(0);
}
}
}

32
assets/css/components/_sort.scss
View file

@ -1,8 +1,5 @@
.sort{
button.sort{
display: flex;
align-items: center;
gap: 1ch;
.arrow{
line-height: 0;
@ -23,17 +20,6 @@
}
.icon{
--size: 10px;
height: var(--size);
width: var(--size);
position: relative;
top: -8px;
svg{
width: 100%;
fill: var(--color-txt);
}
}
&[data-sort-type="up"]{
@ -42,20 +28,4 @@
}
}
&:hover{
color: var(--grey-100);
svg{
fill: var(--grey-100);
}
}
}

125
assets/css/style.css
View file

@ -294,9 +294,8 @@ button:disabled {
}
.btn--small {
display: block;
height: calc(var(--h-block) * 0.75);
border: var(--border);
border: var(--border-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
line-height: 1;
@ -307,18 +306,48 @@ button:disabled {
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 1ch;
padding-top: 2px;
}
.btn--small .icon {
--size: 10px;
height: var(--size);
width: var(--size);
position: relative;
top: -8px;
}
.btn--small .icon svg {
width: 100%;
fill: var(--color-txt);
}
.btn--small.no-link {
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 1ch;
padding-top: 2px;
}
.btn--small:hover {
color: currentColor;
border-color: currentColor;
background-color: var(--grey-800);
}
.btn--small.is-selected {
background-color: var(--color-txt);
border-color: var(--color-txt);
color: var(--color-bg);
}
.btn--small.is-selected a {
color: var(--color-bg);
}
.btn--small.is-selected svg {
fill: var(--color-bg);
}
.btn--bold,
.btn--bold-inline {
@ -504,12 +533,7 @@ button:disabled {
padding-right: 0.25ch;
}
.sort {
display: flex;
align-items: center;
gap: 1ch;
}
.sort .arrow {
button.sort .arrow {
line-height: 0;
--size: 12px;
height: var(--size);
@ -522,30 +546,13 @@ button:disabled {
transform: rotate(90deg);
transition: transform 0.2s ease-in;
}
.sort .arrow svg {
button.sort .arrow svg {
width: 100%;
fill: var(--color-txt);
}
.sort .icon {
--size: 10px;
height: var(--size);
width: var(--size);
position: relative;
top: -8px;
}
.sort .icon svg {
width: 100%;
fill: var(--color-txt);
}
.sort[data-sort-type=up] .arrow {
button.sort[data-sort-type=up] .arrow {
transform: rotate(-90deg);
}
.sort:hover {
color: var(--grey-100);
}
.sort:hover svg {
fill: var(--grey-100);
}
#hero {
width: calc(100vw - var(--padding-body) * 2);
@ -998,6 +1005,70 @@ button:disabled {
pointer-events: auto;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown__trigger {
cursor: pointer;
}
.dropdown__content {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
margin-top: 4px;
background-color: var(--color-bg);
border: var(--border);
border-radius: var(--radius-btn);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 100;
}
.dropdown__content ul {
list-style: none;
margin: 0;
padding: var(--padding-inner);
}
.dropdown__content li:last-child {
border-bottom: none;
}
.dropdown__content a, .dropdown__content button {
display: block;
width: 100%;
padding: 0.75em 1ch;
font-size: var(--fs-small);
text-align: left;
text-decoration: none;
color: var(--color-txt);
background: none;
border: none;
cursor: pointer;
}
.dropdown__content a:hover, .dropdown__content button:hover {
background-color: var(--grey-800);
}
.dropdown--align-right .dropdown__content {
left: auto;
right: 0;
}
.dropdown--position-right .dropdown__content {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 4px;
}
.dropdown.is-open .dropdown__content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown--position-right.is-open .dropdown__content {
transform: translateX(0);
}
.page__title {
font-size: var(--fs-big);
font-weight: normal;

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

File diff suppressed because one or more lines are too long

1
assets/css/style.scss
View file

@ -19,6 +19,7 @@
@import "components/search-form";
@import "components/list-socials";
@import "components/modal-share";
@import "components/dropdown";
@import "components/text";
@import "components/card-article";
@import "components/card-article-small";

43
assets/js/dropdown.js Normal file
View file

@ -0,0 +1,43 @@
export function initDropdowns() {
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown => {
const trigger = dropdown.querySelector('.dropdown__trigger');
if (!trigger) return;
trigger.addEventListener('click', (e) => {
e.stopPropagation();
// Ferme les autres dropdowns ouverts
dropdowns.forEach(other => {
if (other !== dropdown) {
other.classList.remove('is-open');
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
}
});
// Toggle le dropdown actuel
dropdown.classList.toggle('is-open');
trigger.classList.toggle('is-selected');
});
});
// Ferme tous les dropdowns au clic extérieur
document.addEventListener('click', () => {
dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});
});
// Ferme au press Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});
}
});
}

2
assets/js/script.js
View file

@ -5,6 +5,7 @@ import { bannerStickyDesktop } from './banner-sticky-desktop.js';
import { themeToggle } from './themeToggle.js';
import { initHeroSlider } from './hero-slider.js';
import { playVideo } from './hero-video.js';
import { initDropdowns } from './dropdown.js';
const responsiveMedium = 1080;
const responsiveSmall = 768;
@ -19,4 +20,5 @@ window.onload = async function () {
bannerStickyDesktop(responsiveSmall);
initHeroSlider();
playVideo();
initDropdowns();
}

18
site/templates/investigations.php
View file

@ -8,12 +8,20 @@
</p>
</div>
<?php snippet('search-form') ?>
<div class="page__sort">
<button class="sort btn--small btn--light no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
<button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieu</p></button>
<button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Mots-clés</p></button>
<button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
<div class="dropdown" id="sort-by-place">
<button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieux</p></button>
<div class="dropdown__content">
<ul>
<li><button type="button" data-filter="france">France</button></li>
<li><button type="button" data-filter="cisjordanie">Cisjordanie</button></li>
<li><button type="button" data-filter="etats-unis">États-Unis</button></li>
<li><button type="button" data-filter="gaza">Gaza</button></li>
</ul>
</div>
</div>
<button class="sort btn--small no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Mots-clés</p></button>
</div>
<section id="container-cards">