From ca1e19fe3e3e5970dd4775332c8333ebeabb1a64 Mon Sep 17 00:00:00 2001
From: Kubat <mael.martin31@gmail.com>
Date: Wed, 14 Oct 2020 10:29:59 +0200
Subject: [PATCH] INSTANCE: Place more things into the style.css and add the
 progress bar

---
 instance/index.html    | 10 +++++---
 instance/main.js       |  3 +--
 style/css/instance.css | 56 ++++++++++++++++++++----------------------
 3 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/instance/index.html b/instance/index.html
index fad0b79..babf36c 100644
--- a/instance/index.html
+++ b/instance/index.html
@@ -17,12 +17,10 @@
     </head>
     <body>
         <div id="mainFrame" class="container-fluid">
-            <div id="buttonPanelListLeft" class="d-flex flex-row bd-highlight mb-3 row card"
-                 style="padding:0px!important;margin-bottom:0px!important;margin-top:0px">
+            <div id="buttonPanelListLeft" class="d-flex flex-row bd-highlight mb-3 row card">
                 <!-- Will be generated on loading page --!>
             </div>
-            <div id="panelWrapper" class="row"
-                 style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;">
+            <div id="panelWrapper" class="row">
                 <div id="panelLeft" class="col panel d-flex flex-column bd-highlight mb-3">
                 <!-- Will be generated on loading page --!>
                 </div>
@@ -30,6 +28,10 @@
                 <!-- Will be generated on loading page --!>
                 </div>
             </div>
+            <div class="progress">
+                <div class="progress-bar" role="progressbar" style="width: 75%"></div>
+                <!-- Change the style 'width' to set the progress statue --!>
+            </div>
         </div>
     </body>
 </html>
diff --git a/instance/main.js b/instance/main.js
index a89e724..e05b8d6 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -56,8 +56,7 @@ ipcRenderer.on("reload-db-responce", (event, arg) => {
     logger.debug(`Web page got reload-db`);
     arg.forEach( kara => {
         karaList +=
-            `<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 border border-secondary"
-                  style="border:0px;margin:0px!important;">
+            `<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 border border-secondary karaCard">
             <div class="p-2 bd-highlight">${kara.id}</div>
             <div class="p-2 bd-highlight">${kara.cat}</div>
             <div class="p-2 bd-highlight">${kara.type}</div>
diff --git a/style/css/instance.css b/style/css/instance.css
index 54ec9db..e06ecd0 100644
--- a/style/css/instance.css
+++ b/style/css/instance.css
@@ -1,51 +1,47 @@
-
-
-
-
-body{
-    overflow: hidden; 
+body {
+    overflow: hidden;
     height: 100vh;
 }
 
 #mainFrame {
-    height: 100%; 
-    display: flex; 
-    flex-direction: column; 
-    padding-bottom: 10px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 0px;
 }
 
-#headerBar{
-    flex-basis: auto; 
-    height: 150px;
+#buttonPanelListLeft {
+    padding: 0px !important;
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+    margin-bottom: 0px !important;
+    margin-top: 0px !important;
 }
 
-
-
-#headerCard{
+#headerCard {
     width: 100%;
 }
 
 #headerTitle{
-    -webkit-user-select: none; 
+    -webkit-user-select: none;
     -webkit-app-region: drag;
 }
 
-
-
-
-
-#panelWrapper{
-    width: 100%; 
-    margin-left: 0px; 
-    margin-right: 0px; 
-    flex-grow: 1; 
-    overflow: hidden; 
-    padding-top: 20px; 
-    padding-bottom: 20px;
+#panelWrapper {
+    width: 100%;
+    margin-left: 0px;
+    margin-right: 0px;
+    flex-grow: 1;
+    overflow: hidden;
+    padding: 0px !important;
 }
 
+.karaCard {
+    border: 0px;
+    margin: 0px !important;
+}
 
-.panel{
+.panel {
     height: 100%;
     overflow-y: scroll;
 }
-- 
GitLab