plint

commit 5ef33a18c406b7298f64407ddf7f34d98249e3c4
parent d5d24c4a5ec506fa49589ceed16274a51d975f41
Author: Antoine Amarilli <a3nm@a3nm.net>
Date:   Thu,  3 Sep 2015 00:13:35 +0200

fix interface for mobile

Diffstat:
static/main.css
 | 
47
+++++++++++++++++++++++++++++++++++------------
static/mobile.css
 | 
21
+++++++++++++++++++++
static/script.js
 | 
146
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
views/index.html
 | 
43
+++++++++++++++++++++++--------------------

4 files changed, 218 insertions(+), 39 deletions(-)
diff --git a/static/main.css b/static/main.css
@@ -51,54 +51,68 @@ dt {
 
 #lcontainer {
   width: 42%;
+  float: left;
 }
 
-#errors li {
+#cerrors li {
   cursor: pointer;
   background: #fdd;
   padding: 1em;
   margin-bottom: 1em;
   overflow: auto;
   border: 2px outset red;
+  min-height: 3em;
 }
 
-#errors li:hover {
+#cerrors li:hover {
   background: #fee;
   border: 2px outset #faa;
 }
 
-#errors li p {
+#cerrors li p {
   margin: 0;
   color: #a00;
   font-weight: bold;
 }
 
-#errors li blockquote {
+#cerrors li blockquote {
   padding: 0;
   font-style: italic;
   margin-left: 0;
 }
 
-#errors {
-  list-style-type: none;
-  padding: 0;
+#cerrors {
   margin-top: 0;
-  float: right;
   overflow: auto;
   height: 90vh;
-  max-width: 55%;
+  width: 55%;
+  float: right;
+}
+
+#errors {
+  list-style-type: none;
+  padding: 0;
 }
 
 #poem {
-  width: 100%;
-  max-width: 100%;
-  min-width: 100%;
   min-height: 8em;
+  min-width: 100%;
+  max-width: 100%;
+  width: 100%;
+  /* http://stackoverflow.com/a/4156343 */
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 #predef {
   max-width: 100%;
   min-width: 100%;
+  width: 100%;
+  /* http://stackoverflow.com/a/4156343 */
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .doclink {
@@ -109,6 +123,10 @@ dt {
   width: 100%;
   min-width: 100%;
   max-width: 100%;
+  /* http://stackoverflow.com/a/4156343 */
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   height: 10vh;
   min-height: 6em;
 }
@@ -135,5 +153,10 @@ dt {
   display: block;
   width: 100%;
   overflow: auto;
+  margin-top: 0;
 }
 
+p {
+  /* reset */
+  margin: 1em 0;
+}
diff --git a/static/mobile.css b/static/mobile.css
@@ -0,0 +1,21 @@
+#cerrors {
+  float: none;
+  width: initial;
+  height: initial;
+  max-width: initial;
+  margin-top: 1em;
+}
+
+#cerrors li {
+  width: 100%;
+  /* http://stackoverflow.com/a/4156343 */
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#lcontainer {
+  width: initial;
+  float: none;
+}
+
diff --git a/static/script.js b/static/script.js
@@ -1,3 +1,9 @@
+/* http://chrissilich.com/blog/convert-em-size-to-pixels-with-jquery/ */
+function em2px(n) {
+    var emSize = parseFloat($("body").css("font-size"));
+    return (emSize * n);
+}
+
 function htmlentities(x) {
   return $('<div/>').text(x).html();
 }
@@ -54,13 +60,113 @@ function setCustom() {
   setUnload();
 }
 
-function resizePoem(e) {
-  $( '#poem' ).height(
-      $( window ).height() - $( '#poem' ).offset().top - 20);
+function getAvail() {
+  var avail = $( window ).height() - $( '#lcontainer' ).offset().top - em2px(4) - $( '#tools' ).height() - $( '#predef' ).height();
+  if ($( '#user_template' ).is(":visible")) {
+    avail -= em2px(.5);
+  }
+  if ($( window ).width() <= 650) {
+    avail -= em2px(1);
+  }
+  return avail;
+}
+
+function sanitize(e) {
+  var avail = getAvail();
+  var h1 = $( '#poem' ).height();
+  var h2 = $( '#user_template' ).height();
+  var h3 = $( '#cerrors' ).height();
+  if (h1 > avail) {
+    $( '#poem' ).height(avail);
+    h1 = avail;
+  }
+  if (h2 > avail) {
+    $( '#user_template' ).height(avail);
+    h2 = avail;
+  }
+  if (h3 > avail) {
+    $( '#cerrors' ).height(avail);
+    h3 = avail;
+  }
 }
 
-window.onresize = resizePoem;
-window.onload = resizePoem;
+function resizeCErrors(e) {
+  if ($( window ).width() > 650) {
+    /* stretch cerrors */
+    $( '#cerrors' ).height($( window ).height() - $( '#cerrors' ).offset().top - em2px(1));
+  }
+}
+
+function resizeAllPoem(e) {
+  sanitize(e);
+  var avail = getAvail();
+  var h1 = $( '#poem' ).height();
+  avail -= h1;
+  var h2 = $( '#user_template' ).height();
+  var h3 = $( '#cerrors' ).height();
+  if (!($( '#user_template' ).is(":visible")) && ($( window ).width() > 650)) {
+    /* silly, just take the entire height */
+    $( '#poem' ).height(avail + h1);
+  } else {
+    if ($( window ).width() <= 650) {
+      /* fix user_template, use the rest for cerrors*/
+      if ($( '#user_template' ).is(":visible")) {
+        avail -= h2;
+      }
+      $( '#cerrors' ).height(0.1 + avail);
+    } else {
+      /* use the rest for user_template */
+      $( '#user_template' ).height(0.1 + avail);
+    }
+  }
+  resizeCErrors(e);
+}
+
+function resizeAllUserTemplate(e) {
+  sanitize(e);
+  var avail = getAvail();
+  var h1 = $( '#poem' ).height();
+  var h2 = $( '#user_template' ).height();
+  var h3 = $( '#cerrors' ).height();
+  avail -= h2;
+  /* share what remains among other elements */
+  var used = h1 + 0.01;
+  if ($( window ).width() <= 650) {
+    used += h3;
+  }
+  $( '#poem' ).height(h1 * avail/used);
+  if ($( window ).width() <= 650) {
+    $( '#cerrors' ).height(0.1 + h3 * avail/used);
+  }
+  resizeCErrors(e);
+}
+
+function resizeAll(e) {
+  sanitize(e);
+  var avail = getAvail();
+  var h1 = $( '#poem' ).height();
+  var h2 = $( '#user_template' ).height();
+  var h3 = $( '#cerrors' ).height();
+  /* just scale existing proportions */
+  var used = h1 + 0.01;
+  if ($( '#user_template' ).is(":visible")) {
+    used += h2;
+  }
+  if ($( window ).width() <= 650) {
+    used += h3;
+  }
+  $( '#poem' ).height(h1 * avail/used);
+  if ($( '#user_template' ).is(":visible")) {
+    $( '#user_template' ).height(0.1 + h2 * avail/used);
+  }
+  if ($( window ).width() <= 650) {
+    $( '#cerrors' ).height(0.1 + h3 * avail/used);
+  }
+  resizeCErrors(e);
+}
+
+window.onresize = resizeAll;
+window.onload = resizeAll;
 
 function check() {
   $( "#status" ).html("Checking...");
@@ -144,7 +250,7 @@ function loadPredef() {
       $( '#user_template' ).val(htmlentities(data));
       $('#user_template').show();
       $('#customize').prop("disabled", true);
-      resizePoem();
+      resizeAll();
     }
     });
   }
