make editor responsive
This commit is contained in:
parent
c7e3feb8c8
commit
0059e70460
4 changed files with 93 additions and 4 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>« Show Map</a>
|
||||
<a href="#" id="show_details"s>Show Details »</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div id="map"></div>
|
||||
<div id="mapeditcontrols">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue