Prettying up the design a little bit - 30 days of Django

May 26, 22 / 0 comments / #Django

Let's make the project a little more visually appealing.

I'm going to use a CSS framework called Bulma for this project. The main goal of this project is to learn Django, so I'm not going to go into much details for this code.

Let's begin with the base.html file:

<doctype html!>
<html>
    <head>
        <title>Toodoo</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    </head>

    <body>
        <nav class="navbar is-dark">
            <div class="navbar-brand">
                <a href="/" class="navbar-item is-size-4">Toodoo</a>
            </div>
        </nav>

        <section class="section">
            <div class="columns">
                <div class="column is-6 is-offset-3">
                    <form method="get" action="{% url 'search' %}">
                        <div class="field has-addons">
                            <div class="control">
                                <input type="search" class="input" name="query" placeholder="Find a task...">
                            </div>

                            <div class="control">
                                <button class="button is-primary">Search</button>
                            </div>
                        </div>
                    </form>

                    <hr>

                    {% block content %}
                    {% endblock %}
                </div>
            </div>
        </section>

        <footer class="footer">
            The footer
        </footer>
    </body>
</html>

Okay. This already looks much better.
Next step, the frontpage.

{% extends 'task/base.html' %}

{% block content %}
    <div class="frontpage">
        <div class="columns">
            <div class="column is-8">
                <h2 class="subtitle">Tasks</h2>

                <form method="post" action=".">
                    {% csrf_token %}

                    {{ form.as_p }}

                    <div class="field">
                        <button class="button is-primary">Submit</button>
                    </div>
                </form>

                {% for task in tasks %}
                    <div class="mb-4 px-4 py-4 has-background-grey-lighter">
                        <p>
                            {{ task.title }}
                            -
                            <a href="{% url 'edit_task' task.id %}">Edit</a>
                            -
                            {% if task.is_done %}
                                Completed
                            {% else %}
                                <a href="{% url 'mark_completed' task.id %}">Mark complete</a>
                            {% endif %}
                            -
                            <a href="{% url 'delete_task' task.id %}">Delete</a>
                        </p>
                    </div>
                {% endfor %}
            </div>

            <div class="column is-4">
                <h2 class="subtitle">Categories</h2>

                {% for category in categories %}
                    <div>
                        <p>
                            <a href="{% url 'category_detail' category.id %}">{{ category.title }}</a>
                        </p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

Okay, it doesn't look very good, but not very bad either. The other pages can just be like they are. Of course, feel free to change them as wll if you want to.

Prettying up the design a little bit - 30 days of Django

Table of contents

Comments