From b9fd17677b0381ea2af92d48c198ab30dea71159 Mon Sep 17 00:00:00 2001
From: Daniel Gunzinger <daniel.gunzinger@googlemail.com>
Date: Thu, 16 Apr 2020 23:31:08 +0200
Subject: [PATCH] use bootstrap styling for the slider, center it vertically;
 move slider between the two volume buttons

---
 static/css/custom.css |  5 ++++-
 templates/index.html  | 10 ++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/static/css/custom.css b/static/css/custom.css
index fd152eb..21e0d12 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -108,4 +108,7 @@
    font-style: italic !important;
    font-weight: 300;
 }
-
+#volume-slider {
+   margin-top: 8px;
+   margin-right: 6px;
+}
diff --git a/templates/index.html b/templates/index.html
index ae91b9c..7a6c415 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -68,15 +68,17 @@
                                     onclick="request('post', {action : 'volume_down'})">
                                 <i class="fa fa-volume-down" aria-hidden="true"></i>
                             </button>
+
+                            <input type="range" class="custom-range" id="volume-slider" 
+                                    min="0" max="100" step="1" value="50"
+                                    onchange="request('post', {action : 'volume_set_value', new_volume : this.value})">
+                            </input>
+
                             <button type="button" class="btn btn-warning btn-space"
                                     onclick="request('post', {action : 'volume_up'})">
                                 <i class="fa fa-volume-up" aria-hidden="true"></i>
                             </button>
 
-                            <input id="volume-slider" type="range"
-                                    min="0" max="100" step="1" value="50"
-                                    onchange="request('post', {action : 'volume_set_value', new_volume : this.value})">
-                            </input>
                         </div>
 
                         <table class="table">