2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

add support vor editor views without map

Browse source
This commit is contained in:
Laura Klünder 2017-05-16 11:41:24 +02:00
parent d49a86e48c
commit 97498e36b2
3 changed files with 87 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

142
src/c3nav/editor/static/editor/css/editor.css
View file

@ -34,62 +34,6 @@ nav.navbar {
margin:0;
}
form button.invisiblesubmit {
overflow: visible;
height: 0;
width: 0;
margin: 0;
border: 0;
padding: 0;
display: block;
}
.leaflet-container .leaflet-control-layers-expanded {
min-width:75px;
}
.leaflet-levels {
font-size:14px;
line-height:18px;
}
.leaflet-control-sections a, .leaflet-control-sections a:hover {
width: auto;
font-size: 14px;
padding: 0 7px;
}
.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
width: auto;
height:36px;
line-height:37px;
font-size: 14px;
padding: 0 12px;
}
.leaflet-control-sections a, .leaflet-control-sections a:hover {
opacity:0;
margin-top:-26px;
}
.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
margin-top:-36px;
}
.leaflet-control-sections a.current, .leaflet-control-sections-expanded a, .leaflet-control-sections-expanded a:hover,
.leaflet-touch .leaflet-control-sections a.current, .leaflet-touch .leaflet-control-sections-expanded a,
.leaflet-touch .leaflet-control-sections-expanded a:hover {
opacity:1;
margin-top:0;
}
.leaflet-control-sections:not(.leaflet-control-sections-expanded) a.current {
border-radius:4px;
border-width:0;
}
.leaflet-control-sections a.current {
font-weight:bold;
}
[data-sections] {
display:none;
}
#sidebar {
position: absolute;
top:0;
@ -99,16 +43,19 @@ form button.invisiblesubmit {
overflow: auto;
background-color:#ffffff;
z-index:2;
}
#sidebarcontent {
width:350px;
padding:10px 15px;
margin:auto;
}
#sidebarcontent.loading {
background-image:url('/static/img/loader.gif');
background-repeat:no-repeat;
background-position:center;
transition: width 300ms;
-webkit-transition: width 300ms;
}
body:not(.map-enabled) #sidebar {
width:100%;
}
#sidebar .content {
width:350px;
padding:10px 15px;
margin:auto;
}
#sidebar form.creation-lock .btn.btn-primary {
display:none;
@ -166,11 +113,11 @@ legend {
-webkit-transition: right 300ms;
width:100vw;
}
#sidebarcontent {
#sidebar .content {
width:100%;
max-width:500px;
}
body:not(.controls) #sidebar {
body.show-map #sidebar {
pointer-events: none;
right:-100vw;
}
@ -179,7 +126,7 @@ legend {
-webkit-transition: left 300ms;
width:100vw;
}
body.controls #map {
body:not(.show-map) #map {
left:-100vw;
}
@ -196,13 +143,13 @@ legend {
float: right;
}
#show_map {
#show_details {
display:none;
}
body.controls #show_map {
body.show-map #show_details {
display:block;
}
body.controls #show_details {
body.show-map #show_map {
display:none;
}
.navbar-nav {
@ -216,3 +163,60 @@ legend {
display:block !important;
}
}
form button.invisiblesubmit {
overflow: visible;
height: 0;
width: 0;
margin: 0;
border: 0;
padding: 0;
display: block;
}
.leaflet-container .leaflet-control-layers-expanded {
min-width:75px;
}
.leaflet-levels {
font-size:14px;
line-height:18px;
}
.leaflet-control-sections a, .leaflet-control-sections a:hover {
width: auto;
font-size: 14px;
padding: 0 7px;
}
.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
width: auto;
height:36px;
line-height:37px;
font-size: 14px;
padding: 0 12px;
}
.leaflet-control-sections a, .leaflet-control-sections a:hover {
opacity:0;
margin-top:-26px;
}
.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
margin-top:-36px;
}
.leaflet-control-sections a.current, .leaflet-control-sections-expanded a, .leaflet-control-sections-expanded a:hover,
.leaflet-touch .leaflet-control-sections a.current, .leaflet-touch .leaflet-control-sections-expanded a,
.leaflet-touch .leaflet-control-sections-expanded a:hover {
opacity:1;
margin-top:0;
}
.leaflet-control-sections:not(.leaflet-control-sections-expanded) a.current {
border-radius:4px;
border-width:0;
}
.leaflet-control-sections a.current {
font-weight:bold;
}
[data-sections] {
display:none;
}

