Merge pull request #213 from BetaNYC/channel_hover

Improve usability of channel buttons
codeforamerica · Oct 13, 2015 · e70035e · e70035e
2 parents 5bcbc7e + 38ca7ff
commit e70035e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/app/assets/css/styles.css.erb b/app/assets/css/styles.css.erb
@@ -208,7 +208,7 @@ section h3 {
 #step1 .publisher .publisher-description {
   background-color: #8b969e;
   color: #fff;
-  border-radius: 15px;
+  border-radius: 10px;
   padding: 20px 15px;
   line-height: 1.2;
   position: absolute;
@@ -229,6 +229,10 @@ section h3 {
   opacity: 1;
 }
 
+#step1 .publisher.selected {
+  border: 5px solid #182A4A;
+}
+
 #step1 .publisher .city {
   text-transform: uppercase;
   border-bottom: 2px solid #BAC0C8;

diff --git a/app/assets/js/scripts.js b/app/assets/js/scripts.js
@@ -29,20 +29,22 @@ app.hookupSteps = function() {
     app.scrollToElement($('#step1'));
   });
 
-  $('.publisher:not(.soon)').on('click', function(event) {
-    $('.publisher')
-      .removeClass('selected')
-      .removeClass('is-active');
-
+  $('.publisher:not(.soon)').on('mouseover', function(event) {
+    $('.publisher').removeClass('is-active');
 
     var $publisher = $(event.currentTarget);
-    $publisher
-      .addClass('selected')
-      .addClass('is-active');
+    $publisher.addClass('is-active');
+  });
+
+  $('.publisher:not(.soon)').on('mouseout', function(event) {
+    $('.publisher').removeClass('is-active');
   });
 
   $('.publisher:not(.soon) .publisher-btn').on('click', function(event) {
+    $('.publisher').removeClass('selected');
+
     var $publisher = $(this).parents('.publisher:not(.soon)');
+    $publisher.addClass('selected');
 
     // Update the confirmation section with the name
     app.state.publisher_id = $publisher.data('publisher-id');