Fixing #35 - range selectors are now aligned

zettajs · Nov 14, 2014 · fbfa7cb · fbfa7cb
1 parent 36b2c70
commit fbfa7cb
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 14 deletions.
diff --git a/src/partials/fields/number.html b/src/partials/fields/number.html
@@ -1,6 +1,27 @@
-<table class="number_control"><tr>
-  <td>{{ $parent.field.min }}</td>
-  <td class="range_ui"><input ng-model="$parent.field.value" id="{{ $parent.action.name + $parent.field.name }}" min="{{ $parent.field.min }}" max="{{ $parent.field.max }}" step="{{ $parent.field.step }}"  type="range" name="{{ $parent.field.name }}" value="{{ $parent.field.value }}" /></td>
-  <td>{{ field.max }}</td>
-  <td class="number_ui"><input ng-model="$parent.field.value" type="number" min="{{ $parent.field.min }}" max="{{ $parent.field.max }}" step="{{ $parent.field.step }}" value="{{ $parent.field.value }}" placeholder="{{ $parent.field.value }}"  /></td>
+<table class="number_control"><tr class="pure-g">
+  <td class="pure-u-1-6">{{ $parent.field.min }}</td>
+  <td class="range_ui pure-u-5-12">
+    <input 
+           ng-model="$parent.field.value" 
+           id="{{ $parent.action.name + $parent.field.name }}" 
+           min="{{ $parent.field.min }}" 
+           max="{{ $parent.field.max }}" 
+           step="{{ $parent.field.step }}"  
+           type="range" 
+           name="{{ $parent.field.name }}" 
+           value="{{ $parent.field.value }}" 
+           class="pure-input-1"
+           /></td>
+  <td class="pure-u-1-6">{{ field.max }}</td>
+  <td class="number_ui pure-u-1-4">
+    <input 
+           ng-model="$parent.field.value" 
+           type="number" 
+           min="{{ $parent.field.min }}" 
+           max="{{ $parent.field.max }}" 
+           step="{{ $parent.field.step }}" 
+           value="{{ $parent.field.value }}" 
+           placeholder="{{ $parent.field.value }}" 
+           class="pure-input-1" 
+           /></td>
 </tr></table>
diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -889,7 +889,7 @@ header nav,
   margin-top: 2.5rem;
   background-color: #fff;
   padding: 0 0 1rem 0;
-  z-index: 100;
+  z-index: 49;
   padding-left: 1rem;
   padding-right: 1rem;
   transition: box-shadow 0.2s ease;
@@ -1692,12 +1692,20 @@ table.number_control {
   width: 100%;
 }
 table.number_control td {
+  padding: .75em 0;
   text-align: center;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
-table.number_control .range_ui input {
-  width: 80%;
+table.number_control td:first-of-type {
+  text-align: left;
+}
+table.number_control td.range_ui input[type=range] {
+  padding: .2em 0;
 }
-table.number_control .number_ui input {
-  float: right;
+table.number_control td.number_ui {
+  padding: 0;
 }
 /* Mixins  */
diff --git a/src/styles/styles.less b/src/styles/styles.less
@@ -573,7 +573,7 @@ header nav, #wampum {
     margin-top: 2.5rem;
     background-color: #fff;
     padding: 0 0 1rem 0;
-    z-index: 100;
+    z-index: 49;
     h1 {margin: 2rem 0 1rem 0;}
     .smallPadding();
     .content {
@@ -769,9 +769,21 @@ footer {
 
 table.number_control {
   width: 100%;
-  td {text-align: center;}
-  .range_ui input{width: 80%;}
-  .number_ui input {float: right;}
+  td {
+
+    padding: .75em 0;
+    text-align: center;
+    margin: 0;
+    &:first-of-type {text-align: left;}
+
+    .border-box();
+
+    &.range_ui input[type=range]{
+      padding: .2em 0;
+    }
+    &.number_ui {padding: 0;}
+  }
+
 }