fixed firefox scrollbar issue

fixed error when background set to None
added material color scheme colors
fixed mobile issues

dashmachine/sources.py

@@ -13,8 +13,8 @@ context processor to make the process functions available to every jinja templat
 Load orders in bundles are respected here"""
 
 """You can disable minification for debug purposes here (set to True) """
-debug_js = False
-debug_css = False
+debug_js = True
+debug_css = True
 
 
 def process_js_sources(process_bundle=None, src=None, app_global=False):

dashmachine/static/css/global/dashmachine-theme.css

@@ -23,19 +23,60 @@
   --theme-color-font-muted: #f9f9f9;
   --theme-warning: #dc584e;
 }
-[data-accent="green"] {
-  --theme-primary: #49B03E;
+[data-accent="red"] {
+  --theme-primary: #f44336;
 }
 [data-accent="pink"] {
-  --theme-primary: #EE1289;
+  --theme-primary: #e91e63;
+}
+[data-accent="purple"] {
+  --theme-primary: #9c27b0;
+}
+[data-accent="deepPurple"] {
+  --theme-primary: #673ab7;
+}
+[data-accent="indigo"] {
+  --theme-primary: #3f51b5;
 }
 [data-accent="blue"] {
-  --theme-primary: #5151b0;
+  --theme-primary: #2196f3;
+}
+[data-accent="lightBlue"] {
+  --theme-primary: #03a9f4;
+}
+[data-accent="cyan"] {
+  --theme-primary: #00bcd4;
+}
+[data-accent="teal"] {
+  --theme-primary: #009688;
+}
+[data-accent="green"] {
+  --theme-primary: #4caf50;
+}
+[data-accent="lightGreen"] {
+  --theme-primary: #8bc34a;
+}
+[data-accent="lime"] {
+  --theme-primary: #cddc39;
+}
+[data-accent="yellow"] {
+  --theme-primary: #ffeb3b;
+}
+[data-accent="amber"] {
+  --theme-primary: #ffc107;
+}
+[data-accent="deepOrange"] {
+  --theme-primary: #ff5722;
+}
+[data-accent="brown"] {
+  --theme-primary: #795548;
 }
 [data-accent="grey"] {
-  --theme-primary: #C6C3CC;
+  --theme-primary: #9e9e9e;
+}
+[data-accent="blueGrey"] {
+  --theme-primary: #607d8b;
 }
-
 /* THEME CLASSES */
 .theme-surface {
   background-color: var(--theme-surface) !important;

dashmachine/static/css/global/dashmachine.css

@@ -50,6 +50,8 @@ body {
     user-select: none;
     /* Non-prefixed version, currently
     supported by Chrome, Opera and Firefox */
+    scrollbar-color: var(--theme-secondary);
+    scrollbar-width: thin;
 }
 
 html {
@@ -328,15 +330,15 @@ input:disabled {
 .navbar .navbar-light ul a {
     color: var(--theme-color-font);
 }
-@media (min-width: 900px)
-{
-    .sidenav-overlay
-    {
-        display: none !important;
+/*@media (min-width: 900px)*/
+/*{*/
+/*    .sidenav-overlay*/
+/*    {*/
+/*        display: none !important;*/
 
-        opacity: 0 !important;
-    }
-}
+/*        opacity: 0 !important;*/
+/*    }*/
+/*}*/
 
 /* MODALS AND CARDS */
 .modal {
@@ -615,6 +617,14 @@ input:disabled {
 .sidenav {
     background-color: var(--theme-surface);
     top: unset;
+    overflow: scroll;
+    scrollbar-width: none;
+}
+
+#sidenav-mobile-toggle-btn {
+    position: fixed;
+    top: unset;
+    bottom: 10px;
 }
 
 .border-bottom-1 {

dashmachine/static/css/settings_system/settings.css

@@ -1,5 +1,9 @@
-body {
-    overflow: hidden !important;
+
+@media (min-width: 990px)
+{
+    body {
+        overflow: hidden !important;
+    }
 }
 
 .settings-page-card {

dashmachine/static/js/global/dashmachine.js

@@ -201,6 +201,7 @@ $(document).ready(function () {
         }
     }, 300);
 
+    $("#slide-out").sidenav();
 
     // Collapsible navigation menu
     $(".nav-collapsible .navbar-toggler").click(function() {

dashmachine/templates/main/home.html

@@ -5,7 +5,7 @@
 {% endblock page_vendor_css %}
 
 {% block page_lvl_css %}
-    {% if settings.background %}
+    {% if settings.background and settings.background != 'None' %}
         <style>
             #main {
                 background-image: url("{{ settings.background }}");
@@ -41,7 +41,7 @@
                         {% endif %}
                     <div class="col s12 m6 l3">
                         <div class="card theme-surface-transparent app-card">
-                            <div class="card-content center-align scrollbar" style="max-height: 118px; min-height: 118px;">
+                            <div class="card-content center-align scrollbar" style="max-height: 118px; min-height: 118px; scrollbar-width: none;">
                                 {% if app.data_template %}
                                     <div class="row">
                                         <div class="col s6 center-align">
@@ -58,7 +58,7 @@
                                     <img src="{{ app.icon }}" height="64px">
                                 {% endif %}
                             </div>
-                            <div class="card-action center-align scrollbar" style="max-height: 127px; min-height: 127px;">
+                            <div class="card-action center-align scrollbar" style="max-height: 127px; min-height: 127px; scrollbar-width: none;">
                                 <h5>{{ app.name }}</h5>
                                 <span class="theme-secondary-text">{{ app.description }}</span>
                             </div>

dashmachine/templates/main/layout.html

@@ -49,7 +49,7 @@
             {% endfor %}
 
         </ul>
-        {#        <div class="navigation-background"></div><a class="sidenav-trigger btn-sidenav-toggle btn-floating btn-medium waves-effect waves-light hide-on-large-only theme-primary" href="#" data-target="slide-out"><i class="material-icons-outlined">menu</i></a>#}
+                <div class="navigation-background"></div><a id="sidenav-mobile-toggle-btn" class="sidenav-trigger btn-sidenav-toggle btn-floating btn-medium waves-effect waves-light hide-on-large-only theme-primary" href="#" data-target="slide-out"><i class="material-icons-outlined">menu</i></a>
     </aside>
     <!-- END: SideNav-->
 

dashmachine/templates/settings_system/settings.html

@@ -6,12 +6,13 @@
 
 {% block page_lvl_css %}
     {{ process_css_sources(src="settings_system/settings.css")|safe }}
-    {% if settings.background %}
+    {% if settings.background and settings.background != 'None' %}
         <style>
             #main {
                 background-image: url("{{ settings.background }}");
                 background-size: cover;
-                height: 100vh;
+                background-attachment: fixed;
+                min-height: 100vh;
             }
         </style>
     {% endif %}
@@ -22,7 +23,9 @@
         <div class="modal-content">
             <div class="row">
                 <div class="col s12">
-                    <h4>Config.ini Readme</h4>
+                    <h4>Config.ini Readme
+                    <span><i class="material-icons-outlined modal-close right icon-btn">close</i></span>
+                    </h4>
                 </div>
                 <div id="config-help-col" class="col s12 theme-surface-1 padding-2 border-radius-10">
                     <h5>Settings Reference</h5>
@@ -33,7 +36,7 @@
                         background = static/images/backgrounds/background.png<br>
                     </code>
 
-                    <table class="mt-4">
+                    <table class="mt-4 responsive-table">
                         <thead>
                         <tr>
                             <th>Variable</th>
@@ -59,7 +62,10 @@
                             <td>accent</td>
                             <td>Yes</td>
                             <td>UI accent color</td>
-                            <td>orange, green, blue, green, pink, grey</td>
+                            <td>
+                                orange, red, pink, purple, deepPurple, indigo, blue, lightBlue,
+                                cyan, teal, green, lightGreen, lime, yellow, amber, deepOrange, brown, grey, blueGrey
+                            </td>
                         </tr>
                         <tr>
                             <td>background</td>
@@ -82,7 +88,7 @@
                         data_template = None
                     </code>
 
-                    <table class="mt-4">
+                    <table class="mt-4 responsive-table">
                         <thead>
                         <tr>
                             <th>Variable</th>
@@ -151,7 +157,7 @@
                         value_template = variable_name<br>
                     </code>
 
-                    <table class="mt-4">
+                    <table class="mt-4 responsive-table">
                         <thead>
                         <tr>
                             <th>Variable</th>

dashmachine/version.py

@@ -1 +1 @@
-version = "v0.21"
+version = "v0.22"