thibaud_goiffon/popsu_html2print
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout du css clip-path et gestion des fonds avec motifs

Browse Source
This commit is contained in:
thibaud_goiffon
2019-07-18 17:38:30 +02:00
parent b0c43f872d
commit e9c9ae861d
15 changed files with 109 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Index.vue
+24 -8
View File
@@ -1,29 +1,38 @@
<template>
<Layout>
<!-- Titre, sous-titre -->
<div class="blank-page no-folio"></div>
<div class="blank-page no-folio fill-green"></div>
<div class="v-center grow no-folio">
<h1 class="pre-title center" v-html="$static.metaData.titreDuProjet" />
<h2 class="pre-sub-title center" v-html="$static.metaData.sousTitre" />
</div>
<div class="blank-page no-folio"></div>
<div class="blank-page no-folio fill-motif-cross-left"></div>
<!-- Auteurs, titre, sous-titre -->
<div class="column no-folio">
<div class="fill-motif-cross-right layer-1">
</div>
<div class="column layer-2">
<div class="bold center" v-for="auteur in $static.metaData.auteurs">
{{auteur}}
</div>
<div class="v-center grow">
<h1 class="main-title center" v-html="$static.metaData.titreDuProjet" />
<h2 class="main-pre-title center" v-html="$static.metaData.sousTitre" />
<h1 class="main-title center highlight-white" v-html="$static.metaData.titreDuProjet" />
<h2 class="main-pre-title center highlight-white" v-html="$static.metaData.sousTitre" />
</div>
<div class="center">
Logo popsu
<img src="/logo_popsu.png" alt="" style="width:2cm;">
</div>
</div>
</div>
<!-- Page de fond -->
<div class="column image-cover image-bleed-left" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'></div>
<!-- Sommaire -->
<div class="column column">
<div class="column">
<div class="section-title">
Sommaire
</div>
<div class="column justify-end table-of-content">
<span v-for="edge in $page.chapters.edges.slice().reverse()" :key="'content'+edge.node.id">
<a :href="'#chapter'+edge.node.id">{{ edge.node.titre }}</a>
@@ -43,8 +52,6 @@
<li>{{note}}</li>
</ol>
<!-- Pleine pages avant les sections -->
<div class="blank-page no-folio"></div>
<div class="column image-cover cover-left green image-bleed-left" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
</div>
<div class="column image-cover cover-right green image-bleed-right" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
@@ -56,6 +63,12 @@
<h3 class="section-title" v-bind:class="{ canbreak: isNotFirst(index) }">{{ edge.node.titre }}</h3>
<VueMarkdown lang="fr" class="section-content justify">{{ edge.node.contenu }}</VueMarkdown>
</div>
<!-- Credits -->
<div class="credits" v-for="(edge,index) in $page.credits.edges.slice().reverse()" :key="'credits'+edge.node.id">
<h4>{{ edge.node.role }}</h4>
<p>{{ edge.node.nom }}</p>
</div>
<div class="blank-page no-folio fill-green"></div>
</Layout>
</template>
<page-query>
@@ -69,6 +82,9 @@
fonds : allfonds{
edges{node{id,url}}
}
credits : allcredits{
edges{node{id,nom,role}}
}
}
</page-query>
<static-query>