add gallery design

fet2020/templates/gallery/album.html

@@ -1,51 +1,51 @@
-{% 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>
+
+    <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>
 
-<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 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">
-                    <a class="button" href="{% url 'admin:gallery_album_change' album.id %}">Album bearbeiten</a>
+                <i class="fa-regular fa-pen-to-square mr-1"></i>Album bearbeiten
-                </div>
+            </a>
         {% else %}
-                <div class="cell large-3 medium-4 small-12">
+            <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">
-                    <a class="button" href="{% url 'admin:gallery_album_add' %}">neues Album hinzufügen</a>
+                <i class="fa-regular fa-pen-to-square mr-1"></i>neues Album hinzufügen
-                </div>
+            </a>
         {% endif %}
     {% endif %}
-    </div>
-    <hr>
 
-    <div class="grid-x">
+    <section class="text-gray-800 dark:text-gray-200 my-2 sm:my-4">
-        <div class="cell">
+        <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>
-            {{ album.title }}<br>
         {% if album.photographer %}
-                Fotograf(en): {{ album.photographer }}<br>
+            <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 %}
-                Datum: {{ album.event_date }}<br>
+            <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 %}
-                <p>
+            <div class="db-page-content-left mt-2">
-                {{ album.description|safe }}
+                <p>{{ album.description|safe }}</p>
+            </div>
         {% endif %}
-        </div>
+    </section>
-    </div>
-    <hr>
-
     <!-- 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>
@@ -57,18 +57,19 @@
         <ol class="indicator"></ol>
         </div>
     
-    <div id="links" class="grid-x">
+        <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="cell large-2 medium-3 small-12">
+                <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 }}">
+                        <img src="{{ image.thumb_url }}" alt="{{ image.title }}" class="rounded-sm">
                     {% else %}
-                    <img src="{{ image.image_url }}" alt="{{ image.title }}">
+                        <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>

fet2020/templates/gallery/index.html

@@ -1,33 +1,31 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
-{% load static %}
+
+{% 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 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-items-center gap-4">
-    <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">
         {% 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 }}">
+                    <img src="{{ album.thumbnail }}" class="rounded">
-                    {{ album.title }}
+                    <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 %}