Replace pace marker image with css

dgolman · Jun 25, 2015 · a7f5246 · a7f5246
1 parent b425612
commit a7f5246
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/public/css/paceMarker.png b/public/css/paceMarker.png
diff --git a/public/css/presenter.css b/public/css/presenter.css
@@ -147,14 +147,19 @@ div.zoomed {
       margin-right: 1em;
     }
     #sidebar #feedbackPace #paceMarker {
+      height: 0;
+      width: 0;
+      border-right: 10px solid transparent;
+      border-left: 10px solid transparent;
+      border-top: 20px solid #333333;
+
       left: 50%;
       position: absolute;
       transform: translate(-50%, -50%);
       -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
     	-ms-transform: translate(-50%, 0);
     	-o-transform: translate(-50%, 0);
-
     }
 
     #slidemenu {

diff --git a/views/presenter.erb b/views/presenter.erb
@@ -60,11 +60,13 @@
         <span id="timerInfo"></span>
         <span id="minStop"><input type="button" id="stopTimer" value="Stop"></span>
       </div>
+      <br>
       <div id="feedbackPace">
         <span id="paceSlow">Speed Up!</span>
         <span id="paceFast">Slow Down!</span>
-        <img id="paceMarker" src="<%= @asset_path %>/css/paceMarker.png" />
+        <span id="paceMarker"></span>
       </div>
+      <br>
       <div id="navigation" class="menu"></div>
     </div>
     <div id="presenter">