plint

French poetry validator
git clone https://a3nm.net/git/plint/
Log | Files | Refs | README

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 %}