fixed radio button spacing with css (#654)

Use CSS to add spacing between checkboxes and their labels. Do the same with radio buttons.
xenharmonic-devs · Apr 17, 2024 · bcc91bf · bcc91bf
1 parent 59e6765
commit bcc91bf
Show file tree

Hide file tree

Showing 19 changed files with 127 additions and 109 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -50,6 +50,9 @@ select {
   width: 6rem;
   line-height: var(--base-line-height);
 }
+input[type='radio'] {
+  vertical-align: -0.05rem;
+}
 optgroup {
   font-weight: bold;
 }
@@ -142,12 +145,18 @@ ul.btn-group {
 }
 .control.checkbox-container label {
   font-weight: normal;
+  margin-left: 0.2rem;
+  text-align: left;
+  vertical-align: baseline;
 }
 .control.radio-group {
-  gap: 0.15rem 1rem;
+  gap: 0rem 1rem;
 }
 .control.radio-group span label {
   font-weight: unset;
+  margin-left: 0.35rem;
+  text-align: left;
+  vertical-align: baseline;
 }
 
 /* Responding to screen size */

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">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">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">Factors</label>
       </span>
     </div>
   </div>

diff --git a/src/components/modals/generation/ConcordanceShell.vue b/src/components/modals/generation/ConcordanceShell.vue
@@ -111,11 +111,11 @@ function generate(shell = true, expand = true) {
           <label>Error model</label>
           <span>
             <input type="radio" id="error-rooted" value="rooted" v-model="modal.errorModel" />
-            <label for="error-rooted"> Rooted </label>
+            <label for="error-rooted">Rooted</label>
           </span>
           <span>
             <input type="radio" id="error-free" value="free" v-model="modal.errorModel" />
-            <label for="error-free"> Free </label>
+            <label for="error-free">Free</label>
           </span>
         </div>
         <div class="control">

diff --git a/src/components/modals/generation/HistoricalScale.vue b/src/components/modals/generation/HistoricalScale.vue
@@ -186,7 +186,7 @@ function generate(expand = true) {
                 v-model="historical.method"
                 @input="historical.selectPreset(historical.selectedPreset)"
               />
-              <label for="method-simple"> Simple </label>
+              <label for="method-simple">Simple</label>
             </span>
 
             <span>
@@ -197,7 +197,7 @@ function generate(expand = true) {
                 v-model="historical.method"
                 @input="historical.down = 1"
               />
-              <label for="method-target"> Target </label>
+              <label for="method-target">Target</label>
             </span>
 
             <span>
@@ -208,7 +208,7 @@ function generate(expand = true) {
                 v-model="historical.method"
                 @input="historical.selectWellPreset(historical.selectedWellPreset)"
               />
-              <label for="method-well"> Well Temperament </label>
+              <label for="method-well">Well Temperament</label>
             </span>
           </div>
         </div>
@@ -243,11 +243,11 @@ function generate(expand = true) {
             <label>Format</label>
             <span>
               <input id="format-cents" type="radio" value="cents" v-model="historical.format" />
-              <label for="format-cents"> cents</label>
+              <label for="format-cents">cents</label>
             </span>
             <span>
               <input id="format-default" type="radio" value="default" v-model="historical.format" />
-              <label for="format-default"> default</label>
+              <label for="format-default">default</label>
             </span>
           </div>
           <div class="control">
@@ -337,11 +337,11 @@ function generate(expand = true) {
             <label>Format</label>
             <span>
               <input id="format-cents" type="radio" value="cents" v-model="historical.format" />
-              <label for="format-cents"> cents</label>
+              <label for="format-cents">cents</label>
             </span>
             <span>
               <input id="format-default" type="radio" value="default" v-model="historical.format" />
-              <label for="format-default"> default</label>
+              <label for="format-default">default</label>
             </span>
           </div>
         </div>
@@ -384,11 +384,11 @@ function generate(expand = true) {
             <label>Format</label>
             <span>
               <input id="format-cents" type="radio" value="cents" v-model="historical.format" />
-              <label for="format-cents"> cents</label>
+              <label for="format-cents">cents</label>
             </span>
             <span>
               <input id="format-default" type="radio" value="default" v-model="historical.format" />
-              <label for="format-default"> default</label>
+              <label for="format-default">default</label>
             </span>
           </div>
           <div class="control">

diff --git a/src/components/modals/generation/MosScale.vue b/src/components/modals/generation/MosScale.vue
@@ -147,17 +147,17 @@ function edoClick(info: MosScaleInfo) {
         <div class="control radio-group">
           <span>
             <input type="radio" id="method-direct" value="direct" v-model="modal.method" />
-            <label for="method-direct"> Direct </label>
+            <label for="method-direct">Direct</label>
           </span>
 
           <span>
             <input type="radio" id="method-pyramid" value="pyramid" v-model="modal.method" />
-            <label for="method-pyramid"> Pyramid </label>
+            <label for="method-pyramid">Pyramid</label>
           </span>
 
           <span>
             <input type="radio" id="method-edo" value="edo" v-model="modal.method" />
-            <label for="method-edo"> EDO </label>
+            <label for="method-edo">EDO</label>
           </span>
         </div>
       </div>
@@ -215,45 +215,45 @@ function edoClick(info: MosScaleInfo) {
           <label>Generate key colors</label>
           <span>
             <input type="radio" id="color-none" value="none" v-model="modal.colorMethod" />
-            <label for="color-none"> Off </label>
+            <label for="color-none">Off</label>
           </span>
           <span>
             <input type="radio" id="color-parent" value="parent" v-model="modal.colorMethod" />
-            <label for="color-parent"> Parent MOS </label>
+            <label for="color-parent">Parent MOS</label>
           </span>
           <span>
             <input type="radio" id="color-daughter" value="daughter" v-model="modal.colorMethod" />
-            <label for="color-daughter"> Daughter MOS (expand scale) </label>
+            <label for="color-daughter">Daughter MOS (expand scale)</label>
           </span>
         </div>
         <div class="control radio-group" v-show="modal.colorMethod === 'parent'">
           <label>Black keys are</label>
           <span>
             <input type="radio" id="sharp" value="sharp" v-model="modal.parentColorAccidentals" />
-            <label for="sharp"> Sharp </label>
+            <label for="sharp">Sharp</label>
           </span>
           <span>
             <input type="radio" id="flat" value="flat" v-model="modal.parentColorAccidentals" />
-            <label for="flat"> Flat </label>
+            <label for="flat">Flat</label>
           </span>
         </div>
         <div class="control radio-group" v-show="modal.colorMethod === 'daughter'">
           <label>Accidentals to include</label>
           <span>
             <input type="radio" id="sharp" value="sharp" v-model="modal.daughterColorAccidentals" />
-            <label for="sharp"> Sharp </label>
+            <label for="sharp">Sharp</label>
           </span>
           <span>
             <input type="radio" id="flat" value="flat" v-model="modal.daughterColorAccidentals" />
-            <label for="flat"> Flat </label>
+            <label for="flat">Flat</label>
           </span>
           <span>
             <input type="radio" id="both" value="both" v-model="modal.daughterColorAccidentals" />
-            <label for="both"> Both </label>
+            <label for="both">Both</label>
           </span>
           <span>
             <input type="radio" id="all" value="all" v-model="modal.daughterColorAccidentals" />
-            <label for="all"> Full ET </label>
+            <label for="all">Full ET</label>
           </span>
         </div>
       </div>

diff --git a/src/components/modals/generation/RankTwo.vue b/src/components/modals/generation/RankTwo.vue
@@ -184,22 +184,22 @@ function generate(expand = true) {
             <label>Method</label>
             <span>
               <input type="radio" id="method-generator" value="generator" v-model="rank2.method" />
-              <label for="method-generator"> Generator </label>
+              <label for="method-generator">Generator</label>
             </span>
 
             <span>
               <input type="radio" id="method-vals" value="vals" v-model="rank2.method" />
-              <label for="method-vals"> Vals </label>
+              <label for="method-vals">Vals</label>
             </span>
 
             <span>
               <input type="radio" id="method-commas" value="commas" v-model="rank2.method" />
-              <label for="method-commas"> Comma list </label>
+              <label for="method-commas">Comma list</label>
             </span>
 
             <span>
               <input type="radio" id="method-circle" value="circle" v-model="rank2.method" />
-              <label for="method-circle"> Circle</label>
+              <label for="method-circle">Circle</label>
             </span>
           </div>
         </div>
@@ -385,22 +385,22 @@ function generate(expand = true) {
             <label>Generate key colors</label>
             <span>
               <input type="radio" id="color-none" value="none" v-model="rank2.colorMethod" />
-              <label for="color-none"> Off </label>
+              <label for="color-none">Off</label>
             </span>
             <span>
               <input type="radio" id="color-gaps" value="gaps" v-model="rank2.colorMethod" />
-              <label for="color-gaps"> Fill gaps (expand scale) </label>
+              <label for="color-gaps">Fill gaps (expand scale)</label>
             </span>
           </div>
           <div class="control radio-group" v-show="rank2.colorMethod !== 'none'">
             <label>Black keys are</label>
             <span>
               <input type="radio" id="sharp" value="sharp" v-model="rank2.colorAccidentals" />
-              <label for="sharp"> Sharp </label>
+              <label for="sharp">Sharp</label>
             </span>
             <span>
               <input type="radio" id="flat" value="flat" v-model="rank2.colorAccidentals" />
-              <label for="flat"> Flat </label>
+              <label for="flat">Flat</label>
             </span>
           </div>
         </div>
@@ -417,17 +417,17 @@ function generate(expand = true) {
           <div class="control radio-group">
             <span>
               <input type="radio" id="tempering-TE" value="TE" v-model="rank2.tempering" />
-              <label for="tempering-TE"> TE </label>
+              <label for="tempering-TE">TE</label>
             </span>
 
             <span>
               <input type="radio" id="tempering-POTE" value="POTE" v-model="rank2.tempering" />
-              <label for="tempering-POTE"> POTE </label>
+              <label for="tempering-POTE">POTE</label>
             </span>
 
             <span>
               <input type="radio" id="tempering-CTE" value="CTE" v-model="rank2.tempering" />
-              <label for="tempering-CTE"> CTE </label>
+              <label for="tempering-CTE">CTE</label>
             </span>
           </div>
 

diff --git a/src/components/modals/generation/SpanLattice.vue b/src/components/modals/generation/SpanLattice.vue
@@ -109,17 +109,17 @@ function generate(expand = true) {
               value="generators"
               v-model="lattice.method"
             />
-            <label for="method-generators"> Generators </label>
+            <label for="method-generators">Generators</label>
           </span>
 
           <span>
             <input type="radio" id="method-vals" value="vals" v-model="lattice.method" />
-            <label for="method-vals"> Vals </label>
+            <label for="method-vals">Vals</label>
           </span>
 
           <span>
             <input type="radio" id="method-commas" value="commas" v-model="lattice.method" />
-            <label for="method-commas"> Comma list </label>
+            <label for="method-commas">Comma list</label>
           </span>
         </div>
         <div class="control-group" v-show="lattice.method === 'generators'">
@@ -201,17 +201,17 @@ function generate(expand = true) {
             <div class="control radio-group">
               <span>
                 <input type="radio" id="tempering-TE" value="TE" v-model="lattice.tempering" />
-                <label for="tempering-TE"> TE </label>
+                <label for="tempering-TE">TE</label>
               </span>
 
               <span>
                 <input type="radio" id="tempering-POTE" value="POTE" v-model="lattice.tempering" />
-                <label for="tempering-POTE"> POTE </label>
+                <label for="tempering-POTE">POTE</label>
               </span>
 
               <span>
                 <input type="radio" id="tempering-CTE" value="CTE" v-model="lattice.tempering" />
-                <label for="tempering-CTE"> CTE </label>
+                <label for="tempering-CTE">CTE</label>
               </span>
             </div>
 

diff --git a/src/components/modals/modification/ApproximateByRatios.vue b/src/components/modals/modification/ApproximateByRatios.vue
@@ -182,17 +182,17 @@ function modify(expand = true) {
               value="convergents"
               v-model="approx.method"
             />
-            <label for="method-convergents"> Convergents </label>
+            <label for="method-convergents">Convergents</label>
           </span>
 
           <span>
             <input type="radio" id="method-odd" value="odd" v-model="approx.method" />
-            <label for="method-odd"> Odd limit </label>
+            <label for="method-odd">Odd limit</label>
           </span>
 
           <span>
             <input type="radio" id="method-prime" value="prime" v-model="approx.method" />
-            <label for="method-prime"> Prime limit </label>
+            <label for="method-prime">Prime limit</label>
           </span>
         </div>