Merge pull request 'origin/jones-dev' (#18) from origin/jones-dev into jones-dev

Reviewed-on: https://gitea.corbz.dev/corbz/ticket-website/pulls/18

apps/static/css/perfectscrollbar.css

@@ -1,7 +1,7 @@
-*
+/*
  * Container style
  */
-.ps {
+ .ps {
   overflow: hidden !important;
   overflow-anchor: none;
   -ms-overflow-style: none;
@@ -15,8 +15,8 @@
 .ps__rail-x {
   display: none;
   opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition: background-color .2s linear, opacity .2s linear;
-  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
   height: 15px;
   /* there must be 'bottom' or 'top' for ps__rail-x */
   bottom: 0px;
@@ -27,8 +27,8 @@
 .ps__rail-y {
   display: none;
   opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition: background-color .2s linear, opacity .2s linear;
-  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
   width: 15px;
   /* there must be 'right' or 'left' for ps__rail-y */
   right: 0;
@@ -57,8 +57,7 @@
 .ps .ps__rail-y:focus,
 .ps .ps__rail-x.ps--clicking,
 .ps .ps__rail-y.ps--clicking {
-  /* background-color: #eee; */
+  background-color: #eee;
-  background-color: var(--bs-tertiary-bg);  /* Custom Change */
   opacity: 0.9;
 }
 
@@ -68,8 +67,8 @@
 .ps__thumb-x {
   background-color: #aaa;
   border-radius: 6px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  transition: background-color .2s linear, height .2s ease-in-out;
-  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
   height: 6px;
   /* there must be 'bottom' for ps__thumb-x */
   bottom: 2px;
@@ -80,8 +79,8 @@
 .ps__thumb-y {
   background-color: #aaa;
   border-radius: 6px;
-  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  transition: background-color .2s linear, width .2s ease-in-out;
-  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
   width: 6px;
   /* there must be 'right' for ps__thumb-y */
   right: 2px;
@@ -100,7 +99,6 @@
 .ps__rail-y:focus > .ps__thumb-y,
 .ps__rail-y.ps--clicking .ps__thumb-y {
   background-color: #999;
-  /* background-color: var(--bs-body); */
   width: 11px;
 }
 
@@ -110,8 +108,9 @@
     overflow: auto !important;
   }
 }
+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .ps {
     overflow: auto !important;
   }
-}
+}

apps/static/js/base.js

@@ -0,0 +1,10 @@
+$("#themeToggle").on("click", function() {
+    const currentTheme = $("body").attr("data-bs-theme");
+
+    if (currentTheme == "light") {
+        $("body").attr("data-bs-theme", "dark");
+    }
+    else {
+        $("body").attr("data-bs-theme", "light");
+    }
+});

apps/templates/includes/navigation.html

@@ -17,6 +17,11 @@
             </li>
         </ul>
         <ul class="nav-right">
+            <li>
+                <a href="" id="themeToggle" data-bs-toggle="dropdown">
+                    <i class="ti-shine"></i>
+                </a>
+            </li>
             <li class="notifications dropdown">
                 <!-- <span class="counter bgc-red">3</span>  -->
                 <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">

apps/templates/includes/scripts.html

@@ -8,4 +8,8 @@
 
 <script src="{% static '/js/select2.min.js' %}"></script>
 
+<script src="{% static '/js/perfectscrollbar.js' %}"></script>
+
 <script src="{% static '/js/index.js' %}"></script>
+
+<script src="{% static '/js/base.js' %}"></script>

apps/templates/layouts/base.html

@@ -14,7 +14,7 @@
         <link type="text/css" rel="stylesheet" href="{% static '/css/datepicker.css' %}" />
         <link type="text/css" rel="stylesheet" href="{% static '/css/fontawesome.css' %}" />
         <link type="text/css" rel="stylesheet" href="{% static '/css/themify-icons.css' %}" />
-        <link type="text/css" rel="stylesheet" href="{% static '/css/scrollbar.css' %}" />
+        <link type="text/css" rel="stylesheet" href="{% static '/css/perfectscrollbar.css' %}" />
         <link type="text/css" rel="stylesheet" href="{% static '/css/adminator.css' %}" />
         <link type="text/css" rel="stylesheet" href="{% static '/css/jquery.dataTables.min.css' %}" />
         <link type="text/css" rel="stylesheet" href="{% static '/css/select2.min.css' %}" />