From 8d5e5d79f93d33ce8408c4b2a9638e45277e42a7 Mon Sep 17 00:00:00 2001
From: David Vandorpe <david.vandorpe@ugent.be>
Date: Mon, 29 Aug 2016 15:49:27 +0200
Subject: [PATCH] Cammie arrows

---
 .../assets/stylesheets/includes/cammie.scss   | 10 ++++++++
 content/cammie.erb                            | 24 +++++++++----------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss
index 18dbd53..f62857d 100644
--- a/content/assets/stylesheets/includes/cammie.scss
+++ b/content/assets/stylesheets/includes/cammie.scss
@@ -45,12 +45,21 @@
 
       .ctrl {
 
+        // Center arrows
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
         background-color: $cammie-controls-color;
         color: white;
         &:hover {
           background-color: $zeus_orange;
           cursor: pointer;
         }
+
+        &.diag i {
+          transform: rotate(45deg);
+        }
       }
 
       .row {
@@ -61,6 +70,7 @@
         &.top-row, &.middle-row, &.bottom-row {
           flex-basis: 0;
         }
+
         &.top-row, &.bottom-row {
           flex-grow: 1;
         }
diff --git a/content/cammie.erb b/content/cammie.erb
index 57caef8..c6b04de 100644
--- a/content/cammie.erb
+++ b/content/cammie.erb
@@ -31,35 +31,35 @@ title: Cammie
     <img id="cammie-feed" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
     <div id="cammie-ctrls">
       <div class="top-row row">
-        <div class="column ctrl left" data-x="-10" data-y="10">
-          diag up left
+        <div class="column ctrl diag left" data-x="-10" data-y="10">
+          <%= fa 'chevron-circle-left' %>
         </div>
         <div class="column ctrl center" data-x="0" data-y="10">
-          up
+          <%= fa 'chevron-circle-up' %>
         </div>
-        <div class="column ctrl right" data-x="10" data-y="10">
-          diag up right
+        <div class="column ctrl diag right" data-x="10" data-y="10">
+          <%= fa 'chevron-circle-up' %>
         </div>
       </div>
 
       <div class="row middle-row">
         <div class="column ctrl left" data-x="-10" data-y="0">
-          left
+          <%= fa 'chevron-circle-left' %>
         </div>
         <div class="column center">&nbsp;</div>
         <div class="column ctrl right" data-x="10" data-y="0">
-          right
+          <%= fa 'chevron-circle-right' %>
         </div>
       </div>
       <div class="row bottom-row">
-        <div class="column ctrl left" data-x="-10" data-y="-10">
-          diag down left
+        <div class="column ctrl diag left" data-x="-10" data-y="-10">
+          <%= fa 'chevron-circle-down' %>
         </div>
         <div class="column ctrl center" data-x="0" data-y="-10">
-          down
+          <%= fa 'chevron-circle-down' %>
         </div>
-        <div class="column ctrl right" data-x="10" data-y="-10">
-          diag down right
+        <div class="column ctrl diag right" data-x="10" data-y="-10">
+          <%= fa 'chevron-circle-right' %>
         </div>
       </div>
     </div>