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

make editor responsive

Browse source
This commit is contained in:
Laura Klünder 2016-10-06 12:25:51 +02:00
parent c7e3feb8c8
commit 0059e70460
4 changed files with 93 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -59,12 +59,12 @@ body {
padding:8px; padding:8px;
width:350px; width:350px;
right:0; right:0;
transition: right 300ms;
-webkit-transition: right 300ms;
overflow:auto; overflow:auto;
} }
#mapeditcontrols > #mapeditdetail { #mapeditcontrols > #mapeditdetail {
right:-350px; right:-350px;
transition: right 300ms;
-webkit-transition: right 300ms;
pointer-events: none; pointer-events: none;
} }
#mapeditcontrols.detail #mapeditdetail { #mapeditcontrols.detail #mapeditdetail {
@ -127,3 +127,69 @@ legend {
#btn_editing_cancel { #btn_editing_cancel {
margin-right:8px; margin-right:8px;
} }
#response_switch {
display:none;
}
@media (max-width: 767px) {
#mapeditcontrols {
width:100vw;
}
body:not(.controls) #mapeditcontrols {
pointer-events: none;
background-image:none;
}
#mapeditcontrols > div {
width:100vw;
}
body:not(.controls) #mapeditcontrols > div {
right:-100vw !important;
}
#mapeditcontrols:not(.detail) > #mapeditdetail {
right:-100vw;
pointer-events: none;
}
#map {
transition: left 300ms, right ;
-webkit-transition: left 300ms;
right: auto;
width:100vw;
}
body.controls #map {
left:-100vw;
}
.navbar-collapse.collapse {
display: block;
}
.navbar-nav>li, .navbar-header {
float: left;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-right {
float: right;
}
#show_map {
display:none;
}
body.controls #show_map {
display:block;
}
body.controls #show_details {
display:none;
}
.navbar-nav {
margin:0;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
#response_switch {
display:block;
}
}

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

@ -17,6 +17,13 @@ editor = {
L.control.scale({imperial: false}).addTo(editor.map); L.control.scale({imperial: false}).addTo(editor.map);
editor._highlight_layer = L.layerGroup().addTo(editor.map); editor._highlight_layer = L.layerGroup().addTo(editor.map);
$('#show_map').click(function() {
$('body').removeClass('controls');
});
$('#show_details').click(function() {
$('body').addClass('controls');
});
editor.get_feature_types(); editor.get_feature_types();
editor.get_packages(); editor.get_packages();
editor.get_sources(); editor.get_sources();
@ -287,6 +294,7 @@ editor = {
} }
$('.leaflet-drawbar').show(); $('.leaflet-drawbar').show();
$('.start-drawing').hide(); $('.start-drawing').hide();
$('body').removeClass('controls');
}, },
cancel_creating: function () { cancel_creating: function () {
if (editor._creating === null || editor._editing !== null) return; if (editor._creating === null || editor._editing !== null) return;
@ -309,6 +317,7 @@ editor = {
$('.leaflet-drawbar').hide(); $('.leaflet-drawbar').hide();
var path = '/editor/features/' + editor._creating + '/add/'; var path = '/editor/features/' + editor._creating + '/add/';
$('#mapeditcontrols').removeClass('list'); $('#mapeditcontrols').removeClass('list');
$('body').addClass('controls');
$('#mapeditdetail').load(path, editor.edit_form_loaded); $('#mapeditdetail').load(path, editor.edit_form_loaded);
} }
}, },
@ -320,6 +329,7 @@ editor = {
var path = '/editor/features/edit/' + name + '/'; var path = '/editor/features/edit/' + name + '/';
$('#mapeditcontrols').removeClass('list'); $('#mapeditcontrols').removeClass('list');
$('#mapeditdetail').load(path, editor.edit_form_loaded); $('#mapeditdetail').load(path, editor.edit_form_loaded);
$('body').addClass('controls');
}, },
edit_form_loaded: function() { edit_form_loaded: function() {
$('#mapeditcontrols').addClass('detail'); $('#mapeditcontrols').addClass('detail');
@ -385,6 +395,7 @@ editor = {
editor._editing = null; editor._editing = null;
editor._creating = null; editor._creating = null;
editor.get_features(); editor.get_features();
$('body').removeClass('controls');
} }
}); });
} }

6
src/c3nav/editor/templates/editor/base.html
View file

@ -17,15 +17,17 @@
<body> <body>
<nav class="navbar navbar-default"> <nav class="navbar navbar-static-top navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="{% url 'editor.index' %}">c3nav map editor</a> <a class="navbar-brand" href="{% url 'editor.index' %}">c3nav map editor</a>
</div> </div>
{% block addnav %}
{% endblock %}
</div> </div>
</nav> </nav>
<div class="container"> <div class="container" id="main">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>

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

@ -1,5 +1,15 @@
{% extends 'editor/base.html' %} {% extends 'editor/base.html' %}
{% load static %} {% load static %}
{% block addnav %}
<div id="response_switch" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" id="show_map"s>&laquo; Show Map</a>
<a href="#" id="show_details"s>Show Details &raquo;</a>
</li>
</ul>
</div>
{% endblock %}
{% block content %} {% block content %}
<div id="map"></div> <div id="map"></div>
<div id="mapeditcontrols"> <div id="mapeditcontrols">