Skip to content

Commit 7b008d6

Browse files
MatthewDornerMatthewDorner
committed
Improve visual tool layout
1 parent 22801f6 commit 7b008d6

File tree

2 files changed

+147
-133
lines changed

2 files changed

+147
-133
lines changed

‎visual-tool/index.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,19 @@
3030

3131
#tuneSelect {
3232
width: 100%;
33-
height: 80%;
33+
flex: 1;
3434
}
3535

3636
#tunebookSelect {
3737
width: 100%;
3838
height: 100%;
3939
}
40+
41+
#wrapper {
42+
padding-left: 5em;
43+
padding-right: 5em;
44+
}
45+
46+
#infoContainer {
47+
background-color: silver;
48+
}

‎visual-tool/index.html‎

Lines changed: 137 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -6,168 +6,173 @@
66
<title>abcjs-vexflow-renderer visual comparison tool</title>
77
</head>
88
<body>
9-
<div>
10-
<h2>abcjs-vexflow-renderer visual comparison tool</h2>
11-
<p>Compare abcjs-vexflow-renderer output to abcjs built-in renderer output.</p>
12-
</div>
9+
<div id="wrapper">
10+
<div>
11+
<h2>abcjs-vexflow-renderer visual comparison tool</h2>
12+
<p>Compare abcjs-vexflow-renderer output to abcjs built-in renderer output.</p>
13+
</div>
1314

14-
<div class="row">
15-
<div class="col-9">
16-
<div class="row">
17-
<div class="col">
18-
<select id="tunebookSelect" multiple>
19-
</select>
20-
</div>
21-
<div class="col">
22-
<select id="tuneSelect" multiple>
23-
</select>
24-
<button id="testForErrors" class="btn btn-primary">Test All and Show Render Errors</button>
25-
</div>
26-
<div class="col">
27-
<div class="row">
28-
<div class="col">
29-
<div class="form-group">
30-
<label for="xOffset">xOffset</label>
31-
<input type="text" id="xOffset" class="form-control" placeholder="xOffset">
15+
<div class="row">
16+
<div class="col-9">
17+
<div class="row">
18+
<div class="col">
19+
<select id="tunebookSelect" multiple>
20+
</select>
21+
</div>
22+
<div class="col d-flex flex-column">
23+
<select id="tuneSelect" multiple>
24+
</select>
25+
<div class="form-group">
26+
<label for="testForErrors"></label>
27+
<button id="testForErrors" class="btn btn-primary form-control">Test All and Show Render Errors</button>
28+
</div>
29+
</div>
30+
<div class="col">
31+
<div class="row">
32+
<div class="col">
33+
<div class="form-group">
34+
<label for="xOffset">xOffset</label>
35+
<input type="text" id="xOffset" class="form-control" placeholder="xOffset">
36+
</div>
3237
</div>
3338
</div>
34-
</div>
35-
<div class="row">
36-
<div class="col">
37-
<div class="form-group">
38-
<label for="xOffset">xOffset</label>
39-
<input type="text" id="xOffset" class="form-control" placeholder="xOffset">
39+
<div class="row">
40+
<div class="col">
41+
<div class="form-group">
42+
<label for="xOffset">xOffset</label>
43+
<input type="text" id="xOffset" class="form-control" placeholder="xOffset">
44+
</div>
4045
</div>
4146
</div>
42-
</div>
43-
<div class="row">
44-
<div class="col">
45-
<div class="form-group">
46-
<label for="widthFactor">widthFactor</label>
47-
<input type="text" id="widthFactor" class="form-control">
47+
<div class="row">
48+
<div class="col">
49+
<div class="form-group">
50+
<label for="widthFactor">widthFactor</label>
51+
<input type="text" id="widthFactor" class="form-control">
52+
</div>
4853
</div>
4954
</div>
50-
</div>
51-
<div class="row">
52-
<div class="col">
53-
<div class="form-group">
54-
<label for="lineHeight">lineHeight</label>
55-
<input type="text" id="lineHeight" class="form-control">
55+
<div class="row">
56+
<div class="col">
57+
<div class="form-group">
58+
<label for="lineHeight">lineHeight</label>
59+
<input type="text" id="lineHeight" class="form-control">
60+
</div>
5661
</div>
5762
</div>
5863
</div>
5964
</div>
60-
</div>
61-
<div class="row">
62-
<div class="col-4">
63-
<div class="form-group">
64-
<label for="clefWidth">clefWidth</label>
65-
<input type="text" id="clefWidth" class="form-control">
66-
</div>
67-
</div>
68-
<div class="col-4">
69-
<div class="form-group">
70-
<label for="meterWidth">meterWidth</label>
71-
<input type="text" id="meterWidth" class="form-control">
65+
<div class="row">
66+
<div class="col-4">
67+
<div class="form-group">
68+
<label for="clefWidth">clefWidth</label>
69+
<input type="text" id="clefWidth" class="form-control">
70+
</div>
7271
</div>
73-
</div>
74-
<div class="col-4">
75-
<div class="form-group">
76-
<label for="repeatWidthModifier">repeatWidthModifier</label>
77-
<input type="text" id="repeatWidthModifier" class="form-control">
72+
<div class="col-4">
73+
<div class="form-group">
74+
<label for="meterWidth">meterWidth</label>
75+
<input type="text" id="meterWidth" class="form-control">
76+
</div>
7877
</div>
79-
</div>
80-
</div>
81-
<div class="row">
8278
<div class="col-4">
83-
<div class="form-group">
84-
<label for="keySigAccidentalWidth">keySigAccidentalWidth</label>
85-
<input type="text" id="keySigAccidentalWidth" class="form-control">
79+
<div class="form-group">
80+
<label for="repeatWidthModifier">repeatWidthModifier</label>
81+
<input type="text" id="repeatWidthModifier" class="form-control">
82+
</div>
8683
</div>
8784
</div>
88-
<div class="col-4">
89-
<div class="form-group">
90-
<label for="tabsVisibility">tabsVisibility</label>
91-
<input type="text" id="tabsVisibility" class="form-control">
85+
<div class="row">
86+
<div class="col-4">
87+
<div class="form-group">
88+
<label for="keySigAccidentalWidth">keySigAccidentalWidth</label>
89+
<input type="text" id="keySigAccidentalWidth" class="form-control">
90+
</div>
9291
</div>
93-
</div>
94-
<div class="col-4">
95-
<div class="form-group">
96-
<label for="staveVisibility">staveVisibility</label>
97-
<input type="text" id="staveVisibility" class="form-control">
92+
<div class="col-4">
93+
<div class="form-group">
94+
<label for="tabsVisibility">tabsVisibility</label>
95+
<input type="text" id="tabsVisibility" class="form-control">
96+
</div>
97+
</div>
98+
<div class="col-4">
99+
<div class="form-group">
100+
<label for="staveVisibility">staveVisibility</label>
101+
<input type="text" id="staveVisibility" class="form-control">
102+
</div>
98103
</div>
99104
</div>
100-
</div>
101105

