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

copy link modal
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 17:25:37 +01:00
parent 2f7473be0a
commit 43ad7241d4
10 changed files with 111 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,29 +1,21 @@
.modal--share{ .modal--share{
border: var(--border); width: 240px;
border-radius: var(--radius-btn); padding-bottom: var(--padding-inner);
background-color: var(--color-bg);
padding: var(--padding-inner);
padding-top: calc( var(--padding-inner)*0.5);
padding-bottom: calc( var(--padding-inner)*1.5);
.modal-title{
display: none;
}
.socials{ .socials{
display: block; display: block;
list-style: none; list-style: none;
li{ li{
font-size: var(--fs-normal); font-size: var(--fs-normal);
padding-bottom: 6px; border-bottom: var(--border-light);
border-bottom: var(--border-light); &:first-of-type{
padding-top: 6px; border-top: var(--border-light);
}
a{
a{
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1ch; gap: 2ch;
text-decoration: none; text-decoration: none;
} }
.icon { .icon {
@ -38,27 +30,20 @@
position: relative; position: relative;
top: 2px; top: 2px;
} }
&:hover{
color: var(--color-accent);
.icon svg,
.icon svg path,
.icon svg rect{
fill: var(--color-accent)!important;
}
}
} }
} }
.copy-link{ .copy-link{
display: flex; display: flex;
gap: 0.5ch; gap: 0.5ch;
margin-top: calc(var(--spacing)*0.75); padding: 0 var(--padding-inner);
height: var(--h-block);
width: 100%;
.copy-link__field{ .copy-link__field{
flex-grow: 1; flex-grow: 1;
@ -99,7 +84,9 @@
&:focus{ &:focus{
border-color: var(--color-txt); border-color: var(--color-txt);
outline: none; outline: none;
}
&.is-copied{
color: var(--color-accent)!important;
} }
} }
@ -111,12 +98,21 @@
font-size: var(--fs-small); font-size: var(--fs-small);
padding-top: 2px; padding-top: 2px;
white-space: nowrap; white-space: nowrap;
min-width: 0px!important;
max-width: 30ch!important;
width: 7.25ch;
&::after{
content: "\00a0";
}
&:hover{ &:hover{
background-color: var(--color-accent); background-color: var(--color-accent);
} }
} }
} }
} }

77
assets/css/style.css
View file

