css: refactor timeslider

- simplify template
- use flexboxes
- simplify javascript code
- remove some obsolete code adjusting a background-position when using steppers buttons
- add comments and remove old code

src/static/css/timeslider.css

@@ -1,303 +1,123 @@
-@import url('./lists_and_indents.css');
+#editbar {
-
-p.pblort {
-  height: 100px;
-}
-.timeslider-bar #editbar {
-  display: block;
-}
-#editorcontainerbox {
-  overflow: auto;
-  top: 40px;
-  position: static;
-}
-#padpage {
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  width: 100%;
-}
-#padmain {
-  margin-top: 0px;
-  position: absolute;
-  top: 63px !important;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  zoom: 1;
-}
-#padeditor {
-  bottom: 0px;
-  left: 0;
-  position: absolute;
-  right: 0px;
-  top: 0;
-  zoom: 1;
-}
-#padcontent {
-  font-size: 12px;
   padding: 10px;
 }
+
+.timeslider-bar {
+  display: flex;
+  flex-direction: row;
+}
+
+/* TITLE */
+
+.timeslider-title-container {
+  flex: 1 auto;
+}
+.timeslider-subtitle {
+  margin-top: 10px;
+}
+
+/* RIGHT TOOLBAR (export, settings, back to pad) */
+
+.editbarright ul li {
+  margin-top: 0;
+}
+.editbarright ul li a {
+  background-color: transparent;
+  border: none;
+  margin-left: 10px
+}
+.editbarright .buttontext {
+  padding: 2px 5px;
+}
+
+
+/*  SLIDER  */
+
 #timeslider-wrapper {
-  left: 0;
+  display: flex;
+  flex-direction: row;
+  height: 40px;
+}
+
+#timeslider-slider {
+  flex: 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
   position: relative;
-  right: 0;
+}
+
+#timeslider-slider #timer {
+  position: absolute;
   top: 0;
-}
-#timeslider-left {
-  background-color:#fff;
-  height: 63px;
-  left: 0;
-  position: absolute;
-  width: 134px;
-}
-#timeslider-right {
-  background-color:#fff;
-  height: 63px;
-  position: absolute;
   right: 0;
-  top: 0;
-  width: 155px;
 }
-#timeslider {
+
-  height: 63px;
+#timeslider-slider #ui-slider-bar {
-  margin: 0 9px;
+  height: 10px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color:#fff;
-  /* bgcolor is reuqired so you can't see pad content behind it */
-}
-#timeslider #timeslider-slider {
-  height: 61px;
-  left: 0;
-  position: absolute;
-  top: 1px;
   width: 100%;
-}
+  background-color: #c2c2c2;
-#ui-slider-handle {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  background-color: #666;
-  cursor: pointer;
-  height: 61px;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 13px;
-}
-#ui-slider-bar {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  cursor: pointer;
-  height: 60px;
-  margin-left: 5px;
-  margin-right: 150px;
   position: relative;
-  top: 0px;
 }
 
-#playpause_button,
+#timeslider-slider #ui-slider-handle {
-#playpause_button_icon {
+  height: 40px;
-  height: 44px;
+  width: 10px;
+  z-index: 2;
   position: absolute;
-  width: 44px;
+  background-color: #3e3e3e;
-  text-align:center;
+  cursor: move;
-  vertical-align:middle;
-  background:none;
-}
-#playpause_button {
-  right: 77px;
-  top: 9px;
-  height:50px;
-  height:50px;
-  background: background-linear-gradient( #F7F7F7, #F1F1F1 80%) repeat scroll 0 0 transparent;
-  border-radius:24px;
-  cursor:hand;
-}
-#playpause_button_icon:before {
-  line-height:44px;
-  padding-left:2px;
-  font-family: fontawesome-etherpad;
-  content: "\e82c";
-  font-size:24px;
-  color:#666;
 }
 
-#playpause_button_icon {
+#timeslider-slider .star {
-  left: 0;
+  cursor: pointer;
-  top: 0;
-  border-radius:48px;
-  border: solid 1px #666;
-}
-.pause:before {
-  line-height:44px;
-  padding-left:2px;
-  font-family: fontawesome-etherpad;
-  content: "\e82e" !important;
-  font-size:24px;
-  color:#666;
-  padding-left:0 !important;
-}
-#leftstar,
-#rightstar,
-#leftstep,
-#rightstep {
-  background-color: white;
-  overflow: hidden;
   position: absolute;
