From 402c0c8af9b54fbbf8c15b94a89615146f932e33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sat, 19 Jan 2019 15:33:12 +0100
Subject: [PATCH] add cases to mobile screenshots

---
 static/css/combo-style.css |  67 ++++++++++++++++++++++
 static/img/mobile-case.svg | 112 +++++++++++++++++++++++++++++++++++++
 static/js/combo.public.js  |  22 ++++++++
 3 files changed, 201 insertions(+)
 create mode 100644 static/img/mobile-case.svg

diff --git a/static/css/combo-style.css b/static/css/combo-style.css
index 62012df..9980f6d 100644
--- a/static/css/combo-style.css
+++ b/static/css/combo-style.css
@@ -879,3 +879,70 @@ span#counter {
     display: none;
   }
 }
+
+div.textcell.tablette {
+	text-align: center;
+}
+
+div.mobile-case {
+	display: inline-block;
+	background: url(../img/mobile-case.svg) top left no-repeat;
+	width: 400px;
+	height: 720px;
+	position: relative;
+	overflow: hidden;
+}
+
+div.mobile-case div.screen {
+	position: absolute;
+	overflow: hidden;
+	left: 12px;
+	top: 52px;
+	bottom: 67px;
+	right: 28px;
+}
+
+div.mobile-case div.screen div.mobile-top-bar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.7);
+	width: 100%;
+	text-align: right;
+	color: white;
+	box-sizing: border-box;
+	padding-right: 5px;
+	height: 21px;
+}
+
+div.mobile-case div.screen div.mobile-app-content {
+	position: absolute;
+	top: 21px;
+	left: 0;
+	width: 100%;
+	bottom: 0;
+}
+
+div.mobile-case + div.mobile-case {
+	position: relative;
+	top: 40px;
+}
+
+div.mobile-case + div.mobile-case + div.mobile-case {
+	position: relative;
+	top: 10px;
+}
+
+div.mobile-case .screen {
+	background: #dc1822;
+}
+
+div.mobile-case + div.mobile-case .screen {
+	background: #00aa9e;
+}
+
+div.mobile-case + div.mobile-case + div.mobile-case .screen {
+	background: #de3559;
+}
+
+@media(max-width: 668px) { div.tablette { display: none; } }
diff --git a/static/img/mobile-case.svg b/static/img/mobile-case.svg
new file mode 100644
index 0000000..7003916
--- /dev/null
+++ b/static/img/mobile-case.svg
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg2"
+   xml:space="preserve"
+   width="386.93579"
+   height="707.42499"
+   viewBox="0 0 386.93579 707.42499"
+   sodipodi:docname="mobile-case.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath18"><path
+         d="M 0,410 H 1028 V 0 H 0 Z"
+         id="path16"
+         inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="0.5"
+     inkscape:cx="-114.43322"
+     inkscape:cy="238.84637"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g10"
+     inkscape:measure-start="27,428"
+     inkscape:measure-end="387,428"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><g
+     id="g10"
+     inkscape:groupmode="layer"
+     inkscape:label="x"
+     transform="matrix(1.3333333,0,0,-1.3333333,-3.6475299,539.99784)"><g
+       id="g20"
+       transform="matrix(1.8601685,0,0,1.8601685,309.66345,-151.14733)"
+       style="stroke-width:0.5"><path
+         d="m -10.548622,33.67008 c 0,-16.568 -13.431,-19.920268 -29.999,-19.920268 H -134.999 c -16.569,0 -30.001,3.352268 -30.001,19.920268 V 280.665 c 0,9.72565 13.432,18.31099 30.001,18.31099 h 94.451378 c 16.568,0 29.999,-9.44063 29.999,-18.31099 z"
+         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+         id="path22"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="sssssssss" /></g><g
+       id="g24"
+       transform="matrix(1.8601685,0,0,1.8601685,300.67326,-142.46964)"
+       style="stroke-width:0.5"><path
+         d="m -10.120975,32.690552 c 0,-16.568 -13.432,-20.726646 -30,-20.726646 H -125.333 c -16.569,0 -30,4.158646 -30,20.726646 V 271.334 c 0,16.569 13.431,20.71282 30,20.71282 h 85.212025 c 16.568,0 30,-4.14382 30,-20.71282 z"
+         style="fill:#232323;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+         id="path26"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="sssssssss" /></g><g
+       id="g30"
+       transform="matrix(1.8601685,0,0,1.8601685,189.06408,381.94033)"
+       style="stroke-width:0.5"><path
+         d="m 0,0 c 0,-1 -1,-2 -2,-2 h -30 c -1,0 -2,1 -2,2 0,1 1,2 2,2 H -2 C -1,2 0,1 0,0"
+         style="fill:#0e0e0e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+         id="path32"
+         inkscape:connector-curvature="0" /></g><g
+       id="g38"
+       transform="matrix(1.8601685,0,0,1.8601685,111.24393,381.94125)"
+       style="stroke-width:0.5"><path
+         d="m 0,0 c 0,-2 -1,-4 -4,-4 -2,0 -4,1 -4,4 0,2 1,4 4,4 2,0 4,-1 4,-4"
+         style="fill:#0e0e0e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+         id="path40"
+         inkscape:connector-curvature="0" /></g><g
+       id="g42"
+       transform="matrix(1.8601685,0,0,1.8601685,108.45368,381.94125)"
+       style="stroke-width:0.5"><path
+         d="m 0,0 c 0,-1 -1,-2 -2,-2 -1,0 -3,1 -3,2 0,1 2,2 3,2 1,0 2,-1 2,-2"
+         style="fill:#2c2c2c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+         id="path44"
+         inkscape:connector-curvature="0" /></g><g
+       id="g46"
+       transform="matrix(1.8601685,0,0,1.8601685,106.43911,381.94125)"
+       style="stroke-width:0.5"><path
+         d="m 0,0 c 0,0 0,-1 -1,-1 0,0 -1,0 -1,1 0,0 0,1 1,1 1,0 1,-1 1,-1"
+         style="fill:#373737;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+         id="path48"
+         inkscape:connector-curvature="0" /></g><path
+       d="m 292.9375,309.4375 h -3 v 41 h 3 z"
+       style="fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1"
+       id="path50"
+       inkscape:connector-curvature="0" /><rect
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.8;fill:#00ffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.28346458;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="rect831"
+       width="270"
+       height="450"
+       x="11.735635"
+       y="-365.1778"
+       transform="scale(1,-1)" /></g></svg>
diff --git a/static/js/combo.public.js b/static/js/combo.public.js
index 238c72e..e4f7dbc 100644
--- a/static/js/combo.public.js
+++ b/static/js/combo.public.js
@@ -4,6 +4,28 @@ $(function() {
   $('a[href^="#"]').on('click',
     function() { $.scrollTo($(this).attr('href'), 1000); }
   );
+
+  if ($('.mobile-case').length) {
+    setInterval(function() {
+      var $clock = $('.mobile-case .clock');
+      var date = new Date();
+      $clock.text(('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2));
+    }, 500);
+  }
+
+  $('.textcell.tablette img').each(function(idx, elem) {
+    var $cell = $(elem).parents('div.textcell');
+    var $mobile_case = $('<div class="mobile-case">' +
+                           '<div class="screen">' +
+                             '<div class="mobile-top-bar"><span class="clock">--:--</span></div>' +
+                             '<div class="mobile-app-content">' +
+                             '</div>' +
+                           '</div>' +
+                         '</div>');
+    $mobile_case.find('.mobile-app-content').append($(elem).detach());
+    $cell.append($mobile_case);
+  });
+
   if ($('.ecrans').length > 0) {
     var $window = $(window);
     var offset = parseInt(Math.random()*2000);