From b8946e8225ed807b46aa629299b7b1fdcaa1d273 Mon Sep 17 00:00:00 2001
From: Aymeric Bernard <aymeric.bernard@student.ecp.fr>
Date: Tue, 17 Apr 2018 15:30:19 +0200
Subject: [PATCH] [Front] More responsive page
---
front/src/Row.js | 2 +-
front/src/index.js | 3 ++-
front/src/style.css | 32 ++++++++++++++++++++------------
server/dummyResponse.json | 20 ++++++++++++++++++++
4 files changed, 43 insertions(+), 14 deletions(-)
diff --git a/front/src/Row.js b/front/src/Row.js
index 3016869..0f8e6ed 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 86c5776..719957d 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 29ef3cc..76e6a41 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 93d53f7..e96b781 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": [
--
GitLab