@@ -157,7 +263,7 @@ function toggleCustom() {
     $('#user_template').hide();
     $('#customize').prop("disabled", false);
   }
-  resizePoem();
+  resizeAll();
 }
 
 function gotoLine(l) {
@@ -168,3 +274,29 @@ function gotoLine(l) {
   $( '#poem' ).caretTo(pos);
 }
 
+/* http://stackoverflow.com/a/7055239 */
+jQuery(document).ready(function(){
+   $( '#user_template' ).mouseup(function(){
+     resizeAllUserTemplate();
+   });
+   $( '#user_template' ).dblclick(function(){
+     resizeAllUserTemplate();
+   });
+   $( '#poem' ).mouseup(function(){
+     resizeAllPoem();
+   });
+   $( '#poem' ).dblclick(function(){
+     resizeAllPoem();
+   });
+   resizeAll();
+  setTimeout(function () {
+        $(window).resize();
+  }, 1000);
+});
+
+$(document).load(function(e) {
+  setTimeout(function () {
+        $(window).resize();
+  }, 1000);
+});
+
diff --git a/views/index.html b/views/index.html
@@ -2,9 +2,6 @@
 
 {% block body %}
 
-<ol id="errors">
-</ol>
-
 <noscript>
 {% if lang == 'fr' %}
 <p>Désolé, votre navigateur doit supporter JavaScript pour faire fonctionner
@@ -15,19 +12,6 @@ plint.</p>
 </noscript>
 
 <div id="lcontainer">
-  <p id="status">
-{% if lang == 'fr' %}
-plint est un outil pour vérifier la métrique et les rimes de poèmes en
-langue française. 
-Choisissez un modèle (survolez avec le pointeur pour plus de détails), saisissez
-votre poème, et cliquez sur "Valider".
-{% else %}
-plint is a tool to check the metric and rhymes of French verse.
-Select a template (hover for details), input your poem, and hit
-"Validate".
-{% endif %}
-</p>
-
 <select name="predef" id="predef" onChange="toggleCustom()" tabindex="1">
   <option value="classical" id="classical"
   {% if lang == 'fr' %}
@@ -106,20 +90,21 @@ title="Alexandrins classiques avec césure à l'hémistiche, rimes plates, genre
 6/6 B !x
 6/6 B !x
 </textarea>
-<p>
+<p id="tools">
 <button onclick="loadPredef()" id="customize" tabindex="2">
 {% if lang == 'fr' %}
-  Personnaliser le modèle sélectionné
+  Éditer le modèle
 {% else %}
-  Customize selected template
+  Tweak template
 {% endif %}
 </button>
 <a class="doclink" href="#"
   onclick="window.open('about#template', '_blank');" tabindex="3">
-  documentation&nbsp;<img src="static/img/nw.png"
 {% if lang == 'fr' %}
+aide&nbsp;<img src="static/img/nw.png"
 alt="s'ouvre dans une nouvelle fenêtre">
 {% else %}
+help&nbsp;<img src="static/img/nw.png"
 alt="opens in a new window">
 {% endif %}
 </a>
@@ -142,5 +127,23 @@ alt="opens in a new window">
 </textarea>
 </div>
 
+<div id="cerrors">
+  <p id="status">
+{% if lang == 'fr' %}
+plint est un outil pour vérifier la métrique et les rimes de poèmes en
+langue française. 
+Choisissez un modèle (survolez avec le pointeur pour plus de détails), saisissez
+votre poème, et cliquez sur "Valider".
+{% else %}
+plint is a tool to check the metric and rhymes of French verse.
+Select a template (hover for details), input your poem, and hit
+"Validate".
+{% endif %}
+</p>
+
+<ol id="errors">
+</ol>
+</div>
+
 {% endblock %}