testing layout

assets/css/style.css

@@ -1,5 +1,9 @@
 body {
     padding-inline: 10%;
+    min-height: 100dvh;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
 }
 
 nav {
@@ -82,4 +86,40 @@ tr:nth-child(even) {
 
 span.error {
     color: red;
+}
+
+#mainStats {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+}
+
+#mainStats > .message {
+    background-color: lightcoral;
+    border: 2px solid red;
+    padding: 0.5rem 2rem;
+    width: 100%;
+    border-radius: 1rem;
+}
+
+.messageTitle {
+    font-weight: bold;
+    font-size: 1.2rem;
+}
+
+#mainStats > .stats {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    gap: 2rem;
+}
+
+#mainStats > .stats > div {
+    background-color: #dddddd;
+    padding: 0.5rem 2rem;
+    border-radius: 1rem;
 }

templates/sk/index.eta

@@ -2,27 +2,36 @@
 
 <%~ include("/sk/partials/navbar") %>
 
-<% if (it.data?.[0]) { %>
+<div id="mainStats">
+    <div class="message">
+        <span class="messageTitle">datum cas</span>
+        <p>oops</p>
+    </div>
+    
+    <div class="title">
+        <h2>datum cas</h2>
+    </div>
+
     <div class="stats">
         <div class="indoor">
             <h3>vnútorné</h3>
-            <p>teplota: <%= it.data?.[0].indoorTemp / 100 %> °C</p>
-            <p>tlak: <%= it.data?.[0].indoorPressure / 100 %> hPa</p>
-            <p>vlhkosť: <%= it.data?.[0].indoorHumidity / 100 %>%</p>
-            <p>nadmorská výška: <%= it.data?.[0].indoorAltitude / 100 %>m</p>
+            <p>teplota: <%= it.data?.[0]?.indoorTemp / 100 %> °C</p>
+            <p>tlak: <%= it.data?.[0]?.indoorPressure / 100 %> hPa</p>
+            <p>vlhkosť: <%= it.data?.[0]?.indoorHumidity / 100 %>%</p>
+            <p>nadmorská výška: <%= it.data?.[0]?.indoorAltitude / 100 %>m</p>
         </div>
         <div class="outdoor">
             <h3>vonkajšie</h3>
-            <p>pripojené: <%= it.data?.[0].outdoorConnected %></p>
-            <p>teplota: <%= it.data?.[0].outdoorTemp / 100 %> °C</p>
-            <p>tlak: <%= it.data?.[0].outdoorPressure / 100 %> hPa</p>
-            <p>vlhkosť: <%= it.data?.[0].outdoorHumidity / 100 %>%</p>
-            <p>nadmorská výška: <%= it.data?.[0].outdoorAltitude / 100 %>m</p>
+            <p>pripojenie <%= it.data?.[0]?.outdoorConnected %></p>
+            <p>teplota: <%= it.data?.[0]?.outdoorTemp / 100 %> °C</p>
+            <p>tlak: <%= it.data?.[0]?.outdoorPressure / 100 %> hPa</p>
+            <p>vlhkosť: <%= it.data?.[0]?.outdoorHumidity / 100 %>%</p>
+            <p>nadmorská výška: <%= it.data?.[0]?.outdoorAltitude / 100 %>m</p>
         </div>
     </div>
-<% } %>
+</div>
 
-<h3>dáta</h3>
+<% /* <h3>dáta</h3>
 
 <% if (it.data?.length) { %>
     <div>
@@ -43,4 +52,4 @@
     </div>
 <% } else { %>
     <p>zatiaľ žiadne dáta. :(</p>
-<% } %>
+<% } %> */ %>