showoff 0.17.1 → 0.17.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b65ae2cdb55992dc61f317faf924fd93cdefd594
-  data.tar.gz: f4331abee28540e37e8362c52ffe87c705405f07
+  metadata.gz: e79f2890ed22c967bf20c13e7086bdd7e6fa441c
+  data.tar.gz: 5c328c3d8979191809a404b984202d2fca92a8cd
 SHA512:
-  metadata.gz: f74cea3ee9a73a8b9240bcd7d11d909766ce6ecb38ec8fc57cea3ff1a57f803b5475b2afa0121685230154ae51c64751cb3d80972eddd71fd2d901ba58640efc
-  data.tar.gz: 938c693644cd33d34b9945131cc6c607d32fa6f162f03f4ce4a166e9eb37532fcf0d6074b9da0e254124ed5ee1a9351d3697312fd667118077eab74a652ad0be
+  metadata.gz: 281b88028b291de836db367604aaadead708eb79a34f060e1231defc51b188f5dc0cf01f1ceb8ca17e1662528d6f0d168929410f75a880a7c1ca5b24f95c0071
+  data.tar.gz: 2408b4d8909d3f84df131a7af5069cbc5029d8f768b67d6508d83899ccafec0d549e863554ef4dbfafe921be89395e2013fe505ee1bd77eb900bba1888d66cbe

data/README.md

@@ -64,9 +64,10 @@ you'll need to install both Ruby and the Ruby DevKit for compiling native extens
 
 ## Documentation
 
