funguej to

5 years ago · 54bebb7edd
5 changed files with 81 additions and 7 deletions
--- a/blog/static/css/blog.css
+++ b/blog/static/css/blog.css
@ -0,0 +1,16 @@
+main > .container {
+    padding: 60px 15px 0;
+  }
+  
+  .footer {
+    background-color: #f5f5f5;
+  }
+  
+  .footer > .container {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+  
+  code {
+    font-size: 80%;
+  }
--- a/blog/templates/base.html
+++ b/blog/templates/base.html
@ -1,7 +1,7 @@
 {% load static wagtailuserbar %}

 <!DOCTYPE html>
-<html class="no-js" lang="en">
+<html class="no-js h-100" lang="en">
    <head>
        <meta charset="utf-8" />
        <title>
@ -18,6 +18,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        {# Global stylesheets #}
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="{% static 'css/blog.css' %}">

        {% block extra_css %}
@ -27,9 +28,45 @@

    <body class="{% block body_class %}{% endblock %}">
        {% wagtailuserbar %}
+        <header>
+            <!-- Fixed navbar -->
+            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+                <a class="navbar-brand" href="#">Fixed navbar</a>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
+                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarCollapse">
+                    <ul class="navbar-nav mr-auto">
+                        <li class="nav-item active">
+                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+                        </li>
+                    </ul>
+                    <form class="form-inline mt-2 mt-md-0">
+                        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
+                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+                    </form>
+                </div>
+            </nav>
+        </header>

-        {% block content %}{% endblock %}
+        <main role="main" class="flex-shrink-0">
+            <div class="container">
+                {% block content %}{% endblock %}
+            </div>
+        </main>

+        <footer class="footer mt-auto py-3">
+            <div class="container">
+              <span class="text-muted">Place sticky footer content here.</span>
+            </div>
+        </footer>
        {# Global javascript #}
        <script type="text/javascript" src="{% static 'js/blog.js' %}"></script>

--- a/zapisnik/models.py
+++ b/zapisnik/models.py
@ -24,6 +24,13 @@ class BlogPage(Page):
    intro = models.CharField(max_length=250)
    body = RichTextField(blank=True)

+    def main_image(self):
+        gallery_item = self.gallery_images.first()
+        if gallery_item:
+            return gallery_item.image
+        else:
+            return None
+
    search_fields = Page.search_fields + [
        index.SearchField('intro'),
        index.SearchField('body'),
--- a/zapisnik/templates/zapisnik/blog_index_page.html
+++ b/zapisnik/templates/zapisnik/blog_index_page.html
@ -10,9 +10,16 @@
    <div class="intro">{{ page.intro|richtext }}</div>

    {% for post in page.get_children %}
-        <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
-        {{ post.specific.intro }}
-        {# {{ post.specific.body|richtext }} #}
+        {% with post=post.specific %}
+            <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
+
+            {% with post.main_image as main_image %}
+                {% if main_image %}{% image main_image fill-160x100 %}{% endif %}
+            {% endwith %}
+
+            <p>{{ post.intro }}</p>
+            {{ post.body|richtext }}
+        {% endwith %}
    {% endfor %}

 {% endblock %}
--- a/zapisnik/templates/zapisnik/blog_page.html
+++ b/zapisnik/templates/zapisnik/blog_page.html
@ -1,6 +1,6 @@
 {% extends "base.html" %}

-{% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}

 {% block body_class %}template-blogpage{% endblock %}

@ -12,6 +12,13 @@

    {{ page.body|richtext }}

+    {% for item in page.gallery_images.all %}
+        <div style="float: left; margin: 10px">
+            {% image item.image fill-320x240 %}
+            <p>{{ item.caption }}</p>
+        </div>
+    {% endfor %}
+
    <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>

-{% endblock %}
+{% endblock %}