@ -883,15 +883,8 @@ button.sort[data-sort-type=up] .arrow {
} }
} }
.modal--share { .modal--share {
border: var(--border); width: 240px;
border-radius: var(--radius-btn); padding-bottom: var(--padding-inner);
background-color: var(--color-bg);
padding: var(--padding-inner);
padding-top: calc(var(--padding-inner) * 0.5);
padding-bottom: calc(var(--padding-inner) * 1.5);
}
.modal--share .modal-title {
display: none;
} }
.modal--share .socials { .modal--share .socials {
display: block; display: block;
@ -899,14 +892,15 @@ button.sort[data-sort-type=up] .arrow {
} }
.modal--share .socials li { .modal--share .socials li {
font-size: var(--fs-normal); font-size: var(--fs-normal);
padding-bottom: 6px;
border-bottom: var(--border-light); border-bottom: var(--border-light);
padding-top: 6px; }
.modal--share .socials li:first-of-type {
border-top: var(--border-light);
} }
.modal--share .socials li a { .modal--share .socials li a {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1ch; gap: 2ch;
text-decoration: none; text-decoration: none;
} }
.modal--share .socials li .icon { .modal--share .socials li .icon {
@ -921,18 +915,12 @@ button.sort[data-sort-type=up] .arrow {
position: relative; position: relative;
top: 2px; top: 2px;
} }
.modal--share .socials li:hover {
color: var(--color-accent);
}
.modal--share .socials li:hover .icon svg,
.modal--share .socials li:hover .icon svg path,
.modal--share .socials li:hover .icon svg rect {
fill: var(--color-accent) !important;
}
.modal--share .copy-link { .modal--share .copy-link {
display: flex; display: flex;
gap: 0.5ch; gap: 0.5ch;
margin-top: calc(var(--spacing) * 0.75); padding: 0 var(--padding-inner);
height: var(--h-block);
width: 100%;
} }
.modal--share .copy-link .copy-link__field { .modal--share .copy-link .copy-link__field {
flex-grow: 1; flex-grow: 1;
@ -971,6 +959,9 @@ button.sort[data-sort-type=up] .arrow {
border-color: var(--color-txt); border-color: var(--color-txt);
outline: none; outline: none;
} }
.modal--share .copy-link input.is-copied {
color: var(--color-accent) !important;
}
.modal--share .copy-link .copy-link__btn { .modal--share .copy-link .copy-link__btn {
background-color: var(--color-txt); background-color: var(--color-txt);
color: var(--color-bg); color: var(--color-bg);
@ -979,6 +970,12 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-small); font-size: var(--fs-small);
padding-top: 2px; padding-top: 2px;
white-space: nowrap; white-space: nowrap;
min-width: 0px !important;
max-width: 30ch !important;
width: 7.25ch;
}
.modal--share .copy-link .copy-link__btn::after {
content: " ";
} }
.modal--share .copy-link .copy-link__btn:hover { .modal--share .copy-link .copy-link__btn:hover {
background-color: var(--color-accent); background-color: var(--color-accent);
@ -1839,11 +1836,6 @@ body main {
[data-template=investigation-summary] main #hero figcaption { [data-template=investigation-summary] main #hero figcaption {
margin: 0 var(--padding-body); margin: 0 var(--padding-body);
} }
[data-template=investigation-summary] main .modal--share {
position: absolute;
width: calc(100% - var(--padding-body) * 2);
bottom: calc(var(--spacing) * 2);
}
[data-template=investigation-summary] main #banner--page { [data-template=investigation-summary] main #banner--page {
padding: calc(var(--spacing) * 0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
position: fixed; position: fixed;
@ -1940,11 +1932,6 @@ body main {
[data-template=investigation-summary] main #section__synthese { [data-template=investigation-summary] main #section__synthese {
font-size: var(--fs-medium); font-size: var(--fs-medium);
} }
.modal--share {
position: absolute;
bottom: calc(var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25);
width: calc(100% - var(--padding-body));
}
} }
@media screen and (min-width: 1080px) { @media screen and (min-width: 1080px) {
[data-template=investigation-summary] main #banner--page { [data-template=investigation-summary] main #banner--page {
@ -2058,22 +2045,6 @@ body main {
#rapport .rapport__header .btn--group button a, #rapport .rapport__header .btn--group label a { #rapport .rapport__header .btn--group button a, #rapport .rapport__header .btn--group label a {
justify-content: flex-start; justify-content: flex-start;
} }
#rapport .rapport__header .modal--share {
max-width: 240px;
position: absolute;
height: 250px;
top: calc(var(--h-block) * 1.5);
left: 260px;
}
#rapport .rapport__header .modal--share::before {
content: "◀";
transform: rotate(90deg);
font-size: 10px;
position: absolute;
top: -10px;
right: calc(var(--h-block) * 1.5);
}
#rapport .rapport__content { #rapport .rapport__content {
max-width: var(--max-w-content); max-width: var(--max-w-content);
} }
@ -2176,18 +2147,6 @@ body main {
padding-left: 1ch; padding-left: 1ch;
padding-right: 1ch; padding-right: 1ch;
} }
#rapport__aside .modal--share {
position: absolute;
bottom: calc(var(--h-block) * -1.5);
right: calc(-100% + var(--padding-inner));
}
#rapport__aside .modal--share::before {
content: "◀";
font-size: 10px;
position: absolute;
bottom: calc(var(--h-block) * 0.25);
left: -9px;
}
#tab-print, #tab-toc { #tab-print, #tab-toc {
display: none; display: none;

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

File diff suppressed because one or more lines are too long

18
assets/css/template/_investigation-summary.scss
View file

@ -108,11 +108,11 @@
} }
} }
.modal--share { // .modal--share {
position: absolute; // position: absolute;
width: calc(100% - var(--padding-body) * 2); // width: calc(100% - var(--padding-body) * 2);
bottom: calc(var(--spacing) * 2); // bottom: calc(var(--spacing) * 2);
} // }
#banner--page { #banner--page {
padding: calc(var(--spacing) * 0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
@ -241,13 +241,7 @@
font-size: var(--fs-medium); font-size: var(--fs-medium);
} }
} }
.modal--share {
position: absolute;
bottom: calc(
var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25
);
width: calc(100% - var(--padding-body));
}
} }
@media #{$medium-up} { @media #{$medium-up} {

54
assets/css/template/_rapport.scss
View file

