From: Tara L Andrews <tla@mit.edu>
Date: Sat, 18 Jan 2014 13:42:22 +0000 (+0100)
Subject: fix some styling throughout the site
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=917bee1c66759cddcec3b5389a4de3b647b91f84;p=scpubgit%2Fstemmaweb.git

fix some styling throughout the site
---

diff --git a/root/css/auth.css b/root/css/auth.css
index 76e3717..82d91d0 100644
--- a/root/css/auth.css
+++ b/root/css/auth.css
@@ -1,7 +1,13 @@
+body {
+	padding: 20px;
+    background: transparent url('../images/logo_001.png') no-repeat scroll -200px -100px;
+    background-size: 600px;
+    background-color: #ffffff;
+}
 #topbanner {
 	width: 100%;
 	height: 50px;
-	margin-top: 20px;
+	padding: 0px;
 }
 .error {
     color: #d24848;
diff --git a/root/css/dashboard.css b/root/css/dashboard.css
new file mode 100644
index 0000000..927dd8e
--- /dev/null
+++ b/root/css/dashboard.css
@@ -0,0 +1,146 @@
+/* Index page components */
+
+#directory_container {
+    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
+    float: left;
+	width: 300px;
+	height: 450px;
+	border: 1px #c6dcf1 solid;
+	margin-left: 30px;
+	padding-left: 10px;
+	padding-right: 10px;
+}
+#loading_message {
+	display: none;
+}
+#directory {
+	height: 360px;
+	margin-left: 10px;
+	overflow: auto;
+}
+#new_trad_button {
+	margin-left: 10px;
+	position: relative;
+	top: 10px;
+}
+.traditionname {
+	text-decoration: underline;
+}
+.selected {
+	font-style: italic;
+}
+#textinfo_waitbox {
+	float: left;
+	padding-left: 50px;
+}
+#textinfo_container {
+    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
+    border: 1px solid #C6DCF1;
+	float: left;
+	height: 510px;
+	width: 710px;
+	margin-left: 10px;
+	padding-left: 10px;
+	padding-right: 10px;
+}
+#edit_instructions {
+	float: left;
+}
+#stemma_container h2 h3 {
+	color: #666;
+}
+#stemma_graph {
+    height: 375px;
+    width: 500px;
+    text-align: center;
+    border: 1px #c6dcf1 solid;
+}
+#stemma_graph img {
+	margin-top: expression(( 450 - this.height ) / 2);
+}
+#stemma_graph svg {
+}
+#stemma_graph_title {
+	bottom: 20px;
+	margin-left: 5px; 
+	position: relative;
+}
+#stemma_identifier {
+	color: #488dd2;
+	font-size: 12px;
+	font-weight: bold;
+}	
+#textinfo_container_buttons {
+    z-index: 100;
+    width: 224px;
+    float: right;
+    left: -18px;
+    position: relative;
+    top: 15px;
+}
+#run_stexaminer, #run_relater, #open_stemma_add, #open_stemma_edit, #open_stemweb_ui, #query_stemweb_ui {
+    height: 32px;
+}
+#stemma_pager {
+    height: 38px;
+}
+.stemma_node_highlight {
+    stroke-width: 1.5px;
+    stroke: #415555;
+    fill: #d6e0f5;
+}
+#open_textinfo_edit {
+    float: right;
+    height: 30px;
+    position: relative;
+    top: -34px;
+    left: -8px;
+}
+#upload-collation-dialog {
+    overflow: hidden;
+}
+.uploadfile {
+    font-weight: bold;
+}
+#uploadfile_label {
+    font-weight: normal;
+}
+#filelist {
+    position: relative;
+    top: 10px;
+    margin-bottom: 24px;
+}
+.error {
+    font-weight: bold;
+    color: #ff3333;
+}
+.notification {
+	font-weight: bold;
+	color: #33ff33;
+}
+#new_file {
+    position: absolute;
+    top: -50px;
+    opacity: 0.0;
+}
+#new_file_name {
+    font-weight: bold;
+}
+#new_name, #new_lang, #new_public, #new_file_name_container {
+    margin-bottom: 6px;
+}
+#new_file_label {
+    float: left;
+    padding-right: 8px;
+}
+#root_tree_dialog {
+    position: absolute;
+    border: 2px solid #B2E0B2;
+    background: #e6f5e6;
+    padding: 4px 8px 4px 12px;
+    z-index: 200;
+    font-size: 75%;
+}
+#root_tree_dialog img {
+    vertical-align: middle;
+}
diff --git a/root/css/relationship.css b/root/css/relationship.css
index 563b293..98f03b7 100644
--- a/root/css/relationship.css
+++ b/root/css/relationship.css
@@ -5,14 +5,13 @@ body {
     font-size: 85%; 
     background: #EDF1FA;
 }
