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

@ -42,3 +42,42 @@ class EnforceLoginMiddleware(object):
except AttributeError:
return HttpResponseRedirect("%s?next=%s" % (self.login_url, request.path))
class DetectDevice(object):
def process_request(self, request):
device = self.mobile(request)
request.device = device
def mobile(self, request):
device = {}
ua = request.META.get('HTTP_USER_AGENT', '').lower()
if ua.find("iphone") > 0:
device['iphone'] = "iphone" + re.search("iphone os (\d)", ua).groups(0)[0]
if ua.find("ipad") > 0:
device['ipad'] = "ipad"
if ua.find("android") > 0:
device['android'] = "android" + re.search("android (\d\.\d)", ua).groups(0)[0].translate(None, '.')
if ua.find("blackberry") > 0:
device['blackberry'] = "blackberry"
if ua.find("windows phone os 7") > 0:
device['winphone7'] = "winphone7"
if ua.find("iemobile") > 0:
device['winmo'] = "winmo"
if not device: # either desktop, or something we don't care about.
device['baseline'] = "baseline"
# spits out device names for CSS targeting, to be applied to <html> or <body>.
device['classes'] = " ".join(v for (k,v) in device.items())
return device

View File

@ -113,7 +113,8 @@ MIDDLEWARE_CLASSES = (
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'blechreiz.middleware.EnforceLoginMiddleware'
'blechreiz.middleware.EnforceLoginMiddleware',
'blechreiz.middleware.DetectDevice',
# Uncomment the next line for simple clickjacking protection:
# 'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

View File

@ -15,6 +15,82 @@
{% 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,21 +175,23 @@
{% 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">
<h2>Termine</h2>
<p class="pull-right" ><a href="grid">zur Übersicht</a></p>
<div class="span12">
<div class="box-content">
<table class="table table-striped">
<table id="eventTable" class="table table-striped">
<thead>
<tr>
@ -135,11 +213,16 @@
{% 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 {% 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}}" >
@ -167,16 +250,15 @@
</table>
</div>
</div><!--/span-->
</div><!--/row-->
</div>
<div class="row">
<div class="span12">
<p>
<em>Änderungen werden automatisch gespeichert: </em> <em id="saving">Ok</em>
</div>
</div>
</p>
</div>
</div>
</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:

View File

@ -26,6 +26,7 @@
width: 360px !important;
float: left;
padding-top: 20px;
padding-left: 5px;
padding-bottom: 20px;
border-radius: 10px;
}
@ -44,13 +45,33 @@
.addressbook_entry .picture {
max-width: 55px;
float: right;
margin-right: 10px;
float: left;
padding-left: 10px;
}
.addressbook_entry td.labelCell {
white-space: nowrap;
}
@media (max-width: 480px) {
.addressbook_entry {
font-size: 11px;
width: 265px !important;
}
.addressbook_entry .picture {
max-width: 55px;
float: left;
padding-left: 5px;
padding-right: 5px;
}
}
@media (max-width: 300px) {
.addressbook_entry .picture {
display: none;
}
.addressbook_entry {
width: 200px !important;
}
}
</style>
{% endaddtoblock %}
@ -119,7 +140,7 @@
{% for m in musicians %}
<div class="photo isotope-item addressbook_entry {% if m.isDeepBrass %} unterstimme {% elif m.isHighBrass %} oberstimme {% else %} rest {% endif %} ">
<div class="span1">
<div>
<img src="{{MEDIA_URL}}/user_images/{{m.user}}_thumb.png" class="img-circle picture">
</div>
@ -127,6 +148,7 @@
{{ m.user.first_name }} {{m.user.last_name }}
</div>
{% if not request.device.android %}
<table>
{% if m.street %} <tr><td class="labelCell"> Adresse </td><td>{{m.street}} </td>
<tr><td class="labelCell"> </td><td>{{m.zip_code}} {{m.city}}</td>{% endif %}
@ -135,6 +157,19 @@
{% if m.phone_mobile %}<tr><td class="labelCell"> Telefon (Mobil): </td><td>{{m.phone_mobile }} </td>{% endif %}
{% if m.phone_work %} <tr><td class="labelCell"> Telefon (Arbeit): </td><td>{{m.phone_work }} </td>{% endif %}
</table>
{% else %}
<table>
{% if m.street %} <tr><td class="labelCell"> Adresse </td><td>{{m.street}} </td>
<tr><td class="labelCell"> </td><td>{{m.zip_code}} {{m.city}}</td>{% endif %}
{% if m.birthday %} <tr><td class="labelCell"> Geburtstag: </td><td>{{m.birthday }} </td>{% endif %}
{% if m.phone_home %} <tr><td class="labelCell"> Telefon (Home): </td><td><a href="tel:{{m.phone_home }}"> {{m.phone_home }} </a> </td>{% endif %}
{% if m.phone_mobile %}<tr><td class="labelCell"> Telefon (Mobil): </td><td><a href="tel:{{m.phone_mobile }}"> {{m.phone_mobile }} </a> </td>{% endif %}
{% if m.phone_work %} <tr><td class="labelCell"> Telefon (Arbeit): </td><td><a href="tel:{{m.phone_work }}"> {{m.phone_work }} </a> </td>{% endif %}
</table>
{% endif %}
</div>
{% endfor %}
</div>

View File

@ -24,7 +24,7 @@ from django.dispatch import receiver
from django.core.mail import EmailMultiAlternatives
from musicians.models import Musician
#from musicians.models import Musician
from django.template.loader import get_template
@ -35,9 +35,9 @@ def my_handler(sender, instance, created, **kwargs):
if not created:
return
receivers = [ m.user.email for m in Musician.objects.all() ]
#receivers = [ m.user.email for m in Musician.objects.all() ]
# overwrite only to me for now
receivers = [ 'martinbauer86@gmail.com' ]
receivers = [ 'forum@blechreiz.com' ]
subject = "Blechreiz Forum: " + instance.titel
from_email = 'forum@blechreiz.com'
@ -45,7 +45,7 @@ def my_handler(sender, instance, created, **kwargs):
c = { 'messages': Message.objects.all().order_by('-creation_time')[:10] }
text_template = get_template( "simpleforum/mail.txt" )
html_template = get_template( "simpleforum/mail.html" )
#html_template = get_template( "simpleforum/mail.html" )
text_content = text_template.render( Context(c) )
#html_content = html_template.render( Context(c) )

View File

@ -17,11 +17,33 @@
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/datepicker.css" type="text/css" media="screen" /> {% endaddtoblock %}
{% addtoblock "css" strip %} <link rel="stylesheet" href="{{STATIC_URL}}/css/blogpost.css" type="text/css" media="screen" /> {% endaddtoblock %}
{% addtoblock "css" %}
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{{STATIC_URL}}/js/bootstrap-datepicker.js"></script>
<script src="{{STATIC_URL}}/js/bootstrap-datepicker.de.js"></script>

View File

@ -13,7 +13,7 @@ youtubeRegex = re.compile( u'(?:https://)?(?:http://)?www.youtube.(?:com|de)/wat
@stringfilter
def youtube_filter( value ):
replacement = """
<iframe width="480" height="360" src="//www.youtube.de/embed/\g<videoID>" frameborder="0" allowfullscreen></iframe>
<div class="embed-container"><iframe src="//www.youtube.de/embed/\g<videoID>" frameborder="0" allowfullscreen></iframe> </div>
"""
return mark_safe( youtubeRegex.sub( replacement, value ) )

View File

@ -1,11 +1,11 @@
/*!
* Bootstrap Responsive v2.3.2
*
* Copyright 2012 Twitter, Inc
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Designed and built with all the love in the world by @mdo and @fat.
*/
.clearfix {

File diff suppressed because one or more lines are too long

View File

@ -1,11 +1,11 @@
/*!
* Bootstrap v2.3.2
*
* Copyright 2012 Twitter, Inc
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Designed and built with all the love in the world by @mdo and @fat.
*/
.clearfix {

File diff suppressed because one or more lines are too long

View File

@ -136,16 +136,15 @@
display: inline-block;
}
#coming_soon .count .circle{
background: rgba(0,0,0,0.8);
width: 100px;
height: 100px;
}
#coming_soon .count .circle span{
font-size: 35px;
margin-top: 39px;
height: 73px;
width: 73px;
}
#coming_soon .count p{
color: #333;
font-size: 10px;
}
#coming_soon .count .circle span{
margin-top: 26px;
font-size: 30px;
}
}

