Displaying details differently. Adding a news system.

git-svn-id: http://www.peacefrogs.net/svn/chimere/trunk@3 9215b0d5-fb2c-4bbd-8d3e-bd2e9090e864

2 files changed, 60 insertions, 9 deletions

diff --git a/static/main_map.js b/static/main_map.js
index 1d5d845..0bcf972 100644
--- a/static/main_map.js
+++ b/static/main_map.js
@@ -97,10 +97,14 @@ function putMarker(mark) {
     /*feature.closeBox = false;*/
     feature.pk = mark.properties.pk;
     feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud);
-    feature.data.popupContentHTML = "<div class='cloud'>" + mark.properties.name + "<br/>&nbsp;</div>";
+    feature.data.popupContentHTML = "<div class='cloud'>";
+    feature.data.popupContentHTML += mark.properties.name;
+    feature.data.popupContentHTML += "<br/><div id='popup_link'>\
+<a href='javascript:showDetail()'>";
+    feature.data.popupContentHTML += gettext("Show details");
+    feature.data.popupContentHTML += "</a></div></div>";
     feature.data.overflow = 'hidden';
     var marker = feature.createMarker();
-
     /* manage markers events */
     var markerClick = function (evt) {
         currentFeature = this;
@@ -145,13 +149,19 @@ function updateDetail(pk){
 /* update the detail panel from an http response */
 function setDetail(response){
     if (response.responseText.indexOf('no results') == -1) {
-        document.getElementById('detail_content').innerHTML = response.responseText;
+        document.getElementById('detail').innerHTML = response.responseText;
     }
 }
 
+
+/* show the detail windows */
+function showDetail(){
+    document.getElementById('detail').style.display = 'block';
+}
+
 /* hide content of detail panel */
 function hideDetail(){
-    document.getElementById('detail_content').innerHTML = '';
+    document.getElementById('detail').style.display = 'None';
 }
 
 /* main initialisation function */
diff --git a/static/styles.css b/static/styles.css
index a70c702..353fcbe 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -16,6 +16,10 @@ font-weight:bold;
 color:purple;
 }
 
+a{
+color:purple;
+}
+
 h2{
 font-size:16px;
 text-align:center;
@@ -30,6 +34,10 @@ border:solid 1px purple;
 border-radius: 4px;
 }
 
+h3{
+color:purple;
+}
+
 hr.spacer{
 clear:both;
 border:None;
@@ -68,6 +76,16 @@ text-decoration:None;
 color:black;
 }
 
+#footer{
+position:absolute;
+z-index:5;
+background-color:white;
+bottom:5px;
+right:5px;
+border:1px solid black;
+padding:2px;
+}
+
 #panel{
 padding:6px 10px;
 border: 1px solid black;
@@ -85,17 +103,22 @@ opacity:0.8;
 border-radius:10px;
 }
 
+#popup_link{
+text-align:center;
+}
+
 #detail{
+display:None;
 padding:6px 10px;
 border: 1px solid black;
 position:absolute;
 z-index:5;
-top:274px;
-bottom:18px;
-right:18px;
-width:250px;
+top:50px;
+bottom:58px;
+left:80px;
+right:310px;
 background-color:#FFF;
-opacity:0.8;
+opacity:0.9;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
@@ -106,6 +129,10 @@ overflow:auto;
 height:90%;
 }
 
+#detail_footer{
+text-align:center;
+}
+
 #map{
 border: 1px solid black;
 position:absolute;
@@ -115,6 +142,20 @@ left:8px;
 right:8px;
 }
 
+.news{
+}
+
+.news h3{
+padding:0px;
+margin:0;
+}
+
+.info{
+border-top:1px dashed;
+padding:10px;
+margin:0;
+}
+
 ul#categories{
 margin:0;
 padding:0;