Merge pull request #4 from albus522/make-it-better

Make it better

Gemfile

@@ -11,8 +11,6 @@ group :assets do
   gem 'jquery-rails'
 end
 
-gem 'font-awesome-rails'
-
 gem 'turbolinks'
 
 gem 'bcrypt', '~> 3.1.7'

Gemfile.lock

@@ -52,8 +52,6 @@ GEM
     erubis (2.7.0)
     eventmachine (1.0.9.1)
     execjs (2.2.2)
-    font-awesome-rails (4.4.0.0)
-      railties (>= 3.2, < 5.0)
     hike (1.2.3)
     i18n (0.6.11)
     jquery-rails (3.1.2)
@@ -131,7 +129,6 @@ DEPENDENCIES
   capistrano-bundler
   capistrano-rails
   coffee-rails (~> 4.0.0)
-  font-awesome-rails
   jquery-rails
   pg
   rails (~> 4.1.8)

app/assets/javascripts/temp_controls.coffee

@@ -1,14 +1,20 @@
 $ () ->
-  $(".increase-temp").on "click touchend", (e) ->
-    e.preventDefault()
+  change = new Event("change")
+  $("#set_temp_temp").on "change", ->
+    decrease = (this.value <= this.getAttribute("min")) ? "disabled" : false
+    $(".decrease-temp").attr("disabled", decrease)
 
-    field = $("#set_temp_temp")
-    if parseInt(field.val()) < parseInt(field.attr("max"))
-      field.val(parseInt(field.val()) + 1)
+    increase = (this.value >= this.getAttribute("max")) ? "disabled" : false
+    $(".increase-temp").attr("disabled", increase)
 
-  $(".decrease-temp").on "click touchend", (e) ->
+  $(document).on "click touchend", ".increase-temp:not([disabled=disabled])", (e) ->
     e.preventDefault()
+    field = document.getElementById("set_temp_temp")
+    field.value = parseInt(field.value, 10) + 1
+    field.dispatchEvent(change)
 
-    field = $("#set_temp_temp")
-    if parseInt(field.val()) > parseInt(field.attr("min"))
-      field.val(parseInt(field.val()) - 1)
+  $(document).on "click touchend", ".decrease-temp:not([disabled=disabled])",  (e) ->
+    e.preventDefault()
+    field = document.getElementById("set_temp_temp")
+    field.value = parseInt(field.value, 10) - 1
+    field.dispatchEvent(change)

app/assets/stylesheets/application.css

@@ -10,7 +10,6 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
- *= require font-awesome
  *= require_tree .
  *= require_self
  */

app/assets/stylesheets/base.css

@@ -12,11 +12,11 @@ body {
   background-color: #373f48;
 }
 
-body.heating {
+.heating {
   background-color: #eb6d00;
 }
 
-body.cooling {
+.cooling {
   background-color: #0055ff;
 }
 
@@ -43,12 +43,21 @@ input[type=number] {
 .temp-action-group {
   text-align: center;
 }
-.temp-action, .temp-action:visited {
+.temp-action {
   color: #E7E6E6;
+  background: transparent;
   text-align: center;
   font-size: 4rem;
+  padding: 0;
+  border: none;
   margin: 10px;
 }
+.temp-action:disabled {
+  opacity: 0.25;
+}
+.temp-action img {
+  width: 64px;
+}
 input[type=submit] {
   display: block;
   width: 80%;

app/views/dashboard/index.html.erb

@@ -20,8 +20,12 @@
   <%= f.label :temp, "Set Temp" %>
   <%= f.number_field :temp, min: 50, max: 85, size: 2, pattern: "\\d*" %>
   <div class="temp-action-group">
-    <%= link_to fa_icon("chevron-down"), "#", class: "temp-action decrease-temp" %>
-    <%= link_to fa_icon("chevron-up"), "#", class: "temp-action increase-temp" %>
+    <button class="temp-action decrease-temp" type="button">
+      <%= image_tag "chevron-down.svg", alt: "Decrease" %>
+    </button>
+    <button class="temp-action increase-temp" type="button">
+      <%= image_tag "chevron-up.svg", alt: "Increase" %>
+    </button>
   </div>
   <%= f.submit "Set" %>
 <% end %>