diff --git a/front/src/Row.js b/front/src/Row.js index 301686909c7eb741d1f04048613a77d5d6b2d68b..0f8e6edcf266b34c6f549f6bc284eb3a4b493776 100644 --- a/front/src/Row.js +++ b/front/src/Row.js @@ -22,7 +22,7 @@ const PureImageRow = ({ row }) => { const TextAndImageRow = ({ row }) => ( <div className="bloc image-text-bloc"> - <img src={row.image} alt="" /> + <img className="row-icon" src={row.image} alt="" /> <div className="text-section">{row.text.map(element => <TextElement element={element} />)}</div> </div> ); diff --git a/front/src/index.js b/front/src/index.js index 86c5776df80b6da7a0330f9c9fc611d4ed4f5193..719957d2dd589f8c7859aeb307aa9b151cf4395f 100644 --- a/front/src/index.js +++ b/front/src/index.js @@ -10,7 +10,8 @@ render(<App />, container, existingNode); socketIO.on('config', (data) => { document.getElementById('root').innerHTML = `html { - --fontSize: ${data.fontSize}; + // --fontSize: ${data.fontSize}; + --fontSize: 3em; --rowHeight: ${data.rowHeight}; }`; }); diff --git a/front/src/style.css b/front/src/style.css index 29ef3ccc37d2d7821f18938dd90d8e761e5bc17c..76e6a410d436d44a66fd015140e8dae6f7261aac 100644 --- a/front/src/style.css +++ b/front/src/style.css @@ -1,17 +1,8 @@ -.mini { - color: #dddddd; -} - .mini p { + color: #dddddd; margin: 0; } -.text-element { - font-size: var(--fontSize); - margin-top: auto; - margin-bottom: auto; -} - .bloc { margin-bottom: 10px; } @@ -44,19 +35,36 @@ display: flex; } -.image-text-bloc img { +img.row-icon { height: 100px; - margin-right: 20px; + margin-top: auto; + margin-bottom: auto; + margin-right: 10px; } .image-text-bloc > .text-section { width: 100%; display: flex; + flex-wrap: wrap; justify-content: space-between; } +.text-element { + font-size: var(--fontSize); + margin-top: auto; + margin-bottom: auto; + margin-left: 10px; + padding-top: 10px; + padding-bottom: 10px; + border: 1px solid #ccc; +} + .image-text-bloc > .text-section > .text-element:last-child { white-space: nowrap; flex-grow: 1; text-align: right; } + +.text-section > .text-element:first-child { + margin-left: 0px; +} diff --git a/server/dummyResponse.json b/server/dummyResponse.json index 93d53f730b8eaa8c96053c039e35a217c8377254..e96b781d9876272be1d631df7ccb9b83e1d6ac11 100644 --- a/server/dummyResponse.json +++ b/server/dummyResponse.json @@ -10,6 +10,26 @@ { "text": "42", "style": { "color": "#BB8800", "fontWeight": "bold" } } ] }, + { + "type": 1, + "image": "https://people.via.ecp.fr/~bebert/toddy.jpg", + "text": [ + { "text": "Texte un", "style": { "color": "#000000" } }, + { "text": "Texte deux", "style": { "color": "#000000" } }, + { "text": "Texte trois", "style": { "color": "#000000" } }, + { "text": "42", "style": { "color": "#BB8800", "fontWeight": "bold" } } + ] + }, + { + "type": 1, + "image": "https://people.via.ecp.fr/~bebert/toddy.jpg", + "text": [ + { "text": "Texte un", "style": { "color": "#000000" } }, + { "text": "Texte deux bien long", "style": { "color": "#000000" } }, + { "text": "Texte trois", "style": { "color": "#000000" } }, + { "text": "42", "style": { "color": "#BB8800", "fontWeight": "bold" } } + ] + }, { "type": 0, "text": [