UI Redesign (#22)

* Rework UI into a new, responsive layout

* Send two streams (only one is currently downscaled)

photon-client/src/components/common/cv-slider.vue

@@ -1,10 +1,13 @@
 <template>
   <div>
-    <v-row dense align="center">
-      <v-col :cols="2">
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col :cols="12 - (sliderCols || 8)">
         <span>{{ name }}</span>
       </v-col>
-      <v-col :cols="10">
+      <v-col :cols="sliderCols || 8">
         <v-slider
           :value="localValue"
           dark
@@ -12,7 +15,8 @@
           :max="max"
           :min="min"
           hide-details
-          color="#ffd843"
+          color="accent"
+          :disabled="disabled"
           :step="step"
           @start="isClicked = true"
           @end="isClicked = false"
@@ -25,6 +29,7 @@
               dark
               :max="max"
               :min="min"
+              :disabled="disabled"
               :value="localValue"
               class="mt-0 pt-0"
               hide-details
@@ -47,7 +52,7 @@
 export default {
   name: "Slider",
   // eslint-disable-next-line vue/require-prop-types
-  props: ["min", "max", "name", "value", "step"],
+  props: ["min", "max", "name", "value", "step", "sliderCols", "disabled"],
   data() {
     return {
       isFocused: false,
@@ -63,7 +68,7 @@ export default {
       set(value) {
         this.$emit("input", value);
       }
-    }
+    },
   },
   methods: {
     handleChange(val) {