cosmetics & help

author: Patrick Simianer <p@simianer.de> 2015-10-29 13:53:37 +0100
committer: Patrick Simianer <p@simianer.de> 2015-10-29 13:53:37 +0100
commit: 3129ebd825db4136ae8fc1c49d7ed4d6340f8504 (patch)
tree: 5a07cd5344bd8199f11492718965f90063f41222
parent: b7a40543ff6c20c1ae5631014e8f0b4f46415fe7 (diff)
6 files changed, 57 insertions, 24 deletions
diff --git a/help.inc.php b/help.inc.php
index dc60adf..1278e5f 100644
--- a/help.inc.php
+++ b/help.inc.php
@@ -1,3 +1,17 @@
-<p>Press the 'Next' button to submit your post-edit and to request the next segment for translation.
-Alternatively, just press enter when you finished the post-edit and the 'Target' text area is in focus. Warning: Past post-edits can not be altered. The session can be stopped at any time and continued later; However, if you have to pause your session, wait until the activity notification disappears and then press 'Pause', as we are collecting timing information. You may also just reload this site and re-request the next segment upon your return. Please only use <em>one</em> browser window at once. Going back to earlier examples is not possible, please take great care when interacting with the system.<br/>
-The interface was only tested with Firefox 31.</p>
+<p style="margin-top:-1em">Press the 'Next' button to <strong>submit</strong> your post-edit and to request the next segment for post-edition.
+Alternatively, in the textual interface, you may just press return when you finished the post-edit ('Target' text area is in focus).</p>
+<p>The session can be stopped at any time and continued later; However, if you have to pause your session, wait until the activity notification disappears and then press 'Pause', as we are collecting timing information. You may also just reload this site and re-request the next segment.</p>
+<p>Please only use a single browser window at once. Going back to earlier examples is not possible, please take great care when interacting with the system.</p>
+
+<p><strong>Instructions for graphical interface:</strong></p>
+<ul>
+  <li><strong>Reordering of target phrases:</strong> Drag and drop the phrase (box).</li>
+  <li><strong>Adding/removing links:</strong> Select a source phrase by clicking on its box, then click on a target phrase (click selected source phrase again to cancel linking).</li>
+  <li><strong>Edit text:</strong> Double click on text, click outside once to stop editing.</li>
+  <li><strong>Adding target phrases:</strong> Click '+' button to add a new phrase.</li>
+  <li><strong>Removing target phrases:</strong> Drag phrase onto left-hand red box.</li>
+  <li><strong>Reset:</strong> Click 'Reset' button to start from scratch.</li>
+</ul>
+
+<p>The interface was tested with Firefox 31 and 38.</p>
+
diff --git a/index.php b/index.php
index 20cb704..11a6839 100644
--- a/index.php
+++ b/index.php
@@ -2,8 +2,8 @@
 <head>
   <meta charset="utf-8" />
   <title>Post-editing application</title>
-  <script src="lfpe.js"></script>
-  <link rel="stylesheet" type="text/css" href="static/lfpe.css" />
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" charset="utf-8"></script>
+  <link rel="stylesheet" type="text/css" href="static/main.css" />
 </head>
 
 <body onload="">
@@ -11,11 +11,17 @@
 <?php include("header.php"); ?>
 
 <form method="get" action="interface.php">
-  Please enter your session key: <input type="text" id="key" name="key" />
+  <strong>Please enter your session key:</strong> <input type="text" id="key" name="key" />
+  &nbsp;&nbsp;&nbsp;&nbsp;Session type:
+  <select>
+    <option value="t">textual</option>
+    <option value="g">graphical</option>
+</select>
+&nbsp;&nbsp;&nbsp;&nbsp;
 <input type="submit" value="Submit" />
 </form>
 
-<div class="small" style="margin-top:10em">
+<div class="small" style="background:#eee;margin: 5em 0 5em 0;padding:.5em; max-width:20%">
 <p>Beta test:
 <select class="small">
   <option value="beta_test_A" onclick="document.getElementById('key').value=this.value;">A</option>
diff --git a/interface.php b/interface.php
index 1484316..1f20a9b 100644
--- a/interface.php
+++ b/interface.php
@@ -19,8 +19,8 @@
 <!-- Derivation editor -->
 <div id="derivation_editor">
   <div id="holder"><img style="margin:.4em" src="static/placeholder.png" /></div>
-  <input type="button" value="+" onClick="DE_add_object()" />
-  <input type="button" value="Reset" onClick="DE_init();" />
+  <input type="button" value="+" onclick="DE_add_object()" />
+  <input type="button" value="Reset" onclick="DE_init();" />
 </div>
 <!-- /Derivation editor-->
 
@@ -48,14 +48,14 @@
 <!-- Buttons -->
 <div>
   <button id="pause_button" type="button" onclick="pause()">Pause</button>
-  <button id="next" type="button" onclick="Next()">Start/Continue</button>
+  <button id="next" type="button" onclick="Next();">Start/Continue</button>
   <span id="status"><strong>Working, please wait for next segment</strong> <img src="static/ajax-loader-large.gif" width="20px" /></span>
 </div>
 <!-- /Buttons -->
 
 <!-- Session overview -->
 <div id="overview_wrapper">
-<strong>Session overview</strong>
+<p style="margin:.5em;margin-bottom:.25em"><strong>Session overview</strong></p>
 <table id="overview">
 <?php
 $SESSION_DIR="/fast_scratch/simianer/lfpe/sessions";