+  top: -4px
 }
-
+#timeslider-slider .star:before{
-.stepper{
   font-family: fontawesome-etherpad;
-  border-radius:2px;
+  color: #da9700;
-  border: #666 solid 1px;
+  content: "\e836";
-/*  line-height:18px; */
-  text-align:center;
-  height:22px;
-  color:#666;
-}
-
-stepper:active{
-  color:#000;
-}
-
-#leftstep {
-  right: 38px;
-  top: 20px;
-  width: 25px;
-}
-#leftstep:before{
-  content: '\e821';
-  vertical-align:middle;
-}
-#rightstep:before{
-  content: "\e822";
-  vertical-align:middle;
-}
-
-#rightstep {
-  right: 12px;
-  top: 20px;
-  width: 25px;
-}
-.star:before{
-  font-family: fontawesome-etherpad;
-  content: "\e835";
   vertical-align:middle;
   font-size:16px;
-}
+  margin-left: -1px;
-#timeslider .star {
-  cursor: pointer;
-  height: 16px;
-  position: absolute;
-  top: 25px;
-  width: 15px;
-}
-#timeslider #timer {
-  background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent;
-  padding:2px;
-  border-radius:2px;
-  font-size: 11px;
-  left: 7px;
-  position: absolute;
-  text-align: center;
-  top: 9px;
-  width: 122px;
-}
-.topbarcenter,
-#docbar {
-  display: none
-}
-#padmain {
-  top: 0px !important
-}
-#editbar{
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.editbarright {
-  float: right;
-  text-align: right;
-  height: 30px !important;
-}
-.toolbar ul{
-  position:relative;
-  float:right;
-  height:30px;
-}
-#import_export, #settings{
-  top: 115px;
-  position: fixed;
-}
-#import_export .popup {
-  width: 183px;
-  border-top: none;
-  border-right: none;
-  border-radius: 0 0 0 6px;
-}
-#import_export {
-  width: 185px;
-}
-.timeslider-bar {
-  background: #f7f7f7;
-  background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);
-  background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%);
-  background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%);
-  background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%);
-  background: linear-gradient(#f7f7f7, #f1f1f1 80%);
-  overflow: hidden;
-  padding-top: 3px;
-  width: 100%;
-}
-.timeslider-bar #editbar {
-  border-bottom: none;
-  float: right;
-  width: auto;
-}
-.timeslider-bar h1 {
-  margin: 5px
-}
-.timeslider-bar p {
-  margin: 5px
-}
-#timeslider-top {
-  width: 100%;
-  position: fixed;
-  z-index: 1;
-}
-#authorsList .author {
-  padding-left: 0.4em;
-  padding-right: 0.4em;
-}
-#authorsList .author-anonymous {
-  padding-left: 0.6em;
-  padding-right: 0.6em;
-}
-#padeditor {
-  position: static
 }
 
-button{
+/* BUTTONS TO MOVE SLIDER (Play/Pause, Next, Prev)*/
-  margin:0;
-  padding:0;
-  cursor:pointer;
-}
 
-button::-moz-focus-inner {
+#slider-btn-container {
-  padding: 0;
+  margin-left: 15px;
-  border: 0
+  display: flex;
+  align-items: center;
 }
-
+#slider-btn-container button {
-button:focus{
   border: 1px solid #666;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  margin-left: 5px;
+}
+#slider-btn-container #playpause_button_icon {
+  width: 40px;
+  height: 40px;
+  font-size: 22px;
+  padding-left: 2px;
+}
+#slider-btn-container #playpause_button_icon.pause:before {
+  content: "\e82e";
+  padding-left: 0;
+  padding-right: 2px;
+}
+
+
+/* PAD CONTENT */
+
+#editorcontainerbox {
+  overflow-y: scroll;
+}
+
+#innerdocbody {
+  white-space: normal;
+  word-break: break-word;
 }

src/static/js/broadcast.js

@@ -125,7 +125,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro
         }
         else
         {
-          $("#padcontent").prepend(newDivs[i]);
+          $("#innerdocbody").prepend(newDivs[i]);
         }
         startDiv = newDivs[i];
       }