102-
<div class="row">
103-
<div class="col-4">
104-
<div class="form-group">
105-
<label for="tabStemsVisibility">tabStemsVisibility</label>
106-
<input type="text" id="tabStemsVisibility" class="form-control">
106+
<div class="row">
107+
<div class="col-4">
108+
<div class="form-group">
109+
<label for="tabStemsVisibility">tabStemsVisibility</label>
110+
<input type="text" id="tabStemsVisibility" class="form-control">
111+
</div>
107112
</div>
108-
</div>
109-
<div class="col-4">
110-
<div class="form-group">
111-
<label for="voltaHeight">voltaHeight</label>
112-
<input type="text" id="voltaHeight" class="form-control">
113+
<div class="col-4">
114+
<div class="form-group">
115+
<label for="voltaHeight">voltaHeight</label>
116+
<input type="text" id="voltaHeight" class="form-control">
117+
</div>
113118
</div>
114-
</div>
115-
<div class="col-4">
116-
<div class="form-group">
117-
<label for="renderWidth">renderWidth</label>
118-
<input type="text" id="renderWidth" class="form-control">
119+
<div class="col-4">
120+
<div class="form-group">
121+
<label for="renderWidth">renderWidth</label>
122+
<input type="text" id="renderWidth" class="form-control">
123+
</div>
119124
</div>
120125
</div>
121-
</div>
122126

