Many changes on templates and styles

2 files changed, 310 insertions, 324 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index b56b2ab..fbc2704 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -1,520 +1,504 @@
-/* colors definition */
+/* color definition */
 
 a, a:link, a:visited, legend{
-color: #5b80b2;
+    color: #5b80b2;
 }
 
-/**/
+.errorlist,
+.detail_footer a,
+#categories li#display_submited,
+.simple .cloud h2 {
+    color:#54c200;
+}
 
-body{
-background-color:#b488ff;
-font-family:arial;
-font-size:80%;
+h2,
+#action li,
+#action li a,
+#action li li a,
+#welcome_button a, .ui-widget-header,
+.olControlPermalink a {
+    color:#fff;
 }
 
-fieldset{
-background-color:#FFF;
--moz-border-radius: 10px;
--webkit-border-radius: 10px;
-border-radius: 10px;
+h4{
+    color:#5e1e68;
 }
 
-fieldset p{
-margin:4px 8px;
+#action li.ui-state-active a,
+#action li li.ui-state-active a{
+    color:#333;
 }
 
-legend{
-font-weight:bold;
+/* backgroundcolor definition */
+
+body, h2, h3,
+.ui-widget-header,
+#action li.selected,
+#welcome_button,
+.olControlPermalink{
+    background-color:#4ea30d;
 }
 
-h2{
-font-size:16px;
-text-align:center;
-margin:0;
-margin-bottom:10px;
-padding:0;
-width:100%;
-color:white;
-background-color:#b488ff;
--moz-border-radius: 4px;
--webkit-border-radius: 4px;
-border-radius: 4px;
+.ui-widget-header{
+    background-image:None;
+}
+
+fieldset, #action li, #content,
+#map-footer, #panel, #areas,
+#welcome, #detail, .detail_footer a,
+#map, .window{
+    background-color:#FFF;
+}
+
+div.warning{
+    background-color:#dbffdb;
+}
+
+.simple .cloud h2{
+    background-color:transparent;
 }
 
+#action li.selected{
+    border:1px solid #54c200;
+}
+
+#areas, #detail, #map,
+div.warning,
+#content,
+#action li.selected,
+#panel, #map-footer{
+    border:1px solid #327e04;
+}
+
+/* opacity */
+
+#welcome{
+    opacity:0.9;
+}
+
+#panel, #areas, #detail, #category_detail{
+    opacity:0.8;
+}
+
+/* rounded */
+
+/* entête */
+/*
 #areas h2, #panel h2{
--moz-border-radius: 4px 4px 0 0;
--webkit-border-radius: 4px 4px 0 0;
-border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+    -webkit-border-radius: 4px 4px 0 0;
+    border-radius: 4px 4px 0 0;
 }
 
-h3{
-color:#b488ff;
+
+h2, #action li, .detail_footer{
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
 }
 
-h4{
-color:#5e1e68;
-font-weight:normal;
-font-style:italic;
+fieldset, #content, #panel,
+#areas, #welcome, #detail,
+#category_detail, div.warning{
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
 }
+*/
+/**/
 