View File

@ -33,7 +33,7 @@
box-shadow: 0 0 7px 0 rgba(26, 26, 26, 0.4);
padding: 33px 0 33px;
background: white;
top: 67%;
top: 62%;
border-radius: 4px;
}
#concert_route .map .box_wrapp .box_cont{
@ -169,6 +169,7 @@
visibility: visible;
}
#route_info_box a.btn
{
visibility:hidden;

View File

@ -114,9 +114,7 @@
#portfolio #filters li a{
font-size: 18px;
}
#portfolio #gallery_container .photo{
margin-left: 35px;
}
#portfolio #gallery_container .photo img{
left: 10%;
}

File diff suppressed because one or more lines are too long

6
website/static/js/jquery-2.0.3.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -2,7 +2,6 @@
<!---------------------------------------------- CSS --------------------------------------------------->
{% addtoblock "css" strip %} <link rel="stylesheet" href="{{STATIC_URL}}/css/bootstrap.min.css" > {% endaddtoblock %}
{% addtoblock "css" strip %} <link rel="stylesheet" href="{{STATIC_URL}}/css/bootstrap-responsive.min.css" > {% endaddtoblock %}
@ -21,9 +20,9 @@
<!-------------------------------------------- JavaScript --------------------------------------------------->
{% addtoblock "js" strip %} <script src="http://code.jquery.com/jquery-latest.js"></script> {% endaddtoblock %}
{% addtoblock "js" strip %} <script src="{{STATIC_URL}}/js/jquery-2.0.3.min.js"></script> {% endaddtoblock %}
{% addtoblock "js" strip %} <script src="{{STATIC_URL}}/js/bootstrap.min.js"></script> {% endaddtoblock %}
{% addtoblock "js" strip %} <script src="{{STATIC_URL}}/js/jquery.countdown.min.js"></script> {% endaddtoblock %}
{% addtoblock "js" strip %} <script src="{{STATIC_URL}}/js/theme.js"></script> {% endaddtoblock %}
@ -89,19 +88,21 @@ $.ajaxSetup({
<body class="pull_top">
<!-- Menu -->
<div id="menu" class="{% block navbar_options %}navbar transparent navbar-inverse navbar-fixed-top {% endblock %}">
<div class="{% block navbar_options %}navbar transparent navbar-inverse navbar-fixed-top {% endblock %}">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
{% if not request.device.android %}
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
{% endif %}
<a class="brand" href="/">
<img alt="Blechreiz" src="{{STATIC_URL}}/img/blechreiz_logo.png">
</a>
<div class="nav-collapse collapse">
<div {% if not request.device.android %}class="nav-collapse collapse"{% endif %}>
<ul class="nav pull-right">
{% block menu_contents %}
<li><a href="/">HOME</a></li>