Skip to content
Snippets Groups Projects
Commit b8946e82 authored by Aymeric Bernard's avatar Aymeric Bernard
Browse files

[Front] More responsive page

parent a9f44745
No related branches found
No related tags found
No related merge requests found
...@@ -22,7 +22,7 @@ const PureImageRow = ({ row }) => { ...@@ -22,7 +22,7 @@ const PureImageRow = ({ row }) => {
const TextAndImageRow = ({ row }) => ( const TextAndImageRow = ({ row }) => (
<div className="bloc image-text-bloc"> <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 className="text-section">{row.text.map(element => <TextElement element={element} />)}</div>
</div> </div>
); );
......
...@@ -10,7 +10,8 @@ render(<App />, container, existingNode); ...@@ -10,7 +10,8 @@ render(<App />, container, existingNode);
socketIO.on('config', (data) => { socketIO.on('config', (data) => {
document.getElementById('root').innerHTML = `html document.getElementById('root').innerHTML = `html
{ {
--fontSize: ${data.fontSize}; // --fontSize: ${data.fontSize};
--fontSize: 3em;
--rowHeight: ${data.rowHeight}; --rowHeight: ${data.rowHeight};
}`; }`;
}); });
......
.mini {
color: #dddddd;
}
.mini p { .mini p {
color: #dddddd;
margin: 0; margin: 0;
} }
.text-element {
font-size: var(--fontSize);
margin-top: auto;
margin-bottom: auto;
}
.bloc { .bloc {
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -44,19 +35,36 @@ ...@@ -44,19 +35,36 @@
display: flex; display: flex;
} }
.image-text-bloc img { img.row-icon {
height: 100px; height: 100px;
margin-right: 20px; margin-top: auto;
margin-bottom: auto;
margin-right: 10px;
} }
.image-text-bloc > .text-section { .image-text-bloc > .text-section {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-between; 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 { .image-text-bloc > .text-section > .text-element:last-child {
white-space: nowrap; white-space: nowrap;
flex-grow: 1; flex-grow: 1;
text-align: right; text-align: right;
} }
.text-section > .text-element:first-child {
margin-left: 0px;
}
...@@ -10,6 +10,26 @@ ...@@ -10,6 +10,26 @@
{ "text": "42", "style": { "color": "#BB8800", "fontWeight": "bold" } } { "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, "type": 0,
"text": [ "text": [
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment