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{
border: var(--border);
border-radius: var(--radius-btn);
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;
}
width: 240px;
padding-bottom: var(--padding-inner);
.socials{
display: block;
list-style: none;
li{
font-size: var(--fs-normal);
padding-bottom: 6px;
border-bottom: var(--border-light);
padding-top: 6px;
a{
font-size: var(--fs-normal);
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
a{
display: flex;
align-items: center;
gap: 1ch;
gap: 2ch;
text-decoration: none;
}
.icon {
@ -38,27 +30,20 @@
position: relative;
top: 2px;
}
&:hover{
color: var(--color-accent);
.icon svg,
.icon svg path,
.icon svg rect{
fill: var(--color-accent)!important;
}
}
}
}
.copy-link{
display: flex;
gap: 0.5ch;
margin-top: calc(var(--spacing)*0.75);
padding: 0 var(--padding-inner);
height: var(--h-block);
width: 100%;
.copy-link__field{
flex-grow: 1;
@ -99,7 +84,9 @@
&:focus{
border-color: var(--color-txt);
outline: none;
}
&.is-copied{
color: var(--color-accent)!important;
}
}
@ -111,12 +98,21 @@
font-size: var(--fs-small);
padding-top: 2px;
white-space: nowrap;
min-width: 0px!important;
max-width: 30ch!important;
width: 7.25ch;
&::after{
content: "\00a0";
}
&:hover{
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 {
border: var(--border);
border-radius: var(--radius-btn);
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;
width: 240px;
padding-bottom: var(--padding-inner);
}
.modal--share .socials {
display: block;
@ -899,14 +892,15 @@ button.sort[data-sort-type=up] .arrow {
}
.modal--share .socials li {
font-size: var(--fs-normal);
padding-bottom: 6px;
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 {
display: flex;
align-items: center;
gap: 1ch;
gap: 2ch;
text-decoration: none;
}
.modal--share .socials li .icon {
@ -921,18 +915,12 @@ button.sort[data-sort-type=up] .arrow {
position: relative;
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 {
display: flex;
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 {
flex-grow: 1;
@ -971,6 +959,9 @@ button.sort[data-sort-type=up] .arrow {
border-color: var(--color-txt);
outline: none;
}
.modal--share .copy-link input.is-copied {
color: var(--color-accent) !important;
}
.modal--share .copy-link .copy-link__btn {
background-color: var(--color-txt);
color: var(--color-bg);
@ -979,6 +970,12 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-small);
padding-top: 2px;
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 {
background-color: var(--color-accent);
@ -1839,11 +1836,6 @@ body main {
[data-template=investigation-summary] main #hero figcaption {
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 {
padding: calc(var(--spacing) * 0.5) 0;
position: fixed;
@ -1940,11 +1932,6 @@ body main {
[data-template=investigation-summary] main #section__synthese {
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) {
[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 {
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 {
max-width: var(--max-w-content);
}
@ -2176,18 +2147,6 @@ body main {
padding-left: 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 {
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 {
position: absolute;
width: calc(100% - var(--padding-body) * 2);
bottom: calc(var(--spacing) * 2);
}
// .modal--share {
// position: absolute;
// width: calc(100% - var(--padding-body) * 2);
// bottom: calc(var(--spacing) * 2);
// }
#banner--page {
padding: calc(var(--spacing) * 0.5) 0;
@ -241,13 +241,7 @@
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} {

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

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

14
assets/js/dropdown.js
View file

@ -3,9 +3,17 @@ export function initDropdowns() {
dropdowns.forEach(dropdown => {
const trigger = dropdown.querySelector('.dropdown__trigger');
const content = dropdown.querySelector('.dropdown__content');
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) => {
e.stopPropagation();
@ -40,8 +48,12 @@ export function initDropdowns() {
});
// Ferme tous les dropdowns au clic extérieur
document.addEventListener('click', () => {
document.addEventListener('click', (e) => {
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.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});

10
assets/js/share.js
View file

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