103 lines
3.2 KiB
HTML
103 lines
3.2 KiB
HTML
{% load staticfiles %}
|
|
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@font-face {
|
|
font-family: josefinsans;
|
|
src: url({% static "fonts/josefinsans.ttf" %});
|
|
}
|
|
|
|
*::-moz-selection {
|
|
background: #B0B0B0;
|
|
}
|
|
|
|
*::selection {
|
|
background: #B0B0B0;
|
|
}
|
|
|
|
.descTable{
|
|
width: 100%;
|
|
margin: 0 auto 1em;
|
|
border-bottom: 2px solid;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
font-size: 14px;
|
|
line-height: 2;
|
|
max-width: 100%;
|
|
background-color: transparent;
|
|
font-family: 'josefinsans', 'Arial';
|
|
font-weight: 700;
|
|
color: #5a5a5a;
|
|
}
|
|
</style>
|
|
<meta charset="utf8" />
|
|
</head>
|
|
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
<body>
|
|
{% for show in shows %}
|
|
<table class="descTable">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2"><p style="text-align:center;font-size:22px;">{{ show.title }}</p></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><p style="text-align: left;">{{ show.location }}</p></td><td class="column-2"><p style="text-align: right;">{{ show.category }}</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td><p style="text-align: left;">{{ show.date|date:"l j F Y - H\hi" }}</p></td><td class="column-2"><p style="text-align: right;">{{ show.slots }} place{{ show.slots|pluralize}} {% if show.slots_description != "" %}({{ show.slots_description }}){% endif %} - {{ show.price }} euro{{ show.price|pluralize}}</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<p style="text-align: justify;">{{ show.description }}</p>
|
|
{% for quote in show.quote_set.all %}
|
|
<p style="text-align:center; font-style: italic;">«{{ quote.text }}»{% if show.quote.author %} - {{ quote.author }}{% endif %}</p>
|
|
{% endfor %}
|
|
</td>
|
|
</tr>
|
|
{% if show.image %}
|
|
<tr>
|
|
<td colspan="2"><p style="text-align:center;"><a href="{{ show.ext_link }}"><img class="imgDesc" style="display: inline;" src="{{ MEDIA_URL }}{{ show.image }}" alt="{{ show.title }}"></a></p></td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
{% endfor %}
|
|
<script>
|
|
// Correction de la taille des images
|
|
|
|
$(document).ready(function() {
|
|
$(".descTable").each(function() {
|
|
$(this).width($("body").width());
|
|
});
|
|
|
|
$(".imgDesc").on("load", function() {
|
|
|
|
// Dimensions
|
|
origHeight = 500; // Hauteur souhaitée
|
|
|
|
w = $(this).width();
|
|
h = $(this).height();
|
|
r = w/h; // Ratio de l'image
|
|
maxWidth = $("body").width();
|
|
|
|
if (r * origHeight > maxWidth)
|
|
{
|
|
$(this).width(maxWidth);
|
|
$(this).height(maxWidth/r);
|
|
}
|
|
else
|
|
{
|
|
$(this).width(r * origHeight);
|
|
$(this).height(origHeight);
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|