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

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

/ #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.

Table of contents

Comments

No comments yet...

Add comment

Info

Please log in to comment!

Newsletter

Subscribe to my weekly newsletter. One time per week I will send you a short summary of the tutorials I have posted in the past week.