summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorÉtienne Loks <etienne.loks@proxience.com>2015-02-24 20:42:33 +0100
committerÉtienne Loks <etienne.loks@proxience.com>2015-02-24 20:42:33 +0100
commit0185b94ec99d7d11a35349a310e57b06d55c2df3 (patch)
tree24a0223f485b4d318be2933cd0f506debcde1371
parent6bcf3e51cba6bc4211e6e64bc6e0ec03e90eed8a (diff)
downloadChimère - projet de référence-0185b94ec99d7d11a35349a310e57b06d55c2df3.tar.bz2
Chimère - projet de référence-0185b94ec99d7d11a35349a310e57b06d55c2df3.zip
CSS (especially for small screens) and JS fixes
-rw-r--r--chimere_example_static/chimere/css/extra-styles.css113
-rw-r--r--chimere_example_static/chimere/js/interface.js57
-rw-r--r--templates/chimere/blocks/actions.html10
-rw-r--r--templates/chimere/main_map.html4
4 files changed, 167 insertions, 17 deletions
diff --git a/chimere_example_static/chimere/css/extra-styles.css b/chimere_example_static/chimere/css/extra-styles.css
index 29a1c30..f5d4c3c 100644
--- a/chimere_example_static/chimere/css/extra-styles.css
+++ b/chimere_example_static/chimere/css/extra-styles.css
@@ -38,6 +38,7 @@ a:hover, a:focus {
.container{
max-width:none;
+ padding-right: 0;
}
#utils-div{
@@ -76,12 +77,15 @@ a:hover, a:focus {
background-image:url('../img/logo.jpg');
background-position:bottom center;
background-repeat:no-repeat;
+ z-index:12;
}
#detail {
right:auto;
left:0;
bottom:0;
+ top:0;
+ padding-top:100px;
border:0 transparent;
border-right:1px solid #E7E7E7;
border-top:1px solid #E7E7E7;
@@ -116,7 +120,7 @@ a:hover, a:focus {
#footer .map-footer {
bottom: 0;
- right: 400px;
+ right: 420px;
margin:0;
background-color:#fff;
opacity:0.8;
@@ -127,11 +131,11 @@ a:hover, a:focus {
}
.olControlPanPanel {
- top: 30px;
+ top: 60px;
}
.olControlZoomPanel {
- top: 95px;
+ top: 125px;
}
span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
@@ -165,6 +169,10 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
padding: 10px 15px;
}
+#areas-div{
+ line-height:42px;
+}
+
.nav-pills > li#simple_button-lnk > a > .fa{
color:#777;
}
@@ -178,7 +186,7 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
}
.navbar-default .navbar-brand{
- color:#327E04;
+ color:#54C200;
font-size:1em;
}
@@ -206,3 +214,100 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
content:"\f14e";
}
+#maps-lnk label, #contact-lnk .lbl, #simple_button-lnk .lbl, #rss-lnk .lbl{
+ display:none;
+}
+
+#permalink,
+#simple_button-lnk lbl{
+ padding: 0 0.8em;
+}
+
+@media (min-width: 1552px) {
+ #maps-lnk label,
+ #contact-lnk .lbl,
+ #rss-lnk .lbl{
+ display:inline;
+ }
+}
+
+@media (min-width: 1200px) {
+ #simple_button-lnk .lbl{
+ display:inline;
+ }
+}
+
+@media (min-width: 1100px) {
+ #panel{
+ padding-top:16px;
+ }
+ #detail{
+ padding-top:50px;
+ }
+}
+
+@media (max-width: 767px) {
+ #simple_button-lnk .lbl, #maps-lnk label, #contact-lnk .lbl, #rss-lnk .lbl{
+ display:inline-block;
+ }
+ .selection-sep{
+ width: 80%;
+ border-bottom: 1px solid #CCC;
+ margin: 0 0 0.5em 0;
+ }
+
+ #permalink-lnk,
+ #simple_button{
+ line-height: 50px;
+ }
+ #panel{
+ padding-top:16px;
+ }
+ #detail{
+ padding-top:50px;
+ }
+}
+
+.show-hide-panel{
+ position:absolute;
+ right: 400px;
+ top: 0;
+ bottom: 0;
+ background-color:#eee;
+ width:20px;
+ z-index:10;
+ color:#666;
+}
+
+.show-hide-panel:hover{
+ cursor:pointer;
+}
+
+.show-hide-panel span {
+ position:absolute;
+ left:2px;
+ top:200px;
+}
+
+#show-panel{
+ right:0;
+ display:none;
+}
+
+@media (max-width: 767px) {
+ #show-panel{
+ display:block;
+ }
+ #panel, #hide-panel{
+ display:none;
+ }
+ #footer .map-footer {
+ right:20px;
+ }
+}
+
+@media (min-height: 400px) {
+ .show-hide-panel span {
+ top:300px;
+ }
+}
diff --git a/chimere_example_static/chimere/js/interface.js b/chimere_example_static/chimere/js/interface.js
index c4fa536..c0c00bf 100644
--- a/chimere_example_static/chimere/js/interface.js
+++ b/chimere_example_static/chimere/js/interface.js
@@ -1,16 +1,11 @@
$(function(){
+
if (has_search){
$('a[href=#categories]').click(function(){
- $(this).parent().parent().children().removeClass('active');
- $(this).parent().addClass('active');
- $("#search-box").fadeOut(400,
- function(){ $("#categories").fadeIn() });
+ show_panel(display_categories);
});
$('a[href=#search-box]').click(function(){
- $(this).parent().parent().children().removeClass('active');
- $(this).parent().addClass('active');
- $("#categories").fadeOut(400,
- function(){ $("#search-box").fadeIn() });
+ show_panel(display_search);
});
$('a[href=#search-box]').click();
} else {
@@ -18,8 +13,54 @@ $(function(){
}
highlight_selected_categories();
$('.subcategory label').click(highlight_selected_categories);
+ $('#categories-lnk, #search-lnk').click(function(){
+ if($('.navbar-toggle').css('display') !='none'){
+ $(".navbar-toggle").click();
+ }
+ });
+ $('#hide-panel').click(hide_panel);
+ $('#show-panel').click(show_panel);
+ $('#close-detail').click(function(){
+ $('#detail').fadeOut();
+ });
});
+function display_categories(){
+ $('a[href=#categories]').parent().parent().children().removeClass('active');
+ $('a[href=#categories]').parent().addClass('active');
+ $("#search-box").fadeOut(400,
+ function(){ $("#categories").fadeIn(); });
+}
+
+function display_search(){
+ $('a[href=#search-box]').parent().parent().children().removeClass('active');
+ $('a[href=#search-box]').parent().addClass('active');
+ $("#categories").fadeOut(400,
+ function(){ $("#search-box").fadeIn(); $('#id_q').focus(); });
+}
+
+function show_panel(fct){
+ if(!fct) fct = function(){};
+ if($('#panel').css('display') == 'none'){
+ $('#show-panel').fadeOut(200, function(){
+ $('#hide-panel').fadeIn(500);
+ $("#panel").fadeIn(500);
+ $("#panel").fadeIn(500, fct);
+ });
+ } else {
+ fct();
+ }
+}
+
+function hide_panel(){
+ if($('#panel').css('display') != 'none'){
+ $('#hide-panel').fadeOut(500);
+ $("#panel").fadeOut(500, function(){
+ $('#show-panel').fadeIn();
+ });
+ }
+}
+
function highlight_selected_categories(){
$('.subcategory input').each(function(){
var lbl = $(this).parent();
diff --git a/templates/chimere/blocks/actions.html b/templates/chimere/blocks/actions.html
index 4c4865f..1aaf5c2 100644
--- a/templates/chimere/blocks/actions.html
+++ b/templates/chimere/blocks/actions.html
@@ -6,12 +6,12 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a class="navbar-brand" href="#"><span class='fa fa-globe'></span></a>
+ <a class="navbar-brand" href="."><span class='fa fa-globe'></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% for action, subactions in actions %}
- <li{% ifequal action.id action_selected.0 %} class="active"{% endifequal %}>
+ <li id='{{action.id}}-lnk'{% ifequal action.id action_selected.0 %} class="active"{% endifequal %}>
<a href='{{ action.url }}' onclick='jQuery("#map").chimere("saveExtent");'>
<span class='fa fa-chimere-action fa-chimere-{{action.id}}'></span>
<span class='lbl'>{{ action.label }}</span>
@@ -22,14 +22,16 @@
<div class='tabbable navbar-right'>
<ul class="nav nav-pills">
{% if is_map %}
+ <li class='selection-sep'> </li>
{% if areas_visible %}
- <li><span class='fa fa-chimere-action fa-chimere-maps'></span>{% display_areas %}</li>
+ <li id='maps-lnk'><span class='fa fa-chimere-action fa-chimere-maps'></span>{% display_areas %}</li>
<li id='permalink-lnk'><span class='fa fa-chimere-action fa-bookmark'></span><span id='permalink'></span></li>
<li>{% routing %}</li>
<li>{% display_welcome %}</li>
<li>{% display_news news_visible %}</li>
- <li id="simple_button-lnk"><a id='simple_button' href='{% url chimere:simple_index area_name_slash %}'><span class='fa fa-chimere-action fa-simplybuilt'></span> {% trans "Simple map" %}</a></li>
+ <li id="simple_button-lnk"><a id='simple_button' href='{% url chimere:simple_index area_name_slash %}'><span class='fa fa-chimere-action fa-simplybuilt'></span><span class='lbl'> {% trans "Simple map" %}</span></a></li>
{% endif %}
+ <li class='selection-sep'> </li>
<li id='categories-lnk'{% if not has_search %} class='active'{%endif%}><a href='#categories' data-toggle='panel'><span class='fa fa-chimere-action fa-check-circle-o'></span> {% trans "Categories "%}</a></li>
{% if has_search %}
<li id='search-lnk' class='active'><a href='#search-box' data-toggle='panel'><span class="glyphicon glyphicon-search"></span> {% trans "Search" %}</a></li>
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index 9d99c05..caad4b4 100644
--- a/templates/chimere/main_map.html
+++ b/templates/chimere/main_map.html
@@ -12,7 +12,9 @@
{% endblock %}
{% block message_edit %}{% endblock %}
{% block sidebar %}
- <div id='panel'class='navbar-default'>
+ <div class='show-hide-panel' id='hide-panel'><span class='fa fa-arrow-circle-right'></span></div>
+ <div class='show-hide-panel' id='show-panel'><span class='fa fa-arrow-circle-left'></span></div>
+ <div id='panel' class='navbar-default'>
<form id="frm_categories"><div id='categories'></div></form>
<div id='search-box' class='ui-widget ui-corner-all'></div>
</div>