From 3f65008cf3cfbf94ae17e1b37b0933cf335dd74b Mon Sep 17 00:00:00 2001
From: Aymeric Bernard <aymeric.bernard@student.ecp.fr>
Date: Tue, 29 May 2018 14:54:57 +0200
Subject: [PATCH] Redesigned front-end
---
front/src/App.js | 2 --
front/src/Row.js | 2 +-
front/src/index.html | 6 +++---
front/src/style.css | 14 +++++++-------
4 files changed, 11 insertions(+), 13 deletions(-)
diff --git a/front/src/App.js b/front/src/App.js
index 984b713..023ede7 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -21,9 +21,7 @@ class App extends Component {
render() {
return (
<div>
- <hr className="mini" />
{this.state.data.rows.map(row => <Row row={row} />)}
- <hr style={{ color: '#DDDDDD' }} />
<div className="mini">
<p>
Last data: {new Date(Date.now()).toLocaleString()}; TTL: {this.state.data.ttl / 1000}s
diff --git a/front/src/Row.js b/front/src/Row.js
index 5bdc9c6..3031856 100644
--- a/front/src/Row.js
+++ b/front/src/Row.js
@@ -49,7 +49,7 @@ const Row = ({ row }) => {
break;
}
return (
- <div style={{ backgroundColor: '#F2F2FF', padding: '10px' }}>
+ <div style={{ padding: '10px' }}>
<SubRow row={row} />
</div>
);
diff --git a/front/src/index.html b/front/src/index.html
index 8983df1..1339fd4 100644
--- a/front/src/index.html
+++ b/front/src/index.html
@@ -7,18 +7,18 @@
</head>
<body>
+ <div id="panel_data"></div>
+
<p style="color: #DDDDDD">Date:
<span id="date">
Not connected
</span>
</p>
- <div id="panel_data"></div>
-
<style type="text/css" id="root"></style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.slim.js"></script>
<script type="text/javascript" src="./index.js" defer></script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/front/src/style.css b/front/src/style.css
index c8f8807..ba61afa 100644
--- a/front/src/style.css
+++ b/front/src/style.css
@@ -1,24 +1,26 @@
+html {
+ background-color: #eee;
+}
+
.mini p {
- color: #dddddd;
+ color: #ddd;
margin: 0;
}
.bloc {
+ background-color: #fff;
margin-bottom: 10px;
+ box-shadow: 0px 6px 10px 0px #aaa;
}
.text-bloc {
min-height: var(--rowHeight);
- border: 1px solid black;
- background-color: #e2ffe0;
padding: 10px;
display: flex;
justify-content: space-between;
}
.image-bloc {
- border: 1px solid black;
- background-color: #ffdddd;
}
.image-bloc img {
@@ -29,8 +31,6 @@
}
.image-text-bloc {
- border: 1px solid black;
- background-color: #ffffdd;
padding: 10px;
display: flex;
}
--
GitLab