fixed radio button spacing with css

xenharmonic-devs · Apr 16, 2024 · a6cfd7f · a6cfd7f
1 parent 5024258
commit a6cfd7f
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 33 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -36,6 +36,16 @@ code {
   border-right: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
 }
+label.right-of-checkbox{
+  margin-left: 0.1rem;
+  text-align: left;
+  vertical-align: baseline;
+}
+label.right-of-radio{
+  margin-left: 0.25rem;
+  text-align: left;
+  vertical-align: baseline;
+}
 
 /* UI elements */
 input[type='text'],
@@ -50,6 +60,10 @@ select {
   width: 6rem;
   line-height: var(--base-line-height);
 }
+input[type='radio']
+ {
+  vertical-align: -0.05rem
+}
 optgroup {
   font-weight: bold;
 }
@@ -138,13 +152,13 @@ ul.btn-group {
   flex-grow: 0.25 !important;
 }
 .control.checkbox-container {
-  flex-flow: unset;
+  flex-flow: unset;;
 }
 .control.checkbox-container label {
   font-weight: normal;
 }
 .control.radio-group {
-  gap: 0.15rem 1rem;
+  gap: 0rem 1rem;
 }
 .control.radio-group span label {
   font-weight: unset;

diff --git a/src/components/ScaleControls.vue b/src/components/ScaleControls.vue
@@ -87,7 +87,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-silver"> Silver </label>
+        <label for="colors-silver" class="right-of-radio">Silver</label>
       </span>
 
       <span>
@@ -98,7 +98,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-cents"> Cents </label>
+        <label for="colors-cents" class="right-of-radio">Cents</label>
       </span>
 
       <span>
@@ -109,7 +109,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-factors"> Factors </label>
+        <label for="colors-factors" class="right-of-radio">Factors</label>
       </span>
     </div>
   </div>

diff --git a/src/views/AnalysisView.vue b/src/views/AnalysisView.vue
@@ -230,17 +230,17 @@ function highlight(y?: number, x?: number) {
         <label>Display intervals in matrix as</label>
         <span>
           <input type="radio" id="format-best" value="best" v-model="cellFormat" />
-          <label for="format-best"> Default </label>
+          <label for="format-best" class="right-of-radio">Default</label>
         </span>
 
         <span>
           <input type="radio" id="format-cents" value="cents" v-model="cellFormat" />
-          <label for="format-cents"> Cents </label>
+          <label for="format-cents" class="right-of-radio">Cents</label>
         </span>
 
         <span>
           <input type="radio" id="format-decimal" value="decimal" v-model="cellFormat" />
-          <label for="format-decimal"> Decimal ratio </label>
+          <label for="format-decimal" class="right-of-radio">Decimal ratio</label>
         </span>
       </div>
     </div>
@@ -383,11 +383,11 @@ function highlight(y?: number, x?: number) {
             <label>Error model</label>
             <span>
               <input type="radio" id="error-rooted" value="rooted" v-model="errorModel" />
-              <label for="error-rooted"> Rooted </label>
+              <label for="error-rooted" class="right-of-radio">Rooted</label>
             </span>
             <span>
               <input type="radio" id="error-free" value="free" v-model="errorModel" />
-              <label for="error-free"> Free </label>
+              <label for="error-free" class="right-of-radio">Free</label>
             </span>
           </div>
         </div>

diff --git a/src/views/MidiView.vue b/src/views/MidiView.vue
@@ -167,9 +167,7 @@ onUnmounted(() => {
           <div class="control channels-wrapper">
             <label>Input channels</label>
             <span v-for="channel in 16" :key="channel">
-              <label :class="{ active: inputHighlights.has(channel) }">{{
-                ' ' + channel + ' '
-              }}</label>
+              <label :class="{ active: inputHighlights.has(channel) }">{{channel}}</label>
               <input
                 type="checkbox"
                 :value="channel"
@@ -186,19 +184,19 @@ onUnmounted(() => {
             <label>Color mapping</label>
             <span>
               <input type="radio" id="white-off" value="off" v-model="midi.whiteMode" />
-              <label for="white-off"> Chromatic </label>
+              <label for="white-off" class="right-of-radio">Chromatic</label>
             </span>
             <span>
               <input type="radio" id="white-simple" value="simple" v-model="midi.whiteMode" />
-              <label for="white-simple"> White only </label>
+              <label for="white-simple" class="right-of-radio">White only</label>
             </span>
             <span>
               <input type="radio" id="white-black" value="blackAverage" v-model="midi.whiteMode" />
-              <label for="white-black"> White w/ interpolation </label>
+              <label for="white-black" class="right-of-radio">White w/ interpolation</label>
             </span>
             <span>
               <input type="radio" id="white-color" value="keyColors" v-model="midi.whiteMode" />
-              <label for="white-color"> White key to white color </label>
+              <label for="white-color" class="right-of-radio">White key to white color</label>
             </span>
           </div>
         </div>

diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
@@ -31,14 +31,14 @@ const scale = useScaleStore()
         <div class="control-group">
           <div class="control checkbox-container">
             <input id="has-left-of-z" type="checkbox" v-model="scale.hasLeftOfZ" />
-            <label for="has-left-of-z"> There's a key between left Shift and 'Z'</label>
+            <label for="has-left-of-z" class="right-of-checkbox">There's a key between left Shift and 'Z'</label>
           </div>
         </div>
         <h2>Advanced</h2>
         <div class="control-group">
           <div class="control checkbox-container">
             <input id="virtual-qwerty" type="checkbox" v-model="state.showVirtualQwerty" />
-            <label for="virtual-qwerty"> Virtual QWERTY in top menu</label>
+            <label for="virtual-qwerty" class="right-of-checkbox">Virtual QWERTY in top menu</label>
           </div>
           <div class="control">
             <label for="gas">Computational budget (gas)</label>
@@ -53,11 +53,11 @@ const scale = useScaleStore()
           <div class="control radio-group">
             <span>
               <input type="radio" id="scheme-light" value="light" v-model="state.colorScheme" />
-              <label for="scheme-light"> Light </label>
+              <label for="scheme-light" class="right-of-radio">Light </label>
             </span>
             <span>
               <input type="radio" id="scheme-dark" value="dark" v-model="state.colorScheme" />
-              <label for="scheme-dark"> Dark </label>
+              <label for="scheme-dark" class="right-of-radio">Dark </label>
             </span>
           </div>
           <h3>Accidentals</h3>
@@ -69,7 +69,7 @@ const scale = useScaleStore()
                 value="double"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-double"> Double 𝄫/𝄪</label>
+              <label for="accidentals-double" class="right-of-radio">Double 𝄫/𝄪</label>
             </span>
             <span>
               <input
@@ -78,7 +78,7 @@ const scale = useScaleStore()
                 value="single"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-single"> Single ♭♭/♯♯</label>
+              <label for="accidentals-single" class="right-of-radio">Single ♭♭/♯♯</label>
             </span>
             <span>
               <input
@@ -87,7 +87,7 @@ const scale = useScaleStore()
                 value="ASCII"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-single"> ASCII bb/##</label>
+              <label for="accidentals-single" class="right-of-radio">ASCII bb/##</label>
             </span>
           </div>
         </div>

diff --git a/src/views/SynthView.vue b/src/views/SynthView.vue
@@ -260,17 +260,17 @@ onUnmounted(() => {
                 value="oscillator"
                 v-model="audio.synthType"
               />
-              <label for="type-oscillator"> Oscillator </label>
+              <label for="type-oscillator" class="right-of-radio">Oscillator</label>
             </span>
 
             <span>
               <input type="radio" id="type-unison" value="unison" v-model="audio.synthType" />
-              <label for="type-unison"> Unison </label>
+              <label for="type-unison" class="right-of-radio">Unison</label>
             </span>
 
             <span>
               <input type="radio" id="type-aperiodic" value="aperiodic" v-model="audio.synthType" />
-              <label for="type-aperiodic"> Aperiodic </label>
+              <label for="type-aperiodic" class="right-of-radio">Aperiodic</label>
             </span>
           </div>
           <template v-if="audio.synthType === 'unison'">
@@ -427,28 +427,27 @@ onUnmounted(() => {
                 value="isomorphic"
                 v-model="scale.keyboardMode"
               />
-              <label for="mode-isomorphic"> Isomorphic </label>
+              <label for="mode-isomorphic" class="right-of-radio">Isomorphic</label>
             </span>
             <span>
               <input type="radio" id="mode-piano" value="piano" v-model="scale.keyboardMode" />
-              <label for="mode-piano"> Piano-style layers </label>
+              <label for="mode-piano" class="right-of-radio">Piano-style layers</label>
             </span>
           </div>
           <template v-if="scale.keyboardMode === 'piano'">
             <div class="control radio-group">
               <span>
                 <input type="radio" id="mode-asdf" value="Asdf" v-model="scale.pianoMode" />
-                <label for="mode-asdf"> White on ASDF & black on QWERTY </label>
+                <label for="mode-asdf" class="right-of-radio">White on ASDF & black on QWERTY</label>
               </span>
               <span>
                 <input type="radio" id="mode-qwe-zxc" value="QweZxc" v-model="scale.pianoMode" />
-                <label for="mode-qwe-zxc">
-                  QWERTY & digits + ZXCV & ASDF separated by an equave</label
+                <label for="mode-qwe-zxc" class="right-of-radio">QWERTY & digits + ZXCV & ASDF separated by an equave</label
                 >
               </span>
               <span>
                 <input type="radio" id="mode-zxc" value="Zxc" v-model="scale.pianoMode" />
-                <label for="mode-zxc"> ZXCV with split accidentals above</label>
+                <label for="mode-zxc" class="right-of-radio">ZXCV with split accidentals above</label>
               </span>
             </div>
           </template>