Commit 1f1ecd22 authored by Dorian's avatar Dorian
Browse files

fonction css pour rentrer sortir les exergues

parent 87969049
......@@ -3,22 +3,26 @@
Maquette médor pour démarrer un nouveau numéro avec tout les layouts et une cheatsheet.
Cette maquette est un fork du numéro 21, cleanée et restructurée.
### NEW IN MÉDOR0 [in progress]
### news in médor0
* une cheatsheet qui documente un pannel de bug et tricks
* coulisse du web en classes permanentes
* un script .js pour ajouter des sauts de lignes dans les titres
* un script .js pour ajouter des sauts de lignes dans les titres (plus de balise dans le wagtail!)
* un template pour couper une image sur deux pages en taille et translation custom
* les styles css des layouts en fichiers separés
TODO-global:
* script pullout.js fonctionnel
* une mixin function pour sortir/rentrer les exergues
* sidebar title on two lines makes text un-aligned
* enquete: top column h2 on enquete/rubric makes text un-aligned
* enquete: correction du texte qui va pas jusqu'au bout de la colone
* clean lettrine
* sidebar title on two lines makes text un-aligned
* enquete, rubric, flamand: top column h2 on enquete/rubric makes text un-aligned
* enquete, flammand: correction du texte qui va pas jusqu'au bout de la colone
* edito: hide headlines?
* nombril: rubric or nombril style?
* color palettes
* edito: symbol de fin? et hide titles?
* completer docu cheatsheet (champs [à completer])
* garder les légendes sur les enquetes et moment flamand
TODO-layout:
* entretien
......@@ -43,13 +47,17 @@ Generate the table of content
make json
### Using HTML2print
Starts the serveur
make serve
Open [OSPkit](https://gitlab.constantvzw.org/osp/tools.ospkit):
cd ~/src/tools.ospkit/src
./OSPKit
Visit the URL:
http://localhost:8000
éléments
# Médor HTML2PRINT - CheatSheet
## Layout
## Layouts
Les articles se divisent en différents layouts prédéfinis.
Les articles se divisent en différents layout prédéfinis.
Pour mettre en page un article
1. couler l'article dans le wagtail
2. copier le dossier du layout correspond
3. changer l'id de l'article dans l'url à la fin de l'HTML
2. copier-coller le dossier dans ```/layout``` correspond et le renomer
3. introduire l'id de l'article dans l'url à la fin de l'HTML
```HTML
<div id="stories">
<!-- id = 780 -->
<art id="flow-main" class="interview" folio="110" src="https://medor.coop/api/v2/pages/780/?draft=true&image_"></art>
<art id="flow-main" class="entretien" folio="1" src="https://medor.coop/api/v2/pages/780"></art>
</div>
```
La classe de l'élément ```art``` va appliquer un style CSS à l'entièreté des éléments de l'article.
**S'assurer qu'on utilise le bon layout pour l'article s'il en existe un**, et de ajouter à la section correspondante dans le wagtail.
La classe de l'élément ```art``` applique un style CSS prédéfinis à l'article.
Il faut s'assurer qu'on utilise le bon layout pour l'article s'il en existe un.
### Liste des layouts
Liste des dossiers de layout et leur classes:
Liste des dossiers de layout et leur classes correspondante:
* enquete-long et enquete-short, ```class="enquete"```. La petite a une page d'intro custom, tandis que la grande a une double page.
* rubric, ```class="rubric"```. Le layout par défaut concerne toutes les rubriques: Aire libre, Fulguro-Point, Trait belge, L'enquêteke, Le sexe de Médor, Étude du milieu. Deux layouts un peu particuliers:
* rubric-web ```class="rubric"```. Coulisses du Web ont leur propre layout.
* rubric-jouer ```class="rubric"```. Médor à Jouer consiste le plus souvent en une double-page d'image.
* entretien, ```class="entretien"```
* recit, ```class="recit"```
* moment-flamand, ```class="flamand"```
* portrait, ```class="portrait"```
* portfolio, ```class="portfolio"```
* nombril, ```class="nombril"```
* edito, ```class="edito"```
* sommaire, ```class="sommaire"```
* edito - ```class="edito"```
* enquete-long et enquete-short - ```class="enquete"```.
La long a une double page d'intro custom, tandis que la short a un seul page.
* entretien - ```class="entretien"```
* moment-flamand - ```class="flamand"```
* nombril - ```class="nombril"```
* portfolio - ```class="portfolio"```
* portrait - ```class="portrait"```
* rubric - ```class="rubric"```. Le layout par défaut concerne toutes les rubriques: Aire libre, Fulguro-Point, Trait belge, L'enquêteke, Le sexe de Médor, Étude du milieu. Deux layouts articuliers:
* rubric-web - ```class="rubric"```. Les coulisses du Web ont leur propre layout.
* rubric-jouer - ```class="rubric"```. Médor à Jouer consiste le plus souvent en une double-page d'image.
* recit - ```class="recit"```
* sommaire - ```class="sommaire"```
### Têtière
### Sous-titre de têtière
Pour ajouter un sous-titre à côté de la têtière, notamment pour préciser les différentes rubriques, on utilise le champ ```rubric-subtitle``` de l'élément ```art```.
Les différents sous-titres des rubriques se trouvent en commentaire dans le layout rub.
Les différents sous-titres des rubriques se trouvent en commentaire dans le layout rubric.
```HTML
<div id="stories">
<art id="flow-main" class="rubric" rubric-subtitle="Quand Médor indague sur un détail-farce du quotidien" folio="3" src="https://medor.coop/api/v2/pages/778/?draft=true"></art>
<art id="flow-main" class="rubric" rubric-subtitle="Quand Médor indague sur un détail-farce du quotidien" folio="3" src="https://medor.coop/api/v2/pages/778"></art>
</div>
```
......@@ -48,9 +51,11 @@ Les différents sous-titres des rubriques se trouvent en commentaire dans le lay
[a completer] Les paramètre draft, image, preview à la fin de l'url ```?draft=true&image```
## Positionner des éléments sur la grille
## La grille
On utilise des utility classes
### Positionner des éléments sur la grille
Le positionnement des éléments sur la grille se fait avec une série de classes accompagnée de coordonnées.
La position par rapport au top-left corner en **x** et **y** ainsi que la **width** et **height** du bloc.
```HTML
......@@ -61,16 +66,15 @@ La position en par rapport au 4 bords de la grille, **top**, **bottom**, **left*
```HTML
<div class="bloc t-1 b-1 l-1 r-1 flow-fig1"></div>
```
On peut utiliser ```-1``` comme coordonnée ce qui fait déborder le bloc de la grille jusqu'au bord de la page. On utilise ce cas notamment pour mettre des images en pleine page.
On peut utiliser ```-1``` comme coordonnée, ce qui fait déborder le bloc de la grille jusqu'au bord de la page, notamment pour mettre des images en pleine page.
La classe ```walf``` permet de caler un bloc sur la moitier de la grille (width = half).
Par exemple pour mettre un texte sur deux colonnes d'une largeur de la moitier de la grille:
La classe **walf** permet de caler un bloc sur la moitié de la grille.
```HTML
<div class="bloc t0 l0 walf b0 flow-main"></div>
<div class="bloc t0 r0 walf b0 flow-main"></div>
```
### Variables de construction de la page
### Variables de construction de la page/grille
Ces variables sont calculées les unes en fonction des autres et servent à construire la page et la grille.
Elle peuvent être récupérées ailleurs.
......@@ -90,37 +94,70 @@ Elle peuvent être récupérées ailleurs.
**une ligne**
* ```@line-height: 12pt;```
### Note on margins
[à completer] pour utiliser ```margin-left``` il faut que le côté gauche du container soit positionner selon un certain systems
## Global CSS
## Récupérer des éléments en CSS
### Notes pour récupérer des éléments en CSS
Si on veut appliquer un style CSS a un tyde d'éléments on vise la classe de son layout suivie de sa classe.
Il est préférable de préciser la classe du layout avant de la classe de l’élément (pour éviter de mettre des ```!important;```).
```CSS
.recit .pull-out{ /* style pour les exergues d'un récit*/
.recit .pull-out{
font-size: 15pt;
}
```
Pour viser uniquement le n<sup>ième</sup> élément de ce type
Pour viser uniquement le n<sup>ième</sup> élément d'un type on utilise ```nth-of-type```.
```CSS
.recit .pull-out:nth-of-type(n){
margin-top: 6pt;
}
```
Parfois il vaut mieux inspecter l'élément, afin de voir par le biais de quelles classes le style qu'on veut changer lui est appliqué, et de copier cette classe.
Sinon on peu inspecter l'élément, afin de voir quelle classe applique le style qu'on veut changer et de copier cette classe.
```CSS
.enquete .pull-out > div > p{
font-size: 18pt;
}
```
## Images
## Exergues
HTML Exergues structure
```HTML
<aside class="pull-out" style="">
<blockquote>
<div>
<p>Texte de l'exergue</p>
</div>
<footer>
<p>Crédits</p>
</footer>
</blockquote>
</aside>
```
### Calage sur la hauteur de ligne
Comme les exergues prennent une place vertical variables ils ont tendance à décaler le texte de la grille.
Le script ```pullout.js``` tente de recalculer l'espace qu'il faudrait ajouter pour que le texte se réajuste sur la grille, et l'ajoute ci-nécéssaire à ```aside``` en ```margin-bottom``` en inline style. Le script est imprécis (à cause de l'imprécision de la conversion pixel point ?) et ne recale pas toujours bien le texte.
Pour ajuster ces marges on a besoin d'utiliser un ```!important;```.
```CSS
.enquete .pull-out:nth-of-type(3){
margin-top: 14pt;
margin-bottom: 18pt !important;
}
```
### Sortir et Rentrer les exergues de la colonne de gauche
Une fonction de ```mixins.less``` permet de facilement sortir le n<sup>ième</sup> exergue sur la colone vide à sa gauche, ou de le rentrer s'il déborde sur une colone remplie.
```CSS
.pull-out-in(3); /*empêche le 3ieme exergue de déborder)*/
.pull-out-out(5); /*fait sortir le 5ieme exergue sur la colonne de gauche)*/
```
### Positionner les images en CSS-Regions flow
## Images
Au début de la feuille CSS, on crée un flow différent pour chaques images importées dans l'article sur le wagtail.
Les images viennent dans un flow séparé, et peuvent-être positionnées individuellement.
```CSS
.fig-loop (@i) when (@i > 0) {
#flow-main figure:nth-of-type(@{i}) { .flow-into(~"flow-fig@{i}"); }
......@@ -129,12 +166,12 @@ Au début de la feuille CSS, on crée un flow différent pour chaques images imp
}
.fig-loop(11);
```
On ajoute l'image a un bloc avec sa classe de flow correspondante.
On positionne l'image avec sa classe de flow correspondante.
```HTML
<div class="bloc t-1 l-1 r-1 b-1 flow-fig2"></div>
```
Par défaut on obtient une structure html comme ceci pour les images:
Par défaut on obtient une structure HTML comme ceci pour les images:
```HTML
<figure>
<img src="https://medor.coop/media/images/example.original.jpg">
......@@ -146,61 +183,64 @@ Par défaut on obtient une structure html comme ceci pour les images:
</figure>
```
#### Mode de positionnement
### Mode de positionnement
#### Covering mode
Par défaut les images sont en ```object-fit: cover```, ce qui augmente l'image pour couvrir l’entièreté du bloc tout en maintenant son aspect-ratio. Ce qui veut dire que le reste sera coupé.
Par défaut les images sont en ```object-fit: cover```, ce qui agrandis l'image pour couvrir l’entièreté du bloc tout en maintenant son aspect-ratio, en coupant le reste.
Si notre image est coupée par son container, on peut la passer en ```object-fit: contain```, ce qui permet de la forcer à être contenue dans le bloc.
Pour ne pas que l'image se retrouve coupée par son container, on peut la passer en ```object-fit: contain```, ce qui la force à être contenue dans le bloc.
Ces deux modes sont pratiques quand on ne doit pas repositionner/recouper l'image, quand les classes de positionnement sur la grille suffisent.
#### Taille et Position
L'image est positionnée absolument par rapport à son container ```figure```. Si elle est coupé par le container et qu'on veut la déplacer pour la voir apparaître en entier, on utilise ```top, left, right, bottom```.
Par contre les deux modes précédents ne donnent pas un bon contrôle en terme de repositionnement de l'image par rapport à son container.
Si elle est en mode ```object-fit: cover``` (par défaut), le résultat déplacé sera coupé la ou les bords du bloc coupait déjà l'image...
Le mode ```object-fit: contain``` ne donne pas un bon contrôle sur le resize car les espaces autour de l'image seront considérés comme faisant partie de sa taille et positon.
L'image est positionnée absolument par rapport à son container ```figure```.
On peut la repositionner en utilisant ```top, left, right, bottom```, et changer sa taille proportionnellement par rapport au container ```width: 120%```, ou absolument ```width: 12cm```.
Si nécessaire, on peut la passer en ```object-fit: fill``` et avoir un contrôle total sur sa taille et position.
Changer la taille et position d'une image de cette manière dans les modes ```cover``` et ```contain``` ne donnent pas toujours le bon contrôle.
Si l'image est coupée par le mode ```object-fit: cover```, le résultat déplacé/redimensionné sera coupé la ou les bords du bloc coupait déjà l'image.
Le mode ```object-fit: contain``` crée des espaces autour de l'image qui sont considérés comme faisant partie de sa taille et positon.
Une option est d'utiliser ```object-position```, ce qui permet de changer l’alignement du contenu d'une image avec sa boite contenante ```img``` (et non avec son container ```figure```), on peut ainsi changer l'endroit ou elle est coupée.
```CSS
figure:nth-of-type(3) > img{
object-fit: fill;
width: 12cm;
height: auto;
top: 12pt; left: 96pt;
object-position: center top;
/* ou */
object-position: 12pt -96pt;
}
```
Si on veut la clipper par rapport a son container on utilise
Il est possible de repassé l'image en ```object: fill```, pour avoir ni coupures, ni espaces.
```CSS
figure:nth-of-type(3){
overflow: hidden;
figure:nth-of-type(3) > img{
object-fit: fill;
width: 12cm;
height: auto;
}
```
Note sur les unitées: Les ```%``` sont a éviter et les ```pt``` à privilégié. Car les ```%``` sont relatifs à la taille du bloc, donc si par après on change la largeur/hauteur du bloc on change également la taille de l'image et l'endroit ou elle est coupée.
#### Notes sur les unitées
Les ```%```, contrairement au ```pt``` sont relatifs à la taille du bloc ```figure```, donc si par après on change la largeur/hauteur du bloc on change également la taille de l'image et l'endroit ou elle est coupée.
#### Modifier les crédits d'une image
### Modifier les crédits d'une image
Parfois les crédits latéraux ne se positionnent pas bien, on peut les modifier ou enlever
```CSS
figure:nth-of-type(3) footer{
display: none;
display: none;
/* ou */
left: 24pt;
}
```
#### Transformation sur une Image
### Transformation sur une Image
Pour les **Coulisses du web** notamment, il est fréquent d'appliquer des transformations à l'image.
Pour les Coulisses du web notamment, il est fréquent d'appliquer des transformations à l'image.
On peut le faire facilement en utilisant la fonction ```trans()``` définie dans ```mixins.less```
```CSS
figure img {
object-fit: fill !important;
height: auto;
}
figure figcaption {
display: none;
}
figure:nth-of-type(2){
figure:nth-of-type(2) > img{
.trans(-6deg,0,center,center);
width: 85pt;
top: -18pt;
......@@ -208,9 +248,9 @@ figure:nth-of-type(2){
}
```
### Positionner les images en CSS background
### Gérer les images en CSS background
Si on veut plus de contrôle sur la position de l'image ça peut être utile de l'ajouter plutôt en tant que ```background-image``` en reprennant son url dans le wagtail.
Pour les image qui remplisse toute une zone de la page, ça peut être utile de les ajouter en tant que ```background-image``` en reprennant son url entier dans le wagtail.
De cette manière on peut utiliser ```background-position```.
```CSS
.fond{
......@@ -264,32 +304,9 @@ donc le % n'est pas directement par rapport a la taille de l'image,
ni directement par rapport a la taille de la page
mais par rapport au "décalage" entre les deux (pas pratique!) -->
## Exergues
### Calage sur la grille
Comme les exergues prennent une place vertical variables ils ont tendance à décaler le texte de la grille.
Le script pullout.js tente de recalculer l'espace qu'il faudrait ajouter pour que le texte se réajuste sur la grille, et l'ajoute *parfois* en ```margin-bottom``` en ```inline style```. Le script est imprécis (à cause de l'imprécision de la conversion pixel point?) et ne recale pas toujours bien le texte.
Pour ajuster ces marges on a besoin d'utiliser un ```!important;``` et de traiter chaques exergues séparément.
```CSS
.enquete .pull-out:nth-of-type(3){
margin-top: 14pt;
margin-bottom: 18pt !important;
}
```
### Déborder sur la colonne vide de gauche
```CSS
.enquete aside.pull-out:nth-of-type(3) {
margin-left: -@col-gutter-width; /* la largeur d'une colone de la grille */
}
```
## Notes de bas de page
Les notes de bas de page viennent dans un flow séparé
Les notes de bas de page viennent dans un flow séparé, et peuvent-être positionnées individuellement.
```CSS
.fn-loop (@i) when (@i > 0) {
#flow-main .footnotes li:nth-of-type(@{i}) { .flow-into(~"flow-fn@{i}"); }
......
......@@ -19,6 +19,7 @@
.sheet:nth-of-type(@{page}) .main:after { content: ""!important }
}
// Transformation fonction
.trans(@rotate, @skew, @originY, @originX) {
-webkit-transform: skewY(@skew) rotate(@rotate);
transform: skewY(@skew) rotate(@rotate);
......@@ -26,3 +27,14 @@
transform-origin: @originY @originX;
}
// Rentrer / sortir les exergues de la colone vide
.pull-out-out(@number){
.pull-out:nth-of-type(@{number}){
margin-left: -@col-gutter-width;
}
}
.pull-out-in(@number){
.pull-out:nth-of-type(@{number}){
margin-left: 0;
}
}
......@@ -12,7 +12,7 @@
* enquete ok
* page d'intro cahier 2
* medor a colorier ???
* photo
* portfolio
* portrait VERIF
* moment flamand
* recit
......
......@@ -97,10 +97,6 @@
.rubric-title {
background-color: white;
}
figure footer {
display: none;
}
.no-footer(1);
.no-footer(2);
.no-footer(7);
......@@ -63,16 +63,7 @@
}
// exergues
.enquete .pull-out{
color: red;
}
.enquete .pull-out:nth-of-type(3){
margin-left: 0;
}
.pull-out-in(4);
// corrections
figure footer {
display: none;
}
.no-footer(1);
......@@ -53,7 +53,6 @@
}
// titres à custom
@font-face {
font-family: '';
src: url('');
......@@ -64,3 +63,9 @@
}
.flamand p.header-byline {
}
// exergues
.pull-out-out(3);
.no-footer(1);
.no-footer(2);
......@@ -17,32 +17,31 @@
<div class="sheet">
<div class="page">
<div class="main">
<!-- <div class="bloc l-1 t-1 r-1 b-1 fond1"></div> -->
<div class="bloc x0 t-1 w4 r-1 flow-slug"></div>
<div class="bloc x0 y0 w8 flow-headline" style="margin-top:8pt;"></div>
<div class="bloc x0 y1 w7 h2 flow-lead" style="margin-top:16pt;"></div>
<div class="bloc l0 t5 walf b13 flow-main" style="margin:-13pt 0 -12pt 0;"></div>
<div class="bloc l0 y9 walf b0 flow-main" style="margin:34pt 0 -12pt 0pt;"></div>
<div class="bloc r0 t5 walf b0 flow-main" style="margin:0pt 0 -12pt 0;"></div>
<div class="bloc l0 t10 walf b0 flow-fig1" style="margin:-12pt 0 0pt 0;"></div>
<!-- <div class="bloc x6 t10 w2 b0 flow-fig2" style="margin:-30pt 0 0pt 0;"></div> -->
<!-- header -->
<div class="bloc x0 y0 w8 flow-headline"></div>
<div class="bloc x0 y1 w7 h2 flow-lead"></div>
<!-- main -->
<div class="bloc l0 t5 walf b13 flow-main"></div>
<div class="bloc l0 y9 walf b0 flow-main"></div>
<div class="bloc r0 t5 walf b0 flow-main"></div>
<!-- illus -->
<div class="bloc l0 t10 walf b0 flow-fig1"></div>
</div>
</div>
</div>
</div>
<div id="stories">
<art id="flow-main" class="rubric" folio="126" src="https://medor.coop/api/v2/pages/782/?draft=true"></art>
<art id="flow-main" class="nombril" folio="1" src="https://medor.coop/api/v2/pages/782/?draft=true"></art>
</div>
<!-- JAVASCRIPT -->
<script src="../../vendors/less.min.js"></script>
<!-- JAVASCRIPT -->
<script src="../../vendors/less.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.js"></script>
<script src="../../js/stories.new.js"></script>
<script src="main.js"></script>
</body>
<script src="../../js/stories.new.js"></script>
<script src="main.js"></script>
</body>
</html>
document.addEventListener("OnStoryReady", function(){
let elt = document.querySelector(".footer-byline")
, html = elt.innerHTML
;
elt.innerHTML = html
.replace("Médor", "<i>Médor</i>")
;
// médor en italique
let footerbyline = document.querySelector(".footer-byline");
footerbyline.innerHTML = footerbyline.innerHTML.replace("Médor", "<i>Médor</i>");
});
@import '../../../css/main.less';
#flow-main .pull-out:nth-of-type(1){ .flow-into(flow-encadre) }
.flow-encadre{ .flow-from(flow-encadre) }
#flow-main header .rubric-title,
#flow-main header .rubric-subtitle {.flow-into(flow-slug);}
.flow-slug {.flow-from(flow-slug);}
......@@ -17,16 +13,15 @@
#flow-main { .flow-into(flow-main); }
.flow-main { .flow-from(flow-main); }
#flow-main figure:nth-of-type(1){ .flow-into(flow-fig1); }
.flow-fig1 { .flow-from(flow-fig1); }
// FIGURES
.fig-loop (@i) when (@i > 0) {
#flow-main figure:nth-of-type(@{i}) { .flow-into(~"flow-fig@{i}"); }
.flow-fig@{i} { .flow-from(~"flow-fig@{i}"); }
.fig-loop(@i - 1);
}
.fig-loop(6);
/*custom*/
.fig-loop(2);
/*___ numéro XX ___*/
figure img {
object-fit: contain !important;
......@@ -37,11 +32,11 @@ figure:nth-of-type(1) {
height: 250pt;
}
.subhead {
display: none;
display: none;
}
.rubric .aside:nth-of-type(1) {
margin-bottom: 20pt;
.nombril.aside:nth-of-type(1) {
margin-bottom: 20pt;
}
figcaption footer {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment