aktualizace stylu - web interface

resolve #7
6 months ago · f912c7bb74
parent 62f8638a8f
commit f912c7bb74
6 changed files with 64 additions and 222 deletions
--- a/data/img/arrow_up.svg
+++ b/data/img/arrow_up.svg
--- a/data/img/arrow_down.svg
+++ b/data/img/arrow_down.svg
@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="36px"
-   viewBox="0 0 24 24"
-   width="36px"
-   fill="#000000"
-   version="1.1"
-   id="svg6"
-   sodipodi:docname="arrow_down.svg"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1280"
-     inkscape:window-height="1007"
-     id="namedview8"
-     showgrid="false"
-     inkscape:zoom="8.8486557"
-     inkscape:cx="22.477872"
-     inkscape:cy="17.505968"
-     inkscape:window-x="1920"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg6" />
-  <path
-     d="M0 0h24v24H0z"
-     fill="none"
-     id="path2" />
-  <path
-     d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-     id="path4"
-     style="fill:#404040;fill-opacity:1" />
-</svg>
--- a/data/img/arrow_down_offset.svg
+++ b/data/img/arrow_down_offset.svg
@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="36px"
-   viewBox="0 0 24 24"
-   width="36px"
-   fill="#000000"
-   version="1.1"
-   id="svg6"
-   sodipodi:docname="arrow_down_offset.svg"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1280"
-     inkscape:window-height="1007"
-     id="namedview8"
-     showgrid="false"
-     inkscape:zoom="8.8486557"
-     inkscape:cx="22.477872"
-     inkscape:cy="17.505968"
-     inkscape:window-x="1920"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg6" />
-  <path
-     d="M0 0h24v24H0z"
-     fill="none"
-     id="path2" />
-  <path
-     d="M 16.59,8.59 12,13.17 7.41,8.59 6,10 l 6,6 6,-6 z"
-     id="path4"
-     style="fill:#9a9a9a;fill-opacity:1" />
-</svg>
--- a/data/img/arrow_up_offset.svg
+++ b/data/img/arrow_up_offset.svg
@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="36px"
-   viewBox="0 0 24 24"
-   width="36px"
-   fill="#000000"
-   version="1.1"
-   id="svg6"
-   sodipodi:docname="arrow_up_offset.svg"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1280"
-     inkscape:window-height="1007"
-     id="namedview8"
-     showgrid="false"
-     inkscape:zoom="8.8486557"
-     inkscape:cx="22.477872"
-     inkscape:cy="17.505968"
-     inkscape:window-x="1920"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg6" />
-  <path
-     d="M0 0h24v24H0z"
-     fill="none"
-     id="path2" />
-  <path
-     d="M 16.59,16 12,11.42 7.41,16 6,14.59 l 6,-6 6,6 z"
-     id="path4"
-     style="fill:#9a9a9a;fill-opacity:1" />
-</svg>
--- a/data/index.html
+++ b/data/index.html
@ -11,38 +11,36 @@
 </head>

 <body>
-    <main>
-        <header>
-            <div class="logo">
-                <img src="img/logo.svg" alt="Logo">
-                <h1>Termo<sub>stat</sub></h1>
+    <header>
+        <div class="logo">
+            <img src="img/logo.svg" alt="Logo">
+            <h1>Termo<sub>stat</sub></h1>
+        </div>
+        <div class="state">
+            <span>Aktuální stav</span>
+            <div>
+                <span id="actual-state">Netopí</span>
+                <img id="actual-state-img" src="img/netopi.svg" alt="Stav - netopí">
            </div>
