Djangoで家計簿のWebアプリケーションを作る 6　HTMLを整理する

Djangoで家計簿のWebアプリケーションを作る記事の第6弾です。今回は、実際に表示されるHTMLの部分を整理していきます。
前回の記事はこちら
pyhaya.hatenablog.com

前後の月へのリンクを張る

money/templates/money/index.html

<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <meta charset="utf-8">
        <title>HousekeepingBook</title>
        <link rel="stylesheet" type="text/css" 
        href="{% static 'money/style.css' %}">
    </head>
    <body>
        <div class="top">
            <div "year-month">
                <h1>{{ year }}年{{ month }}月</h1>
            </div>
            <div class="move_month">
                //ここ
                <a href="/money/{{ prev_year }}/{{ prev_month }}">{{ prev_month }}月</a>
            </div>
            <div class="move_month">
                //ここ
                <a href="/money/{{ next_year }}/{{ next_month }}">{{ next_month }}月</a>
            </div>
        </div>
        <div class="outer">
            <div class="form-money">
                <form action="/money/" method="post">
                    {% csrf_token %}
                    {{ form.as_table }}
                    <input type="submit" value="送信">
                </form>
            </div>
            <div class="wrapper">
                <div class="main">
                    <table>
                        <tr>
                            <th>日付</th>
                            <th>用途</th>
                            <th>カテゴリー</th>
                            <th>金額</th>
                        </tr>
                        {% for m in money %}
                        <tr>
                            <td>{{ m.use_date }}</td>
                            <td>{{ m.detail }}</td>
                            <td>{{ m.category }}</td>
                            <td>{{ m.cost }}円</td>
                        </tr>
                        {% endfor %}
                    </table>
                    <div class="tot">
                        合計：{{ total }}円
                    </div>
                </div>
                <div class="main">
                    <img src="/static/images/bar_{{ year }}_{{ month }}.svg"
                    width=80%>
                </div>
            </div>
        </div>
    </body>
</html>

これに合わせてビューに新たなコンテクストprev_month等を追加します。

money/views.py

#...
def index(request, TODAY[0], TODAY[1]):
    #...
    next_year, next_month = index_utils.get_next(year, month)
    prev_year, prev_month = index_utils.get_prev(year, month)

    context = {'year' : year, 
            'month' : month,
            'prev_year' : prev_year,
            'prev_month' : prev_month,
            'next_year' : next_year,
            'next_month' : next_month,
            'money' : money,
             'total' : total,
             'form' : form
            }
#...

def get_next(year, month):
    year = int(year)
    month = int(month)
    
    if month == 12:
        return str(year + 1), '1'
    else:
        return str(year), str(month + 1)

def get_prev(year, month):
    year = int(year)
    month = int(month)
    if month == 1:
        return str(year - 1), '12'
    else:
        return str(year), str(month - 1)

スタイルを整える

ここまでページのスタイルはあまり気にせずやってきましたがここで少し整理します。

money/static/money/style.css

table{
  border-collapse:collapse;
  margin:0 0;
}
th{
  color:#005ab3;
}
td{
  border-bottom:1px dashed #999;
}
th,tr:last-child td{
  border-bottom:2px solid #005ab3;
}
td,th{
  padding:10px;
}

/* upper side of the page */
.top div{
    float: left;
}

.top{
    background-color: #8eff8e;
    overflow: hidden;
}

.year-month{
    margin: 20px 40px 0px 20px;
}

.move_month{
    margin: 30px 10px 10px 10px;
    font-size: 18px;
}

/* style around form */
.form-money{
    margin-top: 20px;
}

/* main part*/
.tot {
    font-weight: 900;
}

.outer {
    clear: both;
}

.main{
    float: left;
    padding: 10px;
    margin: 20px;
}

.wrapper {
    display: flex;
}

#canvas {
    width: 100%;
    height: 100%;
}