-hr.spacer{
-clear:both;
-border:None;
-visibility: hidden;
+.draggable h2{
+    cursor:move;
 }
 
-fieldset{
-margin-top:8px;
+body{
+    font-family:arial;
+    font-size:80%;
 }
 
-.edit label{
-display:block;
+fieldset p{
+    margin:4px 8px;
 }
 
-ul#action{
-position:absolute;
-z-index:5;
-list-style-type:none;
-top:20px;
-left:80px;
-margin:0;
-padding:3px;
-padding-left:0;
+legend{
+    font-weight:bold;
 }
 
-#action li{
-font-size:15px;
-display:inline;
-padding:1px 5px;
-margin-right:6px;
-border:1px solid #888;
--moz-border-radius: 4px;
--webkit-border-radius: 4px;
-border-radius: 4px;
-background-color:#FFF;
+h2{
+    font-size:16px;
+    text-align:center;
+    margin:6px;
+    padding-top: 0.4em;
+    padding-right: 1em;
+    padding-bottom: 0.4em;
+    padding-left: 1em;
+    position: relative;
 }
 
-#action li.selected{
-background-color:#b488ff;
-border-color:#b488ff;
-color:white;
+h4{
+    font-weight:normal;
+    font-style:italic;
 }
 
-#action a{
-text-decoration:None;
-color:black;
+hr.spacer{
+    clear:both;
+    border:None;
+    visibility: hidden;
 }
 
-#action li ul{
-margin:14px 12px;
-position:absolute;
-width:600px;
+fieldset{
+    margin-top:8px;
+}
+
+.edit label{
+    display:block;
+}
+
+ul#action{
+    position:absolute;
+    z-index:5;
+    list-style-type:none;
+    top:20px;
+    left:80px;
+    margin:0;
+    padding:3px;
+    padding-left:0;
 }
 
-#action li.selected a{
-color:white;
+#action li{
+    font-weight:normal;
+    display:inline;
+    padding:3px 7px;
+    margin-right:6px;
 }
 
-#action li.selected li a{
-color:black;
+#action a{
+    text-decoration:None;
 }
 
-#action li.selected li.selected a{
-color:white;
+#action li ul{
+    margin:14px 12px;
+    position:absolute;
+    width:600px;
 }
 
 #content{
-margin:4px;
-margin-top:14px;
-padding:20px;
-padding-top:46px;
-background-color:white;
--moz-border-radius: 10px;
--webkit-border-radius: 10px;
-border-radius: 10px;
-border:1px solid #888;
+    margin:4px;
+    margin-top:14px;
+    padding:20px;
+    padding-top:46px;
 }
 
 #footer{
-text-align:center;
+    text-align:center;
 }
 
 #map-footer{
-position:absolute;
-z-index:5;
-background-color:white;
-bottom:5px;
-right:5px;
-border:1px solid #888;
-padding:2px;
+    position:absolute;
+    z-index:5;
+    bottom:5px;
+    right:5px;
+    padding:2px;
 }
 
 #panel{
-padding:0;
-border:1px solid #888;
-position:absolute;
-z-index:5;
-top:50px;
-right:18px;
-width:300px;
-background-color:#FFF;
-opacity:0.8;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
+    padding:0;
+    position:absolute;
+    z-index:5;
+    top:50px;
+    right:18px;
+    width:300px;
 }
 
 .simple #panel{
-top:5px;
+    top:5px;
 }
 
 #areas{
-padding:0;
-border:1px solid #888;
-height:115px;
-position:absolute;
-z-index:5;
-bottom:105px;
-left:18px;
-width:200px;
-background-color:#FFF;
-opacity:0.8;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
-overflow:auto;
+    padding:0;
+    height:115px;
+    position:absolute;
+    z-index:5;
+    bottom:105px;
+    left:18px;
+    width:200px;
+    overflow:auto;
 }
 
 #areas ul{
-margin:0;
-padding:0 10px;
+    margin:0;
+    padding:0 10px;
 }
 
 #areas  li{
-list-style:none;
+    list-style:none;
 }
 
 #popup_link{
-text-align:center;
+    text-align:center;
 }
 
+/*
 #welcome{
-padding:6px 10px;
-border:1px solid #888;
-position:absolute;
-z-index:5;
-top:50px;
-bottom:102px;
-left:80px;
-margin-right:360px;
-background-color:#FFF;
-opacity:0.9;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
-}
+    padding:6px 10px;
+    position:absolute;
+    z-index:5;
+    top:50px;
+    bottom:102px;
+    left:80px;
+    margin-right:360px;
+}*/
 
 #detail{
-display:None;
-padding:6px 10px;
-border:1px solid #888;
-position:absolute;
-z-index:5;
-top:274px;
-bottom:38px;
-right:18px;
-width:300px;
-background-color:#FFF;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
+    display:none;
+    padding:0;
+    position:absolute;
+    z-index:5;
+    top:274px;
+    bottom:38px;
+    right:18px;
+    width:300px;
+}
+
+#detail div{
+    margin:4px 8px;
 }
 
 #detail_content{
