mods borders now on top

Author: GitSquared

package-lock.json

@@ -70,15 +70,13 @@ resumeInit = () => {
 initUI = () => {
     document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
         <h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
-        <h3 class="title" style="top:27px;width:14.5%;left:8px;"><p></p><p></p></h3>
     </section>
     <section id="main_shell" style="height:0%;width:0%;opacity:0;">
         <h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
         <pre id="terminal"></pre>
     </section>
     <section class="mod_column" id="mod_column_right">
         <h3 class="title"><p>PANEL</p><p>NETWORK</p></h3>
-        <h3 class="title" style="top:27px;width:14.5%;right:8px;"><p></p><p></p></h3>
     </section>
     <section id="keyboard" style="opacity:0;">
     </section>`;
@@ -117,14 +115,19 @@ initUI = () => {
 };
 
 initMods = () => {
-    document.querySelectorAll(".mod_column").forEach((e) => {
-        e.setAttribute("class", "mod_column activated");
-    });
-
     window.mods = {};
+
+    // Left column
     window.mods.clock = new Clock("mod_column_left");
     window.mods.sysinfo = new Sysinfo("mod_column_left");
     window.mods.cpuinfo = new Cpuinfo("mod_column_left");
+
+    // Right column
+    
+
+    document.querySelectorAll(".mod_column").forEach((e) => {
+        e.setAttribute("class", "mod_column activated");
+    });
 };
 
 // Prevent showing menu, exiting fullscreen or app with keyboard shortcuts

src/_renderer.js

@@ -2,7 +2,7 @@ div#mod_clock {
     display: flex;
     height: 80px;
     padding-top: 7px;
-    border-bottom: 1px solid rgba(190, 230, 193, 0.3);
+    border-top: 1px solid rgba(190, 230, 193, 0.3);
     font-family: var(--font_main_light);
 }
 
@@ -11,7 +11,7 @@ div#mod_clock::before {
     border-left: 1px solid rgba(190, 230, 193, 0.3);
     position: relative;
     left: -1px;
-    bottom: -76px;
+    top: -12px;
     height: 9px;
 }
 
@@ -20,7 +20,7 @@ div#mod_clock::after {
     border-right: 1px solid rgba(190, 230, 193, 0.3);
     position: relative;
     right: -1px;
-    bottom: -76px;
+    top: -12px;
     height: 9px;
 }
 

src/assets/css/mod_clock.css

@@ -4,7 +4,7 @@ div#mod_sysinfo {
     align-items: center;
     justify-content: space-between;
     height: 60px;
-    border-bottom: 1px solid rgba(190, 230, 193, 0.3);
+    border-top: 1px solid rgba(190, 230, 193, 0.3);
     font-size: 12px;
     font-family: var(--font_main_light);
     letter-spacing: 1px;
@@ -15,7 +15,7 @@ div#mod_sysinfo::before {
     border-left: 1px solid rgba(190, 230, 193, 0.3);
     position: relative;
     left: -1px;
-    bottom: -30px;
+    top: -31px;
     height: 9px;
 }
 
@@ -24,7 +24,7 @@ div#mod_sysinfo::after {
     border-right: 1px solid rgba(190, 230, 193, 0.3);
     position: relative;
     right: -1px;
-    bottom: -30px;
+    top: -31px;
     height: 9px;
 }
 

src/assets/css/mod_sysinfo.css

@@ -104,6 +104,7 @@ class Sysinfo {
         document.querySelector("#mod_sysinfo > div:nth-child(2) > h2").innerHTML = uptime.days+":"+uptime.hours+":"+uptime.minutes;
     }
     updateBattery() {
+        // Note: SystemInformation's battery tools seems to be kinda broken (at least on Arch), so we're going with another dep for this one
         let btrlvl = require("battery-level");
         btrlvl().then((level) => {
             document.querySelector("#mod_sysinfo > div:last-child > h2").innerHTML = (level*100)+"%";