unpocoプログラミング

ゲームライフを快適にするためにプログラミングを勉強します。間違ってたら教えてください。

【Flask】RSSリーダーを作る 05-cssを使う

Bootstrapを使いました。

生まれ変わった画面

なんぼかましになりました。

トップページ

https://i.imgur.com/T8g1mKO.png

ターゲット追加画面

https://i.imgur.com/CBaREOO.png

Bootstrap

デザインセンスのない人間にとってはありがたい限り。

getbootstrap.com

hackerthemes.com

コード

templates/base.html

上記Introductionページの「Starter template」を少しいじっただけ。

<!doctype html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <nav class="nav bg-dark">
        <a class="nav-link font-weight-bold text-light" href="/">bladestorm</a>
        <a class="nav-link text-light" href="/add">Target</a>
    </nav>
    <div class="container mb-4">
        {% block content %}{% endblock %}
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

templates/index.html

{% extends "base.html" %}

{% block title %}
bladestorm
{% endblock %}

{% block content %}
{% for dict in datas %}
    <div class="list-group mt-4">
        <p class="list-group-item list-group-item-success">{{ dict["name"] }}</p>
    {% for entry in dict["entries"] %}
        <a href="{{ entry['id'] }}" class="list-group-item list-group-item-action" target="_blank">{{ entry["title"] }}</a>
    {% endfor %}
    </div>
{% endfor %}
{% endblock %}

templates/add.html

{% extends "base.html" %}

{% block title %}
Set Target
{% endblock %}

{% block content %}
<form action="/add" method="POST" class="mt-2">
    <div class="form-group">
        <label>名前</label>
        <input type="text" class="form-control" name="rssname">
    </div>
    <div class="form-group">
        <label>URL</label>
        <input type="text" class="form-control" name="url">
    </div>
    <div class="form-check">
        <input type="checkbox" class="form-check-input" name="available">
        <label class="form-check-label">
            使用可
        </label>
    </div>
    <div class="mt-3 mb-5">
        <button type="submit" class="btn btn-primary">追加</button>
    </div>
</form>
{% if datas %}
<table class="table table-bordered">
    <thead class="thead-light">
        <tr>
            <th>名前</th>
            <th>URL</th>
            <th>使用可</th>
        </tr>
    </thead>
    <tbody>
        {% for rss in datas %}
        <tr>
            <td>{{ rss.name }}</td>
            <td><a href="{{ rss.url }}" target="_blank">{{ rss.url }}</a></td>
            <td class="text-center"><input type="checkbox" checked="{{ rss.available }}"></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}
{% endblock %}

次回

使用可チェックボックスを更新できるようにしたい。
 
おわり