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;}
+ }
+
 }