-            <div class="state">
-                <span>Aktuální stav</span>
-                <div>
-                    <span id="actual-state">Netopí</span>
-                    <img id="actual-state-img" src="img/netopi.svg" alt="Stav - netopí">
-                </div>
-            </div>
-        </header>
-        <section>
-            <h2>Požadovaná teplota</h2>
-            <div class="inputs">
-                <img id="tempUp" src="img/arrow_up.svg" alt="Zvýšit požadovanou teplotu">
-                <div id="reqTemp">0</div>
-                <img id="tempDown" src="img/arrow_down.svg" alt="Snížit požadovanou teplotu">
-                <span>Offset</span>
-                <img id="offsetUp" src="img/arrow_up_offset.svg" alt="Zvýšit offset">
-                <div id="offset">0</div>
-                <img id="offsetDown" src="img/arrow_down_offset.svg" alt="Snížit offset">
-            </div>
-        </section>
-        <footer>
-            <h2>Aktuální teplota</h2>
-            <div id="temp">0</div>
-            <div class="git"><a href="https://git.microlab.space/pixx/ESP8266-termostat">Git</a></div>
-        </footer>
-    </main>
+        </div>
+    </header>
+    <section>
+        <h2>Požadovaná teplota</h2>
+        <div class="inputs">
+            <img id="tempUp" src="img/arrow.svg" alt="Zvýšit teplotu">
+            <div id="reqTemp">0</div>
+            <img id="tempDown" src="img/arrow.svg" alt="Snížit teplotu">
+            <span>Offset</span>
+            <img id="offsetUp" src="img/arrow.svg" alt="Zvýšit offset">
+            <div id="offset">0</div>
+            <img id="offsetDown" src="img/arrow.svg" alt="Snížit offset">
+        </div>
+    </section>
+    <footer>
+        <h2>Aktuální teplota</h2>
+        <div id="temp">0</div>
+        <div class="git"><a href="https://git.microlab.space/pixx/ESP8266-termostat">Git</a></div>
+    </footer>
    <script src="script.js"></script>
 </body>

--- a/data/style.css
+++ b/data/style.css
@ -10,13 +10,13 @@ html {
  margin: 0;

  font-family: bebas;
-  font-size: 7vw;
+  font-size: min(4vh, 6vw);
  color: #404040;
 }

-main {
-  height: 100vh;
-  width: 100vw;
+body {
+  display: flex;
+  flex-direction: column;
 }

 header {
@ -39,6 +39,7 @@ header {
  grid-template-rows: auto;
  align-items: center;
 }
+
 .logo h1 {
  display: inline-block;
  font-weight: 200;
@ -46,6 +47,7 @@ header {
  margin-left: -0.3rem;
  font-size: 1.7rem;
 }
+
 .logo img {
  height: 1.4rem;
  margin-top: -0.3rem;
@ -56,15 +58,24 @@ header {
  text-align: right;
  align-self: center;
 }
+
 #actual-state.topi {
  color: #31B907;
 }
+
 #actual-state {
  color: #e10000;
 }
+
 .state img {
  vertical-align: middle;
  margin-left: 0.2rem;
+  width: .8rem;
+}
+
+section {
+  flex-grow: 4;
+  overflow: scroll;
 }

 section h2 {
@ -76,16 +87,16 @@ section h2 {

 .inputs {
  display: grid;
-  grid-template-columns: 10vw auto auto 8vw;
+  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  align-items: center;
  text-align: center;
  grid-template-areas:
-    ". . offsetText ."
-    ". tempUp offsetUp ."
-    ". reqTemp offset ."
-    ". tempDown offsetDown .";
+    ". offsetText"
+    "tempUp offsetUp"
+    "reqTemp offset"
+    "tempDown offsetDown";
 }

 .inputs #tempUp {
@ -96,6 +107,7 @@ section h2 {
 .inputs #tempDown {
  grid-area: tempDown;
  height: 3.2rem;
+  transform: rotate(180deg);
 }

 .inputs #reqTemp {
@ -115,6 +127,7 @@ section h2 {
  grid-area: offsetUp;
  height: 2.5rem;
  margin-bottom: -1.5rem;
+  filter: invert(61%) sepia(81%) saturate(13%) hue-rotate(26deg) brightness(88%) contrast(86%);
 }

 .inputs #offset {
@ -127,12 +140,12 @@ section h2 {
  grid-area: offsetDown;
  height: 2.5rem;
  margin-top: -1.5rem;
+  transform: rotate(180deg);
+  filter: invert(61%) sepia(81%) saturate(13%) hue-rotate(26deg) brightness(88%) contrast(86%);
 }

 footer {
  background-color: #404040;
-  position: absolute;
-  bottom: 0;
  width: 100vw;
  color: white;
 }
@ -162,4 +175,15 @@ a {

 a:visited {
  color: #c1c1c1;
+}
+
+@media only screen and (min-width: 768px) {
+  .inputs {
+    grid-template-columns: 35vw auto auto 30vw;
+    grid-template-areas:
+      ". . offsetText ."
+      ". tempUp offsetUp ."
+      ". reqTemp offset ."
+      ". tempDown offsetDown .";
+  }
 }