Commit 0f316d5e authored by ludi's avatar ludi
Browse files

Merge branch 'master' of gitlab.constantvzw.org:osp/work.balsamine.2021-2022

parents df5e6e35 102f2ed8
......@@ -13,7 +13,7 @@
date_end: "08.10"
shape: "troisfenetre.svg"
image: "interieur-FULLHD.jpg"
image: "interieur.jpg"
orientation:
metro: "right"
totem: "right"
......
......@@ -13,7 +13,7 @@
# heure: "20h30"
shape: "trace.svg"
image: "auteur-inconnu-FULLHD.jpg"
image: "auteur-inconnu.jpg"
orientation:
totem: "down"
degrade:
......
......@@ -13,7 +13,7 @@
date_end: "29.10"
shape: "cerf.svg"
image: "paradoxe_FULLHD.jpg"
image: "paradoxe.jpg"
orientation:
totem: "down"
degrade:
......
......@@ -17,7 +17,7 @@
# heure: "20h30"
shape: "lego.svg"
image: "mexico-FULLHD.jpg"
image: "mexico.jpg"
orientation:
totem: "up"
degrade:
......
---
titre: "Les lianes"
post_titre: "En partenariat et co-présentation avec Ars Musica"
type: "Création théâtre et musique"
auteurice: "Françoise Berlanger"
accroche: "D'un corps à l'autre. Vie et métamorphoses."
credits:
- Avec: "Caroline Daish, Fabian Fiorini (piano), Daya Hallé, Mika Oki (musique électronique), Katia Lecomte Mirsky et Emilienne Tempels"
credit_photo: "Théodore Marković"
date_start: "12.11"
date_end: "17.11"
shape: "serpent.svg"
image: "lianes.jpg"
orientation:
metro: "down"
degrade:
metro: "up"
theme: "light"
theme_footer: "light"
logos:
- "fede_wall_bru"
- "culture_be"
- "cocof"
- "WBI"
- "WBTD"
- "RAB"
- "art_27"
- "arsene_50"
- "zinne"
- "ars_musica"
......@@ -4,34 +4,14 @@
margin-left: -0.125em;
}
#interieur.metro {
/* #interieur.metro {
--flex-logos-size: 2.5cm;
}
} */
#interieur.metro .picture img {
left: -75%;
left: -61.5%;
#interieur.metro .picture{
background-position: 61.5% center;
}
#interieur.totem .picture img {
/* width: 116% !important;
top: -20%;
left: -12%; */
/* width: 125% !important;
top: -24%;
left: -18%; */
/* left: -97%; */
/* image avec le text pas sur la fenetre */
/* width: 130% !important;
top: 0%;
left: -20%; */
/* width: 130% !important;
top: 0%;
left: -10%; */
}
#interieur.totem .picture{
background-position: 45% center;
}
......@@ -72,23 +52,14 @@
font-size: 1rem;
left: calc(100% + 1.5em);
top: 3em;
/* top: 1.5em; */
/* content: "";
display: inline-block;
vertical-align: text-top;
height: 0.5em;
width: 0.5em;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: 0.4em;
background-image: url(http://localhost:8000/assets/picto/picto_rond.svg);
position: absolute;
left: 100%;
margin-left: 0.5em; */
}
#interieur.metro .accroche .quote::after{
top: 1.5em;
}
#interieur .credits span.ref{
display: block;
}
#interieur.totem .credits span.ref{
position: absolute;
left: calc(100% + 8cm);
top: calc(1.2rem * 2);
......@@ -168,7 +139,6 @@
/* paradoxe billy
========================================================================== */
#le-paradoxe-de-billy.totem .picture{
/* perso centrer */
background-size: 117% auto;
background-position: 100% 55%;
}
......@@ -177,23 +147,10 @@
max-height: 37cm;
position: relative;
top: 1cm;
/* to disalign */
/* right: -9cm; */
}
#le-paradoxe-de-billy .auteurice {
margin-top: 8cm;
/* margin-top: 1.5em; */
/* position: absolute;
top: calc(var(--top-division) + 4cm);
right: 0; */
/* text-align: right; */
/* z-index: 100;
color: white; */
}
#le-paradoxe-de-billy .credits{
/* width: 50%; */
}
/* 20-octobre-1968-mexico
========================================================================== */
......@@ -201,49 +158,18 @@
width: 76%;
font-size: 4.1em;
padding-top: 0.175em;
}
/* #20-octobre-1968-mexico.totem .picture img {
height: auto;
width: 130% !important;
right: -12.5cm;
left: auto;
top: -19.5cm;
} */
#20-octobre-1968-mexico.totem .picture{
background-size: 130% auto;
background-size: auto;
background-position: 68% 72%;
}
#20-octobre-1968-mexico.totem .shape-wrapper{
max-height: 36cm;
}
#20-octobre-1968-mexico.totem.up .auteurice{
/* position: absolute;
bottom: 18cm;
width: 29cm;
color: black;
z-index: 100000; */
}
#20-octobre-1968-mexico .credits{
/* width: 27cm; */
/* width: 92%; */
}
#20-octobre-1968-mexico .credits dt:last-of-type{
/* display: none; */
}
#20-octobre-1968-mexico .credits span{
/* display: inline-block;
margin-right: -31cm; */
/* display: none; */
}
#20-octobre-1968-mexico .auteurice span{
font-size: 1rem;
display: block;
}
#20-octobre-1968-mexico .credits span:nth-of-type(1){
display: block;
width: 28cm;
......@@ -256,3 +182,12 @@ top: -19.5cm;
right: 0;
top: calc(1.2 * 2 * 1rem);
}
/* lianes
========================================================================== */
#les-lianes .shape-wrapper{
position: relative;
top: -2cm;
left: 2cm;
/* left: 8cm; */
}
/* ___ PRINT ___ */
@media print{
/* Instagram */
@page {
size: 2850px 1500px;
margin: 0cm 0cm;
}
}
/* ___ PRINT ___ */
@media print{
/* Instagram */
@page {
size: 2048px 2048px;
margin: 0cm 0cm;
}
}
......@@ -397,7 +397,8 @@ header {}
right: calc(50% + 4cm);
}
.totem.down .credits {
.totem.down .credits,
.metro.down .credits{
color: white;
}
......@@ -433,25 +434,6 @@ footer .logos {
flex: 1 0 0%;
}
/* metro footer */
.metro footer {
position: absolute;
bottom: 0;
left: 50%;
right: 0;
}
.metro footer .wrapper{
flex-wrap: wrap;
}
.metro footer .balsa {
flex: 0 0 100%;
padding: 0;
}
.metro footer .logos {
flex: 0 0 100%;
padding: 0;
}
/* logo balsa */
footer .balsa {
display: flex;
......@@ -477,6 +459,28 @@ footer .balsa .logo svg {
width: 100%;
}
/* metro footer */
.metro footer {
position: absolute;
bottom: 0;
left: 50%;
right: 0;
}
.metro footer .wrapper{
flex-wrap: wrap;
}
.metro footer .balsa {
flex: 0 0 100%;
padding: 0;
}
.metro footer .logos {
flex: 0 0 100%;
padding: 0;
}
.metro{
--flex-logos-size: 2.5cm;
}
/* footer color */
footer.light .fond{
background: var(--very-light-grey);
......@@ -502,13 +506,13 @@ footer.black .logo svg path{
}
/* pas de fond pour metro */
.metro.right footer{
:is(.metro.right, .metro.down) footer{
color: white;
}
.metro.right footer .fond{
:is(.metro.right, .metro.down) footer .fond{
background: none;
}
.metro.right .logo svg path {
:is(.metro.right, .metro.down) .logo svg path {
fill: white;
}
......@@ -605,6 +609,12 @@ footer.black .logo svg path{
:is(.totem.left, .totem.right) .picture{
background-size: auto 100%;
}
:is(.metro.left, .metro.right) .picture{
background-size: auto 100%;
}
:is(.metro.up, .metro.down) .picture{
background-size: 100% auto;
}
/* SHAPE SECTION
========================================================================== */
......@@ -623,6 +633,10 @@ section.forme>.wrapper {
display: flex;
}
:is(.metro.up, .metro.down) .shape-wrapper{
max-height: 40cm;
}
/* svg styling */
.shape-wrapper svg {
flex-grow: 1;
......@@ -672,21 +686,18 @@ section.forme>.wrapper {
/* if one of those, the accroche is outside the shape container */
.metro.down .accroche {
top: auto;
bottom: 4cm;
bottom: 3cm;
width: 150cm;
}
.metro.up .accroche {
top: 4cm;
width: 150cm;
}
.totem.down .accroche {
top: auto;
bottom: 4cm;
width: 110cm;
}
.totem.up .accroche {
top: 3.5cm;
width: 110cm;
......
......@@ -22,11 +22,15 @@ TODO:
--color-paper: white;
--color-marginBox: skyblue;
/* --pagedjs-crop-color: black;
--pagedjs-crop-shadow: white;
--pagedjs-crop-stroke: 1px; */
--interface-height: 40px;
--color-interface-bar: gainsboro;
--color-interface-bar-text: black;
--color-interface-bar-border: darkgrey;
--interface-bar-height: 40px;
--interface-outline: 1px;
--page-space: 5cm;
}
......@@ -46,7 +50,7 @@ TODO:
flex-wrap: nowrap;
/* margin: 0 auto; */
position: relative;
top: var(--interface-height);
top: var(--interface-bar-height);
}
.pagedjs_page {
......@@ -209,14 +213,18 @@ body > .interface{
@media screen {
body > .interface {
font-size: 14px; /* fixed font-size so it doesn't interfere with user font-sizes */
background: gainsboro;
font-family: sans-serif;
background: var(--color-interface-bar);
border-bottom: thin var(--color-interface-bar-border) solid;
box-sizing: border-box;
color: var(--color-interface-bar-text);
font-family: monospace;
text-transform: capitalize;
display: flex;
gap: 1em;
gap: 1.5em;
padding: 0 0.5em;
width: 100%;
height: var(--interface-height);
height: var(--interface-bar-height);
align-items: stretch;
/* pagedjs crop marks have index of 9999999999, so we put it just above */
......@@ -225,5 +233,15 @@ body > .interface{
body > .interface > .control {
display: flex;
align-items: center;
gap: 0.5em;
}
input{
font-family: monospace;
font-size: 14px;
text-transform: capitalize;
}
.page-control input{
width: 5em;
}
}
This diff is collapsed.
This diff is collapsed.
......@@ -12,14 +12,17 @@
// * start
// * don't spread if only 1 sheet
// * prevent classic zoom
// * more generic control object (class?) that automatically:
// - update function on input, has default value, set in session storage
// --- Start
// GETTING BACK SESSION VARIABLES
// ============================================================================
// reload value from sessionStorage
// IMPORTANT NOTE: for that to work we have to call this function after pagedjs
// using the window.PagedConfig after parameter
// handler/hook or calling pagedjs async does not work!
function getSessionValue(valueName, defaultValue){
let sessionValue = JSON.parse(sessionStorage.getItem(valueName));
return sessionValue === null ? defaultValue : sessionValue;
......@@ -32,17 +35,64 @@ let PAGE = getSessionValue("page", 1);
let INTERFACE_CREATED = false;
function createZoomSlider(){
// CREATING CONTROLS
// ============================================================================
// generic control html
function createControl(name, type, title){
// html
let $container = $('<div>').addClass('control');
let $slider = $('<input>').attr('type', 'range');
let $label = $('<label>').html('Zoom');
$container.append($slider);
$container.append($label);
// TODO: normally would do an ID, by we can't target id with pagedjs outside the pages??
$container.addClass(name+'-control');
$control = $('<input>').attr('type', type).attr('title', title);
if(type == "button"){
$control.attr("value", name);
}
else{
let $label = $('<label>').html(name);
$container.append($label);
}
$container.prepend($control);
return $container;
}
function createCheckboxControl(name, boolean){
// html
let $container = createControl(name, 'checkbox');
let $checkbox = $container.find("input");
// toggle class on body, on state change
$checkbox.on('change', function(){
$('body').toggleClass(name);
boolean = !boolean;
sessionStorage.setItem(name, boolean);
});
// init values
if(boolean){
$('body').addClass(name);
$checkbox.prop('checked', true);
}
return $container;
}
function createZoomSlider(){
// html
let $container = createControl('zoom', 'range');
let $slider = $container.find("input");
// init values
$slider.attr('min', 0);
$slider.attr('max', 2);
$slider.attr('step', 0.05);
$slider.attr('step', 0.1);
$slider.attr('value', ZOOM);
let $pages = $('.pagedjs_pages');
......@@ -57,10 +107,12 @@ function createZoomSlider(){
// set sessionStorage
sessionStorage.setItem("zoom", val);
}
$slider.on('input', function(){
let val = $(this).val();
updateZoomSlider(val);
});
updateZoomSlider(ZOOM);
return $container;
......@@ -73,11 +125,8 @@ function createGoToPageButton(){
// scroll, but for button coherence so the value is the good one when refreshing
// html
let $container = $('<div>').addClass('control');
let $number = $('<input>').attr('type', 'number');
let $label = $('<label>').html('Pages');
$container.append($number);
$container.append($label);
let $container = createControl('page', 'number');
let $number = $container.find("input");
// values
let pages = $(".pagedjs_page").length;
......@@ -98,75 +147,153 @@ function createGoToPageButton(){
return $container;
}
function createCheckboxControl(name, boolean){
function createResolutionButton(){
// nothing to remember here by the session
// html
let $container = $('<div>').addClass('control');
let $checkbox = $('<input>').attr('type', 'checkbox');
let $label = $('<label>').html(name);
$container.append($checkbox);
$container.append($label);
// toggle class on body, on state change
$checkbox.on('change', function(){
$('body').toggleClass(name);
boolean = !boolean;
sessionStorage.setItem(name, boolean);
let title = "log the resolution of each <img> and background-image in the console";
let $container = createControl('resolution', 'button', title);
let $number = $container.find("input");
$number.on('click', function(){
getResolutions();
});
// init
if(boolean){
$('body').addClass(name);
$checkbox.prop('checked', true);
}
return $container;
}
function getImageDPI(img){
// original size