added responsive layout for jcdecaux mobilier vertical

affiches/affiche spectacle/content/7_todos_caeran.yaml

@@ -18,8 +18,10 @@
   image: "todoscaeran-smallcorr.jpg"
   orientation:
     totem: "up"
+    vertical: "up"
   degrade:
     totem: "left"
+    vertical: "left"
   theme: "light"
   theme_footer: "dark"
 

affiches/affiche spectacle/css/formats/jcdecaux-mobilervertical.css

@@ -3,7 +3,7 @@
 /* ___ JC Decaux - mobilerVertical ___ */
 
 :root{
-  --bleed-overprint: -2mm;
+  --bleed-overprint: -4mm;
   --visible-width: 110cm;
   --visible-height: 161cm;
 }

affiches/affiche spectacle/css/main.css

@@ -188,7 +188,7 @@ a {
   ========================================================================== */
 .affiche {}
 
-.affiche.totem {
+.affiche:is(.totem, .vertical) {
   /* pour le footer en bas */
   display: grid;
   grid-template-rows: 1fr auto;
@@ -221,7 +221,7 @@ a {
 }
 
 /* exception if in totem we have shape and footer section in one */
-.affiche.totem.up{
+.affiche:is(.totem, .vertical).up{
   --top-division: 55%;
 }
 .affiche.metro.down{
@@ -256,7 +256,7 @@ section.image::after {
   background: var(--gradient-V);
 }
 
-:is(.totem.left, .totem.right) section.image::after{
+.affiche:is(.totem, .vertical):is(.left, .right) section.image::after{
   bottom: 0;
 }
 
@@ -328,13 +328,13 @@ section.image::after {
 .affiche.metro.up .pad.forme {
   padding-top: 0cm;
 }
-.affiche.totem .pad {
+.affiche:is(.totem, .vertical) .pad {
   padding: 3.5cm 5cm 4cm;
 }
-.affiche.totem.down .pad.forme {
+.affiche:is(.totem, .vertical).down .pad.forme {
   padding-bottom: 0;
 }
-.affiche.totem.up .pad.forme {
+.affiche:is(.totem, .vertical).up .pad.forme {
   padding-top: 0;
 }
 
@@ -346,19 +346,19 @@ header {}
 .metro header {
   width: calc(50% - 4cm);
 }
-.totem header {
+.affiche:is(.totem, .vertical) header {
   width: 75%;
 }
 
-:is(.totem.left, .totem.right) header {
+.affiche:is(.totem, .vertical):is(.left, .right) header {
   width: 50%;
   word-break: break-all;
 }
-:is(.totem.left, .totem.right) .auteurice {
+.affiche:is(.totem, .vertical):is(.left, .right) .auteurice {
   width: 100%;
 }
 
-.totem.up .titre,
+:is(.totem, .vertical).up .titre,
 .metro.left .titre,
 .metro.up .titre {
   /* color white when title above picture */
@@ -380,7 +380,7 @@ header {}
   color: white;
 }
 
-.totem.up .auteurice {
+:is(.totem, .vertical).up .auteurice {
   position: absolute;
   bottom: calc(100% - var(--top-division) + 4cm);
   z-index: 100;
@@ -396,11 +396,11 @@ header {}
   z-index: 100;
 }
 
-:is(.totem.left, .totem.right) .credits{
+.affiche:is(.totem, .vertical):is(.left, .right) .credits{
   right: calc(50% + 4cm);
 }
 
-.totem.down .credits,
+:is(.totem, .vertical).down .credits,
 .metro.down .credits{
   color: white;
 }
@@ -450,7 +450,7 @@ footer .balsa .logo svg {
 }
 
 /* editeurice responsable*/
-.totem .edit-resp {
+:is(.totem, .vertical) .edit-resp {
   position: absolute;
   left: 0;
   bottom: -0.5cm;
@@ -619,7 +619,7 @@ footer.black .logo svg path{
 :is(.totem.down, .totem.up) .picture{
   background-size: 100% auto;
 }
-:is(.totem.left, .totem.right) .picture{
+.affiche:is(.totem, .vertical):is(.left, .right) .picture{
   background-size: auto 100%;
 }
 :is(.metro.left, .metro.right) .picture{
@@ -681,6 +681,10 @@ section.forme>.wrapper {
 .affiche.totem .other-shapes svg path{
   stroke: url("/totem.html#degrade");
 }
+.affiche.vertical .shape-wrapper svg path,
+.affiche.vertical .other-shapes svg path{
+  stroke: url("/vertical.html#degrade");
+}
 .gradient-stroke{
   position: absolute; top: 0; left: 0;
   width: 0; height: 0;
@@ -696,7 +700,7 @@ section.forme>.wrapper {
   top: calc(100% + 0.5em);
   text-align: center;
 }
-:is(.totem.left, .totem.right) .accroche{
+.affiche:is(.totem, .vertical):is(.left, .right) .accroche{
   width: 50cm;
 }
 
@@ -710,12 +714,12 @@ section.forme>.wrapper {
   top: 4cm;
   width: 150cm;
 }
-.totem.down .accroche {
+:is(.totem, .vertical).down .accroche {
   top: auto;
   bottom: 4cm;
   width: 110cm;
 }
-.totem.up .accroche {
+:is(.totem, .vertical).up .accroche {
   top: 3.5cm;
   width: 110cm;
 }
@@ -725,33 +729,33 @@ section.forme>.wrapper {
 
 /* totem */
 
-.totem footer{
+:is(.totem, .vertical) footer{
   top: -2mm;
 }
 
-:is(.totem.up, .totem.down) .image > .picture,
-:is(.totem.up, .totem.down) .forme > .fond,
-.totem footer > .fond{
+.affiche:is(.totem, .vertical):is(.up, .down) .image > .picture,
+.affiche:is(.totem, .vertical):is(.up, .down) .forme > .fond,
+:is(.totem, .vertical) footer > .fond{
   left: var(--bleed-overprint);
   right: var(--bleed-overprint);
 }
-.totem.up .image > .picture{
+:is(.totem, .vertical).up .image > .picture{
   top: var(--bleed-overprint);
 }
-.totem.down .forme > .fond{
+:is(.totem, .vertical).down .forme > .fond{
   top: var(--bleed-overprint);
 }
-.totem footer > .fond{
+:is(.totem, .vertical) footer > .fond{
   bottom: calc(var(--bleed-overprint) - 2mm);
 }
 
-.totem.right .image > .picture,
-.totem.left .forme > .fond{
+:is(.totem, .vertical).right .image > .picture,
+:is(.totem, .vertical).left .forme > .fond{
   top: var(--bleed-overprint);
   right: var(--bleed-overprint);
 }
-.totem.left .image > .picture,
-.totem.right .forme > .fond{
+:is(.totem, .vertical).left .image > .picture,
+:is(.totem, .vertical).right .forme > .fond{
   top: var(--bleed-overprint);
   left: var(--bleed-overprint);
 }

affiches/affiche spectacle/layout.py

@@ -12,6 +12,7 @@ TEMPLATE_PATH = 'template.html'
 
 AFFICHE_METRO = 'metro.html'
 AFFICHE_TOTEM = 'totem.html'
+AFFICHE_VERTICAL = 'vertical.html'
 
 
 def titleToId(title):
@@ -41,6 +42,7 @@ if __name__ == '__main__':
 
     content_metro = []
     content_totem = []
+    content_vertical = []
 
     # parse yaml files
     for filename in os.listdir(CONTENT):
@@ -51,6 +53,8 @@ if __name__ == '__main__':
                 content_metro.append(yaml_data)
             if "totem" in yaml_data["orientation"]:
                 content_totem.append(yaml_data)
+            if "vertical" in yaml_data["orientation"]:
+                content_vertical.append(yaml_data)
 
     # generate metro html
     metro_html = template.render(affiches = content_metro, type = 'metro')
@@ -62,4 +66,9 @@ if __name__ == '__main__':
     with open(AFFICHE_TOTEM, 'w') as file:
         file.write(totem_html)
 
+    # generate vertical html
+    vertical_html = template.render(affiches = content_vertical, type = 'vertical')
+    with open(AFFICHE_VERTICAL, 'w') as file:
+        file.write(vertical_html)
+
     print('Layout generated')

affiches/affiche spectacle/template.html

@@ -57,6 +57,8 @@
   <link rel="stylesheet" type="text/css" href="css/formats/jcdecaux-metro.css" />
   {% elif type == "totem" %}
   <link rel="stylesheet" type="text/css" href="css/formats/clearchannel-totem.css" />
+  {% elif type == "vertical" %}
+  <link rel="stylesheet" type="text/css" href="css/formats/jcdecaux-mobilervertical.css" />
   {% endif %}
 
   <link rel="stylesheet" type="text/css" href="css/formats/rules.css" />
@@ -75,12 +77,16 @@
   {% set orientation = affiche.orientation.metro %}
   {% elif type=='totem'%}
   {% set orientation = affiche.orientation.totem %}
+  {% elif type=='vertical'%}
+  {% set orientation = affiche.orientation.vertical %}
   {% endif %}
 
   {% if type=='metro'%}
   {% set degrade = affiche.degrade.metro %}
   {% elif type=='totem'%}
   {% set degrade = affiche.degrade.totem %}
+  {% elif type=='vertical'%}
+  {% set degrade = affiche.degrade.vertical %}
   {% endif %}
 
   {% if (affiche.theme_footer == 'inverse')