From bb8174400a38d890871852d89f0dee9db683d8f4 Mon Sep 17 00:00:00 2001
From: Patrick Mayr <patrick@fet.at>
Date: Mon, 7 Mar 2022 07:03:14 +0000
Subject: [PATCH] add gallery design

---
 fet2020/templates/gallery/album.html | 117 ++++++++++++++-------------
 fet2020/templates/gallery/index.html |  42 +++++-----
 2 files changed, 79 insertions(+), 80 deletions(-)

diff --git a/fet2020/templates/gallery/album.html b/fet2020/templates/gallery/album.html
index 64b150d2..9b46dfe5 100644
--- a/fet2020/templates/gallery/album.html
+++ b/fet2020/templates/gallery/album.html
@@ -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 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 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 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>
-</div>
+</main>
 
 <script src="{% static 'Gallery-3.3.0/js/blueimp-gallery.min.js' %}"></script>
 <script>
diff --git a/fet2020/templates/gallery/index.html b/fet2020/templates/gallery/index.html
index 1ba0ed32..9b055c64 100644
--- a/fet2020/templates/gallery/index.html
+++ b/fet2020/templates/gallery/index.html
@@ -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 %}