@@ -548,12 +548,12 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro
   {
     // set up the currentDivs and DOM
     padContents.currentDivs = [];
-    $("#padcontent").html("");
+    $("#innerdocbody").html("");
     for (var i = 0; i < padContents.currentLines.length; i++)
     {
       var div = padContents.lineToElement(padContents.currentLines[i], padContents.alines[i]);
       padContents.currentDivs.push(div);
-      $("#padcontent").append(div);
+      $("#innerdocbody").append(div);
     }
     debugLog(padContents.currentDivs);
   });

src/static/js/broadcast_slider.js

@@ -41,16 +41,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
     var savedRevisions = [];
     var sliderPlaying = false;
 
-    function disableSelection(element)
-    {
-      element.onselectstart = function()
-      {
-        return false;
-      };
-      element.unselectable = "on";
-      element.style.MozUserSelect = "none";
-      element.style.cursor = "default";
-    }
     var _callSliderCallbacks = function(newval)
       {
         sliderPos = newval;
@@ -76,9 +66,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
         newSavedRevision.addClass("star");
 
         newSavedRevision.attr('pos', position);
-        newSavedRevision.css('position', 'absolute');
         newSavedRevision.css('left', (position * ($("#ui-slider-bar").width() - 2) / (sliderLength * 1.0)) - 1);
-        $("#timeslider-slider").append(newSavedRevision);
+        $("#ui-slider-bar").append(newSavedRevision);
         newSavedRevision.mouseup(function(evt)
         {
           BroadcastSlider.setSliderPosition(position);
@@ -122,27 +111,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
 
       $("#revision_label").html(html10n.get("timeslider.version", { "version": newpos}));
 
-      if (newpos == 0)
+      $("#leftstar, #leftstep").toggleClass('disabled', newpos == 0);
-      {
+      $("#rightstar, #rightstep").toggleClass('disabled', newpos == sliderLength);
-        $("#leftstar").css('opacity', .5);
-        $("#leftstep").css('opacity', .5);
-      }
-      else
-      {
-        $("#leftstar").css('opacity', 1);
-        $("#leftstep").css('opacity', 1);
-      }
-
-      if (newpos == sliderLength)
-      {
-        $("#rightstar").css('opacity', .5);
-        $("#rightstep").css('opacity', .5);
-      }
-      else
-      {
-        $("#rightstar").css('opacity', 1);
-        $("#rightstep").css('opacity', 1);
-      }
 
       sliderPos = newpos;
       _callSliderCallbacks(newpos);
@@ -166,12 +136,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
       padmodals.showModal("disconnected");
     }
 
-    // Throttle seems like overkill here...  Not sure why we do it!
-    var fixPadHeight = _.throttle(function(){
-      var height = $('#timeslider-top').height();
-      $('#editorcontainerbox').css({marginTop: height});
-    }, 600);
-
     function setAuthors(authors)
     {
       var authorsList = $("#authorsList");
@@ -230,8 +194,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
       {
         authorsList.append(html10n.get("timeslider.toolbar.authorsList"));
       }
-
-      fixPadHeight();
     }
 
     BroadcastSlider = {
@@ -283,66 +245,42 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
     }
 
     // assign event handlers to html UI elements after page load
-    //$(window).load(function ()
     fireWhenAllScriptsAreLoaded.push(function()
     {
-      disableSelection($("#playpause_button")[0]);
-      disableSelection($("#timeslider")[0]);
-
       $(document).keyup(function(e)
       {
-        // If focus is on editbar, don't do anything
-        var target = $(':focus');
-        if($(target).parents(".toolbar").length === 1){
-            return;
-        }
-        var code = -1;
         if (!e) var e = window.event;
-        if (e.keyCode) code = e.keyCode;
+        var code = e.keyCode || e.which;
-        else if (e.which) code = e.which;
 
         if (code == 37)
         { // left
-          if (!e.shiftKey)
+          if (e.shiftKey) {
-          {
+            $('#leftstar').click();
-            setSliderPosition(getSliderPosition() - 1);
+          } else {
-          }
+            $('#leftstep').click();
-          else
-          {
-            var nextStar = 0; // default to first revision in document
-            for (var i = 0; i < savedRevisions.length; i++)
-            {
-              var pos = parseInt(savedRevisions[i].attr('pos'));
-              if (pos < getSliderPosition() && nextStar < pos) nextStar = pos;
-            }
-            setSliderPosition(nextStar);
           }
         }
         else if (code == 39)
-        {
+        { // right
-          if (!e.shiftKey)
+          if (e.shiftKey) {
-          {
+            $('#rightstar').click();
-            setSliderPosition(getSliderPosition() + 1);
+          } else {
-          }
+            $('#rightstep').click();
-          else
-          {
-            var nextStar = sliderLength; // default to last revision in document
-            for (var i = 0; i < savedRevisions.length; i++)
-            {
-              var pos = parseInt(savedRevisions[i].attr('pos'));
-              if (pos > getSliderPosition() && nextStar > pos) nextStar = pos;
-            }
-            setSliderPosition(nextStar);
           }
         }
-        else if (code == 32) playpause();
+        else if (code == 32)
+        { // spacebar
+          $("#playpause_button_icon").trigger('click');
+        }
       });
 
+      // Resize
       $(window).resize(function()
       {
         updateSliderElements();
       });
 
+      // Slider click
       $("#ui-slider-bar").mousedown(function(evt)
       {
         $("#ui-slider-handle").css('left', (evt.clientX - $("#ui-slider-bar").offset().left));
@@ -386,57 +324,22 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
       })
 
       // play/pause toggling
-      $("#playpause_button").mousedown(function(evt)
+      $("#playpause_button_icon").click(function(evt)
       {
-        var self = this;
+        BroadcastSlider.playpause();
-
-        // $(self).css('background-image', 'url(/static/img/crushed_button_depressed.png)');
-        $(self).mouseup(function(evt2)
-        {
-          // $(self).css('background-image', 'url(/static/img/crushed_button_undepressed.png)');
-          $(self).unbind('mouseup');
-          BroadcastSlider.playpause();
-        });
-        $(document).mouseup(function(evt2)
-        {
-          // $(self).css('background-image', 'url(/static/img/crushed_button_undepressed.png)');
-          $(document).unbind('mouseup');
-        });
       });
 
       // next/prev saved revision and changeset
-      $('.stepper').mousedown(function(evt)
+      $('.stepper').click(function(evt)
       {
-        var self = this;
+        switch ($(this).attr("id")) {
-        var origcss = $(self).css('background-position');
+          case "leftstep":
-        if (!origcss)
-        {
-          origcss = $(self).css('background-position-x') + " " + $(self).css('background-position-y');
-        }
-        var origpos = parseInt(origcss.split(" ")[1]);
-        var newpos = (origpos - 43);
-        if (newpos < 0) newpos += 87;
-
-        var newcss = (origcss.split(" ")[0] + " " + newpos + "px");
-        if ($(self).css('opacity') != 1.0) newcss = origcss;
-
-        $(self).css('background-position', newcss)
-
-        $(self).mouseup(function(evt2)
-        {
-          $(self).css('background-position', origcss);
-          $(self).unbind('mouseup');
-          $(document).unbind('mouseup');
-          if ($(self).attr("id") == ("leftstep"))
-          {
             setSliderPosition(getSliderPosition() - 1);
-          }
+            break;
-          else if ($(self).attr("id") == ("rightstep"))
+          case "rightstep":
-          {
             setSliderPosition(getSliderPosition() + 1);
-          }
+            break;
-          else if ($(self).attr("id") == ("leftstar"))
+          case "leftstar":
-          {
             var nextStar = 0; // default to first revision in document
             for (var i = 0; i < savedRevisions.length; i++)
             {
@@ -444,9 +347,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
               if (pos < getSliderPosition() && nextStar < pos) nextStar = pos;
             }
             setSliderPosition(nextStar);
-          }
+            break;
-          else if ($(self).attr("id") == ("rightstar"))
+          case "rightstar":
-          {
             var nextStar = sliderLength; // default to last revision in document
             for (var i = 0; i < savedRevisions.length; i++)
             {
@@ -454,19 +356,13 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
               if (pos > getSliderPosition() && nextStar > pos) nextStar = pos;
             }
             setSliderPosition(nextStar);
-          }
+            break;
-        });
+        }
-        $(document).mouseup(function(evt2)
-        {
-          $(self).css('background-position', origcss);
-          $(self).unbind('mouseup');
-          $(document).unbind('mouseup');
-        });
       })
 
       if (clientVars)
       {
-        $("#timeslider").show();
+        $("#timeslider-wrapper").show();
 
         var startPos = clientVars.collab_client_vars.rev;
         if(window.location.hash.length > 1)

src/static/js/pad_editbar.js

@@ -298,7 +298,7 @@ var padeditbar = (function()
           // Timeslider probably..
           // Shift focus away from any drop downs
           $(':focus').blur(); // required to do not try to remove!
-          $('#padmain').focus(); // Focus back onto the pad
+          $('#editorcontainerbox').focus(); // Focus back onto the pad
         }else{
           // Shift focus away from any drop downs
           $(':focus').blur(); // required to do not try to remove!

src/static/js/timeslider.js

@@ -190,7 +190,7 @@ function handleClientVars(message)
 }
 
 function setFont(font){
-  $('#padcontent').css("font-family", font);
+  $('#innerdocbody').css("font-family", font);
 }
 
 exports.baseURL = '';

src/templates/pad.html

@@ -86,6 +86,7 @@
       <!----------------------------->
       <!--- PAD EDITOR (in iframe) -->
       <!----------------------------->
+
       <div id="editorcontainer" class="editorcontainer"></div>
 
       <div id="editorloadingbox">

src/templates/timeslider.html

@@ -35,6 +35,7 @@
   <link rel="shortcut icon" href="<%=settings.faviconTimeslider%>">
   <% e.begin_block("timesliderStyles"); %>
   <link rel="stylesheet" href="../../static/css/pad.css">
+  <link rel="stylesheet" href="../../static/css/iframe_editor.css">
   <link rel="stylesheet" href="../../static/css/timeslider.css">
   <link rel="stylesheet" href="../../static/skins/<%=encodeURI(settings.skinName)%>/pad.css">
   <link rel="stylesheet" href="../../static/skins/<%=encodeURI(settings.skinName)%>/timeslider.css">
@@ -50,143 +51,170 @@
 
 <% e.begin_block("timesliderBody"); %>
 <body id="padbody" class="timeslider limwidth">
-  <div id="padpage">
-    <div id="timeslider-top">
-      <% e.begin_block("timesliderTop"); %>
-      <div id="timeslider-wrapper">
-        <div id="timeslider" unselectable="on" style="display: none">
-          <div id="timeslider-left"></div>
-          <div id="timeslider-right"></div>
-          <div id="timer"></div>
-          <div id="timeslider-slider">
-            <div id="ui-slider-handle"></div>
-            <div id="ui-slider-bar"></div>
-          </div>
-          <div id="playpause_button">
-            <button id="playpause_button_icon" class=""></button>
-          </div>
-          <div id="steppers">
-            <button class="stepper" id="leftstep"></button>
-            <button class="stepper" id="rightstep"></button>
-          </div>
-        </div>
 
-        <div id="overlay">
+  <!----------------------------->
-          <div id="overlay-inner">
+  <!--------- TOOLBAR ----------->
-            <!-- -->
+  <!----------------------------->
-          </div>
+  <div id="editbar" class="toolbar">
-        </div>
+    <% e.begin_block("timesliderTop"); %>
+
+    <!-- TITLE & TOOLBAR -->
+    <div class="timeslider-bar">
+
+      <div class="timeslider-title-container">
+        <h1 class="timeslider-title">
+          <span id="revision_label"></span>
+          <span id="revision_date"></span>
+        </h1>
+        <p class="timeslider-subtitle">
+          <span data-l10n-id="timeslider.toolbar.authors"></span>
+          <span id="authorsList" data-l10n-id="timeslider.toolbar.authorsList"></span>
+        </p>
       </div>
 
-      <div class="timeslider-bar">
+      <div class="editbarright">
-          <div class="editbarright toolbar" id="editbar">
+        <% e.begin_block("timesliderEditbarRight"); %>
-            <% e.begin_block("timesliderEditbarRight"); %>
+        <ul>
-            <ul>
+          <%- toolbar.menu(settings.toolbar.timeslider, true, 'timeslider-right', 'timeslider') %>
-              <%- toolbar.menu(settings.toolbar.timeslider, true, 'timeslider-right', 'timeslider') %>
+        </ul>
-            </ul>
+        <% e.end_block(); %>
-            <% e.end_block(); %>
-          </div>
-
-          <div>
-              <h1>
-                <span id="revision_label"></span>
-                <span id="revision_date"></span>
-              </h1>
-              <p>
-                <span data-l10n-id="timeslider.toolbar.authors"></span>
-                <span id="authorsList" data-l10n-id="timeslider.toolbar.authorsList"></span>
-              </span> </p>
-          </div>
       </div>
+    </div>
+
+    <!-- SLIDER -->
+    <div id="timeslider-wrapper">
+      <div id="timeslider-slider">
+        <div id="ui-slider-handle"></div>
+        <div id="ui-slider-bar"></div>
+        <div id="timer"></div>
+      </div>
+
+      <div id="slider-btn-container">
+        <button id="playpause_button_icon" class="buttonicon buttonicon-play"></button>
+        <button id="leftstep"  class="stepper buttonicon buttonicon-to-start"></button>
+        <button id="rightstep" class="stepper buttonicon buttonicon-to-end"></button>
+        <!-- Left and Right star button are actually not displayed to the screen -->
+        <button id="leftstar"  class="stepper buttonicon buttonicon-to-start" style="display:none"></button>
+        <button id="rightstar" class="stepper buttonicon buttonicon-to-end"   style="display:none"></button>
+      </div>
+    </div>
+
+
+  <% e.end_block(); %>
+  </div>
+
+
+  <div id="editorcontainerbox">
+
+    <!----------------------------->
+    <!------- PAD CONTENT --------->
+    <!----------------------------->
+
+    <div id="outerdocbody">
+      <div id="innerdocbody">
+      </div>
+    </div>
+
+
+    <!------------------------->
+    <!-- IMPORT EXPORT POPUP -->
+    <!------------------------->
+
+    <div id="import_export" class="popup" >
+      <div id="export">
+        <p data-l10n-id="timeslider.exportCurrent"></p>
+        <a id="exportetherpada" target="_blank" class="exportlink"><div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div></a>
+        <a id="exporthtmla" target="_blank" class="exportlink"><div class="exporttype" id="exporthtml" data-l10n-id="pad.importExport.exporthtml"></div></a>
+        <a id="exportplaina" target="_blank" class="exportlink"><div class="exporttype" id="exportplain" data-l10n-id="pad.importExport.exportplain"></div></a>
+        <a id="exportworda" target="_blank" class="exportlink"><div class="exporttype" id="exportword" data-l10n-id="pad.importExport.exportword"></div></a>
+        <a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div></a>
+        <a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a>
+      </div>
+    </div>
+
+
+    <!---------------------------------------------------->
+    <!-- CONNECTIVITY POPUP (when you get disconnected) -->
+    <!---------------------------------------------------->
+
+    <div id="connectivity" class="popup">
+    <% e.begin_block("modals"); %>
+      <div class="connected visible">
+        <h2 data-l10n-id="pad.modals.connected"></h2>
+      </div>
+      <div class="reconnecting">
+        <h1 data-l10n-id="pad.modals.reconnecting"></h1>
+        <p class="loadingAnimation"></p>
+      </div>
+      <div class="userdup">
+        <h1 data-l10n-id="pad.modals.userdup"></h1>
+        <h2 data-l10n-id="pad.modals.userdup.explanation"></h2>
+        <p data-l10n-id="pad.modals.userdup.advice"></p>
+        <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
+      </div>
+      <div class="unauth">
+        <h1 data-l10n-id="pad.modals.unauth"></h1>
+        <p data-l10n-id="pad.modals.unauth.explanation"></p>
+        <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
+      </div>
+      <div class="looping">
+        <h1 data-l10n-id="pad.modals.disconnected"></h1>
+        <h2 data-l10n-id="pad.modals.looping.explanation"></h2>
+        <p data-l10n-id="pad.modals.looping.cause"></p>
+      </div>
+      <div class="initsocketfail">
+        <h1 data-l10n-id="pad.modals.initsocketfail"></h1>
+        <h2 data-l10n-id="pad.modals.initsocketfail.explanation"></h2>
+        <p data-l10n-id="pad.modals.initsocketfail.cause"></p>
+      </div>
+      <div class="slowcommit">
+        <h1 data-l10n-id="pad.modals.disconnected"></h1>
+        <h2 data-l10n-id="pad.modals.slowcommit.explanation"></h2>
+        <p data-l10n-id="pad.modals.slowcommit.cause"></p>
+        <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
+      </div>
+      <div class="badChangeset">
+        <h1 data-l10n-id="pad.modals.disconnected"></h1>
+        <h2 data-l10n-id="pad.modals.badChangeset.explanation"></h2>
+        <p data-l10n-id="pad.modals.badChangeset.cause"></p>
+        <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
+      </div>
+      <div class="corruptPad">
+        <h1 data-l10n-id="pad.modals.disconnected"></h1>
+        <h2 data-l10n-id="pad.modals.corruptPad.explanation"></h2>
+        <p data-l10n-id="pad.modals.corruptPad.cause"></p>
+      </div>
+      <div class="deleted">
+        <h1 data-l10n-id="pad.modals.deleted"></h1>
+        <p data-l10n-id="pad.modals.deleted.explanation"></p>
+      </div>
+      <div class="disconnected">
+        <% e.begin_block("disconnected"); %>
+        <h1 data-l10n-id="pad.modals.disconnected"></h1>
+        <h2 data-l10n-id="pad.modals.disconnected.explanation"></h2>
+        <p data-l10n-id="pad.modals.disconnected.cause"></p>
+        <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
+        <% e.end_block(); %>
+      </div>
+      <form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
+          <input type="hidden" class="padId" name="padId">
+          <input type="hidden" class="diagnosticInfo" name="diagnosticInfo">
+          <input type="hidden" class="missedChanges" name="missedChanges">
+      </form>
     <% e.end_block(); %>
     </div>
 
-    <div id="padmain">
-      <div id="padeditor">
-        <div id="editorcontainerbox">
-          <div id="padcontent">
-          </div>
-        </div>
-      </div><!-- /padeditor -->
-    </div><!-- /padmain -->
-  </div><!-- /padpage -->
 
-<div id="connectivity" class="popup">
+    <!---------------------------------->
-<% e.begin_block("modals"); %>
+    <!-- SETTINGS POPUP (change font) -->
-    <div class="connected visible">
+    <!---------------------------------->
-      <h2 data-l10n-id="pad.modals.connected"></h2>
-    </div>
-    <div class="reconnecting">
-      <h1 data-l10n-id="pad.modals.reconnecting"></h1>
-      <p class="loadingAnimation"></p>
-    </div>
-    <div class="userdup">
-      <h1 data-l10n-id="pad.modals.userdup"></h1>
-      <h2 data-l10n-id="pad.modals.userdup.explanation"></h2>
-      <p data-l10n-id="pad.modals.userdup.advice"></p>
-      <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
-    </div>
-    <div class="unauth">
-      <h1 data-l10n-id="pad.modals.unauth"></h1>
-      <p data-l10n-id="pad.modals.unauth.explanation"></p>
-      <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
-    </div>
-    <div class="looping">
-      <h1 data-l10n-id="pad.modals.disconnected"></h1>
-      <h2 data-l10n-id="pad.modals.looping.explanation"></h2>
-      <p data-l10n-id="pad.modals.looping.cause"></p>
-    </div>
-    <div class="initsocketfail">
-      <h1 data-l10n-id="pad.modals.initsocketfail"></h1>
-      <h2 data-l10n-id="pad.modals.initsocketfail.explanation"></h2>
-      <p data-l10n-id="pad.modals.initsocketfail.cause"></p>
-    </div>
-    <div class="slowcommit">
-      <h1 data-l10n-id="pad.modals.disconnected"></h1>
-      <h2 data-l10n-id="pad.modals.slowcommit.explanation"></h2>
-      <p data-l10n-id="pad.modals.slowcommit.cause"></p>
-      <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
-    </div>
-    <div class="badChangeset">
-      <h1 data-l10n-id="pad.modals.disconnected"></h1>
-      <h2 data-l10n-id="pad.modals.badChangeset.explanation"></h2>
-      <p data-l10n-id="pad.modals.badChangeset.cause"></p>
-      <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
-    </div>
-    <div class="corruptPad">
-      <h1 data-l10n-id="pad.modals.disconnected"></h1>
-      <h2 data-l10n-id="pad.modals.corruptPad.explanation"></h2>
-      <p data-l10n-id="pad.modals.corruptPad.cause"></p>
-    </div>
-    <div class="deleted">
-      <h1 data-l10n-id="pad.modals.deleted"></h1>
-      <p data-l10n-id="pad.modals.deleted.explanation"></p>
-    </div>
-    <div class="disconnected">
-      <% e.begin_block("disconnected"); %>
-      <h1 data-l10n-id="pad.modals.disconnected"></h1>
-      <h2 data-l10n-id="pad.modals.disconnected.explanation"></h2>
-      <p data-l10n-id="pad.modals.disconnected.cause"></p>
-      <button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
-      <% e.end_block(); %>
-    </div>
-    <form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
-        <input type="hidden" class="padId" name="padId">
-        <input type="hidden" class="diagnosticInfo" name="diagnosticInfo">
-        <input type="hidden" class="missedChanges" name="missedChanges">
-    </form>
-<% e.end_block(); %>
-</div>
 
-<div class="popup" id="settings">
+    <div id="settings" class="popup" >
-  <tr>
-    <td>
       <label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
-    </td>
-    <td>
       <select id="viewfontmenu">
         <option value="normal" data-l10n-id="pad.settings.fontType.normal"></option>
         <option value="monospace" data-l10n-id="pad.settings.fontType.monospaced"></option>
+        <option value="montserrat" data-l10n-id="pad.settings.fontType.montserrat"></option>
         <option value="opendyslexic" data-l10n-id="pad.settings.fontType.opendyslexic"></option>
         <option value="comicsans" data-l10n-id="pad.settings.fontType.comicsans"></option>
         <option value="georgia" data-l10n-id="pad.settings.fontType.georgia"></option>
@@ -194,6 +222,7 @@
         <option value="lucida" data-l10n-id="pad.settings.fontType.lucida"></option>
         <option value="lucidasans" data-l10n-id="pad.settings.fontType.lucidasans"></option>
         <option value="palatino" data-l10n-id="pad.settings.fontType.palatino"></option>
+        <option value="robotomono" data-l10n-id="pad.settings.fontType.robotomono"></option>
         <option value="tahoma" data-l10n-id="pad.settings.fontType.tahoma"></option>
         <option value="timesnewroman" data-l10n-id="pad.settings.fontType.timesnewroman"></option>
         <option value="trebuchet" data-l10n-id="pad.settings.fontType.trebuchet"></option>
@@ -204,22 +233,13 @@
         <option value="sansserif" data-l10n-id="pad.settings.fontType.sansserif"></option>
         <option value="serif" data-l10n-id="pad.settings.fontType.serif"></option>
       </select>
-    </td>
+    </div>
-  </tr>
+  </div>
-</div>
+</body>
 
-<!-- export code -->
+<!----------------------------->
-<div id="import_export">
+<!-------- JAVASCRIPT --------->
-<div id="export" class="popup">
+<!----------------------------->
-  <p data-l10n-id="timeslider.exportCurrent"></p>
-  <a id="exportetherpada" target="_blank" class="exportlink"><div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div></a>
-  <a id="exporthtmla" target="_blank" class="exportlink"><div class="exporttype" id="exporthtml" data-l10n-id="pad.importExport.exporthtml"></div></a>
-  <a id="exportplaina" target="_blank" class="exportlink"><div class="exporttype" id="exportplain" data-l10n-id="pad.importExport.exportplain"></div></a>
-  <a id="exportworda" target="_blank" class="exportlink"><div class="exporttype" id="exportword" data-l10n-id="pad.importExport.exportword"></div></a>
-  <a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div></a>
-  <a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a>
-</div>
-</div>
 
 <script type="text/javascript" src="../../static/js/require-kernel.js"></script>
 <script type="text/javascript" src="../../socket.io/socket.io.js"></script>
@@ -273,5 +293,4 @@
 </script>
 <% e.end_block(); %>
 <div style="display:none"><a href="/javascript" data-jslicense="1">JavaScript license information</a></div>
-</body>
 </html>