improved html5 element usage

2 files changed, 31 insertions, 13 deletions

diff --git a/www/js/specials.js b/www/js/specials.js
index 5d8b855..51d83f1 100644
--- a/www/js/specials.js
+++ b/www/js/specials.js
@@ -121,24 +121,31 @@ rh.ShowView = function(model, listView) {
 };
 
 rh.ShowView.prototype.render = function() {
-  var id = $('<span>').addClass('show-start').text(this.model.id);
-  var pvstr = "unused";
+  var id = $('<span>').addClass('show-id').text(this.model.id);
+
+  var showlink = $('<a>').attr('href', "https://import.helsinki.at/shows/" + this.model.id)
+                         .attr('target', "import").text(this.model.title);
+  var title = $('<span>').addClass('show-title').append(showlink);
+
   if(this.model.pv_id >= 0) {
+    var pvlink = $('<a>').attr('href', "https://pv.helsinki.at/admin/program/show/" + this.model.pv_id)
+                         .attr('target', "import").text(this.model.pv_name);
+
+    var pvtitle = $('<span>').addClass('pv-title').append(pvlink);
+
     var start_end = format_datetime(this.model.pv_start) + " - ";
     if(compare_date(this.model.pv_start, this.model.pv_end)) {
       start_end += format_time(this.model.pv_end);
     } else {
       start_end += format_datetime(this.model.pv_end);
     }
-    pvstr = this.model.pv_id + " | " + this.model.pv_name + " (" + start_end + ")";
-  }
-  var len = $('<span>').addClass('show-len').text(pvstr);
-
-  var showlink = $('<a>').attr('href', "https://import.helsinki.at/shows/" + this.model.id)
-                         .attr('target', "import").text(this.model.title);
-  var title = $('<span>').addClass('show-title').append(showlink);
+    var pvtimes = $('<span>').addClass('pv-time').text(start_end);
 
-  this.$el.empty().addClass('show').append(id).append(title).append(len);
+    this.$el.empty().addClass('show').append(id).append(title).append(pvtitle).append(pvtimes);
+  } else {
+    var pv = $('<span>').addClass('pv-unused').text("unused");
+    this.$el.empty().addClass('show').append(id).append(title).append(pv);
+  }
 }
 
 
diff --git a/www/styles/specials.css b/www/styles/specials.css
index 7898dc1..82fa640 100644
--- a/www/styles/specials.css
+++ b/www/styles/specials.css
@@ -62,18 +62,29 @@ div.show span {
   font-weight: bold;
 }
 
+div.show span.show-id {
+  font-size: 0.75em;
+  margin-left: 5em;
+  margin-right: 1em;
+}
+
 div.show span.show-title {
   white-space:nowrap;
   overflow:hidden;
 }
 
-div.show span.show-start {
+div.show span.pv-title {
+  margin-left: 0.2em;
+  margin-right: 1em;
+}
+
+div.show span.pv-time {
   font-size: 0.75em;
-  margin-left: 5em;
+  margin-left: 0.2em;
   margin-right: 1em;
 }
 
-div.show span.show-len {
+div.show span.pv-unused {
   font-size: 0.75em;
   margin-left: 0.2em;
   margin-right: 1em;