123-
<div class="row">
124-
<div class="col-4">
125-
<div class="form-group">
126-
<label for="tuning">tuning</label>
127-
<select id="tuning" class="form-control">
128-
<option value="GUITAR_STANDARD">Guitar (EADGBE)</option>
129-
<option value="GUITAR_OPEN_D">Guitar (DADF#AD)</option>
130-
<option value="BANJO">Banjo (GDGBD)</option>
131-
<option value="TENOR_BANJO">Tenor Banjo (CGDA)</option>
132-
<option value="FIDDLE_STANDARD">Fiddle/Mandolin (GDAE)</option>
133-
<option value="FIDDLE_STANDARD_FINGERINGS">Fiddle Fingerings (GDAE)</option>
134-
<option value="FIDDLE_CROSS">Cross Fiddle (AEAE)</option>
135-
<option value="FIDDLE_CROSS_FINGERINGS">Fiddle Fingerings (AEAE)</option>
136-
<option value="TIN_WHISTLE_D">Tin Whistle (D)</option>
137-
<option value="TIN_WHISTLE_C">Tin Whistle (C)</option>
138-
<option value="TIN_WHISTLE_B_FLAT">Tin Whistle (Bb)</option>
139-
<option value="HARMONICA_C">Harmonica (C)</option>
140-
<option value="HARMONICA_A">Harmonica (A)</option>
141-
<option value="HARMONICA_G">Harmonica (G)</option>
142-
<option value="HARMONICA_C_OCTAVE">Harmonica (C) +OCTAVE</option>
143-
<option value="HARMONICA_A_OCTAVE">Harmonica (A) +OCTAVE</option>
144-
<option value="HARMONICA_G_OCTAVE">Harmonica (G) +OCTAVE</option>
145-
</select>
127+
<div class="row">
128+
<div class="col-4">
129+
<div class="form-group">
130+
<label for="tuning">tuning</label>
131+
<select id="tuning" class="form-control">
132+
<option value="GUITAR_STANDARD">Guitar (EADGBE)</option>
133+
<option value="GUITAR_OPEN_D">Guitar (DADF#AD)</option>
134+
<option value="BANJO">Banjo (GDGBD)</option>
135+
<option value="TENOR_BANJO">Tenor Banjo (CGDA)</option>
136+
<option value="FIDDLE_STANDARD">Fiddle/Mandolin (GDAE)</option>
137+
<option value="FIDDLE_STANDARD_FINGERINGS">Fiddle Fingerings (GDAE)</option>
138+
<option value="FIDDLE_CROSS">Cross Fiddle (AEAE)</option>
139+
<option value="FIDDLE_CROSS_FINGERINGS">Fiddle Fingerings (AEAE)</option>
140+
<option value="TIN_WHISTLE_D">Tin Whistle (D)</option>
141+
<option value="TIN_WHISTLE_C">Tin Whistle (C)</option>
142+
<option value="TIN_WHISTLE_B_FLAT">Tin Whistle (Bb)</option>
143+
<option value="HARMONICA_C">Harmonica (C)</option>
144+
<option value="HARMONICA_A">Harmonica (A)</option>
145+
<option value="HARMONICA_G">Harmonica (G)</option>
146+
<option value="HARMONICA_C_OCTAVE">Harmonica (C) +OCTAVE</option>
147+
<option value="HARMONICA_A_OCTAVE">Harmonica (A) +OCTAVE</option>
148+
<option value="HARMONICA_G_OCTAVE">Harmonica (G) +OCTAVE</option>
149+
</select>
150+
</div>
151+
</div>
152+
<div class="col-4 d-flex align-items-end">
153+
<button id="applyDefaultOptions" class="btn btn-primary">Apply Default Options</button>
146154
</div>
147-
</div>
148-
<div class="col-4">
149-
<button id="applyDefaultOptions" class="btn btn-primary">Apply Default Options</button>
150155
</div>
151156
</div>
152-
</div>
153-
<div class="col-3">
154-
<p id="abcText">
155-
</p>
156-
<p id="errorText">
157-
</p>
158-
</div>
159-
</div>
160-
<div id="outputs" class="row">
161-
<div id="vexflowOutput" class="col">
162-
<h3>abcjs-vexflow-renderer rendered:</h3>
163-
<div id="vexflowRendered">
157+
<div class="col-3" id="infoContainer">
158+
<p id="abcText">
159+
</p>
160+
<p id="errorText">
161+
</p>
164162
</div>
165163
</div>
166-
<div id="abcjsOutput" class="col">
167-
<h3>abcjs rendered:</h3>
168-
<div id="abcjsRendered">
164+
<div id="outputs" class="row">
165+
<div id="vexflowOutput" class="col">
166+
<h3>abcjs-vexflow-renderer rendered:</h3>
167+
<div id="vexflowRendered">
168+
</div>
169169
</div>
170-
</div>
171-
</div>
170+
<div id="abcjsOutput" class="col">
171+
<h3>abcjs rendered:</h3>
172+
<div id="abcjsRendered">
173+
</div>
174+
</div>
175+
</div>
176+
</div>
172177
</body>
173178
</html>

0 commit comments

Comments
 (0)