Styling, content preview

molgen · Jun 11, 2019 · 0ca8883 · 0ca8883
1 parent 9fe4f4c
commit 0ca8883
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 41 deletions.
diff --git a/mpicms/static/css/custom.css b/mpicms/static/css/custom.css
@@ -57,9 +57,9 @@ select, input {
   height: 5rem !important;
 }
 
-.contains-breadcrumb {
+/* .contains-breadcrumb {
   padding-top: 1rem;
-}
+} */
 
 .title {
   color: #006c66;
@@ -182,6 +182,7 @@ select, input {
 }
 
 .breadcrumb {
+  padding-top: 1rem;
   margin: 0.5rem;
   font-size: 80%;
   font-family: "Merriweather Sans", sans-serif;

diff --git a/mpicms/templates/base/category_page.html b/mpicms/templates/base/category_page.html
@@ -12,17 +12,6 @@ <h2 class="title is-2">{{ page.title }}</h2>
 
     {% include 'news/components/news_preview.html' with news=page.news %}
 
-
     <h3 class="title is-3">Content</h3>
-    {% for child in page.get_children.live %}
-        <a href="{% pageurl child %}">
-            <div class="card">
-            <div class="card-content">
-                <p class="subtitle">
-                {{ child.title }}
-                </p>
-            </div>
-        </div>
-        </a>
-    {% endfor %}
+    {% include 'base/components/content_preview.html' with pages=page.get_children.in_menu.live %}
 {% endblock %}
diff --git a/mpicms/templates/base/components/content_preview.html b/mpicms/templates/base/components/content_preview.html
@@ -0,0 +1,23 @@
+{% load wagtailcore_tags %}
+
+<div class="flex-base">
+    {% for item in pages %}
+        <div class="card is-preview-wide">
+            <div class="card-content">
+                <a href="{% pageurl item %}" class="title is-4">{{ item.title }}</a>
+                <div class="content">
+                    {{ item.specific.preview|richtext }}
+                    <div class="menu">
+                        <ul class="menu-list card-list">
+                        {% for child in item.get_children.live %}
+                            <li>
+                                <a class="menu-item" href="{% pageurl child %}"><div>{{ child }}</div></a>
+                            </li>
+                        {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+</div>
diff --git a/mpicms/templates/base/home_page.html b/mpicms/templates/base/home_page.html
@@ -1,7 +1,6 @@
 {% extends 'base/page_wide.html' %}
 
-{% load i18n %}
-{% load wagtailcore_tags %}
+{% load i18n wagtailcore_tags %}
 
 
 {% block page_content %}
@@ -34,27 +33,7 @@ <h3 class="title is-3">{% trans 'Upcoming events' %}</h3>
 
 
     <h3 class="title is-3">{% trans 'Content' %}</h3>
-    <div class="flex-base">
-        {% for item in page.categories %}
-            <div class="card is-preview-wide">
-                <div class="card-content">
-                    <a href="{% pageurl item %}" class="title is-4">{{ item.title }}</a>
-                    <div class="content">
-                        {{ item.specific.preview|richtext }}
-                        <div class="menu">
-                            <ul class="menu-list card-list">
-                            {% for child in item.get_children.live %}
-                                <li>
-                                    <a class="menu-item" href="{% pageurl child %}"><div>{{ child }}</div></a>
-                                </li>
-                            {% endfor %}
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        {% endfor %}
-    </div>
+    {% include 'base/components/content_preview.html' with pages=page.categories %}
 
     <!-- </section> -->
 {% endblock %}
diff --git a/mpicms/templates/base/page.html b/mpicms/templates/base/page.html
@@ -3,12 +3,12 @@
 {% block content %}
 <div class="columns" style="flex-direction: row-reverse;">
     <div class="column">
-        <div class="contains-breadcrumb">
         <div class="container is-fluid">
+            <section class="section" style="padding-top: 0;">
             {% include 'base/components/breadcrumb.html' %}
-            {% block page_content %}
-            {% endblock %}
-        </div>
+                {% block page_content %}
+                {% endblock %}
+            </section>
         </div>
     </div>
     <div class="column is-narrow sidebar is-flex-tablet">