-overflow:auto;
-height:90%;
+    overflow:auto;
+    height:90%;
 }
 
 #detail_content img{
-width:280px;
+    width:280px;
 }
 
 ul#share{
-list-style-type:none;
-margin:0;
-padding:0;
+    list-style-type:none;
+    margin:0;
+    padding:0;
 }
 
 ul#share li{
-display:inline;
-line-height:22px;
-vertical-align: bottom;
+    display:inline;
+    line-height:22px;
+    vertical-align: bottom;
 }
 
 #share a{
-text-decoration:None;
+    text-decoration:None;
 }
 
 #share img{
-border:None;
-width:22px;
-height:22px;
-}
-
-#welcome h2{
-padding:10px 0;
+    border:None;
+    width:22px;
+    height:22px;
 }
 
 .detail_footer{
-text-align:center;
-position:absolute;
-top:15px;
-right:18px;
+    text-align:center;
+    position:absolute;
+    top:15px;
+    right:18px;
 }
 
 .detail_footer a{
-color:#b488ff;
-padding:2px;
-background-color:#FFF;
-border:1px solid;
-display:block;
-text-decoration:None;
--moz-border-radius:4px;
--webkit-border-radius:4px;
-border-radius:4px;
-}
-
-#category_detail{
-display:None;
-padding:6px 10px;
-border:1px solid #888;
-position:absolute;
-z-index:5;
-top:120px;
-bottom:180px;
-left:100px;
-right:50px;
-margin-right:360px;
-background-color:#FFF;
-opacity:0.9;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
-}
-
-#category_detail h2{
-padding:10px 0;
+    padding:2px;
+    display:block;
+    text-decoration:None;
 }
 
+#category_title{
+    display:none;
+}
 
 #category_desc_content{
-overflow:auto;
-height:88%;
+    overflow:auto;
+    height:88%;
 }
 
 #map{
-position:absolute;
-background-color:white;
-border:1px solid #888;
-margin:0px;
-padding:0px;
-height:98%;
-margin:0;
-padding:0;
-top:8px;
-bottom:8px;
-left:8px;
-right:8px;
-z-index:0;
+    position:absolute;
+    margin:0px;
+    padding:0px;
+    height:98%;
+    margin:0;
+    padding:0;
+    top:8px;
+    bottom:8px;
+    left:8px;
+    right:8px;
+    z-index:0;
 }
 
 .simple #map{
-margin:0px;
-padding:0px;
-height:100%;
-margin:0;
-padding:0;
-top:0;
-bottom:0;
-left:0;
-right:0;
-z-index:0;
-}
-
-.news{
+    margin:0px;
+    padding:0px;
+    height:100%;
+    margin:0;
+    padding:0;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    z-index:0;
 }
 
 .news h3{
-padding:0px;
-margin:0;
+    padding:0px;
+    margin:0;
 }
 
 .info{
-border-top:1px dashed;
-padding:10px;
-margin:0;
+    border-top:1px dashed;
+    padding:10px;
+    margin:0;
 }
 
 #panel #categories{
-margin:0;
-padding:0;
-width:290px;
-height:160px;
-overflow:auto;
-z-index:5;
+    margin:0;
+    padding:0;
+    width:290px;
+    height:160px;
+    overflow:auto;
+    z-index:5;
 }
 
 .simple #panel #categories{
-display:None;
+    display:None;
 }
 
 #categories input {
-padding: 0;
-margin:0;
-vertical-align: bottom;
+    padding: 0;
+    margin:0;
+    vertical-align: bottom;
 }
 
 #categories > ul{
-margin:0;
-padding:0 10px;
-overflow:auto;
-height:160px;
-width:270px;
+    margin:0;
+    padding:0 10px;
+    overflow:auto;
+    height:160px;
+    width:270px;
 }
 
 #categories li{
