158 lines
4.0 KiB
HTML
158 lines
4.0 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
{% if request.user.is_staff %}
|
|
<div class="admin-menu">
|
|
<a href="{% url 'admin:content_content_change' content.id %}">Edit</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if content.image_url %}
|
|
<img src="{{ content.image_url }}" width="75%">
|
|
{% endif %}
|
|
<div class="content_detail">
|
|
<h1>{{ content.title }}</h1>
|
|
|
|
<h4>{{ content.header|safe }} </h4>
|
|
<p>{{ content.body|safe }}</p>
|
|
|
|
{% if content.optbtn2 and content.opttext2 %}
|
|
<div class="part2">
|
|
<h4>{{ content.optbtn2|safe }} </h4>
|
|
<p>{{ content.opttext2|safe|linebreaks }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if content.optbtn3 and content.opttext3 %}
|
|
<div class="part3">
|
|
<h4>{{ content.optbtn3|safe }} </h4>
|
|
<p>{{ content.opttext3|safe|linebreaks }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if content.schedule %}
|
|
<div class="schedule">
|
|
<h4>{{content.schedulebutton|default:"Schedule"}}</h4>
|
|
<p>{{ content.schedule|safe|linebreaks }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if content.parent or content.children.exists %}
|
|
<div class="context">
|
|
<b>In This Event</b>:
|
|
<ul>
|
|
{% if content.parent and content.parent.title %}
|
|
<li><a href="{{content.parent.get_absolute_url}}">{{content.parent.title}}</a></li>
|
|
<li><ul>
|
|
{% for node in content.parent.children.all %}
|
|
{% if node.shortname and node.published %}
|
|
<li>
|
|
{% if node == content %}
|
|
{{node.title}}
|
|
{% else %}
|
|
<a href="{{node.get_absolute_url}}">{{ node.title }}</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul><li>
|
|
{% elif content.children.exists %}
|
|
<li>{{content.title}}</li>
|
|
<li><ul>
|
|
{% for node in content.children.all %}
|
|
{% if node.shortname and node.published %}
|
|
<li>
|
|
<a href="{{node.get_absolute_url}}">{{ node.title }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul><li>
|
|
{% else %}
|
|
<li>{{content.title}}</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if content.resources.exists %}
|
|
{% if content.links.exists %}
|
|
<div class="links">
|
|
<b>Links:</b>
|
|
<ul>
|
|
{% for res in content.links %}
|
|
<li>
|
|
<a href="{{res.get_absolute_url}}">{{res.description|default:res.href}}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if content.images.exists %}
|
|
<style>
|
|
.images {
|
|
display: grid;
|
|
grid-template-columns: 128px 128px 128px 128px 128px 128px 128px 128px;
|
|
grid-gap: 10px;
|
|
}
|
|
.images > div {
|
|
width: 128px;
|
|
height: 128px;
|
|
padding: 8px;
|
|
display: table-cell;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.images > div > img {
|
|
transition: width,height 2s;
|
|
max-width: 92%;
|
|
max-height: 92%;
|
|
position: absolute;
|
|
top:0;
|
|
bottom:0;
|
|
left:0;
|
|
right:0;
|
|
margin:auto;
|
|
}
|
|
.images > div > img.active {
|
|
max-width: 92%;
|
|
max-height: 92%;
|
|
position: fixed;
|
|
top:0;
|
|
bottom:0;
|
|
left:0;
|
|
right:0;
|
|
margin:auto;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
<b>Images:</b> <br>
|
|
<div class="images">
|
|
{% for res in content.images %}
|
|
<div>
|
|
{% if res.is_image %}
|
|
<img src="{{res.get_absolute_url}}">
|
|
{% elif res.is_audio %}
|
|
<audio controls src="{{res.get_absolute_url}}"></audio>
|
|
{% elif res.is_video %}
|
|
<video controls src="{{res.get_absolute_url}}"></video>
|
|
{% else %}
|
|
<a href="{{res.get_absolute_url}}">{{res.description|default:res.href}}</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<script>
|
|
document.querySelectorAll('.images > div > img').forEach(function(img) {
|
|
img.addEventListener('click', function() {
|
|
if (this.classList.contains('active')) {
|
|
this.classList.remove('active');
|
|
} else {
|
|
this.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|