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;
width:350px;
right:0;
transition: right 300ms;
-webkit-transition: right 300ms;
overflow:auto;
}
#mapeditcontrols > #mapeditdetail {
right:-350px;
transition: right 300ms;
-webkit-transition: right 300ms;
pointer-events: none;
}
#mapeditcontrols.detail #mapeditdetail {
@ -127,3 +127,69 @@ legend {
#btn_editing_cancel {
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);
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_packages();
editor.get_sources();
@ -287,6 +294,7 @@ editor = {
}
$('.leaflet-drawbar').show();
$('.start-drawing').hide();
$('body').removeClass('controls');
},
cancel_creating: function () {
if (editor._creating === null || editor._editing !== null) return;
@ -309,6 +317,7 @@ editor = {
$('.leaflet-drawbar').hide();
var path = '/editor/features/' + editor._creating + '/add/';
$('#mapeditcontrols').removeClass('list');
$('body').addClass('controls');
$('#mapeditdetail').load(path, editor.edit_form_loaded);
}
},
@ -320,6 +329,7 @@ editor = {
var path = '/editor/features/edit/' + name + '/';
$('#mapeditcontrols').removeClass('list');
$('#mapeditdetail').load(path, editor.edit_form_loaded);
$('body').addClass('controls');
},
edit_form_loaded: function() {
$('#mapeditcontrols').addClass('detail');
@ -385,6 +395,7 @@ editor = {
editor._editing = null;
editor._creating = null;
editor.get_features();
$('body').removeClass('controls');
}
});
}

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

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

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

@ -1,5 +1,15 @@
{% extends 'editor/base.html' %}
{% 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 %}
<div id="map"></div>
<div id="mapeditcontrols">