galerie + bootstrap

5 years ago · e0bdde52bd
7 changed files with 138 additions and 15 deletions
--- a/.gitignore
+++ b/.gitignore
@ -129,3 +129,4 @@ dmypy.json
 # Pyre type checker
 .pyre/

+media/
--- a/blog/static/css/blog.css
+++ b/blog/static/css/blog.css
@ -0,0 +1,17 @@
+
+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>
@ -15,9 +15,10 @@
            {% endblock %}
        </title>
        <meta name="description" content="" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        {# 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 %}
@ -25,10 +26,48 @@
        {% endblock %}
    </head>

-    <body class="{% block body_class %}{% endblock %}">
-        {% wagtailuserbar %}
+    <body class="d-flex flex-column h-100 {% block body_class %}{% endblock %}">
        
+        <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>
+
+        <!-- Begin page content -->
+        <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/migrations/0003_blogpagegalleryimage.py
+++ b/zapisnik/migrations/0003_blogpagegalleryimage.py
@ -0,0 +1,30 @@
+# Generated by Django 3.1.2 on 2020-10-23 09:03
+
+from django.db import migrations, models
+import django.db.models.deletion
+import modelcluster.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0022_uploadedimage'),
+        ('zapisnik', '0002_blogpage'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='BlogPageGalleryImage',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('sort_order', models.IntegerField(blank=True, editable=False, null=True)),
+                ('caption', models.CharField(blank=True, max_length=250)),
+                ('image', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='+', to='wagtailimages.image')),
+                ('page', modelcluster.fields.ParentalKey(on_delete=django.db.models.deletion.CASCADE, related_name='gallery_images', to='zapisnik.blogpage')),
+            ],
+            options={
+                'ordering': ['sort_order'],
+                'abstract': False,
+            },
+        ),
+    ]
--- a/zapisnik/models.py
+++ b/zapisnik/models.py
@ -1,10 +1,11 @@
 from django.db import models

-# Create your models here.
+from modelcluster.fields import ParentalKey

-from wagtail.core.models import Page
+from wagtail.core.models import Page, Orderable
 from wagtail.core.fields import RichTextField
-from wagtail.admin.edit_handlers import FieldPanel
+from wagtail.admin.edit_handlers import FieldPanel, InlinePanel
+from wagtail.images.edit_handlers import ImageChooserPanel
 from wagtail.search import index


@ -21,6 +22,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'),
@ -30,4 +38,18 @@ class BlogPage(Page):
        FieldPanel('date'),
        FieldPanel('intro'),
        FieldPanel('body', classname="full"),
+        InlinePanel('gallery_images', label="Obrázky"),
+    ]
+
+
+class BlogPageGalleryImage(Orderable):
+    page = ParentalKey(BlogPage, on_delete=models.CASCADE, related_name='gallery_images')
+    image = models.ForeignKey(
+        'wagtailimages.Image', on_delete=models.CASCADE, related_name='+'
+    )
+    caption = models.CharField(blank=True, max_length=250)
+
+    panels = [
+        ImageChooserPanel('image'),
+        FieldPanel('caption'),
    ]
--- a/zapisnik/templates/zapisnik/blog_index_page.html
+++ b/zapisnik/templates/zapisnik/blog_index_page.html
@ -1,6 +1,6 @@
 {% extends "base.html" %}

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

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

@ -10,9 +10,16 @@
    <div class="intro">{{ page.intro|richtext }}</div>

    {% for post in page.get_children %}
+        {% with post=post.specific %}
            <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
-        {{ post.specific.intro }}
-        {# {{ post.specific.body|richtext }} #}
+
+            {% 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 %}
+    <div style="clear: left"></div>
    <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>

 {% endblock %}