small things

rizk/static/css/rizk.css

@@ -2,6 +2,7 @@ body {
   width: 100%;
   height: 100%;
   background: #999;
+  font-family: "DejaVu Sans", Arial, Verdana, sans-serif;
   background: -moz-radial-gradient(45px 45px 45deg, circle cover,
 				 #ABAE71 0%, #CDD53F 100%, #E6F215 95%);
   background: -webkit-gradient(radial, 45px 45px 45deg, circle cover,
@@ -174,6 +175,16 @@ a img {
   box-shadow: 0px 0px 1.5em;
   }
 
+.mediaWrap {
+  padding: 8px;
+}
+
+h2 {
+  margin: 0px;
+  padding: 0px;
+  font-weight: normal;
+}
+
 .imageWrapper .mapSelect img {
   width: 100px;
   height: 100px;

rizk/static/js/rizk.js

@@ -117,6 +117,7 @@ function displayMedia(data) {
 }
 
 function onFeatureSelect(f) {
+  $('.eventSelected').removeClass('eventSelected');
   if (currentlySelectedFeature == f) {
     return false;
   } else {

rizk/templates/rizk.html

@@ -23,8 +23,8 @@
 
 
   <script type="text/html" id="tmpl_images">
-<div class="imagesWrapper">
-  <% if (images.length > 0) { %> Images from FlickR: <% } %> <br />
+<div class="imagesWrapper mediaWrap">
+  <% if (images.length > 0) { %> <h2>Images from FlickR:</h2> <% } %> <br />
   <% for (var i=0; i<images.length;i++) { var img = images[i]; %>
     <div class="imageWrapper">
       <a href="<%= img.sizes[3].source %>" class="flickrImage mediaThumb" title="<%= img.photoInfo.title %>" data-id="<%= img.id %>" data-location="<%= img.location.id %>" data-event="<%= img.event.id %>" rel="group_<%= img.id %>">
@@ -37,8 +37,8 @@
   </script>
 
   <script type="text/html" id="tmpl_youtubes">
-<div class="videosWrapper">
-  <% if (videos.length > 0) { %> Videos from YouTube: <% } %> <br />
+<div class="videosWrapper mediaWrap">
+  <% if (videos.length > 0) { %> <h2>Videos from YouTube:</h2> <% } %> <br />
   <% for (var i=0; i<videos.length;i++) { var vid = videos[i]; %>
     <div class="videoWrapper">
       <a href="<%= vid.url %>" target="_blank" class="youtubeVideo mediaThumb" title="<%= vid.info.description %>" data-id="<%= vid.id %>" data-event="<%= vid.event.id %>" data-location="<%= vid.location.id %>" rel="group_<%= vid.id %>">
@@ -51,7 +51,7 @@
   </script>
 
   <script type="text/html" id="tmpl_texts">
-<div class="textsWrapper">
+<div class="textsWrapper mediaWrap">
   <% for (var i=0; i<texts.length;i++) { var txt = texts[i]; %>
     <p class="textWrapper flyoverImage" data-id="<%= txt.flyover.id %>">
       <%= txt.text %>
@@ -61,7 +61,9 @@
   </script>
 
   <script type="text/html" id="tmpl_padmas">
-    <% if (videos.length > 0) { %> Videos from Pad.ma <% } %>:
+    <div class="padmasWrapper mediaWrap">
+      <% if (videos.length > 0) { %> <h2>Videos from Pad.ma:</h2> <% } %>
+    </div>
   </script>
 
 <script type="text/html" id="tmpl_about">