-Please see the [documentation](./documentation) section for further information.
+Please see the user manual on the [Showoff homepage](http://puppetlabs.github.io/showoff)
+for further information.
 
-You can generate a nice & pretty local copy of the documentation by running
+You can also generate a nice & pretty local copy of the user manual by running
 `rake doc` in your clone of the repository. The generated HTML will be saved in
 the `docs` directory.
 

data/lib/showoff.rb

@@ -185,6 +185,7 @@ class ShowOff < Sinatra::Application
     @@cookie    = nil      # presenter cookie. Identifies the presenter for control messages
     @@current   = Hash.new # The current slide that the presenter is viewing
     @@cache     = nil      # Cache slide content for subsequent hits
+    @@activity  = []       # keep track of completion for activity slides
 
     if @interactive
       # flush stats to disk periodically
@@ -415,6 +416,12 @@ class ShowOff < Sinatra::Application
 
         content += sl
         content += "</div>\n"
+        if content_classes.include? 'activity'
+          content += '<span class="activityToggle">'
+          content += "  <label for=\"activity-#{ref}\">Activity complete</label>"
+          content += "  <input type=\"checkbox\" class=\"activity\" name=\"activity-#{ref}\" id=\"activity-#{ref}\">"
+          content += '</span>'
+        end
         content += "<canvas class=\"annotations\"></canvas>\n"
         content += "</div>\n"
 
@@ -465,6 +472,9 @@ class ShowOff < Sinatra::Application
         result.gsub!(match[0], "<pre class=\"highlight\"><code class=\"#{css}\">#{file}</code></pre>")
       end
 
+      result.gsub!(/\[(fa-.*)\]/, '<i class="fa \1"></i>')
+
+
       result
     end
 
@@ -1111,6 +1121,7 @@ class ShowOff < Sinatra::Application
       @favicon   = settings.showoff_config['favicon']
       @issues    = settings.showoff_config['issues']
       @edit      = settings.showoff_config['edit'] if @review
+      @feedback  = settings.showoff_config['feedback']
       @@cookie ||= guid()
       response.set_cookie('presenter', @@cookie)
       erb :presenter
@@ -1429,10 +1440,10 @@ class ShowOff < Sinatra::Application
         classes = code.attr('class').split rescue []
         lang    = classes.shift =~ /language-(\S*)/ ? $1 : nil
 
-        [lang, code.text, classes]
+        [lang, code.text.gsub(/^\* /, ' '), classes]
       end
     else
-      doc.css(classes)[index.to_i].text rescue 'Invalid code block index'
+      doc.css(classes)[index.to_i].text.gsub(/^\* /, ' ') rescue 'Invalid code block index'
     end
   end
 
@@ -1577,6 +1588,10 @@ class ShowOff < Sinatra::Application
     # Docs suggest that old versions of Sinatra might provide an array here, so just make sure.
     filename = path.class == Array ? path.first : path
     @logger.debug "Editing #{filename}"
+
+    # When a relative path is used, it's sometimes fully expanded. But then when
+    # it's passed via URL, the initial slash is lost. Here we try to get it back.
+    filename = "/#{filename}" unless File.exist? filename
     return unless File.exist? filename
 
     if request.host != 'localhost'
@@ -1682,9 +1697,26 @@ class ShowOff < Sinatra::Application
                 @logger.debug "Recorded current slide #{slide} for #{remote}"
               end
 
-
             when 'position'
-              ws.send( { 'current' => @@current[:number] }.to_json ) unless @@cookie.nil?
+              ws.send( { 'message' => 'current', 'current' => @@current[:number] }.to_json ) unless @@cookie.nil?
+
+            when 'activity'
+              next if valid_presenter_cookie?
+              remote = request.cookies['client_id']
+              slide  = control['slide']
+              status = control['status']
+              @@activity[slide] ||= {}
+              @@activity[slide][remote] = status
+
+              current  = @@current[:number]
+              activity = @@activity[current] rescue nil
+
+              @logger.debug "Current activity status: #{activity.inspect}"
+              if activity
+                # select all activity on this slide where completion status is false
+                count = activity.select {|viewer, status| status == false }.size
+                EM.next_tick { settings.presenters.each{|s| s.send({ 'message' => 'activity', 'count' => count }.to_json) } }
+              end
 
             when 'pace', 'question', 'cancel'
               # just forward to the presenter(s) along with a debounce in case a presenter is registered twice

data/lib/showoff/version.rb

@@ -1,3 +1,3 @@
 # No namespace here since ShowOff is a class and I'd have to inherit from
 # Sinatra::Application (which we don't want to load here)
-SHOWOFF_VERSION = '0.17.1'
+SHOWOFF_VERSION = '0.17.2'

data/lib/showoff_utils.rb

@@ -470,14 +470,15 @@ class ShowOffUtils
     end.flatten.compact.each do |filename|
       # We do this in two passes simply because most of it was already done
       # and I don't want to waste time on legacy functionality.
-      path = File.dirname(filename)
-      sections[path] ||= []
-
       if File.directory? filename
+        path = filename
+        sections[path] ||= []
         Dir.glob("#{filename}/**/*.md").sort.each do |slidefile|
-          sections[path]  << slidefile
+          sections[path] << slidefile
         end
       else
+        path = File.dirname(filename)
+        sections[path] ||= []
         sections[path]  << filename
       end
     end

data/public/css/presenter.css

@@ -83,7 +83,7 @@
     border: none;
     border-radius: 0;
     line-height: 3em;
-    margin-top: -1px; /* hell if I know why, but probably somewhere in jquery-ui */
+    vertical-align: inherit; /* overrides a jquery-ui style */
   }
 
   #links a.enabled,
@@ -208,30 +208,62 @@
       height: 40px;
       min-height: 40px;
       position: relative;
-      background: transparent url(pace.png) no-repeat center bottom;
-    }
-    #paceFast,
-    #paceSlow {
-      display: none;
-    }
-    #paceFast {
-      float: left;
-      margin-left: 1em;
-    }
-    #paceSlow {
-      float: right;
-      margin-right: 1em;
+      border-bottom: 1px solid #ccc;
     }
-    #paceMarker {
-      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);
+      #feedbackPace .gradient {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 20px;
+        background-color:#ff0000;
+        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ff0000, endColorstr=#eeff00);
+        background-image:-moz-linear-gradient(left, #ff0000 10%, #eeff00 30%,#00ff00 50%,#eeff00 70%,#ff0000 90%);
+        background-image:linear-gradient(left, #ff0000 10%, #eeff00 30%,#00ff00 50%,#eeff00 70%,#ff0000 90%);
+        background-image:-webkit-linear-gradient(left, #ff0000 10%, #eeff00 30%,#00ff00 50%,#eeff00 70%,#ff0000 90%);
+        background-image:-o-linear-gradient(left, #ff0000 10%, #eeff00 30%,#00ff00 50%,#eeff00 70%,#ff0000 90%);
+        background-image:-ms-linear-gradient(left, #ff0000 10%, #eeff00 30%,#00ff00 50%,#eeff00 70%,#ff0000 90%);
+        background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(10%,#ff0000), color-stop(30%,#eeff00),color-stop(50%,#00ff00),color-stop(70%,#eeff00),color-stop(90%,#ff0000));
+      }
+      #feedbackPace .obscure {
+        position: absolute;
+        background-color: #f0f0f0;
+        bottom: 0;
+        height: 20px;
+        transition: width 0.25s;
+      }
+      #feedbackPace .obscure.left {
+        left: 0;
+        width: 50%;
+        border-right: 1px solid black;
+      }
+      #feedbackPace .obscure.right {
+        right: 0;
+        width: 50%;
+        border-left: 1px solid black;
+      }
 
-    }
+      #paceFast,
+      #paceSlow {
+        display: none;
+      }
+      #paceFast {
+        float: left;
+        margin-left: 1em;
+      }
+      #paceSlow {
+        float: right;
+        margin-right: 1em;
+      }
+      #paceMarker {
+        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);
+        transition: left 0.25s;
+      }
 
     .submenu {
       flex-grow: 10;
@@ -574,6 +606,7 @@
     width: 90%;
   }
 
+  .slide.activity .count,
   #notes .count {
     display: inline-block;
     background-color: #2e2e2e;
@@ -604,6 +637,13 @@
     display: none;
   }
 
+.slide.activity .count {
+  position: absolute;
+  bottom: .25em;
+  right: .5em;
+  padding: 0 0.25em;
+}
+
 
 a.controls {
   text-decoration: none;

data/public/css/showoff.css

@@ -382,6 +382,10 @@ img#disconnected {
   margin-right: 8px;
 }
 
+.sideMenu hr {
+  clear: both;
+}
+
 .buttonWrapper {
   line-height: 48px;
   padding: 0 16px;
@@ -577,6 +581,12 @@ pre.highlight code.language-powershellconsole.nochrome {
   border-radius: 4px;
 }
 
+pre.highlight code .highlightedLine {
+  background-color: #f5e2e2;
+  display: inline-block;
+  width: 100%;
+}
+
 /* to avoid breaking changes */
 .highlight .language-shell {
   display: block;
@@ -747,14 +757,6 @@ form .element {
 /*****************
  ***   modals   ***
  *****************/
-#help-modal {
-  font-size: .9em;
-}
-
-#help-modal .ui-dialog .ui-dialog-title {
-  font-size: 1em;
-}
-
 .ui-dialog.ui-widget-content {
   border: none;
   box-shadow:0 0 25px rgba(0,0,0,0.35);
@@ -812,6 +814,15 @@ form .element {
   display: none;
 }
 
+#help-modal {
+  display: none;
+  font-size: .9em;
+}
+
+#help-modal .ui-dialog .ui-dialog-title {
+  font-size: 1em;
+}
+
 #help div {
   padding: 6px 0;
 }
@@ -1041,6 +1052,7 @@ form .element {
 
 .callout {
   padding: 1em;
+  position: relative;
   line-height: 1.2em;
   border: 1px solid #222;
   border-radius: 4px;
@@ -1054,7 +1066,18 @@ form .element {
     font-size: 2em;
     text-decoration: inherit;
     position: absolute;
-    left: 1em;
+    left: 0.3em;
+  }
+  .callout:after {
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1.5em;
+    text-decoration: inherit;
+    position: absolute;
+    left: 0.5em;
+    top: 0.65em;
+    color: #fff;
   }
 
   .callout.info,
@@ -1064,7 +1087,8 @@ form .element {
   .callout.stop,
   .callout.thumbsup,
   .callout.conversation,
-  .callout.glossary {
+  .callout.glossary,
+  .callout.terminal {
     padding-left: 3em;
   }
 
@@ -1077,6 +1101,10 @@ form .element {
   .callout.conversation:before { content: "\f0e5"; } /* fa-comment */
   .callout.glossary:before     { content: "\f02d"; } /* fa-book */
 
+  .callout.terminal:before     { content: "\f0c8"; } /* fa-square */
+  .callout.terminal:after      { content: "\f120"; } /* fa-terminal */
+
+
 /* callouts used on error pages */
 .error .callout {
   padding-left: 4em;
@@ -1117,6 +1145,14 @@ a.term:after {
 ***  glossary       ***
 **********************/
 
+/**************************
+*** activity indicators ***
+***************************/
+.slide.activity .activityToggle {
+  position: absolute;
+  bottom: 1em;
+  right: 1em;
+}
 
 /* Render hidden headlines so that when we print with wkhtmltopdf, we can use section
    titles for page headers.  it would make sense to put this in the print section, but

data/public/js/presenter.js

@@ -30,7 +30,10 @@ $(document).ready(function(){
   $("#settings").click(      function() { $("#settings-modal").dialog("open"); });
   $("#slideSource a").click( function() { openEditor() });
   $("#notesToggle").click(   function() { toggleNotes() });
-  $("#clearCookies").click(  function() { clearCookies() });
+  $("#clearCookies").click(  function() {
+    clearCookies();
+    location.reload(false);
+  });
   $("#nextWinCancel").click( function() { chooseLayout('default') });
   $("#openNextWindow").click(function() { openNext() });
 
@@ -514,6 +517,15 @@ function updatePace() {
   var position = Math.max(Math.min(sum, 90), 10); // between 10 and 90
   $("#paceMarker").css({ left: position+"%" });
 
+  if (position > 50) {
+    $("#feedbackPace .obscure.left").css({ width: "50%" });
+    $("#feedbackPace .obscure.right").css({ width: (100-position)+"%" });
+  }
+  else {
+    $("#feedbackPace .obscure.right").css({ width: "50%" });
+    $("#feedbackPace .obscure.left").css({ width: position+"%" });
+  }
+
   if(position > 75) {
     $("#paceFast").show();
   } else {
@@ -526,6 +538,10 @@ function updatePace() {
   }
 }
 
+function updateActivityCompletion(count) {
+  currentSlide.children('.count').text(count);
+}
+
 // extend this function to add presenter bits
 var origGotoSlide = gotoSlide;
 gotoSlide = function (slideNum)
@@ -663,6 +679,10 @@ function postSlide() {
     $("#notes div.form.wrapper").each(function(e) {
       renderFormInterval = renderFormWatcher($(this));
     });
+
+    if(currentSlide.hasClass('activity')) {
+      currentSlide.children('.activityToggle').replaceWith('<span class="count">0</span>');
+    }
 	}
 }
 

data/public/js/showoff.js

@@ -19,6 +19,7 @@ var lastMessageGuid = 0
 var query;
 var section = 'handouts'; // default to showing handout notes for display view
 var slideStartTime = new Date().getTime()
+var activityIncomplete = false; // slides won't advance when this is on
 
 var loadSlidesBool
 var loadSlidesPrefix
@@ -119,9 +120,8 @@ function setupPreso(load_slides, prefix) {
   });
 
   // Open up our control socket
-  if(mode.track) {
-    connectControlChannel();
-  }
+  connectControlChannel();
+
 }
 
 function loadSlides(load_slides, prefix, reload, hard) {
@@ -183,6 +183,16 @@ function initializePresentation(prefix) {
   $('pre.highlight code').each(function(i, block) {
     try {
       hljs.highlightBlock(block);
+
+      // Highlight requested lines
+      block.innerHTML = block.innerHTML.split(/\r?\n/).map(function (line, i) {
+        if (line.indexOf('* ') === 0) {
+          return line.replace(/^\*(.*)$/, '<div class="highlightedLine">$1</div>');
+        }
+
+        return line;
+      }).join('\n');
+
     } catch(e) {
       console.log('Syntax highlighting failed on ' + $(this).closest('div.slide').attr('id'));
       console.log('Syntax highlighting failed for ' + $(this).attr('class'));
@@ -218,6 +228,13 @@ function initializePresentation(prefix) {
     }
   });
 
+  // The display window doesn't need the extra chrome
+  if(typeof(presenterView) != 'undefined') {
+    $('.slide.activity').removeClass('activity').children('.activityToggle').remove();
+  }
+  $('.slide.activity .activityToggle input.activity').checkboxradio();
+  $('.slide.activity .activityToggle input.activity').change(toggleComplete);
+
   // initialize mermaid, but don't render yet since the slide sizes are indeterminate
   mermaid.initialize({startOnLoad:false});
 
@@ -240,15 +257,15 @@ function zoom(presenter) {
   }
 
   // Calculate margins to center the thing *before* scaling
-  // On mobile, we'll top align, everywhere else vertical center it.
-  if(mobile()) {
+  // Vertically center on presenter, top align everywhere else
+  if(presenter) {
+    var hMargin = (hBody - hSlide) /2;
+  }
+  else {
     // (center of slide to top) - (half of the zoomed slide)
     //var hMargin = (hSlide/2 * newZoom) - (hSlide / 2);
     var hMargin = (hSlide * newZoom - hSlide) / 2;
   }
-  else {
-    var hMargin = (hBody - hSlide) /2;
-  }
   var wMargin = (wBody - wSlide) /2;
 
   preso.css("margin", hMargin + "px " + wMargin + "px");
@@ -642,6 +659,21 @@ function showSlide(back_step, updatepv) {
   // copy notes to the notes field for mobile.
   postSlide();
 
+  // is this an activity slide that has not yet been marked complete?
+  if (currentSlide.hasClass('activity')) {
+     if (currentSlide.find('input.activity').is(":checked")) {
+      activityIncomplete = false;
+      sendActivityStatus(true);
+    }
+    else {
+      activityIncomplete = true;
+      sendActivityStatus(false);
+    }
+  }
+  else {
+    activityIncomplete = false;
+  }
+
   // make all bigly text tremendous
   currentSlide.children('.content.bigtext').bigtext();
 
@@ -730,6 +762,10 @@ function submitForm(form) {
       var submit = form.find("input[type=submit]")
       submit.attr("disabled", "disabled");
       submit.removeClass("dirty");
+
+      // stop blocking follow mode
+      activityIncomplete = false;
+      getPosition();
     });
   }
 }
@@ -758,7 +794,10 @@ function validateForm(form) {
 function enableForm(element) {
   var submit = element.closest('form').find(':submit')
   submit.removeAttr("disabled");
-  submit.addClass("dirty")
+  submit.addClass("dirty");
+
+  // once a form is started, stop following the presenter
+  activityIncomplete = true;
 }
 
 function renderFormWatcher(element) {
@@ -996,6 +1035,9 @@ function parseMessage(data) {
         removeQuestion(command["questionID"]);
         break;
 
+      case 'activity':
+        updateActivityCompletion(command['count']);
+
       case 'annotation':
         invokeAnnotation(command["type"], command["x"], command["y"]);
         break;
@@ -1063,6 +1105,12 @@ function sendAnnotationConfig(setting, value) {
   }
 }
 
+function sendActivityStatus(status) {
+  if (ws.readyState == WebSocket.OPEN) {
+    ws.send(JSON.stringify({ message: 'activity', slide: slidenum, status: status }));
+  }
+}
+
 function invokeAnnotation(type, x, y) {
   switch (type) {
     case 'erase':
@@ -1114,7 +1162,7 @@ function editSlide() {
 }
 
 function follow(slide, newIncrement) {
-  if (mode.follow) {
+  if (mode.follow && ! activityIncomplete) {
     var lastSlide = slidenum;
     console.log("New slide: " + slide);
     gotoSlide(slide);
@@ -1360,6 +1408,20 @@ function getKeyName (event) {
   return keyName;
 }
 
+function toggleComplete() {
+  if($(this).is(':checked')) {
+    activityIncomplete = false;
+    sendActivityStatus(true);
+    if(mode.follow) {
+      getPosition();
+    }
+  }
+  else {
+    activityIncomplete = true;
+    sendActivityStatus(false);
+  }
+}
+
 function toggleDebug () {
   debugMode = !debugMode;
   doDebugStuff();

data/views/presenter.erb

@@ -64,18 +64,29 @@
         </span>
         <div id="timerDisplay"></div>
       </div>
+
+      <% if @feedback then %>
       <div id="feedbackPace">
+        <div class="gradient"> </div>
+        <div class="left obscure"> </div>
+        <div class="right obscure"> </div>
         <span id="paceSlow">Speed Up!</span>
         <span id="paceFast">Slow Down!</span>
         <img id="paceMarker" src="<%= @asset_path %>/css/paceMarker.png" />
       </div>
+      <% end %>
+
       <div id="navigation" class="submenu"></div>
       <div id="navigationHover"></div>
+
+      <% if @feedback then %>
       <div id="questions">
         <h3>Audience Questions</h3>
         <ol id="unanswered"></ol>
         <ol id="answered"></ol>
       </div>
+      <% end %>
+
     </div>
 
     <div id="presenter">

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: showoff
 version: !ruby/object:Gem::Version
-  version: 0.17.1
+  version: 0.17.2
 platform: ruby
 authors:
 - Scott Chacon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-03-02 00:00:00.000000000 Z
+date: 2017-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -165,6 +165,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: commonmarker
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "<="
+      - !ruby/object:Gem::Version
+        version: 0.14.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "<="
+      - !ruby/object:Gem::Version
+        version: 0.14.4
 - !ruby/object:Gem::Dependency
   name: mg
   requirement: !ruby/object:Gem::Requirement
@@ -212,7 +226,6 @@ files:
 - views/index.erb
 - views/onepage.erb
 - views/presenter.erb
-- views/stats copy.erb
 - views/stats.erb
 - public/css/TimeCircles-89ac5ae.css
 - public/css/disconnected-large.png
@@ -328,10 +341,15 @@ files:
 - public/css/highlight/vs.css
 - public/css/highlight/xcode.css
 - public/css/highlight/zenburn.css
+- public/css/images/ui-icons_444444_256x240.png
+- public/css/images/ui-icons_555555_256x240.png
+- public/css/images/ui-icons_777620_256x240.png
+- public/css/images/ui-icons_777777_256x240.png
+- public/css/images/ui-icons_cc0000_256x240.png
+- public/css/images/ui-icons_ffffff_256x240.png
 - public/css/jquery-ui-1.12.1.css
 - public/css/mermaid-6.0.0.css
 - public/css/onepage.css
-- public/css/pace.png
 - public/css/paceMarker.png
 - public/css/presenter.css
 - public/css/showoff.css

data/views/stats copy.erb

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <%= erb :header_mini %>
-
-    <script type="text/javascript">
-        $(document).ready(function(){ setupStats(); });
-    </script>
-</head>
-
-<body id="stats">
-  <div id="wrapper">
-    <h1>Viewing Statistics</h1>
-
-    <div id="least">
-      <h3>Least viewed slides</h3>
-      <% if @least.size > 0 %>
-        <% max = @least.sort_by {|slide, time| -time}[0][1].to_f %>
-        <% timestr =  (max > 3599) ?  '%H:%M:%S' : '%M:%S' %>
-        <% @least.each do |slide, time| %>
-          <div class="row">
-            <span class="label"><%= slide %></span>
-            <div class="bar" style="width: <%= (time/max)*100 %>%;"> </div>
-            <div class="time"><%= Time.at(time).gmtime.strftime(timestr) %></div>
-          </div>
-        <% end %>
-      <% end %>
-    </div>
-
-    <div id="most">
-      <h3>Most viewed slides</h3>
-      <% if @least.size > 0 %>
-        <% max = @most[0][1].to_f %>
-        <% timestr =  (max > 3599) ?  '%H:%M:%S' : '%M:%S' %>
-        <% @most.each do |slide, time| %>
-          <div class="row">
-            <span class="label"><%= slide %></span>
-            <div class="bar" style="width: <%= (time/max)*100 %>%;"> </div>
-            <div class="time"><%= Time.at(time).gmtime.strftime(timestr) %></div>
-          </div>
-        <% end %>
-      <% end %>
-    </div>
-
-    <div id="all">
-      <h3>All slides</h3>
-      <%# We reuse the max value calculated from the above step. %>
-      <% @all.sort.map do |slide, time| %>
-          <div class="row">
-          <span class="label"><%= slide %></span>
-          <div class="bar" style="width: <%= (time/max)*100 %>%;"> </div>
-          <div class="time"><%= Time.at(time).gmtime.strftime(timestr) %></div>
-          <% if @counter %>
-            <div class="detail">
-              <% @counter[slide].each do |host, count| %>
-                <div class="row">
-                  <span class="label"><%= host %>:</span>
-                  <div class="bar" style="width: <%= (count/max)*100 %>%;"> </div>
-                  <div class="time"><%= Time.at(count).gmtime.strftime(timestr) %></div>
-                </div>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-      <% end %>
-    </div>
-  </div>
-</body>
-</html>