+#topbanner {
+	padding: 0px;
+}
 #logoimg {
 	float: left;
 	margin-left: 20px;
 }
-.helptag {
-	color: #488dd2;
-	text-decoration: underline;
-}
 #logotitle {
 	float: left;
 	margin-left: 30px;
diff --git a/root/css/stexaminer.css b/root/css/stexaminer.css
index fd6b39e..55b1957 100644
--- a/root/css/stexaminer.css
+++ b/root/css/stexaminer.css
@@ -1,3 +1,11 @@
+#main_page {
+	padding-left: 20px;
+	padding-right: 20px;
+}
+#topbanner {
+	padding: 0px;
+}
+
 #variants_table {
     background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
     clear: both;
diff --git a/root/css/style.css b/root/css/style.css
index 0c83133..3b0e501 100644
--- a/root/css/style.css
+++ b/root/css/style.css
@@ -3,19 +3,9 @@ body {
     margin: 0; 
     font: 1em "Open Sans", Arial, Helvetica, sans-serif; 
     font-size: 85%; 
-    background-color: #e6e6e6;
+    background: #EDF1FA;
     color: #444;
 }
-#main_page {
-    background: transparent url('../images/logo_001.png') no-repeat scroll -200px -100px;
-    background-size: 600px;
-    background-color: #ffffff;
-    width: 1124px;
-    padding-bottom: 30px;
-    margin: 0 auto;
-    margin-top: 48px;
-    
-}
 .clearfix:after { 
 	content: "\00A0"; 
 	display: block; 
@@ -114,6 +104,16 @@ div.pager_left_button.greyed_out, div.pager_left_button.greyed_out:hover {
     opacity: 0.5;
     background: url("../images/button_left_28.png") no-repeat scroll right bottom transparent;
 }
+#main_page {
+    background: transparent url('../images/logo_001.png') no-repeat scroll -200px -100px;
+    background-size: 600px;
+    background-color: #ffffff;
+    width: 1124px;
+    padding-bottom: 30px;
+    margin: 0 auto;
+    margin-top: 48px;
+    
+}
 #topbanner {
 	padding: 30px;
 }
@@ -122,43 +122,9 @@ div.pager_left_button.greyed_out, div.pager_left_button.greyed_out:hover {
 	margin-right: 12%;
 	margin-top: 15px;
 }
-.navlink {
-	color: #ffffff;
-	text-decoration: underline;
-}
-
-
-
-/* Index page components */
-
-#directory_container {
-    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
-    float: left;
-	width: 300px;
-	height: 450px;
-	border: 1px #c6dcf1 solid;
-	margin-left: 30px;
-	padding-left: 10px;
-	padding-right: 10px;
-}
-#loading_message {
-	display: none;
-}
-#directory {
-	height: 360px;
-	margin-left: 10px;
-	overflow: auto;
-}
-#new_trad_button {
-	margin-left: 10px;
-	position: relative;
-	top: 10px;
-}
-.traditionname {
-	text-decoration: underline;
-}
-.selected {
-	font-style: italic;
+#docco {
+	background-color: #edf1fa;
+	padding: 10px;
 }
 .mainnav {
 	font-size: 14px;
@@ -168,121 +134,8 @@ div.pager_left_button.greyed_out, div.pager_left_button.greyed_out:hover {
 	padding: 5px;
 	float: right;
 }
-.mainnav a {
+.navlink {
 	color: #ffffff;
+	text-decoration: underline;
 }
-#textinfo_waitbox {
-	float: left;
-	padding-left: 50px;
-}
-#textinfo_container {
-    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
-    border: 1px solid #C6DCF1;
-	float: left;
-	height: 510px;
-	width: 710px;
-	margin-left: 10px;
-	padding-left: 10px;
-	padding-right: 10px;
-}
-#edit_instructions {
-	float: left;
-}
-#stemma_container h2 h3 {
-	color: #666;
-}
-#stemma_graph {
-    height: 375px;
-    width: 500px;
-    text-align: center;
-    border: 1px #c6dcf1 solid;
-}
-#stemma_graph img {
-	margin-top: expression(( 450 - this.height ) / 2);
-}
-#stemma_graph svg {
-}
-#stemma_graph_title {
-	bottom: 20px;
-	margin-left: 5px; 
-	position: relative;
-}
-#stemma_identifier {
-	color: #488dd2;
-	font-size: 12px;
-	font-weight: bold;
-}	
-#textinfo_container_buttons {
-    z-index: 100;
-    width: 224px;
-    float: right;
-    left: -18px;
-    position: relative;
-    top: 15px;
-}
-#run_stexaminer, #run_relater, #open_stemma_add, #open_stemma_edit, #open_stemweb_ui, #query_stemweb_ui {
-    height: 32px;
-}
-#stemma_pager {
-    height: 38px;
-}
-.stemma_node_highlight {
-    stroke-width: 1.5px;
-    stroke: #415555;
-    fill: #d6e0f5;
-}
-#open_textinfo_edit {
-    float: right;
-    height: 30px;
-    position: relative;
-    top: -34px;
-    left: -8px;
-}
-#upload-collation-dialog {
-    overflow: hidden;
-}
-.uploadfile {
-    font-weight: bold;
-}
-#uploadfile_label {
-    font-weight: normal;
-}
-#filelist {
-    position: relative;
-    top: 10px;
-    margin-bottom: 24px;
-}
-.error {
-    font-weight: bold;
-    color: #ff3333;
-}
-.notification {
-	font-weight: bold;
-	color: #33ff33;
-}
-#new_file {
-    position: absolute;
-    top: -50px;
-    opacity: 0.0;
-}
-#new_file_name {
-    font-weight: bold;
-}
-#new_name, #new_lang, #new_public, #new_file_name_container {
-    margin-bottom: 6px;
-}
-#new_file_label {
-    float: left;
-    padding-right: 8px;
-}
-#root_tree_dialog {
-    position: absolute;
-    border: 2px solid #B2E0B2;
-    background: #e6f5e6;
-    padding: 4px 8px 4px 12px;
-    z-index: 200;
-    font-size: 75%;
-}
-#root_tree_dialog img {
-    vertical-align: middle;
-}
+
diff --git a/root/src/auth/register.tt b/root/src/auth/register.tt
index 97384be..a99512c 100644
--- a/root/src/auth/register.tt
+++ b/root/src/auth/register.tt
@@ -2,6 +2,9 @@
 	pagetitle = "Stemmaweb - Register"
 	applicationstyle = c.uri_for('/css/auth.css')
 %]
+	<div id="topbanner">
+		<h1>Stemmaweb - Register</h1>
+	</div>
 [% IF status_msg %]
 			<p>[% status_msg | html %]</p>
 [% END %]
diff --git a/root/src/index.tt b/root/src/index.tt
index 84382b1..580da1c 100644
--- a/root/src/index.tt
+++ b/root/src/index.tt
@@ -1,6 +1,7 @@
 [% WRAPPER header.tt
 	pagetitle = "Stemmaweb - Text tradition tools"
 	applicationjs = c.uri_for( 'js/componentload.js' )
+	applicationstyle = c.uri_for( 'css/dashboard.css' )
 %]
     <script type="text/javascript">
 // Set global variables that must be passed by the server
