improve: mobile view

luftaquila · Nov 11, 2024 · c57b872 · c57b872
1 parent 21e714e
commit c57b872
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 33 deletions.
diff --git a/viewer/web/index.html b/viewer/web/index.html
@@ -17,34 +17,34 @@
 </head>
 
 <body>
-  <nav class="sidebar-navigation">
-    <ul>
-      <li id="viewer" class="nav-mode active">
-        <i class="fa fw fa-database"></i>
-        <span class="tooltip">Data viewer</span>
-      </li>
-      <li id="config" class="nav-mode">
-        <i class="fa fw fa-gear"></i>
-        <span class="tooltip">Device configuration</span>
-      </li>
-    </ul>
-    <ul style="position: fixed; bottom: 0;">
-      <li style="height: 30px; padding: 25px 0px;">
-        <a href="https://dnf.luftaquila.io/c/analytics" target="_blank">
-          <img src="assets/dnf.svg" alt="DNF SVG" style="width: 30px;" />
-          <span class="tooltip" style="margin-top: 0px;">DNF Forum (Support / Discussions)</span>
-        </a>
-      </li>
-      <li>
-        <a href="https://github.com/luftaquila/fsk-energymeter" target="_blank">
-          <i class="fab fw fa-github"></i>
-          <span class="tooltip">luftaquila/fsk-energymeter</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-
   <div class="root-container">
+    <nav class="sidebar-navigation">
+      <ul>
+        <li id="viewer" class="nav-mode active">
+          <i class="fa fw fa-database"></i>
+          <span class="tooltip">Data viewer</span>
+        </li>
+        <li id="config" class="nav-mode">
+          <i class="fa fw fa-gear"></i>
+          <span class="tooltip">Device configuration</span>
+        </li>
+      </ul>
+      <ul style="position: absolute; bottom: 0;">
+        <li style="height: 30px; padding: 25px 0px;">
+          <a href="https://dnf.luftaquila.io/c/analytics" target="_blank">
+            <img src="assets/dnf.svg" alt="DNF SVG" style="width: 30px;" />
+            <span class="tooltip" style="margin-top: 0px;">DNF Forum (Support / Discussions)</span>
+          </a>
+        </li>
+        <li>
+          <a href="https://github.com/luftaquila/fsk-energymeter" target="_blank">
+            <i class="fab fw fa-github"></i>
+            <span class="tooltip">luftaquila/fsk-energymeter</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+
     <div id="container-viewer" class="container">
       <h1>💾 FSK-EEM Data Viewer</h1>
 
@@ -65,7 +65,8 @@ <h2><i class="fa fw fa-file-import"></i>File Management</h2>
         </div>
 
         <div style="font-size: 0.8rem;">
-          <i class="fas fa-fw fa-info-circle"></i> The timestamp at the beginning of the record's filename is important. Do NOT change it.
+          <i class="fas fa-fw fa-info-circle"></i> The timestamp at the beginning of the record's filename is important.
+          Do NOT change it.
         </div>
       </article>
 
@@ -143,9 +144,10 @@ <h2><i class="fa fw fa-clock"></i>Clock synchronization</h2>
         <h2><i class="fa fw fa-eraser"></i>Delete records</h2>
 
         <div style="font-size: 0.8rem; line-height: 1.2rem;">
-            <i class="fas fa-fw fa-info-circle"></i> Delete all log files stored in the device storage.<br>
-            <i class="fas fa-fw fa-info-circle" style="color: transparent;"></i> Disconnect and re-connect the device to see the changes.<br>
-            <i class="fas fa-fw fa-triangle-exclamation" style="color: orange"></i> This operation cannot be undone.
+          <i class="fas fa-fw fa-info-circle"></i> Delete all log files stored in the device storage.<br>
+          <i class="fas fa-fw fa-info-circle" style="color: transparent;"></i> Disconnect and re-connect the device to
+          see the changes.<br>
+          <i class="fas fa-fw fa-triangle-exclamation" style="color: orange"></i> This operation cannot be undone.
         </div>
 
         <div style="display: flex; gap: 1rem;">

diff --git a/viewer/web/style.css b/viewer/web/style.css
@@ -15,7 +15,6 @@ body {
 
 .root-container {
   display: flex;
-  margin-left: 80px;
 }
 
 h1 {
@@ -33,6 +32,7 @@ a {
 }
 
 div.container {
+  margin-left: 80px;
   display: flex;
   padding: 1rem;
   flex-direction: column;
@@ -103,7 +103,6 @@ input::-webkit-inner-spin-button {
 * sidebar configurations
 *******************************************************************************/
 .sidebar-navigation {
-  position: fixed;
   min-width: 80px;
   min-height: 100vh;
   background-color: #313443;