Add apply button to scheme swap, make it easier to readv2024.07.12

3 files changed, 13 insertions, 3 deletions

diff --git a/public/css/master.css b/public/css/master.css
index d344fba..aa48e3f 100644
--- a/public/css/master.css
+++ b/public/css/master.css
@@ -296,6 +296,7 @@ input.file {
 table.form tr td textarea,
 table.form tr td input,
 table.form tr td button,
+button,
 form.import input::file-selector-button,
 form.import button {
     background-color: var(--background);
@@ -314,6 +315,7 @@ table.form tr td button {
 }
 
 form.import button:hover,
+button:hover,
 form.import input::file-selector-button:hover,
 table.form tr td button:hover {
     color: var(--background);
@@ -671,6 +673,12 @@ a:hover img.navbar-icon {
 }
 
 .footer p {
+    vertical-align: middle;
     margin: 0;
     line-height: 1.2;
 }
+
+.footer button,
+.footer select{
+    padding: 5px 10px;
+}
diff --git a/public/js/schemeSwap.js b/public/js/schemeSwap.js
index 3baa09b..f51443d 100644
--- a/public/js/schemeSwap.js
+++ b/public/js/schemeSwap.js
@@ -46,7 +46,8 @@ function cookieExists(cname) {
  * Swaps the colorscheme
  * @param {string} scheme Color scheme ID
  */
-function swapScheme(scheme) {
+function swapScheme() {
+    let scheme = document.getElementById('scheme-selector').value ;
     setCookie("colorscheme", scheme, 90);
     document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`;
     console.log(`Set colorscheme to ${getCookie("colorscheme")}`)
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 32e3c67..93fccef 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -62,7 +62,7 @@
                 href="https://github.com/floppydisk05/diskfloppy.me">Source</a>,
             Served by {{ gethostname() }}<br>
             <label for="scheme-selector">Color Scheme:</label>
-            <select onchange="swapScheme(this.value)" id="scheme-selector">
+            <select id="scheme-selector">
                 <optgroup label="Misc">
                     <option value="c64">C64</option>
                 </optgroup>
@@ -95,7 +95,8 @@
                     <option value="slate">Slate</option>
                     <option value="solarized-dark">Solarized Dark</option>
                 </optgroup>
-            </select></p>
+            </select>
+            <button onclick="swapScheme()">Apply</button></p>
         </div>
     </div> <!-- footer -->
 </div> <!-- page -->