From e05a203867079d3b5ec79edda3b537cf92155f83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 11 Jan 2020 10:59:55 +0100
Subject: [PATCH] move channel title to top; fix vertical range input layout

---
 src/components/Channel.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index d8c4c60..304233e 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -1,14 +1,12 @@
 <template>
     <div :class="['channel', `channel-${loadingState}`]">
+        <div class="name">{{name}}</div>
         <div class="volume-wrapper">
             <!--suppress HtmlFormInputWithoutLabel -->
             <input class="volume" :disabled="loadingState === 'unloaded'"
                    type="range" min="0" max="100" v-model="volume"/>
         </div>
-        <div class="description">
-            <div class="name">{{name}}</div>
-            <div class="title">{{loadingState === "loading" ? "Loading..." : title}}</div>
-        </div>
+        <div class="title">{{loadingState === "loading" ? "Loading..." : title}}</div>
         <div class="youtube-player" ref="ytpl"/>
     </div>
 </template>
@@ -177,27 +175,28 @@ export default class Channel extends Vue {
     background: lightgray;
 }
 
-
 .volume-wrapper {
     --height: 180px;
     --width: 30px;
     height: var(--height);
     width: var(--width);
-    display: block;
+    display: flex;
+    align-items: center;
 }
 
 .volume {
     position: relative;
     width: var(--height);
     height: var(--width);
-    top: calc(var(--height) / 2);
     left: calc(var(--height) / 2 * -1 + var(--width) / 2);
     transform: rotate(270deg);
+    margin: 0;
 }
 
 .name {
     text-align: center;
     font-weight: bold;
+    padding: 2px 0;
 }
 
 .title {