shared: Styleguide 2.3.x articles template snippets

shared/templates/shared/article_preview.html

 {% load wagtailcore_tags wagtailimages_tags %}
 
-<article itemtype="http://schema.org/BlogPosting" class="card card--hoveractive article-card bg-black" itemscope="">
+<article itemtype="http://schema.org/BlogPosting" class="card card--hoveractive article-card" itemscope="">
 
   <link itemprop="mainEntityOfPage" href="{{ article.url }}">
 
@@ -32,23 +32,25 @@
           {{ article.date|date:"SHORT_DATE_FORMAT" }}
           <meta itemprop="datePublished" content="{{ article.last_published_at }}" />
         </span>
-        <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
-          <span itemprop="name">{{ article.author }}</span>
-        </span>
+        {% if article.author %}
+          <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
+            <span itemprop="name">{{ article.author }}</span>
+          </span>
+        {% endif %}
       </div>
 
     </div>
   </div>
 
   <div class="card__body article-card__body">
-    <a href="{{ article.url }}" class="hover:line-white"><h1 class="card-headline mb-4 text-white">{{article.title}}</h1></a>
-    <p class="card-body-text flex-grow text-white">{{article.perex}}</p>
+    <a href="{{ article.url }}"><h1 class="card-headline mb-4">{{article.title}}</h1></a>
+    <p class="card-body-text flex-grow">{{article.perex}}</p>
     <div class="inline-block-nogap mt-4">
-          {% for tag in article.tags.all %}
-            <a href="{{ page.root_page.tags_page.url }}#{{ tag }}" class="btn article-card__category-button btn--condensed text-sm font-light btn--grey-700 p-0"   >
-              <div class="btn__body">{{ tag }}</div>
-            </a>
-          {% endfor %}
+        {% for tag in article.tags.all %}
+          <a href="{{ page.root_page.tags_page.url }}#{{ tag }}" class="btn article-card__category-button btn--condensed text-sm font-light btn--grey-700 p-0"   >
+            <div class="btn__body">{{ tag }}</div>
+          </a>
+        {% endfor %}
     </div>
   </div>
 

shared/templates/styleguide/2.3.x/article_card.html

+{% load wagtailcore_tags wagtailimages_tags %}
+
+<article class="card card--hoveractive article-card " itemtype="http://schema.org/BlogPosting" itemscope="">
+  <link itemprop="mainEntityOfPage" href="{% pageurl article %}">
+
+  <div class="article-card-cover">
+    <a href="{% pageurl article %}" itemprop="image" itemtype="http://schema.org/ImageObject" itemscope="">
+      {% image article.image width-800 as img %}
+      <img src="{{ img.url }}" alt="{{ article.title }}">
+      <meta itemprop="url" content="{{ img.url }}">
+    </a>
+    <div class="article-card-cover__details">
+      <div class="article-card-sharing">
+        <div class="social-icon-group ">
+          <a
+            href="https://www.facebook.com/sharer/sharer.php?u={% pageurl article %}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+            class="social-icon social-icon--fill bg-brands-facebook text-white text-sm social-icon--4"
+          ><i class="ico--facebook"></i></a>
+          <a
+            href="https://twitter.com/intent/tweet?text={{ article.title }}&url={% pageurl article %}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+            class="social-icon social-icon--fill bg-brands-twitter text-white text-sm social-icon--4"
+          ><i class="ico--twitter"></i></a>
+        </div>
+      </div>
+      <div class="article-card-meta">
+        <span class="article-card-meta__item" itemprop="description">{{ article.date|date:"SHORT_DATE_FORMAT" }}</span>
+        {% if article.author %}
+          <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
+            <span itemprop="name">{{ article.author }}</span>
+          </span>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+  <div class="card__body article-card__body">
+    <a href="{% pageurl article %}">
+      <h1 class="card-headline mb-4">{{ article.title }}</h1>
+    </a>
+    <p class="card-body-text flex-grow">{{ article.perex }}</p>
+
+    {# TODO tags #}
+    {% comment %}
+    <div class="inline-block-nogap mt-4">
+      <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
+        <div class="btn__body ">Kategorie 1</div>
+      </button>
+      <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
+        <div class="btn__body ">Kategorie 2</div>
+      </button>
+      <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
+        <div class="btn__body ">Dlouhá kategorie 3</div>
+      </button>
+    </div>
+    {% endcomment %}
+
+  </div>
+</article>

shared/templates/styleguide/2.3.x/article_card_list.html

+<div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+  {% for article in articles %}
+    {% include "styleguide/2.3.x/article_card.html" %}
+  {% endfor %}
+</div>

shared/templates/styleguide/2.3.x/pagination.html

+{% load wagtailcore_tags %}
+
+<div class="pagination-container">
+  <nav class="pagination space-x-1">
+
+    {% if paginator.has_previous %}
+    <a href="{% pageurl page %}?page={{ paginator.previous_page_number }}" class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon">
+      <div class="btn__body-wrap">
+        <div class="btn__body ">předchozí</div>
+        <div class="btn__icon ">
+          <i class="ico--chevron-left"></i>
+        </div>
+      </div>
+    </a>
+    {% endif %}
+
+    {% for i in paginator.paginator.page_range %}
+      {% if i == paginator.number %}
+      <a href="{% pageurl page %}?page={{ i }}" class="btn btn--grey-500 btn--condensed hidden md:inline-block">
+      {% else %}
+      <a href="{% pageurl page %}?page={{ i }}" class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block">
+      {% endif %}
+        <div class="btn__body ">{{ i }}</div>
+      </a>
+    {% endfor %}
+
+    {% if paginator.has_next %}
+    <a href="{% pageurl page %}?page={{ paginator.next_page_number }}" class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed">
+      <div class="btn__body-wrap">
+        <div class="btn__body ">další</div>
+        <div class="btn__icon ">
+          <i class="ico--chevron-right"></i>
+        </div>
+      </div>
+    </a>
+    {% endif %}
+
+  </nav>
+</div>