Skip to content

Commit ec0ad81

Browse files
hojberghojberg
committed
Merge pull request hojberg#19 from barnabyc/accessibility_tweaks
Accessibility tweaks
2 parents 1a941e6 + 30b340a commit ec0ad81

File tree

4 files changed

+26
-24
lines changed

4 files changed

+26
-24
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
public-min
33
*.log
4+
.DS_Store

‎public/css/app.css‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ ul, ol, form { margin: 0; padding: 0; }
77
ul, ol { list-style-type: none; }
88
h1 { margin: 0; padding: 0; }
99
h2 { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
10-
input { border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }
10+
input { font-size: 14px; border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }
1111

1212
/* =LAYOUT
1313
====================================================== */
@@ -36,17 +36,18 @@ input { border: 1px solid #777; box-shadow: inset 0 1px
3636
.logo { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
3737

3838
/* configuration */
39-
.configuration { margin-top: 20px; }
40-
.configuration .section { float: left; width: 195px; }
41-
.configuration .section li { margin-bottom: 5px; }
42-
.configuration .section label { display: inline-block; width: 100px; }
39+
.configuration { margin-top: 20px; }
40+
.configuration .section { float: left; width: 195px; font-size: 20px }
41+
.configuration .section.positions { width: 140px; margin-left: 14px }
42+
.configuration .section li { margin-bottom: 5px; }
43+
.configuration .section label { display: inline-block; width: 112px; }
4344

4445
.configuration .size,
45-
.configuration .border_width { width: 25px; text-align: right; }
46+
.configuration .border_width { width: 28px; text-align: right; }
4647

47-
.configuration .color { width: 60px; }
48+
.configuration .color { width: 65px; text-align: center }
4849

4950
.configuration .unit { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); margin-left: 5px; }
5051

5152
/* result_code */
52-
.result_code { white-space: pre; padding: 10px; float: right; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
53+
.result_code { position: relative; white-space: pre; padding: 10px; float: right; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }

‎public/index.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,33 @@ <h1 class='logo'>css arrow please!</h1>
2020
<form class='configuration'>
2121
<h2>Arrow configuration</h2>
2222
<div class='clr'>
23-
<ol class='section'>
23+
<ol class='section positions'>
2424
<li>
2525
<label>Position</label>
26-
<select class='position'>
27-
<option value='top'>Top</option>
28-
<option value='right'>Right</option>
29-
<option value='bottom'>Bottom</option>
30-
<option value='left'>Left</option>
31-
</select>
26+
<label><input type="radio" name="position" value="top" class="position" /> Top</label>
27+
<label><input type="radio" name="position" value="right" class="position" /> Right</label>
28+
<label><input type="radio" name="position" value="bottom" class="position" /> Bottom</label>
29+
<label><input type="radio" name="position" value="left" class="position" /> Left</label>
3230
</li>
31+
</ol>
32+
<ol class='section'>
3333
<li>
34-
<label>Size</label>
35-
<input class='size' /><span class='unit'>px</span>
34+
<label for='size'>Size</label>
35+
<input class='size' id='size' /><span class='unit'>px</span>
3636
</li>
3737
<li>
38-
<label>Color</label>
39-
<input class='base_color color {hash:true,caps:false}' />
38+
<label for='color'>Color</label>
39+
<input class='base_color color {hash:true,caps:false}' id='color' />
4040
</li>
4141
</ol>
4242
<ol class='section'>
4343
<li>
44-
<label>Border width</label>
45-
<input class='border_width' /><span class='unit'>px</span>
44+
<label for='border_width'>Border width</label>
45+
<input class='border_width' id='border_width' /><span class='unit'>px</span>
4646
</li>
4747
<li>
48-
<label>Border color</label>
49-
<input class='border_color color {hash:true,caps:false}' />
48+
<label for='border_color'>Border color</label>
49+
<input class='border_color color {hash:true,caps:false}' id='border_color' />
5050
</li>
5151
</ol>
5252
</div>

‎public/js/lib/views/arrow_configuration_view.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
3737
var container = this.container,
3838
model = this.model;
3939

40-
container.find('.position').val( model.get('position') );
40+
container.find('.position').val([ model.get('position') ]);
4141
container.find('.size').val( model.get('size') );
4242
container.find('.base_color').val( model.get('color') );
4343
container.find('.border_width').val( model.get('borderWidth') );

0 commit comments

Comments
 (0)