css for nextshow is almost done (needs testing)

4 files changed, 67 insertions, 18 deletions

diff --git a/www/js/nextshows.js b/www/js/nextshows.js
index 39f61dd..0ab6c83 100644
--- a/www/js/nextshows.js
+++ b/www/js/nextshows.js
@@ -76,8 +76,8 @@ rh.ShowListView = function(model, len) {
 };
 
 rh.ShowListView.prototype.render = function() {
-  var list = $('#shows table');
-  $('tr', list).remove();
+  var list = $('#shows');
+  $('div.show', list).remove();
   this.showViews = [];
 
   var self = this;
@@ -94,23 +94,23 @@ rh.ShowView = function(model, listView) {
   this.model = model;
   this.listView = listView;
 
-  this.$el = $('<tr>');
+  this.$el = $('<div>');
 };
 
 rh.ShowView.prototype.render = function() {
-  var title = $('<td>').addClass('show-title').text(this.model.title);
-
   var startstr = "Beginn: " + format_time(this.model.start);
-  var start = $('<td>').addClass('show-start').text(startstr);
+  var start = $('<span>').addClass('show-start').text(startstr);
 
   var endstr = "Live";
   if(this.model.len > 0) {
     var end = new Date(this.model.start.valueOf() + this.model.len);
     endstr = "Ende: " + format_time(end);
   }
-  var end = $('<td>').addClass('show-end').text(endstr);
+  var end = $('<span>').addClass('show-end').text(endstr);
+
+  var title = $('<span>').addClass('show-title').text(this.model.title);
 
-  this.$el.empty().addClass('show').append(start).append(title).append(end);
+  this.$el.empty().addClass('show').append(start).append(end).append(title);
 }
 
 
diff --git a/www/nextshows.html b/www/nextshows.html
index e40a9c6..f668219 100644
--- a/www/nextshows.html
+++ b/www/nextshows.html
@@ -24,8 +24,6 @@
      </div>
 
      <div id="shows">
-       <table>
-       </table>
      </div>
    </div>
 
diff --git a/www/styles/nextshows.css b/www/styles/nextshows.css
index b45514e..73efce8 100644
--- a/www/styles/nextshows.css
+++ b/www/styles/nextshows.css
@@ -19,20 +19,22 @@
  *  along with rhrdweb. If not, see <http://www.gnu.org/licenses/>.
  */
 
-body, #container {
+body {
+  font-family: "Droid Sans", Helvetica, Arial, Sans;
   margin: 0;
   padding: 0;
-  font-size: 42px;
+  font-size: 48px;
 }
 
+
 #header {
-  background-color: #101010;
+  background-color: #36373B;
   width: 100%;
   color: white;
 }
 
 #clock {
-  padding: 0.4em;
+  padding: 0.1em;
 }
 
 #clock span {
@@ -52,3 +54,52 @@ body, #container {
   padding: 0.1em;
   font-weight: bold;
 }
+
+
+
+#shows div.show {
+  padding: 0.1em 0;
+}
+
+#shows div:nth-child(odd) {
+  background-color: white;
+}
+
+#shows div:nth-child(even) {
+  background-color: #E0E0E0;
+}
+
+div.show span {
+  font-weight: bold;
+  margin: 0.1em 0.22em;
+}
+
+div.show span.show-start, div.show span.show-end {
+  font-size: 0.75em;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+span.show-start {
+  float: left;
+}
+
+span.show-end {
+  float: right;
+}
+
+span.show-title {
+  white-space:nowrap;
+  overflow:hidden;
+  clear: both;
+  display: block;
+  text-align: center;
+}
+
+#shows div:first-child {
+  padding-bottom: 0.5em;
+}
+
+#shows div:first-child span.show-title {
+  font-size: 1.2em;
+}
diff --git a/www/weeks.html b/www/weeks.html
index 4cba4d2..0316fad 100644
--- a/www/weeks.html
+++ b/www/weeks.html
@@ -54,10 +54,10 @@
      </div>
    </div>
 
-  <script type="text/javascript">
-    clock_init();
-    calendar_init();
-  </script>
+   <script type="text/javascript">
+     clock_init();
+     calendar_init();
+   </script>
 
  </body>
 </html>