【django】todoリストアプリを作ってみる④（メイン画面 /list を整える）【pythonメモ】

この記事の目次

list.htmlを編集

{% extends 'base.html' %}
{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Todolist</h1>
    <p class="lead">TodoListを作って毎日を効率的に過ごしましょう。</p>
  </div>
</div>
{% endblock %}

{% block content %}

<div class='container'>

{% for item in object_list %}

<div class="alert alert-{{ item.priority }}" role="alert">
  <p>{{ item.title }}</p>
  <a href="{% url 'update' item.pk %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">編集</a>
  <a href="{% url 'delete' item.pk %}" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">削除</a>
  <a href="{% url 'detail' item.pk %}" class="btn btn-success" tabindex="-1" role="button" aria-disabled="true">詳細</a>
</div>
{% comment %} memoは、リンク先にするので削除した {% endcomment %}

{% endfor %}

</div>

{% endblock content %}

レイアウトを調整する

/listの期日表示をする。
新規作成ボタンを設置する。

{% extends 'base.html' %}
{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Todolist</h1>
    <p class="lead">TodoListを作って毎日を効率的に過ごしましょう。</p>
  </div>
</div>
{% endblock %}

{% block content %}

<div class='container'>

    <a href="{% url 'create' %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">新規作成</a>

  {% for item in object_list %}

  <div class="alert alert-{{ item.priority }}" role="alert">
    <p>{{ item.title }}　期日：{{ item.duedate}}</p>
    <a href="{% url 'update' item.pk %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">編集</a>
    <a href="{% url 'delete' item.pk %}" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">削除</a>
    <a href="{% url 'detail' item.pk %}" class="btn btn-success" tabindex="-1" role="button" aria-disabled="true">詳細</a>
  </div>
  {% comment %} memoは、リンク先にするので削除した {% endcomment %}

  {% endfor %}

</div>

{% endblock content %}

/detail.htmlの見た目を修正する

{% extends 'base.html' %}
{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">詳細画面</h1>
    <p class="lead">todoの詳細です。</p>
  </div>
</div>
{% endblock %}

{% block content %}

<div class='container'>
  <div class="alert alert-success" role="alert">
    <p>タイトル：{{ object.title }}</p>
    <p>中身：{{ object.memo }}</p>
    <p>期日：{{ object.duedate }}</p>
  </div>

</div>

{% endblock content %}