First draft of poi edit page
This commit is contained in:
leosw
@@ -279,6 +279,8 @@ footer {
|
||||
color: #c1c1c1;
|
||||
text-align: left;
|
||||
}
|
||||
footer {
|
||||
}
|
||||
|
||||
footer #footernav {
|
||||
float: right;
|
||||
|
||||
@@ -33,7 +33,7 @@ footer {
|
||||
}
|
||||
|
||||
.leaflet-bottom.leaflet-left {
|
||||
margin-bottom: 60px !important;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-bottom.leaflet-left {
|
||||
margin-bottom: 15px !important;
|
||||
@@ -41,7 +41,7 @@ footer {
|
||||
}
|
||||
|
||||
.leaflet-bottom.leaflet-right {
|
||||
margin-bottom: 60px !important;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-bottom.leaflet-right {
|
||||
margin-bottom: 15px !important;
|
||||
@@ -127,6 +127,23 @@ footer {
|
||||
background: #212121 !important;
|
||||
}
|
||||
|
||||
/* Scale */
|
||||
|
||||
.leaflet-control-scale-line {
|
||||
height: 30px !important;
|
||||
top: 2px !important;
|
||||
position: relative !important;
|
||||
background: #212121 !important;
|
||||
color: #c1c1c1 !important;
|
||||
text-align: center !important;
|
||||
border: none !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
.leaflet-control-scale {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
/* Credit / Legend */
|
||||
|
||||
.leaflet-control button {
|
||||
@@ -162,21 +179,4 @@ footer {
|
||||
|
||||
.leaflet-fullscreen-on .easy-button-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Scale */
|
||||
|
||||
.leaflet-control-scale-line {
|
||||
height: 30px !important;
|
||||
top: 2px !important;
|
||||
position: relative !important;
|
||||
background: #212121 !important;
|
||||
color: #c1c1c1 !important;
|
||||
text-align: center !important;
|
||||
border: none !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
.leaflet-control-scale {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
207
views/css/d.poi.css
Executable file
207
views/css/d.poi.css
Executable file
@@ -0,0 +1,207 @@
|
||||
/*********************************/
|
||||
/** Common **/
|
||||
/*********************************/
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#sticky {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
top: 65%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@keyframes fadeinfadeout {
|
||||
0% {color: #444;}
|
||||
50% {color: #999;}
|
||||
100% {color: #444;}
|
||||
}
|
||||
#slide-icon {
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
top: -35px;
|
||||
color: #000;
|
||||
font-size: 60px;
|
||||
color: #555;
|
||||
animation-name: fadeinfadeout;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
#mapid {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/*********************************/
|
||||
/** Editor page **/
|
||||
/*********************************/
|
||||
|
||||
form.form input, form.form textarea, #locale {
|
||||
background: #ddd;
|
||||
border-bottom: 2px solid #ccc;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
form.form textarea {
|
||||
font-size: 14px;
|
||||
margin: 10px 0 10px 0px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
form.form input {
|
||||
width: 58%;
|
||||
margin: 10px 0 10px 0px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#locale {
|
||||
width: 38%;
|
||||
float: right;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
form.form input[type=submit] {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
|
||||
/*****************************************
|
||||
Controls of the map
|
||||
*****************************************/
|
||||
|
||||
/* General */
|
||||
|
||||
.leaflet-control-container {
|
||||
position: absolute !important;
|
||||
width: 850px !important;
|
||||
height: 100%;
|
||||
left: calc(50% - 425px) !important;
|
||||
font-family: "Fira Sans", "Open Sans",Helvetica,Arial,sans-serif !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-control-container {
|
||||
position: absolute !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-bottom.leaflet-left {
|
||||
bottom: 35% !important;
|
||||
margin-bottom: -50px !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-bottom.leaflet-left {
|
||||
margin-bottom: 15px !important;
|
||||
margin-left: 15px !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-bottom.leaflet-right {
|
||||
bottom: 35% !important;
|
||||
margin-bottom: -50px !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-bottom.leaflet-right {
|
||||
margin-bottom: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-control {
|
||||
clear: none !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
color: #c1c1c1 !important;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin: 0 0 0 15px !important;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin: 0 15px 0 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-control a, .leaflet-control button {
|
||||
display: inline-block !important;
|
||||
float: none !important;
|
||||
border: none !important;
|
||||
background-color: #212121 !important;
|
||||
border-radius: 0 !important;
|
||||
color: #c1c1c1 !important;
|
||||
border-right: 1px #3e3e3e solid !important;
|
||||
}
|
||||
.leaflet-control a:last-child, .leaflet-control button:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
/* Zoom */
|
||||
|
||||
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
.leaflet-disabled {
|
||||
background-color: rgba(33, 33, 33, 0.8) !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
/* Fullscreen */
|
||||
|
||||
.leaflet-control-fullscreen a {
|
||||
background: #212121 !important;
|
||||
}
|
||||
.leaflet-control-fullscreen a:before {
|
||||
content: "\f065";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
background: none !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-control-fullscreen a:before {
|
||||
content: "\f066";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Baselayers */
|
||||
|
||||
.leaflet-control-layers a {
|
||||
background: #212121 !important;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
line-height: 26px !important;
|
||||
text-align: center !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
.leaflet-control-layers a:before {
|
||||
content: "\f5fd";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
background: none !important;
|
||||
}
|
||||
.leaflet-control-layers-expanded a {
|
||||
display: none !important;
|
||||
}
|
||||
.leaflet-control-layers-list {
|
||||
padding: 3px 8px !important;
|
||||
color: white !important;
|
||||
background: #212121 !important;
|
||||
}
|
||||
|
||||
/* Scale */
|
||||
|
||||
.leaflet-control-scale-line {
|
||||
height: 30px !important;
|
||||
top: 2px !important;
|
||||
position: relative !important;
|
||||
background: #212121 !important;
|
||||
color: #c1c1c1 !important;
|
||||
text-align: center !important;
|
||||
border: none !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
.leaflet-control-scale {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
@@ -13,25 +13,34 @@
|
||||
<br>
|
||||
|
||||
<div class="action">
|
||||
<? if($user->rankIsHigher("registered")) { ?>
|
||||
<div class="title"><i class="fas fa-home"></i>
|
||||
<a href="<?=$config['rel_root_folder']?>poi/new">Ajouter un hébergement de montagne</a>
|
||||
</div>
|
||||
<? } else { ?>
|
||||
<div class="title" id="js_open_1"><i class="fas fa-home"></i>
|
||||
<p>Ajouter un hébergement de montagne</p>
|
||||
</div>
|
||||
<div class="description" id="js_openned_1">
|
||||
<p>Vous devez être connecté pour pouvoir ajouter un hébergement. Ça nous permet de laisser les robots à la porte.</p>
|
||||
</div>
|
||||
<? } ?>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<div class="title" id="js_open_1"><i class="fas fa-comment"></i>
|
||||
<div class="title" id="js_open_2"><i class="fas fa-comment"></i>
|
||||
<p>Ajouter un commentaire sur un hébergement</p>
|
||||
</div>
|
||||
<div class="description" id="js_openned_1">
|
||||
<div class="description" id="js_openned_2">
|
||||
<p>Rendez-vous sur la page hébergement où vous souhaitez laisser un commentaire, puis ajoutez un commentaire en bas de page.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<div class="title" id="js_open_2"><i class="fas fa-wrench"></i>
|
||||
<div class="title" id="js_open_3"><i class="fas fa-wrench"></i>
|
||||
<p>Faire une demande de travaux</p>
|
||||
</div>
|
||||
<div class="description" id="js_openned_2">
|
||||
<div class="description" id="js_openned_3">
|
||||
<p>Cette fonctionnalité n'est pas encore disponible, mais n'hésitez pas à laisser un commentaire pour faire savoir le besoin d'entretien.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,6 +53,9 @@ $( "#js_open_1" ).click(function() {
|
||||
});
|
||||
$( "#js_open_2" ).click(function() {
|
||||
$( "#js_openned_2" ).show(400);
|
||||
});
|
||||
$( "#js_open_3" ).click(function() {
|
||||
$( "#js_openned_3" ).show(400);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
34
views/d.poi.edit.html
Executable file
34
views/d.poi.edit.html
Executable file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<? include('blocks/d.head.html'); ?>
|
||||
|
||||
<body>
|
||||
|
||||
<? include('blocks/d.nav.html'); ?>
|
||||
|
||||
<div id="mapid"></div>
|
||||
|
||||
<div id="sticky">
|
||||
<section>
|
||||
<i id="slide-icon" class="fas fa-chevron-up"></i>
|
||||
<form class="form" action="<?=$config['rel_root_folder']?>wiki/<?=$poi->permalink?>/edit" method="post">
|
||||
<h1>
|
||||
<select name="locale" id="locale">
|
||||
<? foreach($locales->objs as $locale) { ?>
|
||||
<option <?=$poi->locale==$locale->name?'selected':''?> value="<?=$locale->name?>"><?=$locale->display_name?></option>
|
||||
<? } ?>
|
||||
</select>
|
||||
<input type="text" value="<?=$poi->name?>" name="name" id="name" placeholder="Titre">
|
||||
</h1>
|
||||
|
||||
<textarea rows="30" name="content" id="content" placeholder="Contenu de la page"><?=$poi->content?></textarea>
|
||||
|
||||
<input name="submit" id="submit" type="submit" value="Envoyer">
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<? include('blocks/d.footer.html'); ?>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,7 +4,7 @@ $( document ).ready(function() {
|
||||
// Differents layers for the map
|
||||
var osmfr = L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {tms: true, maxZoom: 20, attribution: 'Maps © <a href="http://www.openstreetmap.fr">OpenSreetMap France</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'});
|
||||
var wikimedia = L.tileLayer('//maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {tms: true, maxZoom: 18, attribution: 'Maps © <a href="http://wikimedia.org">Wikimedia</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'});
|
||||
var crozet = L.tileLayer('/_maps/osm_cro/{z}/{x}/{y}.png', {tms: true, maxZoom: 18, attribution: 'For dev purpose only'});
|
||||
var crozet = L.tileLayer('/_maps/sat_cro/{z}/{x}/{y}.png', {tms: true, maxZoom: 18, attribution: 'For dev purpose only'});
|
||||
|
||||
// Base layers
|
||||
var baseLayers = {
|
||||
@@ -16,7 +16,7 @@ $( document ).ready(function() {
|
||||
mymap = L.map('mapid', {
|
||||
zoomControl: false,
|
||||
layers: [crozet],
|
||||
}).setView([-46.407, 51.766], 12);
|
||||
}).setView([-46.407, 51.766], 13);
|
||||
$("#map-credits").html(crozet.getAttribution());
|
||||
|
||||
L.control.scale({
|
||||
|
||||
52
views/js/d.poi_map.js
Executable file
52
views/js/d.poi_map.js
Executable file
@@ -0,0 +1,52 @@
|
||||
var mymap;
|
||||
|
||||
$( document ).ready(function() {
|
||||
// Differents layers for the map
|
||||
var osmfr = L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {tms: true, maxZoom: 20, attribution: 'Maps © <a href="http://www.openstreetmap.fr">OpenSreetMap France</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'});
|
||||
var wikimedia = L.tileLayer('//maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {tms: true, maxZoom: 18, attribution: 'Maps © <a href="http://wikimedia.org">Wikimedia</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'});
|
||||
var crozet = L.tileLayer('/_maps/sat_cro/{z}/{x}/{y}.png', {tms: true, maxZoom: 18, attribution: 'For dev purpose only'});
|
||||
|
||||
// Base layers
|
||||
var baseLayers = {
|
||||
"OSM France": osmfr,
|
||||
"OSM Wikimedia": wikimedia,
|
||||
"Crozet": crozet,
|
||||
};
|
||||
|
||||
mymap = L.map('mapid', {
|
||||
zoomControl: false,
|
||||
layers: [crozet],
|
||||
}).setView([-46.407, 51.766], 13);
|
||||
$("#map-credits").html(crozet.getAttribution());
|
||||
|
||||
L.control.scale({
|
||||
position: "bottomleft",
|
||||
imperial: false
|
||||
}).addTo(mymap);
|
||||
|
||||
L.control.fullscreen({
|
||||
position: "bottomleft"
|
||||
}).addTo(mymap);
|
||||
|
||||
L.control.zoom({
|
||||
zoomOutText: "<i class=\"fa fa-minus\" aria-hidden=\"true\"></i>",
|
||||
zoomInText: "<i class=\"fa fa-plus\" aria-hidden=\"true\"></i>",
|
||||
position: "bottomleft"
|
||||
}).addTo(mymap);
|
||||
|
||||
L.control.layers(baseLayers,null,{
|
||||
position: "bottomright"
|
||||
}).addTo(mymap);
|
||||
|
||||
mymap.removeControl(mymap.attributionControl);
|
||||
|
||||
$(".close-link").click(function() {
|
||||
$("footer").show();
|
||||
$("#footer-credits").hide();
|
||||
$("#footer-legend").hide();
|
||||
});
|
||||
|
||||
mymap.on('baselayerchange', function(e) {
|
||||
$("#map-credits").html(e.layer.getAttribution());
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user