@ -114,23 +114,23 @@
// position: relative; // position: relative;
} }
.modal--share{ // .modal--share{
max-width: 240px; // max-width: 240px;
position: absolute; // position: absolute;
height: 250px; // height: 250px;
top: calc(var(--h-block) * 1.5); // top: calc(var(--h-block) * 1.5);
left: 260px; // left: 260px;
&::before{ // &::before{
content: "◀"; // content: "◀";
transform: rotate(90deg); // transform: rotate(90deg);
font-size: 10px; // font-size: 10px;
position: absolute; // position: absolute;
top: -10px; // top: -10px;
right: calc(var(--h-block) * 1.5); // right: calc(var(--h-block) * 1.5);
} // }
} // }
@ -287,20 +287,20 @@
} }
} }
.modal--share{ // .modal--share{
position: absolute; // position: absolute;
bottom: calc(var(--h-block) * -1.5); // bottom: calc(var(--h-block) * -1.5);
right: calc(-100% + var(--padding-inner)); // right: calc(-100% + var(--padding-inner));
&::before{ // &::before{
content: "◀"; // content: "◀";
font-size: 10px; // font-size: 10px;
position: absolute; // position: absolute;
bottom: calc(var(--h-block) * 0.25); // bottom: calc(var(--h-block) * 0.25);
left: -9px; // left: -9px;
} // }
} // }
} }

14
assets/js/dropdown.js
View file

@ -3,9 +3,17 @@ export function initDropdowns() {
dropdowns.forEach(dropdown => { dropdowns.forEach(dropdown => {
const trigger = dropdown.querySelector('.dropdown__trigger'); const trigger = dropdown.querySelector('.dropdown__trigger');
const content = dropdown.querySelector('.dropdown__content');
if (!trigger) return; if (!trigger) return;
// Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share
if (dropdown.querySelector('.modal--share') && content) {
content.addEventListener('click', (e) => {
e.stopPropagation();
});
}
trigger.addEventListener('click', (e) => { trigger.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
@ -40,8 +48,12 @@ 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', (e) => {
dropdowns.forEach(dropdown => { dropdowns.forEach(dropdown => {
// Ne ferme pas si le clic est dans un dropdown contenant .modal--share
if (dropdown.querySelector('.modal--share') && dropdown.contains(e.target)) {
return;
}
dropdown.classList.remove('is-open', 'dropdown--align-right'); dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
}); });

10
assets/js/share.js
View file

@ -1,14 +1,16 @@
export function copyLink() { export function copyLink() {
let buttons = document.querySelectorAll('.copy-link button'); let buttons = document.querySelectorAll('.copy-link button');
buttons.forEach(function (button, index) { buttons.forEach(function (button, index) {
let link = button.parentNode.querySelector("input").value; let input = button.parentNode.querySelector("input");
let link = input.value;
button.addEventListener('click', function() { button.addEventListener('click', function() {
navigator.clipboard.writeText(link).then(() => { navigator.clipboard.writeText(link).then(() => {
const originalText = button.textContent; input.value = 'Lien copié !';
button.textContent = 'Lien copié'; input.classList.add('is-copied');
setTimeout(() => { setTimeout(() => {
button.textContent = originalText; input.value = link;
input.classList.remove('is-copied');
}, 1000); }, 1000);
}).catch(err => { }).catch(err => {
console.error('Erreur lors de la copie:', err); console.error('Erreur lors de la copie:', err);

5
site/snippets/modal-share.php
View file

@ -1,8 +1,5 @@
<div class="modal--share"> <div class="modal--share">
<div class="modal-title">
<p>Partager</p>
<button><span class="close" w3-include-html="/assets/icons/close.svg"></span></button>
</div>
<ul class="socials"> <ul class="socials">
<li class="socials__x"> <li class="socials__x">

2
site/templates/investigations.php
View file

@ -10,7 +10,7 @@
<div class="page__sort"> <div class="page__sort">
<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> <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"> <div class="dropdown">
<button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieux</p></button> <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"> <div class="dropdown__content">
<ul> <ul>

16
site/templates/report.php
View file

@ -100,12 +100,16 @@
</button> </button>
<label for="share-banner__content" class="btn--bold-inline btn--light no-link"> <div class="dropdown">
<span class="icon"><?= svg('assets/icons/share.svg') ?></span> <button class="dropdown__trigger btn--bold-inline btn--light no-link">
<span class="text">Partager</span> <span class="icon"><?= svg('assets/icons/share.svg') ?></span>
</label> <span class="text">Partager</span>
<input type="checkbox" id="share-banner__content"> </button>
<?php snippet('modal-share') ?> <div class="dropdown__content">
<?php snippet('modal-share') ?>
</div>
</div>
</div> </div>