module templates et static communs
This commit is contained in:
parent
d03d2f3371
commit
c9e613adda
109 changed files with 221 additions and 225 deletions
158
timeline/static/timeline/timeline.css
Normal file
158
timeline/static/timeline/timeline.css
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
.timeline {
|
||||
list-style: none;
|
||||
padding: 20px 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 3px;
|
||||
background-color: #eeeeee;
|
||||
left: 50%;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
|
||||
.timeline > li {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline > li:before,
|
||||
.timeline > li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline > li:before,
|
||||
.timeline > li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel {
|
||||
width: 46%;
|
||||
float: left;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel:before {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
right: -15px;
|
||||
display: inline-block;
|
||||
border-top: 15px solid transparent;
|
||||
border-left: 15px solid #ccc;
|
||||
border-right: 0 solid #ccc;
|
||||
border-bottom: 15px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel:after {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
right: -14px;
|
||||
display: inline-block;
|
||||
border-top: 14px solid transparent;
|
||||
border-left: 14px solid #fff;
|
||||
border-right: 0 solid #fff;
|
||||
border-bottom: 14px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-badge {
|
||||
color: #fff;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
margin-left: -25px;
|
||||
background-color: #999999;
|
||||
z-index: 100;
|
||||
border-top-right-radius: 50%;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel:before {
|
||||
border-left-width: 0;
|
||||
border-right-width: 15px;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel:after {
|
||||
border-left-width: 0;
|
||||
border-right-width: 14px;
|
||||
left: -14px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.timeline-badge.primary {
|
||||
background-color: #2e6da4 !important;
|
||||
}
|
||||
|
||||
.timeline-badge.success {
|
||||
background-color: #3f903f !important;
|
||||
}
|
||||
|
||||
.timeline-badge.warning {
|
||||
background-color: #f0ad4e !important;
|
||||
}
|
||||
|
||||
.timeline-badge.danger {
|
||||
background-color: #d9534f !important;
|
||||
}
|
||||
|
||||
.timeline-badge.info {
|
||||
background-color: #5bc0de !important;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
margin-top: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.timeline-body > p,
|
||||
.timeline-body > ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-body > p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.timeline > li > img{
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.timeline-body > img{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
@ -1,196 +1,178 @@
|
|||
{% extends "common_files/base.html" %}
|
||||
|
||||
{% block description %}Site de la musique de Meyenheim{% endblock %}
|
||||
|
||||
{% block titre %}Évènements{% endblock %}
|
||||
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
{% block extra_head %}
|
||||
<link href="{% static "timeline/timeline.css" %}" rel="stylesheet">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Site de la musique de Meyenheim">
|
||||
<meta name="author" content="Paul TREHIOU">
|
||||
|
||||
<title>Musique fraternité - Évènements</title>
|
||||
|
||||
{% include "include_head.html" %}
|
||||
|
||||
<link href="{% static "timeline.css" %}" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
@media (min-width: 768px) {
|
||||
.navbar-default .nav > li > a,
|
||||
.navbar-default .nav > li > a:focus {
|
||||
color: #222222;
|
||||
}
|
||||
.navbar-default .nav > li > a:hover,
|
||||
.navbar-default .nav > li > a:focus:hover {
|
||||
color: #F05F40;
|
||||
}
|
||||
<style>
|
||||
@media (min-width: 768px) {
|
||||
.navbar-default .nav > li > a,
|
||||
.navbar-default .nav > li > a:focus {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.timeline-body > a > img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
.navbar-default .nav > li > a:hover,
|
||||
.navbar-default .nav > li > a:focus:hover {
|
||||
color: #F05F40;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
|
||||
{% include "navbar.html" %}
|
||||
}
|
||||
|
||||
{% if liste_evenements %}
|
||||
.timeline-body > a > img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% for evenement in liste_evenements %}
|
||||
{% block contenu %}
|
||||
{% if liste_evenements %}
|
||||
|
||||
{% ifchanged evenement.annee evenement.evenement_passe %}
|
||||
{% for evenement in liste_evenements %}
|
||||
|
||||
{% if not forloop.first %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% ifchanged evenement.annee evenement.evenement_passe %}
|
||||
|
||||
<section id="timeline">
|
||||
<div class="container">
|
||||
{% if not forloop.first %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% ifchanged evenement.evenement_passe %}
|
||||
<div class="page-header">
|
||||
<h1 id="timeline">{{ evenement.evenement_passe | yesno:"Évènements passés, Evènements à venir" }}</h1>
|
||||
</div>
|
||||
{% endifchanged %}
|
||||
<section id="timeline">
|
||||
<div class="container">
|
||||
|
||||
{% ifchanged evenement.annee evenement.evenement_passe %}
|
||||
<h2>{{ evenement.annee }}</h2>
|
||||
{% endifchanged %}
|
||||
{% ifchanged evenement.evenement_passe %}
|
||||
<div class="page-header">
|
||||
<h1 id="timeline">{{ evenement.evenement_passe | yesno:"Évènements passés, Evènements à venir" }}</h1>
|
||||
</div>
|
||||
{% endifchanged %}
|
||||
|
||||
<ul class="timeline">
|
||||
{% ifchanged evenement.annee evenement.evenement_passe %}
|
||||
<h2>{{ evenement.annee }}</h2>
|
||||
{% endifchanged %}
|
||||
|
||||
{% endifchanged %}
|
||||
|
||||
<li class="{% cycle 'timeline-inverted' 'timeline' %}">
|
||||
<div class="timeline-badge info"><i class="glyphicon {% cycle 'glyphicon-menu-right' 'glyphicon-menu-left' %}"></i></div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">{{ evenement.titre }}</h4>
|
||||
<p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>{{ evenement.date }}</small></br>
|
||||
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>{{ evenement.heure_debut }} - {{ evenement.heure_fin }}</small></br>
|
||||
<small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>{{ evenement.lieu }}</small></p>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
{% if evenement.illustration_set.count > 1 %}
|
||||
<div id="carousel-{{ forloop.counter }}" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner" role="listbox">
|
||||
{% for illustration in evenement.illustration_set.all %}
|
||||
<div class="item{% if forloop.first %} active{% endif %}">
|
||||
<a href="#pop_timeline_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" data-toggle="modal">
|
||||
<img src="{{ illustration.image.url }}" class="img-responsive">
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<ul class="timeline">
|
||||
|
||||
<a class="left carousel-control" href="#carousel-{{ forloop.counter }}" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-{{ forloop.counter }}" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
{% endifchanged %}
|
||||
|
||||
<li class="{% cycle 'timeline-inverted' 'timeline' %}">
|
||||
<div class="timeline-badge info"><i class="glyphicon {% cycle 'glyphicon-menu-right' 'glyphicon-menu-left' %}"></i></div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">{{ evenement.titre }}</h4>
|
||||
<p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>{{ evenement.date }}</small></br>
|
||||
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>{{ evenement.heure_debut }} - {{ evenement.heure_fin }}</small></br>
|
||||
<small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>{{ evenement.lieu }}</small></p>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
{% if evenement.illustration_set.count > 1 %}
|
||||
<div id="carousel-{{ forloop.counter }}" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner" role="listbox">
|
||||
{% for illustration in evenement.illustration_set.all %}
|
||||
<div class="item{% if forloop.first %} active{% endif %}">
|
||||
<a href="#pop_timeline_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" data-toggle="modal">
|
||||
<img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>{{ evenement.description }}</p>
|
||||
|
||||
{% for illustration in evenement.illustration_set.all %}
|
||||
<div id="pop_timeline_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img src="{{ illustration.image.url }}" class="img-responsive">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% with evenement.illustration_set.all|first as illustration %}
|
||||
<a href="#pop_timeline_{{ forloop.counter }}" data-toggle="modal">
|
||||
<img src="{{ illustration.image.url }}" class="img-responsive">
|
||||
<a class="left carousel-control" href="#carousel-{{ forloop.counter }}" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-{{ forloop.counter }}" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<p>{{ evenement.description }}</p>
|
||||
<p>{{ evenement.description }}</p>
|
||||
|
||||
<div id="pop_timeline_{{ forloop.counter }}" class="modal fade">
|
||||
{% for illustration in evenement.illustration_set.all %}
|
||||
<div id="pop_timeline_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img src="{{ illustration.image.url }}" class="img-responsive">
|
||||
<img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% with evenement.illustration_set.all|first as illustration %}
|
||||
<a href="#pop_timeline_{{ forloop.counter }}" data-toggle="modal">
|
||||
<img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
|
||||
</a>
|
||||
|
||||
{% if forloop.last %}
|
||||
<hr>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<p>{{ evenement.description }}</p>
|
||||
|
||||
{% endif %}
|
||||
<div id="pop_timeline_{{ forloop.counter }}" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{% endfor %}
|
||||
{% if forloop.last %}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% include "contact.html" %}
|
||||
|
||||
{% include "footer.html" %}
|
||||
{% endfor %}
|
||||
|
||||
{% include "include_foot.html" %}
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
window.onload = function(){$('.carousel').each(function(){
|
||||
var items = $(this).find(".item"),
|
||||
heights = [],
|
||||
tallest;
|
||||
{% include "common_files/contact.html" %}
|
||||
|
||||
if (items.length) {
|
||||
function normalizeHeights() {
|
||||
items.each(function() { //add heights to array
|
||||
heights.push($(this).height());
|
||||
});
|
||||
tallest = Math.max.apply(null, heights); //cache largest value
|
||||
items.each(function() {
|
||||
$(this).css('min-height',tallest + 'px');
|
||||
});
|
||||
};
|
||||
normalizeHeights();
|
||||
<script>
|
||||
window.onload = function(){$('.carousel').each(function(){
|
||||
var items = $(this).find(".item"),
|
||||
heights = [],
|
||||
tallest;
|
||||
|
||||
$(window).on('resize orientationchange', function () {
|
||||
tallest = 0, heights.length = 0; //reset vars
|
||||
items.each(function() {
|
||||
$(this).css('min-height','0'); //reset min-height
|
||||
});
|
||||
normalizeHeights(); //run it again
|
||||
});
|
||||
}
|
||||
})}
|
||||
</script>
|
||||
if (items.length) {
|
||||
function normalizeHeights() {
|
||||
items.each(function() { //add heights to array
|
||||
heights.push($(this).height());
|
||||
});
|
||||
tallest = Math.max.apply(null, heights); //cache largest value
|
||||
items.each(function() {
|
||||
$(this).css('min-height',tallest + 'px');
|
||||
});
|
||||
};
|
||||
normalizeHeights();
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
$(window).on('resize orientationchange', function () {
|
||||
tallest = 0, heights.length = 0; //reset vars
|
||||
items.each(function() {
|
||||
$(this).css('min-height','0'); //reset min-height
|
||||
});
|
||||
normalizeHeights(); //run it again
|
||||
});
|
||||
}
|
||||
})}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue