download pdf aside

This commit is contained in:
Julie Blanc 2026-01-09 14:37:44 +01:00
parent 5f4783f0b6
commit 3ea41b5cf0
5 changed files with 62 additions and 40 deletions

View file

@ -1776,7 +1776,8 @@ body main {
cursor: pointer;
}
[data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 3) 0;
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 3);
}
[data-template=investigation-summary] main .section__article {
margin-left: var(--banner-medium);
@ -1808,7 +1809,8 @@ body main {
width: calc((100% - var(--max-w-content)) / 2);
}
[data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 3) 0;
margin-top: 0;
margin-bottom: calc(var(--spacing) * 3);
}
[data-template=investigation-summary] main #hero figcaption {
max-width: var(--max-w-content);
@ -1857,9 +1859,9 @@ body main {
font-weight: normal;
}
#rapport .rapport__header .rapport__figure {
display: none;
width: 100%;
aspect-ratio: 2/1;
margin-top: calc(var(--spacing) * 2);
}
#rapport .rapport__header .rapport__figure img {
width: 100%;
@ -1873,7 +1875,7 @@ body main {
border-bottom: var(--border-light);
flex-grow: 2;
align-items: flex-start;
margin-top: calc(var(--spacing) * 2);
margin-top: calc(var(--spacing) * 0.5);
}
#rapport .rapport__header .rapport__dl .dl__group {
display: grid;
@ -1962,12 +1964,11 @@ body main {
position: fixed;
top: calc(var(--header-h) + var(--padding-body));
left: var(--padding-body);
border: var(--border-light);
height: calc(100vh - var(--header-h) - var(--padding-body) * 2);
height: calc(100vh - var(--header-h) - var(--padding-body) * 4);
}
#rapport__aside .tabs {
display: flex;
border-bottom: var(--border-light);
border: var(--border-light);
height: calc(var(--h-block) * 1.25);
}
#rapport__aside .tabs .tab {
@ -1992,6 +1993,8 @@ body main {
padding: var(--padding-body);
height: calc(100% - var(--h-block) * 1.25);
overflow: scroll;
border: var(--border-light);
border-top: none;
}
#rapport__aside #toc ul {
list-style: none;
@ -2015,6 +2018,10 @@ body main {
#rapport__aside #toc a {
text-decoration: none;
}
#rapport__aside #download-pdf {
margin: 0 auto;
margin-top: calc(var(--spacing) * 0.5);
}
#tab-print, #tab-toc {
display: none;

File diff suppressed because one or more lines are too long

View file

@ -261,8 +261,8 @@
}
#hero{
margin: calc(var(--spacing)*3) 0;
margin-top: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*3);
}
.section__article{
@ -310,7 +310,8 @@
}
#hero{
margin: calc(var(--spacing)*3) 0;
margin-top: 0;
margin-bottom: calc(var(--spacing)*3);
figcaption{
max-width: var(--max-w-content);
margin: 0 auto;

View file

@ -47,9 +47,9 @@
.rapport__figure{
display: none;
width: 100%;
aspect-ratio: 2/1;
margin-top: calc(var(--spacing)*2);
img{
width: 100%;
height: 100%;
@ -64,7 +64,7 @@
border-bottom: var(--border-light);
flex-grow: 2;
align-items: flex-start;
margin-top: calc(var(--spacing)*2);
margin-top: calc(var(--spacing)*0.5);
.dl__group{
@include grid-content();
border-top: var(--border-light);
@ -184,13 +184,13 @@
position: fixed;
top: calc(var(--header-h) + var(--padding-body));
left: var(--padding-body);
border: var(--border-light);
// border-radius: var(--radius-small);
height: calc(100vh - var(--header-h) - var(--padding-body)*2);
height: calc(100vh - var(--header-h) - var(--padding-body)*4);
.tabs{
display: flex;
border-bottom: var(--border-light);
border: var(--border-light);
height: calc(var(--h-block)*1.25);
.tab{
@ -221,6 +221,8 @@
padding: var(--padding-body);
height: calc(100% - var(--h-block)*1.25);
overflow: scroll;
border: var(--border-light);
border-top: none;
}
@ -253,6 +255,11 @@
}
}
#download-pdf{
margin: 0 auto;
margin-top: calc(var(--spacing)*0.5);
}
}

View file

@ -14,31 +14,38 @@
<div class="content-aside">
<nav id="toc">
<ul>
<li class="toc-level-1"><a href="#auteurs">Les auteurs de ce rapport</a></li>
<li class="toc-level-1 selected"><a href="#rappel-faits">Rappel des faits</a></li>
<li class="toc-level-1"><a href="#ordre-mission">Ordre de mission</a></li>
<li class="toc-level-1"><a href="#sources">1. Sources et documentation visuelle disponible</a></li>
<li class="toc-level-1"><a href="#reconstitution">2. Reconstitution générale</a></li>
<li class="toc-level-2"><a href="#modelisation">2.1 Modélisation du site</a></li>
<li class="toc-level-2"><a href="#horodatage">2.2 Horodatage</a></li>
<li class="toc-level-2"><a href="#synchronisation">2.3 Synchronisation des vidéos sources</a></li>
<li class="toc-level-2"><a href="#decoupage">2.4 Découpage en séquences clés</a></li>
<li class="toc-level-2"><a href="#trajectoire-vehicule">2.5 Reconstitution de la trajectoire du véhicule de M. BICO</a></li>
<li class="toc-level-2"><a href="#trajectoires-tirs">2.6 Reconstitution des trajectoires des tirs effectués par les policiers</a></li>
<li class="toc-level-1"><a href="#observations">3. Observations</a></li>
<li class="toc-level-1"><a href="#annexe">Annexe méthodologique</a></li>
<li class="toc-level-1"><a href="#declaration">Déclaration sur l'honneur</a></li>
<li class="toc-level-1"><a href="#contact">Contact</a></li>
</ul>
</nav>
<nav id="toc">
<ul>
<li class="toc-level-1"><a href="#auteurs">Les auteurs de ce rapport</a></li>
<li class="toc-level-1 selected"><a href="#rappel-faits">Rappel des faits</a></li>
<li class="toc-level-1"><a href="#ordre-mission">Ordre de mission</a></li>
<li class="toc-level-1"><a href="#sources">1. Sources et documentation visuelle disponible</a></li>
<li class="toc-level-1"><a href="#reconstitution">2. Reconstitution générale</a></li>
<li class="toc-level-2"><a href="#modelisation">2.1 Modélisation du site</a></li>
<li class="toc-level-2"><a href="#horodatage">2.2 Horodatage</a></li>
<li class="toc-level-2"><a href="#synchronisation">2.3 Synchronisation des vidéos sources</a></li>
<li class="toc-level-2"><a href="#decoupage">2.4 Découpage en séquences clés</a></li>
<li class="toc-level-2"><a href="#trajectoire-vehicule">2.5 Reconstitution de la trajectoire du véhicule de M. BICO</a></li>
<li class="toc-level-2"><a href="#trajectoires-tirs">2.6 Reconstitution des trajectoires des tirs effectués par les policiers</a></li>
<li class="toc-level-1"><a href="#observations">3. Observations</a></li>
<li class="toc-level-1"><a href="#annexe">Annexe méthodologique</a></li>
<li class="toc-level-1"><a href="#declaration">Déclaration sur l'honneur</a></li>
<li class="toc-level-1"><a href="#contact">Contact</a></li>
</ul>
</nav>
<div id="print-features">
<p>Paramétrage impression</p>
</div>
<div id="print-features">
<p>Paramétrage impression</p>
</div>
</div>
<button id="download-pdf" class="btn--bold">
<a href="#">
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
<span class="text">Télégarcher le&nbsp;PDF</span>
</a>
</button>
</aside>
@ -85,14 +92,14 @@
<div class="btn--group">
<button class="btn--bold">
<button class="btn--bold-inline btn--light">
<a href="#">
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
<span class="text">Télégarcher le&nbsp;PDF</span>
</a>
</button>
<button class="btn--bold-inline">
<button class="btn--bold-inline btn--light">
<a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">
<span class="icon"><?= svg('assets/icons/play.svg') ?></span>
<span class="text">Voir la&nbsp;synthèse</span>