Update to CSS for PWA and make PWA
This commit is contained in:
parent
adc171edb2
commit
f13bd41558
Binary file not shown.
Before Width: | Height: | Size: 3.8 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.1 KiB |
@ -2,14 +2,13 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
content="MooreForge weather station of sensors"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
@ -24,11 +23,16 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>MooreForge Weather Station</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register("./serviceworker.js");
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 471 KiB |
@ -1,11 +1,11 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"short_name": "Weather Station",
|
||||
"name": "MooreForge Weather Station",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
"src": "favicon.png",
|
||||
"sizes": "32x32",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
|
6
public/serviceworker.js
Normal file
6
public/serviceworker.js
Normal file
@ -0,0 +1,6 @@
|
||||
// This code executes in its own worker or thread
|
||||
self.addEventListener("install", event => {
|
||||
});
|
||||
self.addEventListener("activate", event => {
|
||||
});
|
||||
self.addEventListener('fetch',() => console.log("fetch"));
|
33
src/App.css
33
src/App.css
@ -5,11 +5,27 @@
|
||||
.rainfall-gauge {
|
||||
border: .01em solid black;
|
||||
padding: .6em;
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
@media (max-width: 400px) {
|
||||
.sensors {
|
||||
display: block;
|
||||
display: display !important;
|
||||
}
|
||||
|
||||
.rainfall-gauge {
|
||||
color: blue;
|
||||
height: 5vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 501px) and (display-mode: standalone) {
|
||||
.sensors {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.rainfall-gauge {
|
||||
height: 5vh;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,9 +37,18 @@
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.merrysky {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
border: 0;
|
||||
flex: 10 !important;
|
||||
}
|
||||
|
||||
.sensors {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
}
|
||||
@ -31,3 +56,7 @@
|
||||
.sensor-col {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sensors >* {
|
||||
flex: 1 1 160px;
|
||||
}
|
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import Rainfall from './components/rainfall';
|
||||
|
||||
@ -10,6 +9,7 @@ function App() {
|
||||
<p>Welcome to the MooreForge Weather Station. While a work in progress, there are some functional sensors shown below.</p>
|
||||
<div className={'sensors'}>
|
||||
<div className={'rainfall-gauge sensor-col'}><Rainfall /></div>
|
||||
<iframe src={'https://merrysky.net/'} className={'sensor-col merrysky'} title={'Merry Sky'}></iframe>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -7,9 +7,9 @@ const INCHES_PER_CLICK = .01;
|
||||
|
||||
const Sensor = () => {
|
||||
const [totalRainfall, setTotalRainfall] = useState(0);
|
||||
|
||||
console.log(process.env);
|
||||
async function pullDataFromBackend() {
|
||||
const response = await fetch('http://localhost:4050/rainfall');
|
||||
const response = await fetch(process.env.REACT_APP_RAIN_GAUGE_DATA ?? '');
|
||||
const data = await response.json();
|
||||
const rainfall = data
|
||||
.map((datum: any) => datum.value)
|
||||
|
Loading…
Reference in New Issue
Block a user