diff --git a/root/src/phylotrees.tt b/root/src/phylotrees.tt
new file mode 100644
index 0000000..d8628ae
--- /dev/null
+++ b/root/src/phylotrees.tt
@@ -0,0 +1,176 @@
+[% WRAPPER header.tt
+	pagetitle = "Stemmaweb - Phylogeny calculation tool"
+	applicationjs = c.uri_for( 'js/phylotools.js' )
+%]
+    <script type="text/javascript">
+var basepath = "[% c.uri_for( '/' ) %]";
+var textid = "[% textid %]";
+var editable = "[% editable %]"
+var currSelected;
+var stemmadot = [];
+var stemmasvg = [];
+var stemmata_added = {};
+
+function getPhylogeny () {
+	stemmadot = [];
+	stemmasvg = [];
+	var phylourl = basepath + textid;
+    $('#textinfo_waitbox').show();
+    $.getJSON( basepath + "phylocalc/" + textid, function (textdata) {
+    	stemmadot = textdata.stemmadot;
+    	stemmasvg = textdata.stemmasvg;
+	    $('#textinfo_waitbox').hide();
+	    load_stemma( 0 );
+    }); // TODO error handling
+}
+
+function load_stemma( idx ) {
+	// Load the stemma at idx
+	currSelected = idx;
+	show_stemmapager();
+	if( idx > -1 ) {
+		$('#stemma_graph').empty();
+		$('#stemma_graph').append( stemmasvg[idx] );
+		if( stemmadot[idx].substr('digraph') > -1 && stemmata_added[idx] != true ) {
+			// It has a root, so we may add it to the tradition stemmata.
+			$('#add_stemma_button').show();
+		}
+        setTimeout( 'start_element_height = $("#stemma_graph .node")[0].getBBox().height;', 500 );
+	}
+}
+
+function show_stemmapager () {
+      $('.pager_left_button').unbind('click').addClass( 'greyed_out' );
+      $('.pager_right_button').unbind('click').addClass( 'greyed_out' );
+      if( currSelected > 0 ) {
+              $('.pager_left_button').click( function () {
+                      load_stemma( currSelected - 1 );
+              }).removeClass( 'greyed_out' );
+      }       
+      if( selectedStemmaID + 1 < stemmata.length ) {
+              $('.pager_right_button').click( function () {
+                      load_stemma( currSelected + 1 );
+              }).removeClass( 'greyed_out' );
+      }
+}
+
+function add_selected_stemma () {
+	var requrl = basepath + "stemma/" + textid + "/n";
+	var reqparam = { 'dot': stemmadot[currSelected] };
+	$.post( requrl, reqparam, function (data) {
+		// Disable add for any stemma already added
+		stemmata_added[currSelected] = true;
+		$('#add_stemma_button').hide();
+		// TODO maybe check on the server if the stemma exists?
+	}, 'json' );
+}
+
+function rootStemma ( stemidx, root ) {
+	// Send the stemmadot at stemidx to the server, along with the name of the
+	// selected root node. Receive back a dot spec and an SVG, and enable the
+	var rooturl = basepath + 'microservices/rootedstemma';
+	var params = { 'dot': stemmadot[stemidx], 'root': root };
+	$.post( rooturl, params, function (data) {
+		stemmadot[stemidx] = data.stemmadot;
+		stemmasvg[stemidx] = data.stemmasvg;
+		load_stemma( stemidx );
+	}); // TODO error handling
+}
+
+$(document).ready( function() {
+	$('#stemma_graph').mousedown( function(evt) {
+        evt.stopPropagation();
+        $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
+        $('body').mousemove( function(evt) {
+            mouse_scale = 1; // for now, was:  mouse_scale = svg_root_element.getScreenCTM().a;
+            dx = (evt.clientX - $('#stemma_graph').data( 'mousedown_xy' )[0]) / mouse_scale;
+            dy = (evt.clientY - $('#stemma_graph').data( 'mousedown_xy' )[1]) / mouse_scale;
+            $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
+            var svg_root = $('#stemma_graph svg').svg().svg('get').root();
+            var g = $('g.graph', svg_root).get(0);
+            current_translate = g.getAttribute( 'transform' ).split(/translate\(/)[1].split(')',1)[0].split(' ');
+            new_transform = g.getAttribute( 'transform' ).replace( /translate\([^\)]*\)/, 'translate(' + (parseFloat(current_translate[0]) + dx) + ' ' + (parseFloat(current_translate[1]) + dy) + ')' );
+            g.setAttribute( 'transform', new_transform );
+            evt.returnValue = false;
+            evt.preventDefault();
+            return false;
+        });
+        $('body').mouseup( function(evt) {
+            $('body').unbind('mousemove');
+            $('body').unbind('mouseup');
+        });
+	});
+	 
+	$('#stemma_graph').mousewheel(function (event, delta) {
+        event.returnValue = false;
+        event.preventDefault();
+        if (!delta || delta == null || delta == 0) delta = event.originalEvent.wheelDelta;
+        if (!delta || delta == null || delta == 0) delta = -1 * event.originalEvent.detail;
+        if( delta < -9 ) { delta = -9 }; 
+        var z = 1 + delta/10;
+        z = delta > 0 ? 1 : -1;
+        var svg_root = $('#stemma_graph svg').svg().svg('get').root();
+        var g = $('g.graph', svg_root).get(0);
+        if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>=1 && (g.getScreenCTM().a * start_element_height) < 1000))) {
+            var scaleLevel = z/10;
+            current_scale = parseFloat( g.getAttribute( 'transform' ).split(/scale\(/)[1].split(')',1)[0].split(' ')[0] );
+            new_transform = g.getAttribute( 'transform' ).replace( /scale\([^\)]*\)/, 'scale(' + (current_scale + scaleLevel) + ')' );
+            g.setAttribute( 'transform', new_transform );
+        }
+    });
+    
+    $('#stemma_root_cancel').hide();
+    if( !editable ) {
+    	$('#stemma_add_form').hide();
+    }
+    // call out to run the phylogeny calculation
+	getPhylogeny();
+	    
+});
+    </script>
+
+[% END %]
+
+    <div id="topbanner">
+      <h1>Stemmaweb - [% algorithm_name %] calculation for [% text_name %]</h1>
+      <span class="mainnav">[% IF c.user_exists %]Hello! [% c.user.get_object.email %] <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> | [% ELSE %]<a class="navlink" onclick="window.open('[% c.uri_for( '/login' ) %]', 'loginwindow', 'height=385,width=445')">Login</a> | [% END %]<a class="navlink" href="[% c.uri_for( 'about.html' ) %]">About</a> </span>
+    </div>
+    <div id="textinfo_container">
+      <div id="textinfo_load_status"></div>
+      <h2>Text <span class="texttitle">[% text_name %]</span></h2>
+      <div id="textinfo_container_buttons">
+          <form id="stemma_pager" action="" method="GET" name="stemma_pager">
+            <div id="stemma_pager_buttons">
+              <div class="pager_left_button" id="stemma_pager_left_button"></div>
+              <div class="pager_right_button" id="stemma_pager_right_button"></div>
+            </div>
+          </form>
+          <form id="stemma_root_form" action="" method="GET" name="start_root_stemma">
+            <div class="button" id="stemma_root_button" 
+            	onClick="TODO">
+          	  <span>Choose a root for this stemma</span>
+            </div>
+          </form>
+          <form id="stemma_root_cancel" action="" method="GET" name="stemma_root_cancel">
+            <div class="button" id="stemma_root_cancel_button" 
+            	onClick="TODO">
+          	  <span>Cancel root selection</span>
+            </div>
+          </form>
+          <form id="stemma_add_form" action="" method="GET" name="stemma_add_form">
+            <div class="button" id="add_stemma_button" 
+            	onClick="add_selected_stemma()">
+          	  <span>Add this stemma to the tradition</span>
+            </div>
+          </form>
+      </div>
+      <div id="stemma_graph"></div>
+    </div>
+
+    <!-- Interim 'loading' message for directory box -->
+    <div id="loading_message">
+    	<h3>Calculating text phylogeny, please wait...</h3>
+    	<img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition list..."/>
+    </div>
+        
+[% PROCESS footer.tt %]
\ No newline at end of file
diff --git a/root/src/relate.tt b/root/src/relate.tt
index b01ab41..4573d8c 100644
--- a/root/src/relate.tt
+++ b/root/src/relate.tt
@@ -26,10 +26,10 @@ $(document).ready(function () {
 </script>
 [% END %]
 
-	<div id="topbanner">
-		<span class="mainnav">
-			<a href="help/[% text_lang %]" title="Relationship mapper help" class="helptag">Help / About</a> | <a href="[% c.uri_for( '/' ) %]?withtradition=[% textid %]" class="navlink">Return to index</a>
-		</span>
+  <div class="mainnav">
+	<span>[% IF c.user_exists %]Hello! [% c.user.get_object.email %]! &nbsp; <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> | [% END %]<a href="help/[% text_lang %]" title="Relationship mapper help" class="helptag navlink">Help / About</a> | <a href="[% c.uri_for( '/' ) %]?withtradition=[% textid %]" class="navlink">Return to index</a> </span>
+   </div>
+    <div id="topbanner">
 		<h1>Relationship mapper</h1>
 		<h2>[% text_title %]</h2>
 		<div id="segmentation">
diff --git a/root/src/stexaminer.tt b/root/src/stexaminer.tt
index 942965e..f4acca3 100644
--- a/root/src/stexaminer.tt
+++ b/root/src/stexaminer.tt
@@ -15,6 +15,7 @@ var readingstats = [% reading_statistics %];
 var graphdot = '[% graphdot %]';
 </script>
 [% END -%]
+  <div id="main_page" class="clearfix">
     <div id="topbanner">
         <span class="mainnav">
             <a href="help" title="Stexaminer help" class="navlink" id="aboutlink">Help / About</a> | <a href="[% c.uri_for( '/' ) %]?withtradition=[% text_id %]" title="Index" class="navlink">Return to index</a>
@@ -83,6 +84,7 @@ var graphdot = '[% graphdot %]';
             <ul class="reading_reversion_list"></ul>
         </div>
     </div>
+  </div> <!-- main_page -->
     
     <div id="options" title="Analysis options...">
         <form id="use_variants_form" name="use_variants_form">