bofh/fet2020
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add gallery design

Browse Source
This commit is contained in:
Patrick Mayr
2022-03-07 07:03:14 +00:00
parent e20f7a006e
commit bb8174400a
2 changed files with 79 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
fet2020/templates/gallery/album.html
View File

@@ -1,74 +1,75 @@
{% extends 'layout.html' %}
{% extends 'base.html' %}
{% load static %}
{% block title %}FET: {{ album.title }}{% endblock %}
{% block galleryheader %}
<link rel="stylesheet" href="{% static 'Gallery-3.3.0/css/blueimp-gallery.min.css' %}">
{% endblock %}
{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
<h1 class="page-title">Fotos</h1>
<div class="grid-container">
<div class="grid-x padding-top-1">
<div class="cell large-3 medium-4 small-12">
<a class="button" href="{% url 'gallery' %}">Zurück</a>
</div>
{% if request.user.is_authenticated %}
{% if album.id %}
<div class="cell large-3 medium-4 small-12">
<a class="button" href="{% url 'admin:gallery_album_change' album.id %}">Album bearbeiten</a>
</div>
{% else %}
<div class="cell large-3 medium-4 small-12">
<a class="button" href="{% url 'admin:gallery_album_add' %}">neues Album hinzufügen</a>
</div>
{% endif %}
<a href="{% url 'gallery' %}" class="self-center sm:self-end btn-small btn-primary w-full sm:w-auto max-w-sm">
<i class="fa-regular fa-pen-to-square mr-1"></i>Zurück
</a>
{% if request.user.is_authenticated %}
{% if album.id %}
<a href="{% url 'admin:gallery_album_change' album.id %}" class="self-center sm:self-end btn-small btn-primary w-full sm:w-auto max-w-sm">
<i class="fa-regular fa-pen-to-square mr-1"></i>Album bearbeiten
</a>
{% else %}
<a href="{% url 'admin:gallery_album_add' %}" class="self-center sm:self-end btn-small btn-primary w-full sm:w-auto max-w-sm">
<i class="fa-regular fa-pen-to-square mr-1"></i>neues Album hinzufügen
</a>
{% endif %}
</div>
<hr>
<div class="grid-x">
<div class="cell">
{{ album.title }}<br>
{% if album.photographer %}
Fotograf(en): {{ album.photographer }}<br>
{% endif %}
{% if album.event_date %}
Datum: {{ album.event_date }}<br>
{% endif %}
{% if album.status == album.DRAFT %}
DRAFT<br>
{% endif %}
{% if album.description %}
<p>
{{ album.description|safe }}
{% endif %}
</div>
</div>
<hr>
{% endif %}
<section class="text-gray-800 dark:text-gray-200 my-2 sm:my-4">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-medium tracking-wide"><i class="fa-solid fa-eye-slash text-gray-600 dark:text-gray-300 mr-2" title="Album ist nicht öffentlich!"></i>{{ album.title }}</h2>
{% if album.photographer %}
<span class="block"><i class="fa-solid fa-camera fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Fotograf:"></i>{{ album.photographer }}</span>
{% endif %}
{% if album.event_date %}
<span class="block"><i class="fa-solid fa-calendar-day fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Datum:"></i>{{ album.event_date }}</span>
{% endif %}
<span class="block"><i class="fa-solid fa-location-dot fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Ort:"></i>Gußhaus 27 - 1040, Wien</span>
{% if album.status == album.DRAFT %}
DRAFT<br>
{% endif %}
{% if album.description %}
<div class="db-page-content-left mt-2">
<p>{{ album.description|safe }}</p>
</div>
{% endif %}
</section>
<!-- The Gallery as lightbox dialog, should be a document body child element -->
<div id="blueimp-gallery" class="blueimp-gallery" aria-label="image gallery" aria-modal="true" role="dialog">
<div class="slides" aria-live="polite"></div>
<h3 class="title"></h3>
<a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft" ></a>
<a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a>
<a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a>
<a class="play-pause" aria-controls="blueimp-gallery" aria-label="play slideshow" aria-keyshortcuts="Space" aria-pressed="false" role="button"></a>
<ol class="indicator"></ol>
</div>
<div class="slides" aria-live="polite"></div>
<h3 class="title"></h3>
<a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft" ></a>
<a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a>
<a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a>
<a class="play-pause" aria-controls="blueimp-gallery" aria-label="play slideshow" aria-keyshortcuts="Space" aria-pressed="false" role="button"></a>
<ol class="indicator"></ol>
</div>
<div id="links" class="grid-x">
{% for image in images %}
<a id="{{ image.title }}" href="{{ image.image_url }}" title="{{ image.title }}" class="cell large-2 medium-3 small-12">
{% if image.thumb_url %}
<img src="{{ image.thumb_url }}" alt="{{ image.title }}">
{% else %}
<img src="{{ image.image_url }}" alt="{{ image.title }}">
{% endif %}
</a>
{% endfor %}
<div id="links" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 justify-items-center gap-3">
{% for image in images %}
<a id="{{ image.title }}" href="{{ image.image_url }}" title="{{ image.title }}" class="block max-w-xs sm:max-w-none">
{% if image.thumb_url %}
<img src="{{ image.thumb_url }}" alt="{{ image.title }}" class="rounded-sm">
{% else %}
<img src="{{ image.image_url }}" alt="{{ image.title }}" class="rounded-sm">
{% endif %}
</a>
{% endfor %}
</div>
</div>
</div>
</main>
<script src="{% static 'Gallery-3.3.0/js/blueimp-gallery.min.js' %}"></script>
<script>

42
fet2020/templates/gallery/index.html
View File

@@ -1,33 +1,31 @@
{% extends 'layout.html' %}
{% load static %}
{% extends 'base.html' %}
{% block title %}FET: Gallery{% endblock %}
{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
<h1 class="page-title">Fotos</h1>
<div class="grid-container">
<div class="grid-x padding-top-1">
{% if request.user.is_authenticated %}
<div class="cell large-3 medium-4 small-12">
<a class="button" href="{% url 'admin:gallery_album_add' %}">neues Album hinzufügen</a>
</div>
{% endif %}
</div>
<div class="grid-x">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-items-center gap-4">
{% for album in albums %}
<div class="cell large-2 medium-3 small-12" {% if album.status == album.DRAFT %}style="background-color:red;"{% endif %}>
{% if album.status == "10" %}
<a href="{% url 'draft-album' album.slug %}">
<a href="{% url 'draft-album' album.slug %}" class="block max-w-xs sm:max-w-none">
{% else %}
<a href="{% url 'album' album.slug %}">
<a href="{% url 'album' album.slug %}" class="block max-w-xs sm:max-w-none">
{% endif %}
<img src="{{ album.thumbnail }}">
{{ album.title }}
<img src="{{ album.thumbnail }}" class="rounded">
<h2 class="px-2 text-proprietary-dark dark:text-sky-300">{{ album.title }}</h2>
<h3 class="px-2 text-sm text-proprietary dark:text-sky-400 font-normal"><i class="fa-regular fa-calendar-day mr-1"></i>{{ album.event_date }}</h3>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% if request.user.is_authenticated %}
<a href="{% url 'admin:gallery_album_add' %}" class="self-center sm:self-end btn-small btn-primary w-full sm:w-auto max-w-sm">
<i class="fa-regular fa-pen-to-square mr-1"></i>neues Album hinzufügen
</a>
{% endif %}
</main>
{% endblock %}