css and article component improvements (#135)

* add sass bootstrap bootswatch packages

* Delete bootstrap.css

* App.vue css cleanups

* change image location

* add scopes and additional Article component

* remove green complete

* remove article border

* cleanup

* more cleanups

* few fixes

* article css fixes

* more css cleanups

* cleanup css important flags

* button fix modal

* cleanup sidebar

client/package.json

@@ -14,6 +14,8 @@
   "dependencies": {
     "@dvuckovic/vue3-bootstrap-icons": "^1.0.6",
     "axios": "^1.4.0",
+    "bootstrap": "^5.3.1",
+    "bootswatch": "^5.3.1",
     "idb-keyval": "^6.2.1",
     "moment": "^2.29.4",
     "register-service-worker": "^1.7.2",
@@ -25,6 +27,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/compiler-sfc": "^3.3.4",
+    "sass": "^1.64.2",
     "vite": "^4.4.8",
     "vite-plugin-pwa": "^0.16.4"
   },

client/src/App.vue

@@ -1,18 +1,18 @@
 <template>
   <div id="app">
     <div class="row">
-      <div class="sidebar col-md-3 col-sm-0">
+      <div id="sidebar" class="col-md-3 col-sm-0">
         <!-- Sidebar events -->
         <app-sidebar @modal="modalClick" @forceReload="forceReload"></app-sidebar>
       </div>
-      <div class="home col-md-9 offset-md-3 col-sm-12">
+      <div id="home" class="col-md-9 offset-md-3 col-sm-12">
         <!-- Quickbar events -->
         <app-quickbar @mobile="mobileClick" @forceReload="forceReload"></app-quickbar>
         <!-- Toolbar events -->
-        <app-toolbar class="toolbar" @forceReload="forceReload"></app-toolbar>
+        <app-toolbar id="toolbar" @forceReload="forceReload"></app-toolbar>
           <p class="offline" v-show="offlineStatus">Application is currently offline!</p>
         <!-- Add reference to home for calling child loadContent component function -->
-        <app-home ref="home" @forceReload="forceReload"></app-home>
+        <app-home ref="home"></app-home>
       </div>
     </div>
     <!-- Modal events -->
@@ -22,39 +22,43 @@
   </div>
 </template>
 
+<style lang="scss">
+@import "./assets/scss/global.scss";
+</style>
+
 <style>
 /* Landscape phones and portrait tablets */
 @media (max-width: 766px) {
-  div.sidebar,
-  div.toolbar {
+  #sidebar,
+  #toolbar {
     display: none;
   }
 
   div.col-md-9 {
     padding-right: 0px;
   }
 
-  div.quickbar {
+  div#mobile-toolbar {
     position: fixed;
     z-index: 9999;
   }
 }
 
 /* Desktop */
 @media (min-width: 766px) {
-  div.quickbar {
+  div#mobile-toolbar {
     display: none;
   }
 
-  div.sidebar {
+  #sidebar {
     height: 100%;
     background-color: #31344b;
     overflow-y: auto;
     overflow-x: hidden;
   }
 
   @media (prefers-color-scheme: dark) {
-    div.sidebar {
+    #sidebar {
       background-color: #2c2c2c;
     }
   }
@@ -64,7 +68,7 @@ div.row {
   margin-right: 0px;
 }
 
-div.sidebar {
+#sidebar {
   position: fixed;
 }
 
@@ -86,7 +90,7 @@ html, #app, body {
     background-color: #121212;
   }
 
-  div.home {
+  #home {
     background: black;
   }