Made all labels clickable, Split select into radios to halve required clicks, Increased configuration font sizes, Made result code overlay when arrow overlaps

Author: barnabyc

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 public-min
 *.log
+.DS_Store

public/css/app.css

@@ -7,7 +7,7 @@ ul, ol, form                  { margin: 0; padding: 0; }
 ul, ol                        { list-style-type: none; }
 h1                            { margin: 0; padding: 0; }
 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); }
-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; }
+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; }
 
 /* =LAYOUT
 ====================================================== */
@@ -36,17 +36,18 @@ input                         { border: 1px solid #777; box-shadow: inset 0 1px
 .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); }
 
 /* configuration */
-.configuration                { margin-top: 20px; }
-.configuration .section       { float: left; width: 195px; }
-.configuration .section li    { margin-bottom: 5px; }
-.configuration .section label { display: inline-block; width: 100px; }
+.configuration                    { margin-top: 20px; }
+.configuration .section           { float: left; width: 195px; font-size: 20px }
+.configuration .section.positions { width: 140px; margin-left: 14px }
+.configuration .section li        { margin-bottom: 5px; }
+.configuration .section label     { display: inline-block; width: 112px; }
 
 .configuration .size,
-.configuration .border_width  { width: 25px; text-align: right; }
+.configuration .border_width  { width: 28px; text-align: right; }
 
-.configuration .color         { width: 60px; }
+.configuration .color         { width: 65px; text-align: center }
 
 .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; }
 
 /* result_code */
-.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); }
+.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

@@ -20,33 +20,33 @@ <h1 class='logo'>css arrow please!</h1>
         <form class='configuration'>
           <h2>Arrow configuration</h2>
           <div class='clr'>
-            <ol class='section'>
+            <ol class='section positions'>
               <li>
                 <label>Position</label>
-                <select class='position'>
-                  <option value='top'>Top</option>
-                  <option value='right'>Right</option>
-                  <option value='bottom'>Bottom</option>
-                  <option value='left'>Left</option>
-                </select>
+                <label><input type="radio" name="position" value="top"    class="position" /> Top</label>
+                <label><input type="radio" name="position" value="right"  class="position" /> Right</label>
+                <label><input type="radio" name="position" value="bottom" class="position" /> Bottom</label>
+                <label><input type="radio" name="position" value="left"   class="position" /> Left</label>
               </li>
+            </ol>
+            <ol class='section'>
               <li>
-                <label>Size</label>
-                <input class='size' /><span class='unit'>px</span>
+                <label for='size'>Size</label>
+                <input class='size' id='size' /><span class='unit'>px</span>
               </li>
               <li>
-                <label>Color</label>
-                <input class='base_color color {hash:true,caps:false}' />
+                <label for='color'>Color</label>
+                <input class='base_color color {hash:true,caps:false}' id='color' />
               </li>
             </ol>
             <ol class='section'>
               <li>
-                <label>Border width</label>
-                <input class='border_width' /><span class='unit'>px</span>
+                <label for='border_width'>Border width</label>
+                <input class='border_width' id='border_width' /><span class='unit'>px</span>
               </li>
               <li>
-                <label>Border color</label>
-                <input class='border_color color {hash:true,caps:false}' />
+                <label for='border_color'>Border color</label>
+                <input class='border_color color {hash:true,caps:false}' id='border_color' />
               </li>
             </ol>
           </div>

public/js/lib/views/arrow_configuration_view.js

@@ -37,7 +37,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
       var container = this.container,
           model     = this.model;
 
-      container.find('.position').val( model.get('position') );
+      container.find('.position').val([ model.get('position') ]);
       container.find('.size').val( model.get('size') );
       container.find('.base_color').val( model.get('color') );
       container.find('.border_width').val( model.get('borderWidth') );