Merge branch 'fix/display' into 'master'

fix: wrap text

See merge request hermod/tv_panel!6

front/display.js

@@ -13,7 +13,8 @@ const concatTextParts = textParts =>
 const jsonTextToHtml = data => <div className="bloc text-bloc">{concatTextParts(data.text)}</div>;
 
 const jsonImageToHtml = (data) => {
-  const style = 'heightFactor' in data ? `height: calc(${data.heightFactor} * var(--rowHeight))` : '';
+  const style =
+    'heightFactor' in data ? `height: calc(${data.heightFactor} * var(--rowHeight))` : '';
   return (
     <div className="bloc image-bloc" style={style}>
       <img src={data.image} />
@@ -24,9 +25,7 @@ const jsonImageToHtml = (data) => {
 const jsonImageTextToHtml = data => (
   <div className="bloc image-text-bloc">
     <img src={data.image} />
-    <div className="text-section">
-      {concatTextParts(data.text)}
-    </div>
+    <div className="text-section">{concatTextParts(data.text)}</div>
   </div>
 );
 
@@ -55,8 +54,11 @@ export default (data) => {
     });
   const foot = (
     <div className="mini">
-      <p>Last data: { (new Date(Date.now())).toLocaleString() }; TTL: {data.ttl / 1000}s</p>
+      <p>
+        Last data: {new Date(Date.now()).toLocaleString()}; TTL: {data.ttl / 1000}s
+      </p>
       <p>Hermod version {data.version}, 2018</p>
-    </div>);
+    </div>
+  );
   return [<hr className="mini" />, head, <hr style="color: #DDDDDD" />, foot];
 };

front/style.css

 .mini {
-  color: #DDDDDD;
+  color: #dddddd;
 }
 
 .mini p {
@@ -8,16 +8,16 @@
 
 .text-element {
   font-size: var(--fontSize);
+  margin: auto;
 }
 
 .bloc {
-  height: 100px;
   margin-bottom: 10px;
 }
 
 .text-bloc {
   border: 1px solid black;
-  background-color: #E2FFE0;
+  background-color: #e2ffe0;
   padding: 10px;
   display: flex;
   justify-content: space-between;
@@ -25,33 +25,37 @@
 
 .image-bloc {
   border: 1px solid black;
-  background-color: #FFDDDD;
+  background-color: #ffdddd;
 }
 
 .image-bloc img {
-  height: 100%;
+  height: 100px;
   margin-left: auto;
   margin-right: auto;
-  display: block;
 }
 
 .image-text-bloc {
   border: 1px solid black;
-  background-color: #FFFFDD;
+  background-color: #ffffdd;
   padding: 10px;
   display: flex;
 }
 
 .image-text-bloc img {
-  height: 100%;
+  height: 100px;
   margin-right: 20px;
-  /* border: solid 1px #A0A0A0; */
-  /* margin-left: -1px; */
-  /* margin-top: -1px; */
 }
 
-.image-text-bloc .text-section {
+.image-text-bloc > .text-section {
   width: 100%;
   display: flex;
   justify-content: space-between;
 }
+
+.image-text-bloc > .text-section > .text-element:first-child {
+  flex-grow: 1;
+}
+
+.image-text-bloc > .text-section > .text-element:last-child {
+  white-space: nowrap;
+}

server/config.js

-const fs = require("fs");
-const path = require("path");
+const fs = require('fs');
+const path = require('path');
 
 module.exports = {
   port: 5000,
-  uuid: "10",
-  fontSize: "80px",
-  rowHeight: "100px",
-  cert: fs.readFileSync(path.resolve(__dirname, "../key.pem"))
+  uuid: '10',
+  fontSize: '4vh',
+  rowHeight: '100px',
+  cert: fs.readFileSync(path.resolve(__dirname, '../key.pem')),
 };