120 lines
No EOL
3.8 KiB
HTML
120 lines
No EOL
3.8 KiB
HTML
{% extends "partners/base.html" %}
|
|
{% load i18n %}
|
|
{% load bootstrap4 %}
|
|
{% load splitter %}
|
|
{% block "dashboardcontent" %}
|
|
<div class="col-12 col-md-10 col-lg-10 dashboard-content booking-trips">
|
|
<h2 class="dash-content-title">Deine Bilder</h2>
|
|
<div class="dash-content-title"><small>für {{ establishment.name }}</small></div>
|
|
<button
|
|
class="position-relative btn-primary text-center"
|
|
type="button"
|
|
data-target="#create-image" data-toggle="modal"
|
|
>Bild hochladen</button>
|
|
|
|
<!-- Carousel wrapper -->
|
|
<div
|
|
id="carouselMultiItemExample"
|
|
class="carousel slide carousel-dark text-center"
|
|
data-ride="carousel"
|
|
>
|
|
<!-- Controls -->
|
|
<div class="d-flex justify-content-center mb-4">
|
|
<button
|
|
class="carousel-control-prev position-relative btn-secondary"
|
|
type="button"
|
|
data-target="#carouselMultiItemExample"
|
|
data-slide="prev"
|
|
>
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Zurück</span>
|
|
</button>
|
|
<button
|
|
class="carousel-control-next position-relative btn-secondary"
|
|
type="button"
|
|
data-target="#carouselMultiItemExample"
|
|
data-slide="next"
|
|
>
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Weiter</span>
|
|
</button>
|
|
</div>
|
|
<!-- Inner -->
|
|
<div class="carousel-inner py-4">
|
|
{% splitter object_list 3 as chunks %}
|
|
{% for chunk in chunks %}
|
|
<!-- Single item -->
|
|
<div class="carousel-item {% if forloop.first %}active{% endif %}">
|
|
<div class="container">
|
|
<div class="row">
|
|
{% for image in chunk %}
|
|
<div class="col-lg-4 {% if forloop.first %}d-none d-lg-block{% endif %}">
|
|
<div class="card">
|
|
<img src="{{ image.url }}" class="card-img-top" alt="{{ image.title }}" />
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ image.title }}</h5>
|
|
<p class="card-text">{{ image.comment }}</p>
|
|
<a href="#!" class="btn btn-primary">Löschen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
<!-- Inner -->
|
|
</div>
|
|
<!-- Carousel wrapper -->
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block "modal" %}
|
|
<div id="create-image" class="modal custom-modal fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Bild hochladen</h3>
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
</div><!-- end modal-header -->
|
|
|
|
<div class="modal-body">
|
|
<form enctype="multipart/form-data" method="POST">
|
|
{% csrf_token %}
|
|
{% bootstrap_form form %}
|
|
<button class="btn btn-orange btn-block">Hochladen...</button>
|
|
</form>
|
|
</div><!-- end modal-bpdy -->
|
|
</div><!-- end modal-content -->
|
|
</div><!-- end modal-dialog -->
|
|
</div><!-- end edit-profile -->
|
|
|
|
<!-- Modal 1 -->
|
|
<div
|
|
class="modal fade"
|
|
id="exampleModal1"
|
|
tabindex="-1"
|
|
aria-labelledby="exampleModal1Label"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="ratio ratio-16x9">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/A3PDXmYoF5U"
|
|
title="YouTube video"
|
|
allowfullscreen width="100%" height="100%"
|
|
></iframe>
|
|
</div>
|
|
|
|
<div class="text-center py-3">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |