From 188bac429de45309df62ce42c007245a642bc4b2 Mon Sep 17 00:00:00 2001
From: Tobias Reisinger <tobias@msrg.cc>
Date: Fri, 3 Jan 2020 13:36:14 +0100
Subject: [PATCH] add: gallery fix: blog

---
 css/custom.css                              | 49 ++++++++++++++-
 templates/blog.html.twig                    |  7 ++-
 templates/gallery.html.twig                 | 29 +++++++++
 templates/item.html.twig                    | 46 ++++----------
 templates/partials/base.html.twig           |  4 --
 templates/partials/blog-list-item.html.twig | 16 ++---
 templates/partials/blog/date.html.twig      |  2 +-
 templates/partials/photoswipe.html.twig     | 66 ++++++++++++++++++++
 templates/partials/sidebar.html.twig        | 42 +++++--------
 templates/pictures.html.twig                | 68 +++++++++++++++++++++
 10 files changed, 255 insertions(+), 74 deletions(-)
 create mode 100644 templates/gallery.html.twig
 create mode 100644 templates/partials/photoswipe.html.twig
 create mode 100644 templates/pictures.html.twig

diff --git a/css/custom.css b/css/custom.css
index 3e0e36c..9ce8310 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -15,10 +15,57 @@ footer
 
 .flex-fill
 {
-    flex:1 1 auto;
+    flex: 1 1 auto;
 }
 
 .card-image img
 {
     width: 100%;
 }
