Responsive :)

- Android routenplaner support
This commit is contained in:
Martin Bauer
2013-11-10 20:47:05 +01:00
parent 81120ab385
commit c693b7b1e5
19 changed files with 313 additions and 115 deletions

View File

@@ -11,10 +11,86 @@
<!-- Static Navbar at top -->
{% block navbar_options %} navbar navbar-inverse navbar-static-top {% endblock %}
{% block content %}
{% addtoblock "css" %}
<style>
/*
@media (max-width: 600px) {
#eventTable td:nth-child(7),
#eventTable th:nth-child(7) {display: none;}
}*/
table {
width: 100%;
border-collapse: collapse;
}
td input[type="text"]{
width: 130px !important;
}
@media only screen and (max-width: 760px)
{
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50% !important;
padding-right: 1px !important;
border: none;
border-top: 0px solid rgb(221, 221, 221) !important;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
td.empty {
display:none;
}
td input[type="text"]{
width: 105px !important;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "Termin"; }
td:nth-of-type(2):before { content: "Datum"; }
td:nth-of-type(3):before { content: "Uhrzeit"; }
td:nth-of-type(4):before { content: "Treffpunkt"; }
td:nth-of-type(5):before { content: "Ort"; }
td:nth-of-type(6):before { content: "Status"; }
td:nth-of-type(7):before { content: "Kommentar"; }
}
</style>
{% endaddtoblock %}
{% addtoblock "js" %}
<script>
@@ -99,84 +175,90 @@
{% endaddtoblock %}
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"> <a>{{request.user.username}}</a> </li>
<li><a href="grid">Übersicht</a></li>
</ul>
</div>
</div>
<div class="container">
<p>
<div class="row">
<div class="row-fluid eventTable">
<div class="span12">
<div class="row-fluid eventTable">
<h2>Termine</h2>
<h2>Termine</h2>
<p class="pull-right" ><a href="grid">zur Übersicht</a></p>
<div class="box-content">
<table class="table table-striped">
<thead>
<tr>
<th id='eventTitle'>Termin</th>
<th id='date' >Datum</th>
<th id='time' >Uhrzeit</th>
<th id='time' >Treffpunkt</th>
<th id='place' >Ort</th>
<th id='status' >Status ändern</th>
<th id='comment' >Kommentar</th>
</tr>
</thead>
<tbody>
{% for event in events %}
<tr>
{% if not perms.eventplanner.change_event %}
<td class="center"> {{ event.title }} </td>
{% else %}
<td class="center"> <a href="{{ event.pk }}"> {{ event.title }} </a> </td>
{% endif %}
<td class="center"> {{ event.date | date:"D, d.m.y" }} </td>
<td class="center"> {% if event.time %} {{ event.time | time:"H:i" }} {% endif %} </td>
<td class="center"> {% if event.meeting_time %} {{ event.meeting_time | time:"H:i" }} {% endif %} </td>
<td class="center"> {{ event.location }} </td>
<td class="center">
<div class="btn-group event-status-select" data-event-id="{{event.pk}}" data-username="{{user.username}}" >
<button class="btn event-status-yes {% if event.participation.status == "Yes" %} btn-success {% else %} btn-info {% endif %}">
<i class="icon-ok-sign icon-white"></i>
</button>
<button class="btn event-status-dontknow {% if event.participation.status == "?" %} btn-warning {% else %} btn-info {% endif %}">
<i class="icon-question-sign icon-white "></i>
</button>
<button class="btn event-status-no {% if event.participation.status == "No" %} btn-danger {% else %} btn-info {% endif %}">
<i class="icon-remove-sign icon-white"></i>
</button>
</div>
</td>
<td>
<div class="input-append">
<input size="16" type="text" data-event-id="{{event.pk}}" data-username="{{user.username}}" class="event-comment" value="{{ event.participation.comment }}" >
</div>
</td>
</tr>
{% endfor %}
<div class="span12">
<div class="box-content">
<table id="eventTable" class="table table-striped">
<thead>
<tr>
<th id='eventTitle'>Termin</th>
<th id='date' >Datum</th>
<th id='time' >Uhrzeit</th>
<th id='time' >Treffpunkt</th>
<th id='place' >Ort</th>
<th id='status' >Status ändern</th>
<th id='comment' >Kommentar</th>
</tr>
</thead>
<tbody>
{% for event in events %}
<tr>
{% if not perms.eventplanner.change_event %}
<td class="center">{{ event.title }}</td>
{% else %}
<td class="center"> <a href="{{ event.pk }}">{{ event.title }}</a> </td>
{% endif %}
<td class="center {% if not event.date %}empty{% endif %}">{{ event.date | date:"D, d.m.y" }} </td>
<td class="center {% if not event.time %}empty{% endif %}">{% if event.time %} {{ event.time | time:"H:i" }} {% endif %} </td>
<td class="center {% if not event.meeting_time %}empty{% endif %}">{% if event.meeting_time %} {{ event.meeting_time | time:"H:i" }} {% endif %}</td>
<td class="center {% if not event.location %}empty{% endif %}">
{% if event.map_location and request.device.android %}
<a href="geo:{{event.map_location}}"> {{event.location}}</a>
{% else %}
{{event.location}}
{% endif %}
</td>
<td class="center">
<div class="btn-group event-status-select" data-event-id="{{event.pk}}" data-username="{{user.username}}" >
<button class="btn event-status-yes {% if event.participation.status == "Yes" %} btn-success {% else %} btn-info {% endif %}">
<i class="icon-ok-sign icon-white"></i>
</button>
<button class="btn event-status-dontknow {% if event.participation.status == "?" %} btn-warning {% else %} btn-info {% endif %}">
<i class="icon-question-sign icon-white "></i>
</button>
<button class="btn event-status-no {% if event.participation.status == "No" %} btn-danger {% else %} btn-info {% endif %}">
<i class="icon-remove-sign icon-white"></i>
</button>
</div>
</td>
<td>
<div class="input-append">
<input size="16" type="text" data-event-id="{{event.pk}}" data-username="{{user.username}}" class="event-comment" value="{{ event.participation.comment }}" >
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div><!--/span-->
</div><!--/row-->
</tbody>
</table>
</div>
</div><!--/span-->
</div>
<div class="row">
<div class="span12">
<em>Änderungen werden automatisch gespeichert: </em> <em id="saving">Ok</em>
<p>
<em>Änderungen werden automatisch gespeichert: </em> <em id="saving">Ok</em>
</p>
</div>
</div>
</p>
</div>

View File

@@ -23,12 +23,14 @@
}
button.eventButton {
width: 42px;
width: 32px;
font-size: 10px;
}
span.eventButton {
height: 16px;
width: 32px;
width: 18px;
text-align: center;
font-size: 10px;
}
.eventButton i {
margin-right:2px;
@@ -38,9 +40,12 @@
font-style: italic;
}
.usernameHeader {
font-size:11px;
font-size:10px;
text-align: center;
}
td a {
font-size: 11px;
}
</style>
{% endaddtoblock %}
@@ -124,6 +129,16 @@
{% endaddtoblock %}
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li> <a href="/events">{{request.user.username}}</a> </li>
<li class="active" ><a>Übersicht</a></li>
</ul>
</div>
</div>
<div class="container">
<form>
<div class="row">

View File

@@ -40,7 +40,6 @@ def event_api( request, username = None, eventId = None ):
return Response( serializer.data )
elif request.method == 'PUT':
print "Request data" + str ( request.DATA )
serializer = ParticipationSerializer ( participationQs, data = request.DATA, many=True )
if serializer.is_valid():
for serializedObject in serializer.object: