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

affiches/affiche spectacle/content/0_interieur.yaml

@@ -13,7 +13,7 @@
   date_end: "08.10"
 
   shape: "troisfenetre.svg"
-  image: "interieur-FULLHD.jpg"
+  image: "interieur.jpg"
   orientation:
     metro: "right"
     totem: "right"

affiches/affiche spectacle/content/1_auteur-inconnu.yaml

@@ -13,7 +13,7 @@
   # heure: "20h30"
 
   shape: "trace.svg"
-  image: "auteur-inconnu-FULLHD.jpg"
+  image: "auteur-inconnu.jpg"
   orientation:
     totem: "down"
   degrade:

affiches/affiche spectacle/content/2_paradoxe.yaml

@@ -13,7 +13,7 @@
   date_end: "29.10"
 
   shape: "cerf.svg"
-  image: "paradoxe_FULLHD.jpg"
+  image: "paradoxe.jpg"
   orientation:
     totem: "down"
   degrade:

affiches/affiche spectacle/content/3_mexico.yaml

@@ -17,7 +17,7 @@
   # heure: "20h30"
 
   shape: "lego.svg"
-  image: "mexico-FULLHD.jpg"
+  image: "mexico.jpg"
   orientation:
     totem: "up"
   degrade:

affiches/affiche spectacle/content/4_lianes.yaml

+---
+
+  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"

affiches/affiche spectacle/css/ajustements.css

@@ -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; */
+}

affiches/affiche spectacle/css/formats/facebook.css

-/* ___ PRINT ___ */
-
-@media print{
-
-  /* Instagram */
-  @page {
-    size: 2850px 1500px;
-    margin: 0cm 0cm;
-  }
-}

affiches/affiche spectacle/css/formats/instagram.css

-/* ___ PRINT ___ */
-
-@media print{
-
-  /* Instagram */
-  @page {
-    size: 2048px 2048px;
-    margin: 0cm 0cm;
-  }
-}

affiches/affiche spectacle/css/main.css

@@ -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;

affiches/affiche spectacle/css/tools/interface.css

@@ -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;
   }
 }

affiches/affiche spectacle/js/interface.js

@@ -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
-