Skip to content

Commit

Permalink
eliminated unneeded blank spaces and changed label css
Browse files Browse the repository at this point in the history
  • Loading branch information
@000masa000
000masa000 committed Apr 16, 2024
1 parent c38f3b6 commit cef0575
Show file tree
Hide file tree
Showing 19 changed files with 109 additions and 113 deletions.
16 changes: 6 additions & 10 deletions src/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,6 @@ 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'],
Expand Down Expand Up @@ -156,12 +146,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: 0rem 1rem;
}
.control.radio-group span label {
font-weight: unset;
margin-left: 0.35rem;
text-align: left;
vertical-align: baseline;
}

/* Responding to screen size */
Expand Down
6 changes: 3 additions & 3 deletions src/components/ScaleControls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ defineExpose({ focus, clearPaletteInfo })
v-model="scale.autoColors"
@input="updateScale"
/>
<label for="colors-silver" class="right-of-radio">Silver</label>
<label for="colors-silver">Silver</label>
</span>

<span>
Expand All @@ -98,7 +98,7 @@ defineExpose({ focus, clearPaletteInfo })
v-model="scale.autoColors"
@input="updateScale"
/>
<label for="colors-cents" class="right-of-radio">Cents</label>
<label for="colors-cents">Cents</label>
</span>

<span>
Expand All @@ -109,7 +109,7 @@ defineExpose({ focus, clearPaletteInfo })
v-model="scale.autoColors"
@input="updateScale"
/>
<label for="colors-factors" class="right-of-radio">Factors</label>
<label for="colors-factors">Factors</label>
</span>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/modals/generation/ConcordanceShell.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
18 changes: 9 additions & 9 deletions src/components/modals/generation/HistoricalScale.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
24 changes: 12 additions & 12 deletions src/components/modals/generation/MosScale.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
22 changes: 11 additions & 11 deletions src/components/modals/generation/RankTwo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>

Expand Down
12 changes: 6 additions & 6 deletions src/components/modals/generation/SpanLattice.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'">
Expand Down Expand Up @@ -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>

Expand Down
6 changes: 3 additions & 3 deletions src/components/modals/modification/ApproximateByRatios.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Loading

0 comments on commit cef0575

Please sign in to comment.