Enhanced Map control
This commit is contained in:
Martin Bauer
148
website/static/css/concert_route.css
Normal file
148
website/static/css/concert_route.css
Normal file
@@ -0,0 +1,148 @@
|
||||
#map{
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
#concert_route .map iframe{
|
||||
display: block;
|
||||
}
|
||||
#concert_route .map .box_wrapp{
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
box-shadow: 0 0 7px 0 rgba(26, 26, 26, 0.4);
|
||||
padding: 33px 0 33px;
|
||||
background: white;
|
||||
top: 67%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#concert_route .map .box_wrapp .box_cont{
|
||||
margin: 0 auto;
|
||||
width: 76%;
|
||||
}
|
||||
#concert_route .map .box_wrapp .head{
|
||||
width: 100%;
|
||||
margin-bottom: 17px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#concert_route .map .box_wrapp .head h6{
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
float: left;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid;
|
||||
font-weight: normal;
|
||||
}
|
||||
#concert_route .map .box_wrapp ul.street{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
#concert_route .map .box_wrapp ul.street li{
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
#concert_route .map .box_wrapp ul.street li.icon{
|
||||
margin-top: 3px;
|
||||
}
|
||||
#concert_route .map .box_wrapp ul.street li.icon span.ico1{
|
||||
float: left;
|
||||
height: 20px;
|
||||
}
|
||||
#concert_route .map .box_wrapp ul.street li.icon span.ico2{
|
||||
float: left;
|
||||
height: 20px;
|
||||
background-position: 0px -23px;
|
||||
}
|
||||
#concert_route .map .box_wrapp ul.street li.icon .text{
|
||||
font-size: 15px;
|
||||
color: #777777;
|
||||
margin-left: 6px;
|
||||
}
|
||||
#concert_route .map .box_wrapp ul.street li.icon a:hover{
|
||||
color: #187CCC;
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
-ms-transition: all .2s;
|
||||
transition: all .2s;
|
||||
}
|
||||
#concert_route .map .box_wrapp ul.street li.icontop{
|
||||
margin-top: 13px;
|
||||
}
|
||||
#concert_route .map .box_wrapp .headbottom{
|
||||
margin-top: 42px;
|
||||
}
|
||||
#concert_route .map .box_wrapp p{
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
#concert_route .map .box_wrapp a.btn{
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
background: #187CCC;
|
||||
text-shadow: none;
|
||||
padding: 6px 0 6px;
|
||||
font-weight: bold;
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
width: 56%;
|
||||
-webkit-transition: background linear .2s, box-shadow linear .2s;
|
||||
-moz-transition: background linear .2s, box-shadow linear .2s;
|
||||
-o-transition: background linear .2s, box-shadow linear .2s;
|
||||
transition: background linear .2s, box-shadow linear .2s;
|
||||
}
|
||||
#concert_route .map .box_wrapp a.btn:hover{
|
||||
background: #252528;
|
||||
}
|
||||
.concert_routeicos{
|
||||
background: url('../img/concert_route_icos.png') no-repeat;
|
||||
width: 24px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
/* Responsive
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Large desktop */
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
}
|
||||
@media (min-width: 980px) {
|
||||
|
||||
}
|
||||
@media (max-width: 979px) {
|
||||
|
||||
}
|
||||
/* Portrait tablet to landscape and desktop */
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
|
||||
}
|
||||
/* Landscape phone to portrait tablet */
|
||||
@media (max-width: 767px) {
|
||||
#concert_route .map .box_wrapp{
|
||||
width: 90%;
|
||||
position: relative;
|
||||
margin: 0 auto 80px;
|
||||
}
|
||||
#concert_route .map .box_wrapp .box_cont{
|
||||
}
|
||||
#concert_route .map iframe{
|
||||
display: none;
|
||||
}
|
||||
#concert_route .map .box_wrapp a.btn{
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
/* Landscape phones and down */
|
||||
@media (max-width: 480px) {
|
||||
#concert_route .map .box_wrapp{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,240 +0,0 @@
|
||||
#contact {
|
||||
margin-top: 70px;
|
||||
}
|
||||
#contact .contact{
|
||||
margin: 40px 0 100px 0;
|
||||
}
|
||||
#contact .contact p{
|
||||
color: #939394;
|
||||
font-size: 19px;
|
||||
margin-bottom: 47px;
|
||||
font-style: italic;
|
||||
line-height: 24px;
|
||||
}
|
||||
#contact .form{
|
||||
margin: 0;
|
||||
}
|
||||
#contact .contact form{
|
||||
margin: 0;
|
||||
}
|
||||
#contact .form .box{
|
||||
margin: 0;
|
||||
}
|
||||
#contact .form .box input[type="text"]{
|
||||
padding-left: 39px;
|
||||
margin-bottom: 10px;
|
||||
color: black;
|
||||
height: 29px;
|
||||
border-radius: 3px;
|
||||
width: 89%;
|
||||
}
|
||||
#contact .form .box input.name{
|
||||
background: url('../img/formname.png') #fff no-repeat 5px;
|
||||
}
|
||||
#contact .form .box input.mail{
|
||||
background: url('../img/formmail.png') #fff no-repeat 5px;
|
||||
}
|
||||
#contact .form .box input.phone{
|
||||
background: url('../img/formphone.png') #fff no-repeat 5px;
|
||||
}
|
||||
#contact .form .box_r{
|
||||
float: right;
|
||||
}
|
||||
#contact .form .box textarea{
|
||||
padding: 11px;
|
||||
width: 94%;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
height: 113px;
|
||||
}
|
||||
#contact .contact .submit{
|
||||
margin: 0;
|
||||
}
|
||||
#contact .contact .submit .box{
|
||||
margin: 0
|
||||
}
|
||||
#contact .contact .submit label.checkbox{
|
||||
color: #394350;
|
||||
font-style: 14px;
|
||||
}
|
||||
#contact .contact .submit .right{
|
||||
float: right;
|
||||
}
|
||||
#contact .contact .submit .right input[type="submit"]{
|
||||
float: right;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
background: #187CCC;
|
||||
font-size: 15px;
|
||||
padding: 4px 12px;
|
||||
border: 0 none;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: background linear .2s, box-shadow linear .2s;
|
||||
-moz-transition: background linear .2s, box-shadow linear .2s;
|
||||
-o-transition: background linear .2s, box-shadow linear .2s;
|
||||
transition: background linear .2s, box-shadow linear .2s;
|
||||
}
|
||||
#contact .contact .submit .right input[type="submit"]:hover{
|
||||
background: #252528;
|
||||
}
|
||||
#contact .map{
|
||||
margin: 0;
|
||||
}
|
||||
#contact .map iframe{
|
||||
display: block;
|
||||
}
|
||||
#contact .map .box_wrapp{
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
box-shadow: 0 0 7px 0 rgba(26, 26, 26, 0.4);
|
||||
padding: 33px 0 33px;
|
||||
background: white;
|
||||
top: 70%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#contact .map .box_wrapp .box_cont{
|
||||
margin: 0 auto;
|
||||
width: 76%;
|
||||
}
|
||||
#contact .map .box_wrapp .head{
|
||||
width: 100%;
|
||||
margin-bottom: 17px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#contact .map .box_wrapp .head h6{
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
float: left;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid;
|
||||
font-weight: normal;
|
||||
}
|
||||
#contact .map .box_wrapp ul.street{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
#contact .map .box_wrapp ul.street li{
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
#contact .map .box_wrapp ul.street li.icon{
|
||||
margin-top: 3px;
|
||||
}
|
||||
#contact .map .box_wrapp ul.street li.icon span.ico1{
|
||||
float: left;
|
||||
height: 20px;
|
||||
}
|
||||
#contact .map .box_wrapp ul.street li.icon span.ico2{
|
||||
float: left;
|
||||
height: 20px;
|
||||
background-position: 0px -23px;
|
||||
}
|
||||
#contact .map .box_wrapp ul.street li.icon .text{
|
||||
font-size: 15px;
|
||||
color: #777777;
|
||||
margin-left: 6px;
|
||||
}
|
||||
#contact .map .box_wrapp ul.street li.icon a:hover{
|
||||
color: #187CCC;
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
-ms-transition: all .2s;
|
||||
transition: all .2s;
|
||||
}
|
||||
#contact .map .box_wrapp ul.street li.icontop{
|
||||
margin-top: 13px;
|
||||
}
|
||||
#contact .map .box_wrapp .headbottom{
|
||||
margin-top: 42px;
|
||||
}
|
||||
#contact .map .box_wrapp p{
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
#contact .map .box_wrapp a.btn{
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
background: #187CCC;
|
||||
text-shadow: none;
|
||||
padding: 6px 0 6px;
|
||||
font-weight: bold;
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
width: 56%;
|
||||
-webkit-transition: background linear .2s, box-shadow linear .2s;
|
||||
-moz-transition: background linear .2s, box-shadow linear .2s;
|
||||
-o-transition: background linear .2s, box-shadow linear .2s;
|
||||
transition: background linear .2s, box-shadow linear .2s;
|
||||
}
|
||||
#contact .map .box_wrapp a.btn:hover{
|
||||
background: #252528;
|
||||
}
|
||||
.contacticos{
|
||||
background: url('../img/contact_icos.png') no-repeat;
|
||||
width: 24px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
/* Responsive
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Large desktop */
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
}
|
||||
@media (min-width: 980px) {
|
||||
|
||||
}
|
||||
@media (max-width: 979px) {
|
||||
|
||||
}
|
||||
/* Portrait tablet to landscape and desktop */
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
|
||||
}
|
||||
/* Landscape phone to portrait tablet */
|
||||
@media (max-width: 767px) {
|
||||
#contact .contact .submit .box{
|
||||
margin: 10px 0 24px;
|
||||
}
|
||||
#contact .form .box input[type="text"]{
|
||||
width: 87%;
|
||||
}
|
||||
#contact .contact .submit .right input[type="submit"]{
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
width: 53%;
|
||||
display: block;
|
||||
padding: 7px;
|
||||
}
|
||||
#contact .map .box_wrapp{
|
||||
width: 90%;
|
||||
position: relative;
|
||||
margin: 0 auto 80px;
|
||||
}
|
||||
#contact .map .box_wrapp .box_cont{
|
||||
}
|
||||
#contact .map iframe{
|
||||
display: none;
|
||||
}
|
||||
#contact .map .box_wrapp a.btn{
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
/* Landscape phones and down */
|
||||
@media (max-width: 480px) {
|
||||
#contact .contact .submit .right input[type="submit"]{
|
||||
width: 60%;
|
||||
}
|
||||
#contact .map .box_wrapp{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 183 KiB |
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 286 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 253 KiB |
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 172 KiB |
|
Before Width: | Height: | Size: 317 KiB After Width: | Height: | Size: 317 KiB |
BIN
website/static/img/slides/gruppe.png
Normal file
BIN
website/static/img/slides/gruppe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 304 KiB After Width: | Height: | Size: 304 KiB |
|
Before Width: | Height: | Size: 288 KiB After Width: | Height: | Size: 288 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
@@ -135,21 +135,21 @@ $.ajaxSetup({
|
||||
<section id="feature_slider" class="">
|
||||
|
||||
<article class="slide" id="showcasing" style="background: url('{{STATIC_URL}}/img/backgrounds/silver.jpg') repeat-x top center;">
|
||||
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/blechreiz01/gruppe.png" />
|
||||
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/gruppe.png" />
|
||||
<div class="info">
|
||||
<h2>Blechreiz</h2>
|
||||
<h3>12 Musiker für einen guten Zweck </h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/ticotico2.jpg') repeat-x top center;">
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/ticotico2.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<h2>Konzerte</h2>
|
||||
<a href="features.html">Termine</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/daempfer.jpg') repeat-x top center;">
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/daempfer.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<h2>Konzerte</h2>
|
||||
<a href="features.html">Termine</a>
|
||||
@@ -157,35 +157,35 @@ $.ajaxSetup({
|
||||
</article>
|
||||
|
||||
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/andi.jpg') repeat-x top center;">
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/andi.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<h2>Konzerte</h2>
|
||||
<a href="features.html">Termine</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/andi2.jpg') repeat-x top center;">
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/andi2.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<h2>Konzerte</h2>
|
||||
<a href="features.html">Termine</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/applaus.jpg') repeat-x top center;">
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/applaus.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<h2>Konzerte</h2>
|
||||
<a href="features.html">Termine</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/eindruck.jpg') repeat-x top center;">
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/eindruck.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<h2>Konzerte</h2>
|
||||
<a href="features.html">Termine</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/publikum.jpg') repeat-x top center;">
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/publikum.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<h2>Konzerte</h2>
|
||||
<a href="features.html">Termine</a>
|
||||
@@ -193,12 +193,12 @@ $.ajaxSetup({
|
||||
</article>
|
||||
|
||||
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/spielen2.jpg') repeat-x top center;">
|
||||
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/spielen2.jpg') repeat-x top center;">
|
||||
</article>
|
||||
|
||||
|
||||
<article class="slide" id="showcasing" style="background: url('{{STATIC_URL}}/img/backgrounds/black_red_01.jpg') repeat-x top center;">
|
||||
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/blechreiz01/tuba.png" />
|
||||
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/tuba.png" />
|
||||
<div class="info">
|
||||
<h2>Konzerte</h2>
|
||||
<a href="features.html">Nächste Termine</a>
|
||||
@@ -211,10 +211,7 @@ $.ajaxSetup({
|
||||
|
||||
|
||||
{% block content %} {% endblock %}
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- footer -->
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
|
||||
177
website/templates/website/concert_route.html
Normal file
177
website/templates/website/concert_route.html
Normal file
@@ -0,0 +1,177 @@
|
||||
{% comment %}
|
||||
Displays google map with directions to next conert
|
||||
|
||||
Context:
|
||||
Coordinates or textual adresses:
|
||||
{{routeInfo.origin}}
|
||||
{{routeInfo.destination}}
|
||||
|
||||
Event object:
|
||||
{{nextConcert}}
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% load sekizai_tags staticfiles %}
|
||||
|
||||
{% if hasNextConcertInfo %}
|
||||
|
||||
|
||||
|
||||
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/concert_route.css" type="text/css" media="screen" />{% endaddtoblock %}
|
||||
{% addtoblock "js" strip %}<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&language=de"></script>{% endaddtoblock %}
|
||||
|
||||
|
||||
{% addtoblock "js" %}
|
||||
<script type="text/javascript">
|
||||
|
||||
function OpenWindowControl(controlDiv, map) {
|
||||
// Set CSS styles for the DIV containing the control
|
||||
// Setting padding to 5 px will offset the control
|
||||
// from the edge of the map
|
||||
controlDiv.style.paddingTop = '6px';
|
||||
|
||||
// Set CSS for the control border
|
||||
var controlUI = document.createElement('div');
|
||||
controlUI.style.backgroundColor = 'white';
|
||||
controlUI.style.borderStyle = 'solid';
|
||||
controlUI.style.borderWidth = '1px';
|
||||
controlUI.style.cursor = 'pointer';
|
||||
controlUI.style.textAlign = 'center';
|
||||
controlUI.title = 'Fenster mit Konzert Info anzeigen';
|
||||
controlDiv.appendChild(controlUI);
|
||||
|
||||
// Set CSS for the control interior
|
||||
var controlText = document.createElement('div');
|
||||
controlText.style.fontFamily = 'Arial,sans-serif';
|
||||
controlText.style.fontSize = '12px';
|
||||
controlText.style.paddingLeft = '4px';
|
||||
controlText.style.paddingRight = '4px';
|
||||
controlText.innerHTML = 'Konzert Info anzeigen';
|
||||
controlUI.appendChild(controlText);
|
||||
|
||||
google.maps.event.addDomListener(controlUI, 'click', function() {
|
||||
$("#map_box").show();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function ShowTargetControl(controlDiv, map) {
|
||||
// Set CSS styles for the DIV containing the control
|
||||
// Setting padding to 5 px will offset the control
|
||||
// from the edge of the map
|
||||
controlDiv.style.paddingTop = '6px';
|
||||
controlDiv.style.paddingRight = '6px';
|
||||
|
||||
// Set CSS for the control border
|
||||
var controlUI = document.createElement('div');
|
||||
controlUI.style.backgroundColor = 'white';
|
||||
controlUI.style.borderStyle = 'solid';
|
||||
controlUI.style.borderWidth = '1px';
|
||||
controlUI.style.cursor = 'pointer';
|
||||
controlUI.style.textAlign = 'center';
|
||||
controlUI.title = 'Zum Zielpunkt springen';
|
||||
controlDiv.appendChild(controlUI);
|
||||
|
||||
// Set CSS for the control interior
|
||||
var controlText = document.createElement('div');
|
||||
controlText.style.fontFamily = 'Arial,sans-serif';
|
||||
controlText.style.fontSize = '12px';
|
||||
controlText.style.paddingLeft = '4px';
|
||||
controlText.style.paddingRight = '4px';
|
||||
controlText.innerHTML = 'Konzertort anzeigen';
|
||||
controlUI.appendChild(controlText);
|
||||
|
||||
var target = new google.maps.LatLng( {{routeInfo.destination}} );
|
||||
|
||||
google.maps.event.addDomListener(controlUI, 'click', function() {
|
||||
map.setMapTypeId( google.maps.MapTypeId.HYBRID );
|
||||
map.setZoom( 19 );
|
||||
map.setCenter( target );
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
var m = $("#map")[0];
|
||||
|
||||
var myOptions = {
|
||||
zoom: 10,
|
||||
mapTypeId: google.maps.MapTypeId.ROAD,
|
||||
zoomControl: false
|
||||
}
|
||||
var directionsService = new google.maps.DirectionsService();
|
||||
var directionsDisplay = new google.maps.DirectionsRenderer();
|
||||
var map = new google.maps.Map(m, myOptions);
|
||||
|
||||
directionsDisplay.setMap( map );
|
||||
|
||||
var request = {
|
||||
origin: "{{routeInfo.origin}}",
|
||||
destination: "{{routeInfo.destination}}",
|
||||
travelMode: google.maps.DirectionsTravelMode.DRIVING
|
||||
}
|
||||
|
||||
directionsService.route(request, function(response, status) {
|
||||
if (status == google.maps.DirectionsStatus.OK) {
|
||||
directionsDisplay.setDirections(response);
|
||||
|
||||
var leg = response.routes[0].legs[0];
|
||||
|
||||
$("#route_duration").html( leg.duration.text );
|
||||
$("#route_distance").html( leg.distance.text ) ;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var showInfoControlDiv = document.createElement('div');
|
||||
var showInfoControl = new OpenWindowControl(showInfoControlDiv, map);
|
||||
showInfoControlDiv.index = 1;
|
||||
map.controls[google.maps.ControlPosition.TOP_RIGHT].push( showInfoControlDiv );
|
||||
|
||||
var showTargetControlDiv = document.createElement('div');
|
||||
var showTargetControl = new ShowTargetControl(showTargetControlDiv, map);
|
||||
|
||||
showTargetControlDiv.index = 2;
|
||||
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(showTargetControlDiv);
|
||||
|
||||
|
||||
$("#map_box a").click( function() {
|
||||
$("#map_box").hide();
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
{% endaddtoblock %}
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="concert_route">
|
||||
<div id="map"></div>
|
||||
<div id="map_box" class="row map">
|
||||
<div class="container">
|
||||
<div id="route_info_box" class="span5 box_wrapp">
|
||||
<div class="box_cont">
|
||||
<div class="head">
|
||||
<h6>Fahrt zum Konzert:</h6>
|
||||
</div>
|
||||
Nächstes Konzert ist in {{nextConcert.location}} <br/> am {{nextConcert.date}} um {{nextConcert.time | time:"H:i" }} <br/>
|
||||
{% if nextConcert.meeting_time %} Treffpunkt ist um {{ nextConcert.meeting_time | time:"H:i" }} <br/> {% endif %}
|
||||
|
||||
<table>
|
||||
<tr> <td> Fahrzeit:</td> <td> <span id="route_duration"></span> </td> </tr>
|
||||
<tr> <td> Strecke: </td> <td> <span id="route_distance"></span> </td> </tr>
|
||||
</table>
|
||||
<a class="btn" >Schliessen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endif %}
|
||||
77
website/templates/website/event_countdown.html
Normal file
77
website/templates/website/event_countdown.html
Normal file
@@ -0,0 +1,77 @@
|
||||
{% load sekizai_tags staticfiles %}
|
||||
|
||||
|
||||
|
||||
{% addtoblock "css" strip %}<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/lib/animate.css" media="screen, projection">{% endaddtoblock %}
|
||||
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/coming-soon.css" type="text/css" media="screen" />{% endaddtoblock %}
|
||||
|
||||
{% if countdown %}
|
||||
|
||||
|
||||
|
||||
{% addtoblock "js" %}
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
function callback(event) {
|
||||
$this = $(this);
|
||||
$this.find('span#'+event.type).html(event.value);
|
||||
switch(event.type) {
|
||||
case "seconds":
|
||||
case "minutes":
|
||||
case "hours":
|
||||
case "days":
|
||||
case "weeks":
|
||||
case "daysLeft":
|
||||
case "finished":
|
||||
}
|
||||
}
|
||||
$('div#clock').countdown(new Date().valueOf() + {{ countdown.epoch }} , callback);
|
||||
});
|
||||
</script>
|
||||
{% endaddtoblock %}
|
||||
|
||||
|
||||
|
||||
<div id="coming_soon">
|
||||
<div class="head">
|
||||
<div class="container">
|
||||
<div class="span6 text">
|
||||
<h4>Der nächste Termin:</h4>
|
||||
<p>
|
||||
{{countdown.event.title}} ist am {{countdown.event.date}}
|
||||
um {{countdown.event.displaytime | time:"H:i" }}
|
||||
in {{countdown.event.location}}
|
||||
|
||||
<br/>
|
||||
{% if countdown.participation == "?" %}
|
||||
Du hast dich noch nicht für diesen Termin eingetragen!
|
||||
{% elif countdown.participation == "Yes" %}
|
||||
Du hast für diesen Termin zugesagt.
|
||||
{% elif countdown.participation == "No" %}
|
||||
Du hast für diesen Termin abgesagt.
|
||||
{%endif %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="span6 count" id="clock">
|
||||
<div class="box last">
|
||||
<div class="circle"> <span id="seconds"></span> </div>
|
||||
<p>Sekunden</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="circle"> <span id="minutes"></span> </div>
|
||||
<p>Minuten</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="circle"> <span id="hours"></span> </div>
|
||||
<p>Stunden</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="circle"> <span id="days"></span> </div>
|
||||
<p>Tage</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
@@ -3,261 +3,14 @@
|
||||
|
||||
{% load sekizai_tags staticfiles %}
|
||||
|
||||
|
||||
{% block feature_slider %}
|
||||
|
||||
{% addtoblock "css" %}
|
||||
<style>
|
||||
|
||||
#eventManagement.slide .info {
|
||||
position: absolute;
|
||||
top: 260px;
|
||||
left: 8%;
|
||||
width: 24%;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
#eventManagement.slide .info a {
|
||||
text-transform: uppercase;
|
||||
color: rgb(255, 255, 255);
|
||||
background: none repeat scroll 0% 0% rgb(166, 3, 3);
|
||||
font-size: 25px;
|
||||
font-weight: bolder;
|
||||
padding: 15px 24px;
|
||||
border: 0px none;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
transition: background 0.2s linear 0s, box-shadow 0.2s linear 0s;
|
||||
}
|
||||
#eventManagement.slide .info .subtitle {
|
||||
margin: 25px;
|
||||
font-size: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
#eventManagement.slide .info .subtitlebg
|
||||
{
|
||||
background: none repeat scroll 0% 0% rgb(243, 243, 243);
|
||||
padding: 15px 24px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
{% endaddtoblock %}
|
||||
|
||||
<section id="feature_slider" class="">
|
||||
<article class="slide" id="eventManagement" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/andi2.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<a href="/events">Einsatzplanung</a>
|
||||
<div class="subtitle subtitlebg">
|
||||
{% if hasParticipationSetForAllEvents %}
|
||||
Sehr gut - du hast dich für alles eingetragen
|
||||
{% else %}
|
||||
Du hast dich noch nicht für alle Termine eingetragen!!
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slide" id="eventManagement" style="background: url('{{STATIC_URL}}/img/backgrounds/silver.jpg') repeat-x top center;">
|
||||
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/blechreiz01/gruppe.png" />
|
||||
<div class="info">
|
||||
<a href="/messages">Forum</a>
|
||||
<div class="subtitle"> Nachricht an alle schreiben... </div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{% include "website/slider_intern_area.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% addtoblock "css" strip %}<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/lib/animate.css" media="screen, projection">{% endaddtoblock %}
|
||||
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/coming-soon.css" type="text/css" media="screen" />{% endaddtoblock %}
|
||||
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/contact.css" type="text/css" media="screen" />{% endaddtoblock %}
|
||||
|
||||
{% if event %}
|
||||
|
||||
{% addtoblock "js" %}
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
|
||||
|
||||
function callback(event) {
|
||||
$this = $(this);
|
||||
$this.find('span#'+event.type).html(event.value);
|
||||
switch(event.type) {
|
||||
case "seconds":
|
||||
case "minutes":
|
||||
case "hours":
|
||||
case "days":
|
||||
case "weeks":
|
||||
case "daysLeft":
|
||||
case "finished":
|
||||
}
|
||||
}
|
||||
|
||||
$('div#clock').countdown(new Date().valueOf() + {{epoch}} , callback);
|
||||
});
|
||||
</script>
|
||||
{% endaddtoblock %}
|
||||
|
||||
|
||||
|
||||
<div id="coming_soon">
|
||||
<div class="head">
|
||||
<div class="container">
|
||||
<div class="span6 text">
|
||||
<h4>Der nächste Termin:</h4>
|
||||
<p>
|
||||
{{event.title}} ist am {{event.date}} um {{event.displaytime | time:"H:i" }} in {{event.location}}
|
||||
|
||||
<br/>
|
||||
{% if participation == "?" %}
|
||||
Du hast dich noch nicht für diesen Termin eingetragen!
|
||||
{% elif participation == "Yes" %}
|
||||
Du hast für diesen Termin zugesagt.
|
||||
{% elif participation == "No" %}
|
||||
Du hast für diesen Termin abgesagt.
|
||||
{%endif %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="span6 count" id="clock">
|
||||
<div class="box last">
|
||||
<div class="circle">
|
||||
<span id="seconds"></span>
|
||||
</div>
|
||||
<p>Sekunden</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="circle">
|
||||
<span id="minutes"></span>
|
||||
</div>
|
||||
<p>Minuten</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="circle">
|
||||
<span id="hours"></span>
|
||||
</div>
|
||||
<p>Stunden</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="circle">
|
||||
<span id="days"></span>
|
||||
</div>
|
||||
<p>Tage</p>
|
||||
</div>
|
||||
<!-- <div class="box">
|
||||
<div class="circle">
|
||||
<span id="weeks"></span>
|
||||
</div>
|
||||
<p>Weeks</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% addtoblock "js" %}
|
||||
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&language=de"></script>
|
||||
<script type="text/javascript" src="{{STATIC_URL}}/js/jquery-ui-1.10.0.custom.min.js" ></script>
|
||||
|
||||
{% if hasNextConcertInfo %}
|
||||
<script type="text/javascript">
|
||||
// Kartenparameter beim Laden der Seite festlegen
|
||||
$(document).ready(function() {
|
||||
// Das Element für die Anzeige suchen
|
||||
var m = $("#map")[0];
|
||||
// Mittelpunkt der Karte
|
||||
var myLatlng = new google.maps.LatLng(49.340174,10.890595);
|
||||
var myOptions = {
|
||||
zoom: 10,
|
||||
center: myLatlng,
|
||||
mapTypeId: google.maps.MapTypeId.ROAD,
|
||||
}
|
||||
var directionsService = new google.maps.DirectionsService();
|
||||
var directionsDisplay = new google.maps.DirectionsRenderer();
|
||||
var map = new google.maps.Map(m, myOptions);
|
||||
|
||||
directionsDisplay.setMap( map );
|
||||
|
||||
var request = {
|
||||
origin: "{{routeInfo.origin}}",
|
||||
destination: "{{routeInfo.destination}}",
|
||||
travelMode: google.maps.DirectionsTravelMode.DRIVING
|
||||
}
|
||||
|
||||
directionsService.route(request, function(response, status) {
|
||||
if (status == google.maps.DirectionsStatus.OK) {
|
||||
directionsDisplay.setDirections(response);
|
||||
|
||||
var leg = response.routes[0].legs[0];
|
||||
|
||||
$("#route_duration").html( leg.duration.text );
|
||||
$("#route_distance").html( leg.distance.text ) ;
|
||||
}
|
||||
});
|
||||
|
||||
$("#map_box a").click( function() {
|
||||
$("#map_box").hide();
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% endaddtoblock %}
|
||||
|
||||
|
||||
|
||||
{% addtoblock "css" %}
|
||||
<style>
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
#map_box a {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endaddtoblock %}
|
||||
|
||||
{% if hasNextConcertInfo %}
|
||||
<div id="contact">
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="map_box" class="row map">
|
||||
<div class="container">
|
||||
<div id="route_info_box" class="span5 box_wrapp">
|
||||
<div class="box_cont">
|
||||
<div class="head">
|
||||
<h6>Fahrt zum nächsten Konzert:</h6>
|
||||
</div>
|
||||
Nächstes Konzert ist in {{nextConcert.location}} am {{nextConcert.date}} um {{nextConcert.time | time:"H:i" }} <br/>
|
||||
{% if nextConcert.meeting_time %} Treffpunkt ist um {{ nextConcert.meeting_time | time:"H:i" }} <br/> {% endif %}
|
||||
|
||||
<table>
|
||||
<tr> <td> Fahrzeit:</td> <td> <span id="route_duration"></span> </td> </tr>
|
||||
<tr> <td> Strecke: </td> <td> <span id="route_distance"></span> </td> </tr>
|
||||
</table>
|
||||
<a class="btn" >Schliessen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
{% include "website/event_countdown.html" %}
|
||||
{% include "website/concert_route.html" %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
99
website/templates/website/slider_intern_area.html
Normal file
99
website/templates/website/slider_intern_area.html
Normal file
@@ -0,0 +1,99 @@
|
||||
{% load sekizai_tags staticfiles %}
|
||||
|
||||
|
||||
|
||||
{% comment %}
|
||||
Displays a slider linking to
|
||||
/events
|
||||
/messages
|
||||
/addressbook
|
||||
Requires context "hasParticipationSetForAllEvents"
|
||||
to diplay if a user has finished the event planning
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% addtoblock "css" %}
|
||||
|
||||
<style>
|
||||
|
||||
.slide .info {
|
||||
position: absolute;
|
||||
top: 260px;
|
||||
left: 8%;
|
||||
width: 24%;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.slide .info a {
|
||||
text-transform: uppercase;
|
||||
color: rgb(255, 255, 255);
|
||||
background: none repeat scroll 0% 0% rgb(166, 3, 3);
|
||||
font-size: 25px;
|
||||
font-weight: bolder;
|
||||
padding: 15px 24px;
|
||||
border: 0px none;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
transition: background 0.2s linear 0s, box-shadow 0.2s linear 0s;
|
||||
}
|
||||
.slide .info .subtitle {
|
||||
margin: 25px;
|
||||
font-size: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
.slide .info .subtitlebg
|
||||
{
|
||||
background: none repeat scroll 0% 0% rgb(243, 243, 243);
|
||||
padding: 10px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endaddtoblock %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section id="feature_slider" class="">
|
||||
|
||||
<article class="slide" id="slide_eventManagement"
|
||||
style="background: url('{{STATIC_URL}}/img/slides/andi2.jpg') repeat-x top center;">
|
||||
|
||||
<div class="info">
|
||||
<a href="/events">Einsatzplanung</a>
|
||||
|
||||
<div class="subtitle subtitlebg">
|
||||
{% if hasParticipationSetForAllEvents %}
|
||||
Sehr gut - du hast dich für alles eingetragen
|
||||
{% else %}
|
||||
Du hast dich noch nicht für alle Termine eingetragen!!
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<article class="slide" id="slide_messages" style="background: url('{{STATIC_URL}}/img/backgrounds/silver.jpg') repeat-x top center;">
|
||||
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/gruppe.png" />
|
||||
<div class="info">
|
||||
<a href="/messages">Forum</a>
|
||||
<div class="subtitle">Nachricht an alle schreiben...</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slide" id="adressbook"
|
||||
style="background: url('{{STATIC_URL}}/img/slides/spielen2.jpg') repeat-x top center;">
|
||||
<div class="info">
|
||||
<a href="/addressbook">Adressbuch</a>
|
||||
<div class="subtitle subtitlebg">Geburtstage, Telefonnummern, ...</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
from django.shortcuts import render, redirect
|
||||
from django.contrib.auth import authenticate, login, logout
|
||||
|
||||
from django.core.urlresolvers import reverse
|
||||
from django.http import HttpResponse
|
||||
|
||||
from django.utils import simplejson
|
||||
@@ -15,37 +14,42 @@ from musicians.models import Musician
|
||||
|
||||
from datetime import datetime
|
||||
|
||||
|
||||
@login_required
|
||||
def home_view(request):
|
||||
context = dict()
|
||||
|
||||
|
||||
# Event participation for slider text
|
||||
context['hasParticipationSetForAllEvents'] = EventParticipation.hasUserSetParticipationForAllEvents( request.user)
|
||||
|
||||
|
||||
# Countdown
|
||||
countdown = dict()
|
||||
events = Event.objects.filter( date__gte = datetime.now() ).order_by('date')[:1]
|
||||
if ( len(events) > 0 ):
|
||||
print "len(events): " + str( len(events ))
|
||||
nextEvent = events[0]
|
||||
part = EventParticipation.objects.filter( musician__user = request.user ).filter( event = nextEvent )
|
||||
part = EventParticipation.objects.filter( user = request.user ).filter( event = nextEvent )
|
||||
|
||||
eventTime = datetime( events[0].date.year, events[0].date.month, events[0].date.day,
|
||||
events[0].displaytime.hour, events[0].displaytime.minute )
|
||||
|
||||
context['hasParticipationSetForAllEvents'] = EventParticipation.hasUserSetParticipationForAllEvents( request.user)
|
||||
context['event'] = events[0]
|
||||
countdown['event'] = events[0]
|
||||
countdown['epoch'] = int( (eventTime - datetime.now() ).total_seconds() * 1000 )
|
||||
countdown['participation'] = part[0].status
|
||||
|
||||
context['epoch'] = int( (eventTime - datetime.now() ).total_seconds() * 1000 )
|
||||
context['participation'] = part[0].status
|
||||
else:
|
||||
context['hasParticipationSetForAllEvents'] = True
|
||||
|
||||
context['countdown'] = countdown
|
||||
|
||||
|
||||
# Route to concert
|
||||
nextConcerts = Event.objects.filter( date__gte = datetime.now(), type = 'Conc' ).order_by('date')[:1]
|
||||
if len( nextConcerts) > 0 :
|
||||
nextConcert = nextConcerts[0]
|
||||
|
||||
routeInfo = dict()
|
||||
|
||||
user = Musician.objects.get( user = request.user );
|
||||
routeInfo['origin'] = user.street + ", " + str( user.zip_code ) + " " + user.city
|
||||
musician = Musician.objects.get( user = request.user );
|
||||
routeInfo['origin'] = musician.street + ", " + str( musician.zip_code ) + " " + musician.city
|
||||
|
||||
if nextConcert.map_location:
|
||||
# map_location has format "lat,longitute,zoomlevel"
|
||||
@@ -59,6 +63,7 @@ def home_view(request):
|
||||
else:
|
||||
context['hasNextConcertInfo'] = False
|
||||
|
||||
|
||||
return render( request, 'website/mainpage.html', context )
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user