From 6024078c38d9aff1f0da659fa411d34343423c58 Mon Sep 17 00:00:00 2001
From: Igor <Igigog21@gmail.com>
Date: Mon, 23 Oct 2023 23:57:51 +0200
Subject: [PATCH] make stuff denser

---
 src/components/Filter.vue            | 51 +++++++++++++++++-----------
 src/components/PreProcessingCard.vue | 32 ++++++++++-------
 2 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/src/components/Filter.vue b/src/components/Filter.vue
index 99c6647..261dd1e 100644
--- a/src/components/Filter.vue
+++ b/src/components/Filter.vue
@@ -29,15 +29,19 @@
       <q-list dense bordered class="col-grow q-py-sm" v-if="filter_type !== FilterTypes.CUSTOMIIR">
         <q-item>
           <q-item-section>
-            <div class="row justify-start items-center q-gutter-sm">
-              <q-chip icon="graphic_eq" class="control-label" color=secondary text-color=white>Frequency</q-chip>
-              <!--q-item-label caption lines="2">The centre frequency. this is where the signal starts getting attenuated.</q-item-label-->
+            <div class = "row items-center">
+              <div class="col-3 justify-start items-center q-gutter-sm">
+                <q-chip icon="graphic_eq" class="control-label" color=secondary text-color=white>Frequency</q-chip>
+                <!--q-item-label caption lines="2">The centre frequency. this is where the signal starts getting attenuated.</q-item-label-->
+              </div>
+              <div class="col">
+                <!-- Use a logarithmic scale here as this is how the graph is plotted. It makes picking low frequencies easier. -->
+                <q-slider :model-value="Math.log(f0) / Math.log(20000)"
+                @update:model-value="(value) => $emit('update:f0', Math.pow(20000, value))" label
+                :label-value="Math.round(f0 * 100) / 100 + 'hz'" :min=0 :max=1 :step=0.001>
+              </q-slider>
             </div>
-            <!-- Use a logarithmic scale here as this is how the graph is plotted. It makes picking low frequencies easier. -->
-            <q-slider :model-value="Math.log(f0) / Math.log(20000)"
-              @update:model-value="(value) => $emit('update:f0', Math.pow(20000, value))" label
-              :label-value="Math.round(f0 * 100) / 100 + 'hz'" :min=0 :max=1 :step=0.001>
-            </q-slider>
+          </div>
           </q-item-section>
           <q-item-section side>
             <q-input type="number" dense hide-bottom-space shadow-text="hz" style="width:5em"
@@ -49,14 +53,17 @@
         <q-item v-if="[FilterTypes.LOWSHELF, FilterTypes.HIGHSHELF, FilterTypes.PEAKING].includes(filter_type)">
 
           <q-item-section>
-            <div class="row justify-start items-center q-gutter-sm">
-              <q-chip icon="volume_up" class="control-label" color=secondary text-color=white>Gain</q-chip>
-              <!--q-item-label caption lines="2">The gain at the centre frequency, in dB. Positive for boost, negative for
+            <div class = "row">
+              <div class="col-3 justify-start items-center q-gutter-sm">
+                <q-chip icon="volume_up" class="control-label" color=secondary text-color=white>Gain</q-chip>
+                <!--q-item-label caption lines="2">The gain at the centre frequency, in dB. Positive for boost, negative for
                 cut.</q-item-label-->
-            </div>
-
-            <q-slider :model-value="db_gain" @update:model-value="(value) => $emit('update:db_gain', value)" :min=-25
-              :max=25 :step=0.01 label :label-value="db_gain + 'db'" />
+              </div>
+              <div class="col">
+                <q-slider :model-value="db_gain" @update:model-value="(value) => $emit('update:db_gain', value)" :min=-25
+                  :max=25 :step=0.01 label :label-value="db_gain + 'db'" />
+                </div>
+              </div>
           </q-item-section>
 
           <q-item-section side>
@@ -68,12 +75,16 @@
         <q-item>
 
           <q-item-section>
-            <div class="row justify-start items-center q-gutter-sm">
-              <q-chip icon="auto_graph" class="control-label" color=secondary text-color=white>Quality</q-chip>
-              <!--q-item-label caption lines="2">The quality factor. It defines how aggressive the band pass attenuates from the centre frequency. When Q=sqrt(2) it is 1 octave wide</q-item-label-->
+            <div class = "row">
+              <div class="col-3 justify-start items-center q-gutter-sm">
+                <q-chip icon="auto_graph" class="control-label" color=secondary text-color=white>Quality</q-chip>
+                <!--q-item-label caption lines="2">The quality factor. It defines how aggressive the band pass attenuates from the centre frequency. When Q=sqrt(2) it is 1 octave wide</q-item-label-->
+              </div>
+              <div class="col">
+                <q-slider :model-value="q" @update:model-value="(value) => $emit('update:q', value)" :min=0 :max=33 :step=0.01
+                  :inner-min=0.1 label />
+                </div>
             </div>
-            <q-slider :model-value="q" @update:model-value="(value) => $emit('update:q', value)" :min=0 :max=33 :step=0.01
-              :inner-min=0.1 label />
           </q-item-section>
           <q-item-section side>
             <q-input type="number" dense hide-bottom-space style="width:5em" :model-value="q"
diff --git a/src/components/PreProcessingCard.vue b/src/components/PreProcessingCard.vue
index c2ab4b0..e49390e 100644
--- a/src/components/PreProcessingCard.vue
+++ b/src/components/PreProcessingCard.vue
@@ -33,23 +33,31 @@ export default {
             <q-card-section>
                 <q-item>
                     <q-item-section>
-                        <div class="row justify-start items-center q-gutter-sm">
-                            <q-chip icon="volume_down" class="control-label" color=secondary text-color=white>Pre-EQ Gain</q-chip>
-                        </div>
-                        <q-slider :model-value="preamp" @update:model-value="(value) => $emit('update:preamp', value)"
-                            :min="-12" :max="6" :step="0.1" :markers="3" :marker-labels="preampMarkerLabel"
-                            :label-value="preamp + 'dB'" label />
-                    </q-item-section>
+                        <div class = "row">
+                            <div class="col-3 justify-start items-center q-gutter-sm">
+                                <q-chip icon="volume_down" class="control-label" color=secondary text-color=white>Pre-EQ Gain</q-chip>
+                            </div>
+                            <div class="col">
+                                <q-slider :model-value="preamp" @update:model-value="(value) => $emit('update:preamp', value)"
+                                    :min="-12" :max="6" :step="0.1" :markers="3" :marker-labels="preampMarkerLabel"
+                                    :label-value="preamp + 'dB'" label />
+                                </div>
+                            </div>
+                        </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <div class="row justify-start items-center q-gutter-sm">
+                        <div class = "row">
+                            <div class="col-3 justify-start items-center q-gutter-sm">
                             <q-chip icon="volume_up" class="control-label" color=secondary text-color=white>Post-EQ Gain</q-chip>
                         </div>
-                        <q-slider :model-value="post_eq_gain" @update:model-value="(value) => $emit('update:post_eq_gain', value)"
-                            :min="0" :max="9" :step="0.1" :markers="3" :marker-labels="postEQGainMarkerLabel"
-                            :label-value="post_eq_gain + 'dB'" label />
-                    </q-item-section>
+                        <div class="col">
+                            <q-slider :model-value="post_eq_gain" @update:model-value="(value) => $emit('update:post_eq_gain', value)"
+                                :min="0" :max="9" :step="0.1" :markers="3" :marker-labels="postEQGainMarkerLabel"
+                                :label-value="post_eq_gain + 'dB'" label />
+                        </div>
+                    </div>
+                </q-item-section>
                 </q-item>
                 <q-checkbox label="Reverse Stereo" :model-value="reverse_stereo"
                     @update:model-value="(value) => $emit('update:reverse_stereo', value)" />