+
+.card-columns img,video
+{
+    width: 100%;
+}
+
+.card-columns
+{
+    column-gap: 1em;
+}
+
+.card-columns.card
+{
+    margin-bottom: 1em;
+}
+
+@media (min-width: 576px)
+{
+    .card-columns
+    {
+        column-count: 2;
+    }
+}
+
+@media (min-width: 768px)
+{
+    .card-columns
+    {
+        column-count: 3;
+    }
+}
+
+@media (min-width: 992px)
+{
+    .card-columns
+    {
+        column-count: 4;
+    }
+}
+
+@media (min-width: 1200px)
+{
+    .card-columns
+    {
+        column-count: 6;
+    }
+}
diff --git a/templates/blog.html.twig b/templates/blog.html.twig
index e6c4a41..56cab08 100644
--- a/templates/blog.html.twig
+++ b/templates/blog.html.twig
@@ -7,14 +7,17 @@
 {% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
 
 {% block content %}
+    {{ page.content }}
     {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
         {% include 'partials/breadcrumbs.html.twig' %}
     {% endif %}
     {% embed 'partials/layout.html.twig' with {blog: page} %}
         {% block item %}
             {% for child in collection %}
-                {% if not loop.first %}
-                    <hr class="my-5">
+                {% if loop.first %}
+                    <hr class="mb-4 mt-1">
+                {% else %}
+                    <hr class="my-4">
                 {% endif %}
                 {% include 'partials/blog-list-item.html.twig' with {blog: page, page: child} %}
             {% endfor %}
diff --git a/templates/gallery.html.twig b/templates/gallery.html.twig
new file mode 100644
index 0000000..701ff1b
--- /dev/null
+++ b/templates/gallery.html.twig
@@ -0,0 +1,29 @@
+{% extends 'partials/base.html.twig' %}
+
+{% set collection = page.collection() %}
+{% set gallery = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
+{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, gallery])|defined(true) %}
+
+{% block content %}
+    {{ page.content }}
+    {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
+        {% include 'partials/breadcrumbs.html.twig' %}
+    {% endif %}
+    {% for child in collection %}
+        {% if loop.first %}
+            <hr class="mb-4 mt-1">
+        {% else %}
+            <hr class="my-4">
+        {% endif %}
+        <a href="{{ child.url }}">
+            {{ child.content }}
+            <div class="card-columns">
+                {% for media_item in child.media.images[:10] %}
+                    <div class="card">
+                        {{ media_item.html }}
+                    </div>
+                {% endfor %}
+            </div>
+        </a>
+    {% endfor %}
+{% endblock %}
diff --git a/templates/item.html.twig b/templates/item.html.twig
index f73fc52..f825d45 100644
--- a/templates/item.html.twig
+++ b/templates/item.html.twig
@@ -3,39 +3,19 @@
 {% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
 {% set show_sidebar = header_var('show_sidebar', [page, blog])|defined(true)  %}
 {% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
-{% set hero_image_name = page.header.hero_image %}
-
-{% block hero %}
-    {% if hero_image_name %}
-        {% set hero_image = page.media[hero_image_name] %}
-        {% set content %}
-            <h1>{{ page.title }}</h1>
-            <h2>{{ page.header.subtitle }}</h2>
-            {% include 'partials/blog/date.html.twig' %}
-            {% include 'partials/blog/taxonomy.html.twig' %}
-        {% endset %}
-        {% include 'partials/hero.html.twig' with {id: 'blog-hero'} %}
 
+{% block content %}
+    {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
+        {% include 'partials/breadcrumbs.html.twig' %}
     {% endif %}
-{% endblock %}
-
-{% block body %}
-<section id="body-wrapper" class="section blog-listing">
-    <section class="container {{ grid_size }}">
-
-        {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
-            {% include 'partials/breadcrumbs.html.twig' %}
-        {% endif %}
-
-        {% embed 'partials/layout.html.twig' %}
-            {% block item %}
-                {% include 'partials/blog-item.html.twig' %}
-            {% endblock %}
-            {% block sidebar %}
-                {% include 'partials/sidebar.html.twig' %}
-            {% endblock %}
-        {% endembed %}
-
-    </section>
-</section>
+    <hr class="mb-4 mt-1">
+
+    {% embed 'partials/layout.html.twig' %}
+        {% block item %}
+            {% include 'partials/blog-item.html.twig' %}
+        {% endblock %}
+        {% block sidebar %}
+            {% include 'partials/sidebar.html.twig' %}
+        {% endblock %}
+    {% endembed %}
 {% endblock %}
diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig
index c51ed8f..7e8fb05 100644
--- a/templates/partials/base.html.twig
+++ b/templates/partials/base.html.twig
@@ -18,16 +18,12 @@
     {# do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) #}
     {% do assets.addCss('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', 100) %}
     {% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
-    {% do assets.addCss('theme://css/photoswipe.css', 98) %}
-    {% do assets.addCss('theme://css/default-skin/default-skin.css', 97) %}
     {% do assets.addCss('theme://css/custom.css', 96) %}
 {% endblock %}
 
 {% block javascripts %}
     {% do assets.addJs('jquery', 100) %}
     {% do assets.addJs('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', 99) %}
-    {% do assets.addJs('theme://js/photoswipe.min.js', 98) %}
-    {% do assets.addJs('theme://js/photoswipe-ui-default.min.js', 98) %}
 {% endblock %}
 
 {% block assets deferred %}
diff --git a/templates/partials/blog-list-item.html.twig b/templates/partials/blog-list-item.html.twig
index ccda73b..075b05f 100644
--- a/templates/partials/blog-list-item.html.twig
+++ b/templates/partials/blog-list-item.html.twig
@@ -5,12 +5,12 @@
         <a href="{{ page.url }}" class="w-100">{{ image.cropZoom(800,400).html|raw }}</a>
     </div>
     {% endif %}
-    <div class="card-header container-fluid row mx-0">
-        <div class="col-12 col-sm-9">
+    <div class="card-header mx-0">
+        <div>
             {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
         </div>
-        <div class="col-12 col-sm-3 text-gray">
-            {% include 'partials/blog/date.html.twig' %}
+        <div class="text-gray ">
+            <small>{% include 'partials/blog/date.html.twig' %}</small>
         </div>
     </div>
     <div class="card-body">
@@ -20,8 +20,10 @@
             {{ page.content|raw }}
         {% endif %}
     </div>
-    <div class="card-footer p-1">
-        {% include 'partials/blog/taxonomy.html.twig' %}
-    </div>
+    {% if page.taxonomy.tag %}
+        <div class="card-footer p-1">
+            {% include 'partials/blog/taxonomy.html.twig' %}
+        </div>
+    {% endif %}
 </div>
 
diff --git a/templates/partials/blog/date.html.twig b/templates/partials/blog/date.html.twig
index a134d24..89b9740 100644
--- a/templates/partials/blog/date.html.twig
+++ b/templates/partials/blog/date.html.twig
@@ -1,5 +1,5 @@
 <span class="blog-date">
     <time class="dt-published" datetime="{{ page.date|date("c") }}">
-        <i class="fa fa-calendar"></i> {{ page.date|date(system.pages.dateformat.short) }}
+        <i class="fa fa-calendar"></i> {{ page.date|date("D d.m.Y H:i") }}
     </time>
 </span>
diff --git a/templates/partials/photoswipe.html.twig b/templates/partials/photoswipe.html.twig
new file mode 100644
index 0000000..c593667
--- /dev/null
+++ b/templates/partials/photoswipe.html.twig
@@ -0,0 +1,66 @@
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+    <!-- Background of PhotoSwipe. 
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+
+        <!-- Container that holds slides. 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+
+        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+        <div class="pswp__ui pswp__ui--hidden">
+
+            <div class="pswp__top-bar">
+
+                <!--  Controls are self-explanatory. Order can be changed. -->
+
+                <div class="pswp__counter"></div>
+
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+
+                <button class="pswp__button pswp__button--share" title="Share"></button>
+
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+                <!-- element will get class pswp__preloader--active when preloader is running -->
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                      <div class="pswp__preloader__cut">
+                        <div class="pswp__preloader__donut"></div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                <div class="pswp__share-tooltip"></div> 
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
diff --git a/templates/partials/sidebar.html.twig b/templates/partials/sidebar.html.twig
index 658e20a..7d40961 100644
--- a/templates/partials/sidebar.html.twig
+++ b/templates/partials/sidebar.html.twig
@@ -6,38 +6,28 @@
     {% include 'partials/simplesearch_searchbox.html.twig' %}
 </div>
 {% endif %}
-{% if config.plugins.relatedpages.enabled and related_pages|length > 0 %}
-<div class="sidebar-content">
-    <h4>{{ 'THEME_QUARK.SIDEBAR.RELATED_POSTS.HEADLINE'|t }}</h4>
-    {% include 'partials/relatedpages.html.twig' %}
-</div>
-{% endif %}
-{% if config.plugins.random.enabled %}
-<div class="sidebar-content">
-	<h4>{{ 'THEME_QUARK.SIDEBAR.RANDOM_ARTICLE.HEADLINE'|t }}</h4>
-	<a class="button" href="{{ base_url }}/random"><i class="fa fa-retweet"></i> {{ 'THEME_QUARK.SIDEBAR.RANDOM_ARTICLE.FEELING_LUCKY'|t }}</a>
-</div>
-{% endif %}
 
 {{ page.find('/modules/sidebar').content|raw }}
 
 {% if config.plugins.taxonomylist.enabled %}
-<div class="sidebar-content">
-    <h4>Tags in diesem Blog</h4>
-    {% include 'partials/taxonomylist.html.twig' with {'base_url':new_base_url, 'taxonomy':'tag'} %}
-</div>
+    <div class="sidebar-content">
+        <h4>Tags in diesem Blog</h4>
+        {% include 'partials/taxonomylist.html.twig' with {'base_url':new_base_url, 'taxonomy':'tag'} %}
+    </div>
+    <hr>
 {% endif %}
 {% if config.plugins.archives.enabled %}
-<div class="sidebar-content">
-    <h4>Archiv</h4>
-	{% include 'partials/archives.html.twig' with {'base_url':new_base_url} %}
-</div>
+    <div class="sidebar-content">
+        <h4>Archiv</h4>
+        {% include 'partials/archives.html.twig' with {'base_url':new_base_url} %}
+    </div>
+    <hr>
 {% endif %}
 {% if config.plugins.feed.enabled %}
-<div class="sidebar-content syndicate">
-    <h4>Blog abonnieren</h4>
-    <a class="btn" href="{{ feed_url }}.atom"><i class="fa fa-rss-square"></i> Atom 1.0</a>
-    <a class="btn" href="{{ feed_url }}.rss"><i class="fa fa-rss-square"></i> RSS</a>
-    {% if config.plugins.feed.enable_json_feed %}<a class="btn" href="{{ feed_url }}.json"><i class="fa fa-rss-square"></i> JSON</a>{% endif %}
-</div>
+    <div class="sidebar-content syndicate">
+        <h4>Blog abonnieren</h4>
+        <a class="btn" href="{{ feed_url }}.atom"><i class="fa fa-rss-square"></i> Atom 1.0</a>
+        <a class="btn" href="{{ feed_url }}.rss"><i class="fa fa-rss-square"></i> RSS</a>
+        {% if config.plugins.feed.enable_json_feed %}<a class="btn" href="{{ feed_url }}.json"><i class="fa fa-rss-square"></i> JSON</a>{% endif %}
+    </div>
 {% endif %}
diff --git a/templates/pictures.html.twig b/templates/pictures.html.twig
new file mode 100644
index 0000000..54c7e30
--- /dev/null
+++ b/templates/pictures.html.twig
@@ -0,0 +1,68 @@
+{% extends 'partials/base.html.twig' %}
+{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
+{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
+
+{% block stylesheets %}
+    {% do assets.addCss('theme://css/photoswipe.css') %}
+    {% do assets.addCss('theme://css/default-skin/default-skin.css') %}
+    {{ parent() }}
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    {% do assets.addJs('theme://js/photoswipe.min.js') %}
+    {% do assets.addJs('theme://js/photoswipe-ui-default.min.js') %}
+{% endblock %}
+
+{% set image_counter = 0 %}
+
+{% block content %}
+    {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
+        {% include 'partials/breadcrumbs.html.twig' %}
+    {% endif %}
+    <hr class="mb-4 mt-1">
+
+    {{ page.content }}
+    <div class="card-columns">
+        {% for media_item in page.media.videos %}
+            <div class="card">
+                {{ media_item.html }}
+            </div>
+        {% endfor %}
+    </div>
+    <div class="card-columns">
+        {% for media_item in page.media.images %}
+            <div class="card" onclick="show_photoswipe({{ loop.index - 1 }})">
+                {{ media_item.html }}
+            </div>
+        {% endfor %}
+    </div>
+
+    {{ dump (image_counter) }}
+
+    {% include 'partials/photoswipe.html.twig' %}
+
+    <script>
+        let pswpElement = document.querySelectorAll('.pswp')[0];
+
+        let items = [
+            {% for media_item in page.media.images %}
+                {
+                    src: '{{ media_item.url }}',
+                    w: {{ media_item.width }},
+                    h: {{ media_item.height }}
+                },
+            {% endfor %}
+        ];
+
+        function show_photoswipe(start_index)
+        {
+            let options = {
+                index: start_index
+            };
+
+            let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+            gallery.init();
+        }
+    </script>
+{% endblock %}