News styling

molgen · Jun 2, 2019 · 70bf6ea · 70bf6ea
1 parent 3514c2e
commit 70bf6ea
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 14 deletions.
diff --git a/mpicms/base/templatetags/__init__.py b/mpicms/base/templatetags/__init__.py
diff --git a/mpicms/base/templatetags/url_tags.py b/mpicms/base/templatetags/url_tags.py
@@ -0,0 +1,11 @@
+from django import template
+
+
+register = template.Library()
+
+
+@register.simple_tag
+def url_replace(request, field, value):
+    dict_ = request.GET.copy()
+    dict_[field] = value
+    return dict_.urlencode()
diff --git a/mpicms/news/models.py b/mpicms/news/models.py
@@ -1,5 +1,6 @@
 from django.db import models
 from django.utils.translation import gettext as _
+from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
 
 from wagtail.core.models import Page
 from wagtail.core.fields import RichTextField
@@ -17,6 +18,24 @@ class NewsPage(CategoryMixin, Page):
     parent_page_types = ['base.CategoryPage', 'base.HomePage']
     subpage_types = ['NewsEntry']
     show_in_menus_default = False
+    paginated_by = 2
+
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request, *args, **kwargs)
+
+        paginator = Paginator(self.news_items, self.paginated_by)
+
+        page = request.GET.get("page")
+        try:
+            posts = paginator.page(page)
+        except PageNotAnInteger:
+            posts = paginator.page(1)
+        except EmptyPage:
+            posts = paginator.page(paginator.num_pages)
+
+        context['paginator'] = paginator
+        context["news_items"] = posts
+        return context
 
     @property
     def news_items(self):
@@ -43,5 +62,6 @@ class NewsEntry(CategoryMixin, Page):
     parent_page_types = ['NewsPage']
 
     class Meta:  # noqa
+        ordering = ['-date']
         verbose_name = _("news entry")
         verbose_name_plural = _("news entries")
diff --git a/mpicms/static/css/custom.css b/mpicms/static/css/custom.css
@@ -177,13 +177,24 @@ select, input {
 }
 
 .card {
-  margin: 1rem;
+  margin: 1rem 2rem 1rem 0;
   flex-grow: 1;
-  flex-basis: 18rem;
   width: inherit;
   flex-shrink: 0;
 }
 
+.is-preview {
+  flex-basis: 18rem;
+}
+
+.category-label {
+  float: right;
+  font-size: 90%;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: grey;
+}
+
 .flex-align {
   display: flex !important;
   flex-wrap: nowrap;
@@ -235,15 +246,24 @@ select, input {
   background: #eeeeee;
 }
 
-.fa-chevron-right {
-  padding-left: 0.8rem;
-}
-
 .select:not(.is-multiple):not(.is-loading)::after {
   border-color: #006c66;
 }
 
 /* Full Calendar */
 .fc-button {
   border-radius: 0 !important;
+}
+
+/* Pagination */
+.is-current {
+  background-color: transparent !important;
+  border-color: #006c66 !important;
+  /* font-weight: bold; */
+}
+
+.pagination-link, .pagination-next, .pagination-previous {
+  border-radius: 0 !important;
+  color: black !important;
+  /* box-shadow: 1px 1px 0px 0px #eeeeee; */
 }
diff --git a/mpicms/templates/base/components/pagination.html b/mpicms/templates/base/components/pagination.html
@@ -0,0 +1,61 @@
+{% load url_tags %}
+
+{% firstof items.number '1' as current %}
+
+<nav class="pagination is-centered" role="navigation" aria-label="pagination">
+    <a class="pagination-previous"><i class="fas fa-chevron-left"></i></a>
+    <ul class="pagination-list">
+        {% if current|add:0 >= 3 %}
+            <li>
+                <a class="pagination-link" href="?{% url_replace request 'page' 1 %}">1</a>
+            </li>
+            {% if current|add:0 >= 4 %}
+                <li>
+                    <span class="pagination-ellipsis">&hellip;</span>
+                </li>
+            {% endif %}
+        {% endif %}
+
+        {% if current|add:0 >= 2 %}
+        <li>
+            <a class="pagination-link" href="?{% url_replace request 'page' current|add:'-1' %}">{{ current|add:'-1' }}</a>
+        </li>
+        {% endif %}
+
+        <li>
+            <a class="pagination-link is-current" aria-current="page">{{ current }}</a>
+        </li>
+
+        {% if current|add:0 <= paginator.num_pages|add:'-1' %}
+        <li>
+            <a class="pagination-link" href="?{% url_replace request 'page' current|add:'1' %}">{{ current|add:'1' }}</a>
+        </li>
+        {% endif %}
+
+        {% if current|add:2 <= paginator.num_pages %}
+            {% if current|add:3 <= paginator.num_pages %}
+                <li>
+                    <span class="pagination-ellipsis">&hellip;</span>
+                </li>
+            {% endif %}
+            <li>
+                <a class="pagination-link" href="?{% url_replace request 'page' paginator.num_pages %}">{{ paginator.num_pages }}</a>
+            </li>
+        {% endif %}
+    </ul>
+    <a class="pagination-next"><i class="fas fa-chevron-right"></i></a>
+</nav>
+
+<!-- <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+        <a class="pagination-previous">Previous</a>
+        <a class="pagination-next">Next page</a>
+        <ul class="pagination-list">
+          <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
+          <li><span class="pagination-ellipsis">&hellip;</span></li>
+          <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
+          <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
+          <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
+          <li><span class="pagination-ellipsis">&hellip;</span></li>
+          <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
+        </ul>
+      </nav> -->
diff --git a/mpicms/templates/news/components/cards.html b/mpicms/templates/news/components/cards.html
@@ -2,7 +2,7 @@
 
 <div class="flex-base">
     {% for item in items|slice:3 %}
-        <div class="card">
+        <div class="card is-preview">
             <div class="card-content">
                 <a href="{% pageurl item %}" class="title is-4">{{ item.title }}</a>
                 <time datetime="{{ item.specific.date }}">{{ item.specific.date }}</time>

diff --git a/mpicms/templates/news/components/news_list.html b/mpicms/templates/news/components/news_list.html
@@ -2,7 +2,7 @@
 {% load wagtailcore_tags %}
 
 {% for news_page in news %}
-    {% with news_page.get_children.live as news_entries %}
+    {% with news_page.specific.news_items as news_entries %}
         {% if news_entries %}
         <h4>{{ news_page.title }}</h4>
         <ul class="menu-list">

diff --git a/mpicms/templates/news/components/news_preview.html b/mpicms/templates/news/components/news_preview.html
@@ -8,7 +8,7 @@
         <h3 class="title is-3">{{ news_page.title }}</h3>
         {% include 'news/components/cards.html' with items=news_entries %}
         <div class="section-button">
-            <a href="{% pageurl news_page %}"><button class="button">{% trans 'All news' %}<i class="fas fa-chevron-right"></i></button></a>
+            <a href="{% pageurl news_page %}"><button class="button">{% trans 'All news' %}&nbsp&nbsp<i class="fas fa-chevron-right"></i></button></a>
         </div>
         {% endif %}
     {% endwith %}

diff --git a/mpicms/templates/news/news_page.html b/mpicms/templates/news/news_page.html
@@ -6,20 +6,28 @@
 
 <section class="section">
     <h1 class="title">{{ page.title }}</h1>
-    {% for child in page.news_items %}
-        <a href="{% pageurl child %}">
+    <div class="flex-base">
+    {% for child in news_items %}
+        <!-- <a href="{% pageurl child %}"> -->
             <div class="card">
                 <div class="card-content">
                     <time datetime="{{ child.specific.date }}">{{ child.specific.date }}</time>
-                    <p class="title">{{ child.title }}</p>
+                    {% if page.show_all and child.category %}
+                        <a href="{% pageurl child.category %}" class="category-label">{{ child.category }}</a>
+                    {% endif %}
+                    <a href="{% pageurl child %}" class="title is-4">{{ child.title }}</a>
                     <div class="content">
                         {{ child.specific.preview }}
+                        <a href="{% pageurl child %}" class="card-footer-item card-link"><i class="fas fa-chevron-right"></i></a>
                     </div>
                 </div>
             </div>
-        </a>
+        <!-- </a> -->
     {% endfor %}
-
+</div>
 </section>
+<div class="section">
+{% include 'base/components/pagination.html' with items=news_items %}
+</div>
 
 {% endblock %}