From: Tara L Andrews <tla@mit.edu>
Date: Thu, 2 Feb 2012 15:28:31 +0000 (+0100)
Subject: show loading graphic while we wait; style text list
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?p=scpubgit%2Fstemmatology.git;a=commitdiff_plain;h=56455620e2e89a240af0ad23d4fc0cc211b3ccf9

show loading graphic while we wait; style text list
---

diff --git a/stemmaweb/root/css/style.css b/stemmaweb/root/css/style.css
index 11fe773..c7d543a 100644
--- a/stemmaweb/root/css/style.css
+++ b/stemmaweb/root/css/style.css
@@ -29,18 +29,32 @@ h2 {
 	height: 450px;
 	border: 1px #c6dcf1 solid;
 }
+.traditionname {
+	text-decoration: underline;
+}
+.selected {
+	font-style: italic;
+}
 #variant_graph {
 	clear: both;
 	width: 900px;
 	height: 400px;
 	border: 1px #c6dcf1 solid;
 	overflow: auto;	
+	text-align: center;
+}
+#variant_graph img {
+	margin-top: expression(( 400 - this.height ) / 2);
 }
 #stemma_graph {
     float: left;
     width: 500px;
     height: 450px;
     border: 1px #c6dcf1 solid;
+    text-align: center;
+}
+#stemma_graph img {
+	margin-top: expression(( 450 - this.height ) / 2);
 }
 /* Additional components for the stexaminer */
 #variants_table {
diff --git a/stemmaweb/root/images/ajax-loader.gif b/stemmaweb/root/images/ajax-loader.gif
new file mode 100644
index 0000000..7f0c6ec
Binary files /dev/null and b/stemmaweb/root/images/ajax-loader.gif differ
diff --git a/stemmaweb/root/js/componentload.js b/stemmaweb/root/js/componentload.js
index e05e5c5..c9e3175 100644
--- a/stemmaweb/root/js/componentload.js
+++ b/stemmaweb/root/js/componentload.js
@@ -1,5 +1,11 @@
 function loadTradition( textid ) {
-    
+    // First insert the placeholder image
+    var imghtml = '<img src="/images/ajax-loader.gif" alt="Loading SVG..."/>'
+    $('#stemma_graph').empty();
+    $('#variant_graph').empty();
+    $('#stemma_graph').append( imghtml );
+    $('#variant_graph').append( imghtml );
+    // Then get and load the actual content.
     // TODO: scale #stemma_grpah both horizontally and vertically
     // TODO: load svgs from SVG.Jquery (to make scaling react in Safari)
 	$('#stemma_graph').load( "stemma/" + textid , function() {
diff --git a/stemmaweb/root/src/directory.tt b/stemmaweb/root/src/directory.tt
index bf49c2c..1313c4b 100644
--- a/stemmaweb/root/src/directory.tt
+++ b/stemmaweb/root/src/directory.tt
@@ -3,7 +3,7 @@
       <ul>
 [% SET i = 0 -%]
 [% FOREACH t IN texts -%]
-        <li><span class="traditionname" onClick="loadTradition('[% t.id %]')">[% t.name %]</span></li>
+        <li><span class="traditionname" onClick="$('.traditionname').removeClass('selected');$(this).addClass('selected');loadTradition('[% t.id %]')">[% t.name %]</span></li>
 [% i = i + 1 -%]
 [% END -%]
      </table>