Skip to content

Commit 3fb475e

Browse files
TheBizzleTheBizzle
committed
UX: Shorten HSx labels and provide tooltips
The length of words like "Lightness" was pushing some text onto a second line, and there just isn't really room to spare here for forcing everything onto one line.
1 parent 8fc0a6f commit 3fb475e

1 file changed

Lines changed: 21 additions & 21 deletions

File tree

‎html/index.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -109,102 +109,102 @@
109109
<div id="hsb-controls" class="repr-controls row">
110110
<div class="repr-pair flex column x-mid">
111111
<input id="hsb-h" type="number" class="repr-input" min="0" max="360" />
112-
<label for="hsb-h" class="form-label">Hue (°)</label>
112+
<label for="hsb-h" class="form-label" title="Hue">Hue (°)</label>
113113
</div>
114114
<div class="repr-pair flex column x-mid">
115115
<input id="hsb-s" type="number" class="repr-input" min="0" max="100" />
116-
<label for="hsb-s" class="form-label">Saturation (%)</label>
116+
<label for="hsb-s" class="form-label" title="Saturation">Sat. (%)</label>
117117
</div>
118118
<div class="repr-pair flex column x-mid">
119119
<input id="hsb-b" type="number" class="repr-input" min="0" max="100" />
120-
<label for="hsb-b" class="form-label">Brightness (%)</label>
120+
<label for="hsb-b" class="form-label" title="Brightness">Bright. (%)</label>
121121
</div>
122122
</div>
123123

124124
<div id="hsba-controls" class="repr-controls row">
125125
<div class="repr-pair flex column x-mid">
126126
<input id="hsba-h" type="number" class="repr-input" min="0" max="360" />
127-
<label for="hsba-h" class="form-label">Hue (°)</label>
127+
<label for="hsba-h" class="form-label" title="Hue">Hue (°)</label>
128128
</div>
129129
<div class="repr-pair flex column x-mid">
130130
<input id="hsba-s" type="number" class="repr-input" min="0" max="100" />
131-
<label for="hsba-s" class="form-label">Saturation (%)</label>
131+
<label for="hsba-s" class="form-label" title="Saturation">Sat. (%)</label>
132132
</div>
133133
<div class="repr-pair flex column x-mid">
134134
<input id="hsba-b" type="number" class="repr-input" min="0" max="100" />
135-
<label for="hsba-b" class="form-label">Brightness (%)</label>
135+
<label for="hsba-b" class="form-label" title="Brightness">Bright. (%)</label>
136136
</div>
137137
<div class="repr-pair flex column x-mid">
138138
<input id="hsba-a" class="repr-input" type="number" min="0" max="100" />
139-
<label for="hsba-a" class="form-label">Alpha (%)</label>
139+
<label for="hsba-a" class="form-label" title="Alpha">Alpha (%)</label>
140140
</div>
141141
</div>
142142

143143
<div id="hsl-controls" class="repr-controls row">
144144
<div class="repr-pair flex column x-mid">
145145
<input id="hsl-h" type="number" class="repr-input" min="0" max="360" />
146-
<label for="hsl-h" class="form-label">Hue (°)</label>
146+
<label for="hsl-h" class="form-label" title="Hue">Hue (°)</label>
147147
</div>
148148
<div class="repr-pair flex column x-mid">
149149
<input id="hsl-s" type="number" class="repr-input" min="0" max="100" />
150-
<label for="hsl-s" class="form-label">Saturation (%)</label>
150+
<label for="hsl-s" class="form-label" title="Saturation">Sat. (%)</label>
151151
</div>
152152
<div class="repr-pair flex column x-mid">
153153
<input id="hsl-l" type="number" class="repr-input" min="0" max="100" />
154-
<label for="hsl-l" class="form-label">Lightness (%)</label>
154+
<label for="hsl-l" class="form-label" title="Lightness">Light. (%)</label>
155155
</div>
156156
</div>
157157

158158
<div id="hsla-controls" class="repr-controls row">
159159
<div class="repr-pair flex column x-mid">
160160
<input id="hsla-h" type="number" class="repr-input" min="0" max="360" />
161-
<label for="hsla-h" class="form-label">Hue (°)</label>
161+
<label for="hsla-h" class="form-label" title="Hue">Hue (°)</label>
162162
</div>
163163
<div class="repr-pair flex column x-mid">
164164
<input id="hsla-s" type="number" class="repr-input" min="0" max="100" />
165-
<label for="hsla-s" class="form-label">Saturation (%)</label>
165+
<label for="hsla-s" class="form-label" title="Saturation">Sat. (%)</label>
166166
</div>
167167
<div class="repr-pair flex column x-mid">
168168
<input id="hsla-l" type="number" class="repr-input" min="0" max="100" />
169-
<label for="hsla-l" class="form-label">Lightness (%)</label>
169+
<label for="hsla-l" class="form-label" title="Lightness">Light. (%)</label>
170170
</div>
171171
<div class="repr-pair flex column x-mid">
172172
<input id="hsla-a" class="repr-input" type="number" min="0" max="100" />
173-
<label for="hsla-a" class="form-label">Alpha (%)</label>
173+
<label for="hsla-a" class="form-label" title="Alpha">Alpha (%)</label>
174174
</div>
175175
</div>
176176

177177
<div id="rgb-controls" class="repr-controls row">
178178
<div class="repr-pair flex column x-mid">
179179
<input id="rgb-r" class="repr-input" type="number" min="0" max="255" />
180-
<label for="rgb-r" class="form-label">Red</label>
180+
<label for="rgb-r" class="form-label" title="Red">Red</label>
181181
</div>
182182
<div class="repr-pair flex column x-mid">
183183
<input id="rgb-g" class="repr-input" type="number" min="0" max="255" />
184-
<label for="rgb-g" class="form-label">Green</label>
184+
<label for="rgb-g" class="form-label" title="Green">Green</label>
185185
</div>
186186
<div class="repr-pair flex column x-mid">
187187
<input id="rgb-b" class="repr-input" type="number" min="0" max="255" />
188-
<label for="rgb-b" class="form-label">Blue</label>
188+
<label for="rgb-b" class="form-label" title="Blue">Blue</label>
189189
</div>
190190
</div>
191191

192192
<div id="rgba-controls" class="repr-controls row">
193193
<div class="repr-pair flex column x-mid">
194194
<input id="rgba-r" class="repr-input" type="number" min="0" max="255" />
195-
<label for="rgba-r" class="form-label">Red</label>
195+
<label for="rgba-r" class="form-label" title="Red">Red</label>
196196
</div>
197197
<div class="repr-pair flex column x-mid">
198198
<input id="rgba-g" class="repr-input" type="number" min="0" max="255" />
199-
<label for="rgba-g" class="form-label">Green</label>
199+
<label for="rgba-g" class="form-label" title="Green">Green</label>
200200
</div>
201201
<div class="repr-pair flex column x-mid">
202202
<input id="rgba-b" class="repr-input" type="number" min="0" max="255" />
203-
<label for="rgba-b" class="form-label">Blue</label>
203+
<label for="rgba-b" class="form-label" title="Blue">Blue</label>
204204
</div>
205205
<div class="repr-pair flex column x-mid">
206206
<input id="rgba-a" class="repr-input" type="number" min="0" max="100" />
207-
<label for="rgba-a" class="form-label">Alpha (%)</label>
207+
<label for="rgba-a" class="form-label" title="Alpha">Alpha (%)</label>
208208
</div>
209209
</div>
210210

0 commit comments

Comments
 (0)