/trunk/widget/modules/cartopoint/squelettes/css/carto.css |
---|
32,6 → 32,9 |
color:#56B80E; |
border-bottom:1px dotted #56B80E; |
} |
img { |
border:none; |
} |
/*+-----------------------------------------------------------------------------------------------------------------+*/ |
/* Présentation des listes de définitions */ |
dl { |
101,6 → 104,11 |
hr.nettoyage{ |
visibility:hidden; |
} |
.element-overlay { |
background-color: #DDDDDD; |
border:1px solid grey; |
} |
/*+-----------------------------------------------------------------------------------------------------------------+*/ |
/* Carte */ |
#carte { |
129,9 → 137,22 |
} |
/*+-----------------------------------------------------------------------------------------------------------------+*/ |
/* Message de chargement */ |
#zone-chargement-point { |
display: none; |
background-color: white; |
height: 70px; |
padding: 10px; |
position: fixed; |
text-align: center; |
width: 230px; |
z-index: 3000; |
} |
#chargement { |
margin:25px; |
text-align:center; |
} |
#chargement img{ |
display:block; |
147,6 → 168,13 |
background-image: url("../images/attention.png"); |
background-position: 50% 10px; |
background-repeat: no-repeat; |
display: none; |
height: 70px; |
padding: 10px; |
position: fixed; |
text-align: center; |
width: 230px; |
z-index: 3000; |
} |
/*+-----------------------------------------------------------------------------------------------------------------+*/ |
173,10 → 201,9 |
#zone-titre, #zone_stats { |
padding:0; |
position:relative; |
position:absolute; |
height:25px; |
overflow:hidden; |
background-color:#F5F5F5; |
border-radius: 4px; |
z-index: 3000; |
display: inline-block; |
186,7 → 213,6 |
font-size: 1.1em; |
font-weight: bold; |
text-rendering: optimizelegibility; |
border: 1px solid rgba(0, 0, 0, 0.05); |
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset; |
} |
197,8 → 223,6 |
right:8px; |
width: 25px; |
text-align:right; |
background-color: #F5F5F5; |
border: 1px solid rgba(0, 0, 0, 0.05); |
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset; |
border-radius: 5px 5px 5px 5px; |
} |
207,12 → 231,19 |
border: none; |
} |
#zone-info img { |
display:inline; |
padding:4px; |
margin:0; |
border:none; |
#logo { |
left: 2px; |
padding: 4px; |
position: absolute; |
top: 5px; |
z-index: 3002; |
} |
#logo a { |
border-bottom: none; |
} |
#carte-titre { |
display:inline-block; |
margin:0; |
228,14 → 259,12 |
padding:0; |
margin:0; |
position:absolute; |
top: 75px; |
left:0; |
bottom:0; |
width: 83px; |
overflow:hidden; |
background-color:#F5F5F5; |
border:1px solid grey; |
height: 65px; |
position: relative; |
height: 25px; |
z-index: 3001; |
border-top-right-radius : 10px; |
border-bottom-right-radius : 10px; |
243,6 → 272,7 |
#pl-indication-filtre { |
margin-left : 25px; |
padding : 3px; |
font-weight: bold; |
} |
#pl-contenu { |
display:none; |
285,7 → 315,7 |
#taxons { |
color:black; |
} |
#taxons .taxon-actif, #taxons .taxon-actif span { |
#taxons .taxon-actif, #taxons .taxon-actif span, .raz-filtre-taxons.taxon-actif { |
color:#56B80E; |
} |
#taxons li span, .raz-filtre-taxons { |
314,7 → 344,6 |
height:25px; |
bottom:20px; |
overflow:hidden; |
background-color:#F5F5F5; |
border-radius: 4px; |
z-index: 3000; |
display: inline-block; |
324,7 → 353,6 |
font-size: 1.1em; |
font-weight: bold; |
text-rendering: optimizelegibility; |
border: 1px solid rgba(0, 0, 0, 0.05); |
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset; |
} |
332,12 → 360,10 |
margin-top: 0; |
} |
#lien_plein_ecran, #lien_voir_cc { |
position: fixed; |
#lien_plein_ecran, #lien-voir-cc { |
position: absolute; |
z-index: 3000; |
background-color:#F5F5F5; |
border-radius: 4px; |
border: 1px solid rgba(0, 0, 0, 0.05); |
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset; |
padding: 8px 8px 4px; |
font-size: 1.1em; |
349,7 → 375,7 |
left: 5px; |
} |
#lien_plein_ecran a, #lien_voir_cc a { |
#lien_plein_ecran a, #lien-voir-cc a { |
color: black; |
padding: 2px; |
border-bottom: none; |
359,7 → 385,7 |
height: 20px; |
} |
#lien_voir_cc { |
#lien-voir-cc { |
bottom: 3px; |
right: 5px; |
bottom: 20px; |
366,6 → 392,42 |
height: 20px; |
} |
#origine-donnees { |
-moz-user-select: none; |
background: -moz-linear-gradient(center , rgba(255, 255, 255, 0) 0pt, rgba(255, 255, 255, 0.5) 50px) repeat scroll 0 0 transparent; |
color: #444444; |
direction: ltr; |
font-family: Arial,sans-serif; |
font-size: 10px; |
font-weight: bold; |
height: 19px; |
line-height: 19px; |
padding-left: 50px; |
padding-right: 2px; |
bottom: 0px; |
position: absolute; |
text-align: right; |
white-space: nowrap; |
z-index: 3001; |
} |
#origine-donnees a { |
color: #444444; |
cursor: pointer; |
text-decoration: underline; |
border-bottom: none; |
} |
#origine-donnees a:active, #origine-donnees a:visited { |
border-bottom: 1px dotted #666666; |
color: #CCCCCC; |
text-decoration: none; |
} |
#origine-donnees a:visited { |
border-bottom: 1px dotted #666666; |
color: #444444; |
text-decoration: none; |
} |
/*+-----------------------------------------------------------------------------------------------------------------+*/ |
/* Pop-up observations */ |
#info-bulle{ |
/trunk/widget/modules/cartopoint/squelettes/carte_defaut.tpl.html |
---|
82,81 → 82,46 |
</head> |
<body> |
<div id="zone-chargement-point" style="background-color: white;border: 5px solid #D7DBEA;display: none; |
height: 70px; |
padding: 10px; |
position: fixed; |
text-align: center; |
width: 230px; |
z-index: 3000;"> |
<div id="zone-chargement-point" class="element-overlay" class="element-overlay"> |
<img src="<?=$url_base?>modules/cartopoint/squelettes/images/chargement.gif" alt="Chargement en cours..." /> |
<p> Chargement des points en cours... </p> |
</div> |
<div id="message-aucune-obs" style="background-color: white;border: 5px solid #D7DBEA;display: none; |
height: 70px; |
padding: 10px; |
position: fixed; |
text-align: center; |
width: 230px; |
z-index: 3000;"> |
<div id="message-aucune-obs" class="element-overlay"> |
<p> Aucune observation n'a été entrée pour les critères demandés ou pour la zone visible </p> |
</div> |
<?php if($titre !== "0") : ?> |
<?php if($titre === null && $logo === null) { ?> |
<div id="zone-titre"> |
<?php if($logo != null) { ?> |
<div id="logo"> |
<?php if($url_site != null) { ?> |
<a href="<?= $url_site; ?>" |
title="<?= $url_site; ?>" |
onclick="ouvrirNouvelleFenetre(this, event)"> |
<img class="image-logo" src="<?= $logo ?>" alt="logo" /> |
</a> |
<?php } else { ?> |
<img class="image-logo" src="<?= $logo ?>" alt="logo" /> |
<?php } ?> |
</div> |
<?php } else { ?> |
<div id="logo"> |
<a href="http://www.tela-botanica.org/site:accueil" |
title="Aller à l'accueil de Tela Botanica" |
onclick="ouvrirNouvelleFenetre(this, event)"> |
<img class="image-logo" src="http://www.tela-botanica.org/sites/commun/generique/images/logos/logo_tela.gif" alt="TB" /> |
</a> |
</div> |
<?php } ?> |
<?php if($titre !== "0" && $titre != null) : ?> |
<div id="zone-titre" class="element-overlay"> |
<h1 id="carte-titre"> |
<span id="logo"> |
<a href="http://www.tela-botanica.org/site:accueil" |
title="Aller à l'accueil de Tela Botanica" |
onclick="ouvrirNouvelleFenetre(this, event)"> |
<img src="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.png" alt="TB" /> |
</a> |
</span> |
<span id="carte-titre-infos">Cartographie</span> |
- <a href="http://www.tela-botanica.org/page:cel" |
title="Carnet en Ligne" |
onclick="ouvrirNouvelleFenetre(this, event)"> |
CEL |
</a> |
(<a href="http://www.tela-botanica.org/" onclick="ouvrirNouvelleFenetre(this, event)">Tela Botanica</a>) |
<span id="carte-titre-infos"><?= htmlspecialchars($titre); ?></span> |
</h1> |
</div> |
<?php } else { ?> |
<div id="zone-titre"> |
<h1 id="carte-titre"> |
<?php if($logo != null) : ?> |
<span id="logo"> |
<?php if($url_site != null) { ?> |
<a href="<?= $url_site; ?>" |
title="<?= $url_site; ?>" |
onclick="ouvrirNouvelleFenetre(this, event)"> |
<img src="<?= $logo ?>" alt="logo" /> |
</a> |
<?php } else { ?> |
<img src="<?= $logo ?>" alt="logo" /> |
<?php } ?> |
</span> |
<?php endif; ?> |
<?php if($titre != null) : ?> |
<span id="carte-titre-infos"><?= htmlspecialchars($titre); ?></span> |
<?php endif; ?> |
</h1> |
</div> |
<?php } ?> |
<?php endif; ?> |
<div id="zone-info"> |
<a href="<?=$url_base?>cartoPoint?carte=avertissement" |
onClick="ouvrirPopUp(this, 'Avertissement', event)"> |
<img src="<?=$url_base?>modules/cartopoint/squelettes/images/information.png" |
alt="Avertissements" title="Avertissements & informations" /> |
</a> |
</div> |
<? if ($num_taxon == '*') : ?> |
<div id="panneau-lateral" <?= ($titre != 0) ? 'class="carte_titree"': 'class="carte_non_titree"'; ?>> |
<div id="panneau-lateral" class="element-overlay <?= ($titre != 0) ? 'carte_titree"': 'carte_non_titree"'; ?>> |
<div id="pl-ouverture" title="Ouvrir le panneau latéral"> |
<span>Panneau >></span> |
<div id="pl-indication-filtre"> Filtrer par <br /> |
plantes |
<div id="pl-indication-filtre"> Filtrer |
</div> |
</div> |
<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div> |
176,18 → 141,24 |
</div> |
<? endif ?> |
<div id="carte" <?= ($titre != 0) ? 'class="carte_titree"': 'class="carte_non_titree"'; ?>></div> |
<div id="lien_plein_ecran" > |
<div id="lien_plein_ecran" class="element-overlay"> |
<a href="#" title="Voir en plein écran (s'ouvre dans une nouvelle fenêtre)"> |
<img class="icone" src="<?=$url_base?>modules/cartopoint/squelettes/images/plein_ecran.png" alt="Voir en plein écran" /> |
</a> |
</div> |
<div id="zone-stats" style="display:none"> |
<div id="zone-stats" style="display:none" class="element-overlay"> |
<h1> |
</h1> |
</div> |
<div id="lien_voir_cc" > |
<a href="http://www.tela-botanica.org/page:licence" title="Voir les conditions d'utilisations de ces données issues du carnet en ligne (Tela botanica)"> |
<img class="icone" src="http://mirrors.creativecommons.org/presskit/icons/cc.png" alt="Données issues du carnet en ligne (Tela botanica)" /> |
<div id="origine-donnees"> |
Observations du réseau <a href="http://www.tela-botanica.org/site:botanique" |
onClick="ouvrirPopUp(this, 'Avertissement', event)"> |
Tela Botanica |
</a> |
</div> |
<div id="lien-voir-cc" class="element-overlay"> |
<a href="<?=$url_base?>cartoPoint?carte=avertissement" title="Voir les informations et conditions d'utilisation de ce widget"> |
? |
</a> |
</div> |
344,8 → 315,8 |
<!-- Squelette de la liste des taxons --> |
<script id="tpl-taxons-liste" type="text/x-jquery-tmpl"> |
<span class="raz-filtre-taxons" title="Déselectionner tous les taxons filtrés"> |
Déselectionner tous les taxons filtrés |
<span class="raz-filtre-taxons taxon-actif" title="Voir tous les taxons"> |
Voir tous les taxons |
</span> |
<ol id="taxons"> |
{{each(index, taxon) taxons}} |
/trunk/widget/modules/cartopoint/squelettes/scripts/carto.js |
---|
128,7 → 128,7 |
stats += ' sur '+(stationNbre+ communeNbre)+' station'; |
stats += (stationNbre > 1) ? 's' : '' ; |
if (nt == '*') { |
stats += ' parmi '+plteNbreFormate+' plante'; |
stats += (plteNbre > 1) ? 's' : '' ; |
146,7 → 146,6 |
} |
} |
$('#pl-indication-filtre').html('Filtrer parmi <br />'+plteNbre+'<br />plantes'); |
$('#zone-stats').show(); |
$('#zone-stats > h1').text(stats); |
} |
167,8 → 166,8 |
event.preventDefault(); |
}); |
$('#lien_voir_cc a').click(function(event) { |
window.open($(this).attr('href')); |
$('#lien-voir-cc a').click(function(event) { |
ouvrirPopUp(this, 'Avertissement', event); |
event.preventDefault(); |
}); |
} |
176,26 → 175,22 |
function definirTailleOverlay() { |
var largeurViewPort = $(window).width(); |
var taille = '1.6'; |
var tailleMaxLogo = 50; |
var tailleMaxIcones = 20; |
var tailleMaxLogo = 60; |
var tailleMaxIcones = 10; |
var padding_icones = 8; |
var tailleFiltre = 80; |
if (largeurViewPort <= 500) { |
taille = '0.8'; |
tailleMaxLogo = 20; |
taille = '1.2'; |
tailleMaxIcones = 10; |
tailleFiltre = 60; |
padding_icones = 2; |
tailleFiltre = 65; |
padding_icones = 2; |
} else if (largeurViewPort > 500 && largeurViewPort <= 800) { |
taille = '1.0'; |
tailleMaxLogo = 40; |
taille = '1.4'; |
tailleMaxIcones = 15; |
padding_icones = 6; |
tailleFiltre = 60; |
tailleFiltre = 65; |
} else if (largeurViewPort > 800) { |
taille = '1.6'; |
tailleMaxLogo = 50; |
tailleMaxIcones = 20; |
padding_icones = 8; |
tailleFiltre = 80; |
204,50 → 199,45 |
// Aménagement de la taille de police selon l'écran |
$("#carte-titre").css('font-size', taille+'em'); |
$("#zone-stats h1").css('font-size', taille+'em'); |
$("#zone-stats").css('padding', padding_icones+"px "+padding_icones+"px "+Math.round(padding_icones/4)+"px"); |
$("#zone-stats h1").css('font-size', Math.round((taille*0.75*100)/100)+'em'); |
$("#zone-stats").css('padding', padding_icones+"px "+padding_icones+"px "+Math.round(padding_icones/4)+"px"); |
$('#zone-stats').height(tailleMaxIcones*1.5); |
$("#zone-titre h1").css('font-size', (taille)+'em'); |
$("#zone-titre").css('padding', padding_icones+"px "+padding_icones+"px "+Math.round(padding_icones/4)+"px"); |
$('#zone-titre').height(tailleMaxIcones*2); |
$('.icone').height(tailleMaxIcones); |
$('#lien_plein_ecran').css("padding", padding_icones+"px "+padding_icones+"px "+Math.ceil(padding_icones/2)+"px"); |
$('#lien_voir_cc').css("padding", padding_icones+"px "+padding_icones+"px "+Math.ceil(padding_icones/2)+"px"); |
$('#zone-stats').height(tailleMaxIcones*1.5); |
$('#lien-voir-cc').css("font-size", taille+"em"); |
$('#lien-voir-cc').css("padding", padding_icones+"px"); |
$("#panneau-lateral").css('font-size', (taille*0.80)+'em'); |
$("#panneau-lateral").css('font-size', (taille*0.9)+'em'); |
$("#pl-contenu").css('font-size', (taille/2)+'em'); |
$("#panneau-lateral").css('padding', padding_icones+"px "+padding_icones+"px "+Math.round(padding_icones/4)+"px"); |
$('#pl-ouverture').height(((padding_icones*2)+$('#panneau-lateral').height())+"px"); |
$("#panneau-lateral").width(tailleFiltre); |
// Dimensionnement du titre et du logo |
if(urlLogo != "null") { |
hauteurLogo = $('#logo img').height(); |
// Redimensionnement du logo s'il est trop grand |
// on perd en qualité mais ça vaut mieux que de casser l'affichage |
if(hauteurLogo > tailleMaxLogo) { |
hauteurLogo = tailleMaxLogo; |
$('#logo img').height(tailleMaxLogo); |
} |
if(hauteurLogo == 0) { |
$('#logo img').load(function(event) { |
definirTailleOverlay(); |
}); |
return; |
} |
largeurLogo = $('#logo img').width(); |
largeurTitre = $('#carte-titre-infos').width(); |
$('#zone-titre').css("height", (hauteurLogo+5)+"px"); |
$('#zone-titre').css("width", (largeurLogo+largeurTitre+16)+"px"); |
if(titreCarte != 'null' && titreCarte != 0) { |
$('#carte-titre-infos').css("position", "absolute"); |
$('#carte-titre-infos').css("left", (largeurLogo+16)+"px"); |
$('#carte-titre-infos').css("top", (hauteurLogo/2)+"px"); |
} |
} else { |
$('#zone-titre').css("height", (tailleMaxIcones+5)+"px"); |
hauteurLogo = $('.image-logo').height(); |
// Redimensionnement du logo s'il est trop grand |
// on perd en qualité mais ça vaut mieux que de casser l'affichage |
if(hauteurLogo > tailleMaxLogo) { |
hauteurLogo = tailleMaxLogo; |
$('.image-logo').css("top", "5px"); |
$('.image-logo').height(tailleMaxLogo); |
} |
if(hauteurLogo == 0) { |
$('.image-logo').load(function(event) { |
definirTailleOverlay(); |
}); |
return; |
} |
largeurLogo = $('#logo img').width(); |
} |
function centrerTitreEtStats() { |
1060,6 → 1050,7 |
var largeurPanneauLateralFerme = null; |
function afficherPanneauLateral() { |
// fixer la hauteur |
$('#panneau-lateral').height($(window).height() - $('#panneau-lateral').offset().top); |
largeurPanneauLateralFerme = $('#panneau-lateral').width(); |
$('#panneau-lateral').width(300); |
1073,7 → 1064,7 |
}; |
function cacherPanneauLateral() { |
$('#panneau-lateral').height("65px"); |
$('#panneau-lateral').height(25+"px"); |
$('#panneau-lateral').width(largeurPanneauLateralFerme+"px"); |
$('#pl-contenu').css('display', 'none'); |
$('#pl-ouverture').css('display', 'block'); |
1093,7 → 1084,9 |
var NELatLng = map.getBounds().getNorthEast().lat()+'|'+map.getBounds().getNorthEast().lng(); |
var SWLatLng = map.getBounds().getSouthWest().lat()+'|'+map.getBounds().getSouthWest().lng(); |
$('.raz-filtre-taxons').removeClass('taxon-actif'); |
$('#taxon-'+nt).removeClass('taxon-actif'); |
if (nt == ntAFiltrer) { |
nt = '*'; |
stationsUrl = stationsUrl.replace(/num_taxon=[*0-9]+/, 'num_taxon='+nt); |