23
src/c3nav/editor/static/editor/js/editor.js
View file

@ -28,10 +28,10 @@ editor = {
L.control.scale({imperial: false}).addTo(editor.map);
$('#show_map').click(function() {
$('body').removeClass('controls');
$('body').addClass('show-map');
});
$('#show_details').click(function() {
$('body').addClass('controls');
$('body').removeClass('show-map');
});
editor._section_control = new SectionControl().addTo(editor.map);
@ -90,15 +90,14 @@ editor = {
_sidebar_unload: function() {
// unload the sidebar. called on sidebar_get and form submit.
editor._section_control.disable();
$('#sidebarcontent').html('').addClass('loading');
$('#sidebar').addClass('loading').find('.content').html();
editor._unhighlight_geometry();
editor._cancel_editing();
},
_sidebar_loaded: function(data) {
// sidebar was loaded. load the content. check if there are any redirects. call _check_start_editing.
var content = $(data);
var sidebarcontent = $('#sidebarcontent');
sidebarcontent.html(content).removeClass('loading');
$('#sidebar').removeClass('loading').find('.content').html(content);
redirect = $('span[data-redirect]');
if (redirect.length) {
@ -107,6 +106,7 @@ editor = {
}
sections = $('[data-sections]');
$('body').toggleClass('map-enabled', sections.length);
if (sections.length) {
var sections = sections.find('a');
editor._section_control.clearSections();
@ -121,13 +121,14 @@ editor = {
}
editor._section_control.show()
} else {
$('body'y).removeClass('.show-map');
editor._section_control.hide();
}
editor._check_start_editing();
},
_sidebar_error: function(data) {
$('#sidebarcontent').html('<h3>Error '+data.status+'</h3>'+data.statusText).removeClass('loading');
$('#sidebar').removeClass('loading').find('.content').html('<h3>Error '+data.status+'</h3>'+data.statusText);
editor._section_control.hide();
},
_sidebar_link_click: function(e) {
@ -173,8 +174,8 @@ editor = {
editor._highlight_layer = L.layerGroup().addTo(editor.map);
editor._editing_layer = L.layerGroup().addTo(editor.map);
$('#sidebarcontent').on('mouseenter', '.itemtable tr[data-name]', editor._hover_mapitem_row)
.on('mouseleave', '.itemtable tr[data-name]', editor._unhighlight_geometry);
$('#sidebar .content').on('mouseenter', '.itemtable tr[data-name]', editor._hover_mapitem_row)
.on('mouseleave', '.itemtable tr[data-name]', editor._unhighlight_geometry);
editor.map.on('editable:drawing:commit', editor._done_creating);
editor.map.on('editable:editing', editor._update_editing);
@ -318,7 +319,7 @@ editor = {
// edit and create geometries
_check_start_editing: function() {
// called on sidebar load. start editing or creating depending on how the sidebar may require it
var sidebarcontent = $('#sidebarcontent');
var sidebarcontent = $('#sidebar .content');
var id_name = $('#id_name');
id_name.focus();
@ -410,7 +411,7 @@ editor = {
editor._editing.addTo(editor._editing_layer);
editor._editing.on('click', editor._click_editing_layer);
editor._update_editing();
$('#sidebarcontent').find('form.creation-lock').removeClass('creation-lock');
$('#sidebar .content').find('form.creation-lock').removeClass('creation-lock');
$('#id_name').focus();
}
},
@ -521,6 +522,6 @@ SectionControl = L.Control.extend({
});
if ($('#sidebarcontent').length) {
if ($('#sidebar').length) {
editor.init();
}

4
src/c3nav/editor/templates/editor/map.html
View file

@ -12,8 +12,8 @@
{% endblock %}
{% block content %}
<div id="map"></div>
<div id="sidebar">
<div id="sidebarcontent" class="loading">
<div id="sidebar" class="loading">
<div class="content">
<span data-level-switch="{% url 'editor.mapitemtypes' level='LEVEL' %}"></span>
</div>
</div>