Ledda/rpi-sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added some widgets in grid layour (mostly dummies)

Browse Source
This commit is contained in:
Daniel Ledda
2020-11-29 14:01:22 +01:00
parent 16b4be1cd4
commit a308844639
6 changed files with 275 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
webapp/dist/charts.html vendored
View File

@@ -7,9 +7,31 @@
<script src="{{.}}/static/main.js"></script>
</head>
<body id="root">
<div class="chart-container center">
<div class="center">
<h1>Ledda's Room Climate</h1>
<canvas id="myChart"></canvas>
<div class="main-content-grid">
<div id="chart-container" class="widget">
<canvas id="myChart"></canvas>
</div>
<div id="timer-widget" class="widget">
<div>
<h2>Next update in:</h2>
<p id="timer">0.00</p>
</div>
</div>
<div id="mins-widget" class="widget">
<div>
<h2>Minutes Displayed:</h2>
<p id="mins-displayed">60</p>
</div>
</div>
<div id="timezone-widget" class="widget">
<div>
<h2>Displayed Timezone:</h2>
<p>UTC</p>
</div>
</div>
</div>
</div>
</body>
</html>

175
webapp/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

71
webapp/dist/styles.css vendored
View File

@@ -10,6 +10,18 @@ html, body {
opacity: 100%;
}
.main-content-grid {
height: 80%;
width: 80%;
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(12, 1fr);
text-align: center;
}
.main-content-grid > * {
display: block;
}
.center {
position: absolute;
top: 0;
@@ -17,6 +29,7 @@ html, body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
justify-content: center;
@@ -31,26 +44,48 @@ html, body {
z-index: -1;
}
.chart-container {
padding: 10vw;
width: calc(100% - 20vw);
height: calc(100% - 20vw);
text-align: center;
flex-flow: column;
}
.chart-container > * {
display: block;
}
#myChart {
background-color: white;
padding: 1vw;
border-radius: 1vw;
border: 3px #c7ab82 solid;
}
h1 {
display: block;
font-family: "Georgia", serif;
font-weight: normal;
color: #7b5b2f;
}
.widget {
display: flex;
justify-content: space-around;
flex-direction: column;
margin: 1em;
padding: 1em;
border-radius: 1em;
border: 0.2em #c7ab82 solid;
background-color: white;
}
.widget h2 {
font-family: "Georgia", serif;
font-weight: normal;
color: #7b5b2f;
font-size: 1em;
display: inline-block;
}
.widget p {
margin: 0;
}
#timer-widget {
grid-area: 1 / 11 / span 1 / span 2;
}
#mins-widget {
grid-area: auto / 11 / span 2 / span 2;
}
#timezone-widget {
grid-area: auto / 11 / span 2 / span 2;
}
#chart-container {
grid-area: 1 / 1 / span 5 / span 10;
}