Chapter 14

public/css/app.css

@@ -0,0 +1,127 @@
+body {
+    font-family: spartan;
+    color: #444;
+}
+
+.jumbotron-img {
+    background: rgb(237,116,88);
+    background: linear-gradient(302deg, rgba(237,116,88,1) 16%, rgba(51,61,81,1) 97%);
+    color: #fff;
+}
+
+.q-container {
+    border-top-right-radius: .25rem;
+    border-top-left-radius: .25rem;
+    background-color: #efefee;
+}
+
+.q-container-show {
+    border-top-right-radius: .25rem;
+    border-top-left-radius: .25rem;
+    background-color: #ED7458 ;
+}
+
+.q-container img, .q-container-show img {
+    border: 2px solid #fff;
+    border-radius: 50%;
+}
+
+.q-display {
+    background: #fff;
+    border-radius: .25rem;
+}
+.q-title-show {
+    text-transform: uppercase;
+    font-size: 1.3rem;
+    color: #fff;
+}
+.q-title {
+    text-transform: uppercase;
+    color: #444;
+}
+
+.q-title:hover {
+    color: #2B2B2B;
+}
+
+.q-title h2 {
+    font-size: 1.3rem;
+}
+
+.q-display-response {
+    background: #333D51;
+    color: #fff;
+}
+
+.answer-link:hover .magic-wand {
+  transform: rotate(20deg);
+}
+
+.vote-arrows {
+    font-size: 1.5rem;
+}
+
+.vote-arrows span {
+    font-size: 1rem;
+}
+
+.vote-arrows a {
+    color: #444;
+}
+
+.vote-up:hover {
+    color: #3D9970;
+}
+.vote-down:hover {
+    color: #FF4136;
+}
+
+.btn-question { 
+  color: #FFFFFF; 
+  background-color: #ED7458; 
+  border-color: #D45B3F; 
+} 
+ 
+.btn-question:hover, 
+.btn-question:focus, 
+.btn-question:active, 
+.btn-question.active, 
+.open .dropdown-toggle.btn-question { 
+  color: #FFFFFF; 
+  background-color: #D45B3F; 
+  border-color: #D45B3F; 
+} 
+ 
+.btn-question:active, 
+.btn-question.active, 
+.open .dropdown-toggle.btn-question { 
+  background-image: none; 
+} 
+ 
+.btn-question.disabled, 
+.btn-question[disabled], 
+fieldset[disabled] .btn-question, 
+.btn-question.disabled:hover, 
+.btn-question[disabled]:hover, 
+fieldset[disabled] .btn-question:hover, 
+.btn-question.disabled:focus, 
+.btn-question[disabled]:focus, 
+fieldset[disabled] .btn-question:focus, 
+.btn-question.disabled:active, 
+.btn-question[disabled]:active, 
+fieldset[disabled] .btn-question:active, 
+.btn-question.disabled.active, 
+.btn-question[disabled].active, 
+fieldset[disabled] .btn-question.active { 
+  background-color: #ED7458; 
+  border-color: #D45B3F; 
+} 
+ 
+.btn-question .badge { 
+  color: #ED7458; 
+  background-color: #FFFFFF; 
+}
+
+footer {
+    background-color: #efefee;
+}

public/js/question_show.js

@@ -0,0 +1,16 @@
+/**
+ * Simple (ugly) code to handle the comment vote up/down
+ */
+ var $container = $('.js-vote-arrows');
+ $container.find('a').on('click', function(e) {
+     e.preventDefault();
+     var $link = $(e.currentTarget);
+ 
+     $.ajax({
+         url: '/comments/10/vote/'+$link.data('direction'),
+         method: 'POST'
+     }).then(function(response) {
+         $container.find('.js-vote-total').text(response.votes);
+     });
+ });
+