@@ -74,7 +74,7 @@ foreach($db->raw_source_segments as $s) {
   if ($i <= $db->progress) {
     $translation = $db->post_edits_raw[$i];
   }
-  echo "<tr class='".$class."' id='seg_".$i."'><td>".($i+1).".</td><td>".$s."</td><td class='seg_text' id='seg_".$i."_t'>".$translation."</td></tr>";
+  echo "<tr class='".$class."' id='seg_".$i."'><td class='num'>".($i+1).".</td><td>".$s."</td><td class='seg_text' id='seg_".$i."_t'>".$translation."</td></tr>";
   $i += 1;
 }
 ?>
@@ -83,7 +83,7 @@ foreach($db->raw_source_segments as $s) {
 <!-- /Session overview -->
 
 <!-- Help -->
-<button id="help_button" onclick="toggleDisplay(document.getElementById('help'));">Help</button>
+<button id="help_button" onclick="$('#help').toggle('blind')">Help</button>
 <div id="help" style="display:none">
 <?php include("help.inc.php"); ?>
 <p class="xtrasmall">Support: <a href="mailto://simianer@cl.uni-heidelberg.de">Mail</a></p>
@@ -91,6 +91,8 @@ foreach($db->raw_source_segments as $s) {
 </div>
 <!-- /Help -->
 
+<p class="small" style="text-align:right"><a href="#">^</a></p>
+
 <?php include("footer.php"); ?>
 
 </body>
diff --git a/js/common.js b/js/common.js
index 11dcdba..560f63d 100644
--- a/js/common.js
+++ b/js/common.js
@@ -20,12 +20,13 @@ function removeClass(node, className)
  *
  *
  */
-function toggleDisplay(node)
+function toggleDisplay(id)
 {
+  node = $(id);
   if (node.style.display=='none') {
-    node.style.display = 'block';
+    node.fadeIn();
   } else {
-    node.style.display = 'none';
+    node.fadeOut();
   }
 
   return false;
diff --git a/js/lfpe.js b/js/lfpe.js
index 1cf88bf..4ec6062 100644
--- a/js/lfpe.js
+++ b/js/lfpe.js
@@ -89,7 +89,8 @@ function working()
   var last_post_edit      = document.getElementById("last_post_edit");
 
   // show 'working' message
-  status.style.display = "block";
+  //status.style.display = "block";
+  $("#status").fadeToggle();
 
   // disable button and textarea
            button.setAttribute("disabled", "disabled");
@@ -115,7 +116,8 @@ function not_working()
   var last_post_edit      = document.getElementById("last_post_edit");
 
   // hide 'working' message
-  status.style.display = "none";
+  //status.style.display = "none";
+  $("#status").fadeToggle();
 
   // enable buttons
           document.getElementById("next").removeAttribute("disabled");
@@ -188,7 +190,8 @@ function Next()
      var l = document.getElementById("oov_fields").children.length;
      for (var i=0; i<l; i++)
        { document.getElementById("oov_fields").children[0].remove(); }
-     $("#oov_form").css("display", "none");
+     //$("#oov_form").css("display", "none");
+    $("#oov_form").toggle("blind");
      next_url += "&correct="+encodeURIComponent(src.join("\t"))
                  +"%20%7C%7C%7C%20"+encodeURIComponent(tgt.join("\t"))
   // ???
@@ -259,7 +262,8 @@ function Next()
       }
       oov_correct.value = true;
 
-      $("#oov_form").css("display", "block");
+      //$("#oov_form").css("display", "block");
+      $("#oov_form").toggle("blind");
       not_working();
 
     // translation mode
diff --git a/static/main.css b/static/main.css
index c6220e3..84180c4 100644
--- a/static/main.css
+++ b/static/main.css
@@ -19,13 +19,17 @@ button {
 .small { font-size:.8em }
 .xtrasmall { font-size:.6em }
 
+a {
+  color: #000;
+  text-decoration: underline
+}
+
 div#wrapper {
   margin:  2em;
   padding: 1em
 }
 
 span#status {
-  display: none;
   float:   right
 }
 
@@ -50,7 +54,7 @@ span#status {
 
 /* Derivation editor */
 #derivation_editor input {
-  background: #ccc;
+  background: #eee;
   font-size: 60%;
   padding: .4em
 }
@@ -60,8 +64,10 @@ span#status {
 div#overview_wrapper { margin-top:1em }
 table#overview { font-size:.8em }
 table#overview td.seg_text { width: 45% }
-table#overview td { border-bottom: 1px solid #000 }
-table#overview .doc_title { background-color: #eee }
+table#overview td { border-bottom: 1px solid #ccc; border-left:1px solid #ccc; padding: .25em }
+table#overview tr:hover { background: #ccc }
+table#overview .doc_title { background-color: #eee; font-style:italic }
+table#overview td.num { text-align:right; font-style:italic}
 /* /Session overview */
 
 /* Header */
author	Patrick Simianer <p@simianer.de>	2015-10-29 13:53:37 +0100
committer	Patrick Simianer <p@simianer.de>	2015-10-29 13:53:37 +0100
commit	3129ebd825db4136ae8fc1c49d7ed4d6340f8504 (patch)
tree	5a07cd5344bd8199f11492718965f90063f41222
parent	b7a40543ff6c20c1ae5631014e8f0b4f46415fe7 (diff)