-font-variant:small-caps;
-list-style:none;
+    font-variant:small-caps;
+    list-style:none;
 }
 
 #categories li li{
-font-variant:normal;
-margin-left:20px;
+    font-variant:normal;
+    margin-left:20px;
 }
 
 ul#categories li li a{
-line-height:25px;
-margin-left:0;
-font-weight:bold;
+    line-height:25px;
+    margin-left:0;
+    font-weight:bold;
 }
 
 #categories ul ul{
-margin:0;
-padding:0;
+    margin:0;
+    padding:0;
 }
 
 ul.subcategories label img{
-height:20px;
+    height:20px;
 }
 
 #categories li#display_submited{
-font-variant:normal;
-color:#b488ff;
+    font-variant:normal;
 }
 
 .zoom_image{
-cursor:pointer;
+    cursor:pointer;
 }
 
 .control_image{
-cursor:pointer;
-vertical-align:text-bottom;
+    cursor:pointer;
+    vertical-align:text-bottom;
 }
 
 .errorlist{
-color:#b488ff;
-font-weight:bold;
+    font-weight:bold;
 }
 
 .fieldWrapper{
-padding:6px;
+    padding:6px;
 }
 
 div.warning{
-margin-top:18px;
-padding:0 10px;
-border:1px solid #888;
--moz-border-radius: 10px;
--webkit-border-radius: 10px;
-border-radius: 10px;
-background-color:#ffdbdb;
+    margin-top:18px;
+    padding:0 10px;
 }
 
 p.warning{
-text-align:center;
+    text-align:center;
 }
 
 #welcome_button {
-display: block;
-position: absolute;
-bottom:40px;
-left:29px;
-width:180px;
-font-size:small;
-background-color:#b488ff;
-text-align:center;
-z-index:4;
+    display: block;
+    position: absolute;
+    bottom:40px;
+    left:29px;
+    width:180px;
+    font-size:small;
+    text-align:center;
+    z-index:4;
 }
 
 #welcome_button a{
-color:white;
-font-size:14px;
-text-align:center;
-text-decoration:none;
+    font-size:14px;
+    text-align:center;
+    text-decoration:none;
 }
 
 /* openlayer customisation */
 .olControlPermalink {
-display: block;
-position: absolute;
-bottom:12px;
-left:20px;
-width:180px;
-font-size:small;
-background-color:#b488ff;
-text-align:center;
+    display: block;
+    position: absolute;
+    bottom:12px;
+    left:20px;
+    width:180px;
+    font-size:small;
+    text-align:center;
 }
 
 .simple .olControlPermalink {
-display:None;
+    display:None;
 }
 
 .olControlPermalink a{
-color:white;
-font-size:14px;
-text-align:center;
-text-decoration:none;
+    font-size:14px;
+    text-align:center;
+    text-decoration:none;
 }
 
 .olControlScaleLine {
-bottom:12px;
-left:220px;
+    bottom:12px;
+    left:220px;
 }
 
 .simple .olControlScaleLine {
-bottom:50px;
-left:10px;
+    bottom:50px;
+    left:10px;
 }
 
 .simple .olControlPanPanel{
-top:40px;
+    top:40px;
 }
 
 .simple .olControlZoomPanel{
-top:100px;
+    top:100px;
 }
 
 .simple .cloud h2{
-font-size:14px;
-text-align:center;
-margin:0;
-padding:0;
-background-color:transparent;
-color:#b488ff;
+    font-size:14px;
+    text-align:center;
+    margin:0;
+    padding:0;
 }
 
 .simple .cloud img{display:None;}
 
-.window{
-background-color:#FFF;
-}
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index fdac708..fb0e0bd 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -421,7 +421,9 @@ See the file COPYING for details.
             var uri = extra_url + "getDescriptionDetail/" + category_id;
             $.ajax({url:uri,
                         success: function (data) {
-                            $("#category_detail").html(data).show();
+                            $("#category_detail").html(data).dialog();
+                            $("#category_detail").dialog( "option", "title",
+                                    $("#category_title").html());
                         }
                   });
         },