feat: Dodanie trybu nocnego

matiusz · matiusz · commit 9f7afb6087bd · 2024-12-10T16:59:56.000+01:00
diff --git a/songbook/src/flask/static/style.css b/songbook/src/flask/static/style.css
@@ -19,9 +19,23 @@
   text-align: center;
   font-size: 14px;
 }
+
 .nav-side-menu .toggle-btn {
   display: none;
 }
+
+.nav-side-menu .btn {
+  display: block;
+  padding: 3px;
+  width: 40px;
+}
+
+.brand button {
+  margin-top: 4px;
+  margin-right: 15px;
+  float: right;
+}
+
 .nav-side-menu .song {
   padding-left: 10px;
 }
@@ -126,15 +140,15 @@
   }
   .nav-side-menu .toggle-btn {
     display: block;
+  }
+
+  .nav-side-menu .btn {
     cursor: pointer;
-    position: absolute;
     right: 7vw;
     top: 15px;
     z-index: 10 !important;
-    padding: 3px;
     background-color: #ffffff;
     color: #000;
-    width: 40px;
     text-align: center;
   }
   .brand {
@@ -218,10 +232,9 @@ body {
     width: 100%;
     margin-bottom: 10px;
   }
-.nav-side-menu  .sub-menu .toggle-btn {
+.nav-side-menu  .sub-menu .btn {
     display: block;
     cursor: pointer;
-    position: absolute;
     right: 10px;
     top: 10px;
     z-index: 10 !important;
@@ -292,10 +305,9 @@ body {
     width: 100%;
     margin-bottom: 10px;
   }
-  .sub-line .toggle-btn {
+  .sub-line .btn {
     display: block;
     cursor: pointer;
-    position: absolute;
     right: 10px;
     top: 10px;
     z-index: 10 !important;
@@ -333,4 +345,9 @@ body {
 
 .container {
   width: 100vw;
+}
+
+.dark-mode {
+  background-color: #2e353d;
+  color: #e1ffff;
 }
diff --git a/songbook/src/flask/templates/app.js b/songbook/src/flask/templates/app.js
@@ -1086,4 +1086,13 @@ function getArtifact() {
 		}
 	}
 	})
-}
+}
+
+function darkMode() {
+	var element = document.body;
+	element.classList.toggle("dark-mode");
+  }
+
+function collapse() {
+	$("#menu-content").collapse('toggle');
+  }
diff --git a/songbook/src/flask/templates/page.html b/songbook/src/flask/templates/page.html
@@ -28,8 +28,10 @@
 
 <body>
         <div class="p-2 nav-side-menu">
-            <div class="brand">Śpiewnik HK</div>
-            <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
+            <div class="brand">Śpiewnik HK
+                <button onclick="collapse()" class="toggle-btn"><i class="fa fa-bars fa-2x btn"></i></button>
+                <button onclick="darkMode()"><i class="fa fa-moon-o fa-2x btn"></i></button>
+            </div>
             <div class="menu-list">
                 <ul id="menu-content" class="menu-content collapse out {{'show' if filterString else ''}}">
                     <li data-toggle="collapse" data-target="#search">
@@ -59,6 +61,21 @@
             </div>
         </div>
         {% autoescape false %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     <div class="main" style="overflow: auto;">
         {% if song %}
             <div class="d-flex flex-column">
