↓↓クリックして頂けると励みになります。
【24 | 配達依頼】 << 【ホーム】 >> 【26 | 配達依頼モデル】
「core/templates/customer/create_job.html」ファイルを編集します。
記述編集 【Desktop/crowdsource/core/templates/customer/create_job.html】
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block head %}
<style>
#pills-tab a {
color: black;
}
#pills-tab a:hover {
color: green;
text-decoration: none;
}
#pills-tab a.active {
color: red;
}
#pickup-map,
#delivery-map {
height: 100%;
}
</style>
{% endblock %}
{% block content %}
<div class="container mt-4">
<div class="row">
<!-- 左側 -->
<div class="col-lg-4">
<div class="card">
<div class="card-header">
依頼した配達の概要
</div>
<div class="card-body">
{% if not job %}
<p>依頼した配達の概要がここに表示されます</p>
{% else %}
{% endif %}
</div>
</div>
</div>
<!-- 右側 -->
<div class="col-lg-8">
<!-- Step tabs -->
<div class="card mb-5">
<div class="card-body">
<ul class="nav nav-pills nav-justified align-items-center mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="active" id="pills-info-tab" data-toggle="pill" href="#pills-info"
role="tab" aria-controls="pills-info" aria-selected="true">依頼内容</a>
</li>
<i class="fas fa-chevron-right"></i>
<li class="nav-item" role="presentation">
<a id="pills-pickup-tab" data-toggle="pill"
href="#pills-pickup" role="tab" aria-controls="pills-pickup" aria-selected="false">荷物受け取り先</a>
</li>
<i class="fas fa-chevron-right"></i>
<li class="nav-item" role="presentation">
<a id="pills-delivery-tab" data-toggle="pill"
href="#pills-delivery" role="tab" aria-controls="pills-delivery" aria-selected="false">配達先</a>
</li>
<i class="fas fa-chevron-right"></i>
<li class="nav-item" role="presentation">
<a id="pills-payment-tab" data-toggle="pill"
href="#pills-payment" role="tab" aria-controls="pills-payment" aria-selected="false">支払い</a>
</li>
</ul>
</div>
</div>
<!-- Step forms -->
<b>配達依頼作成</b>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-info" role="tabpanel" aria-labelledby="pills-info-tab">
<h1>内容</h1>
</div>
<div class="tab-pane fade" id="pills-pickup" role="tabpanel" aria-labelledby="pills-info-tab">
<h1>荷物受け取り先</h1>
</div>
<div class="tab-pane fade" id="pills-delivery" role="tabpanel" aria-labelledby="pills-info-tab">
<h1>配達先</h1>
</div>
<div class="tab-pane fade" id="pills-payment" role="tabpanel" aria-labelledby="pills-info-tab">
<h1>支払い</h1>
</div>
</div>
</div>
</div>
{% endblock %}
「core/templates/base.html」ファイルを編集します。
Fontawesomeを利用できるように記述を追加しています。
記述編集 【Desktop/crowdsource/core/templates/base.html】11行目
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>クラウドソーシングアプリ</title> {% load bootstrap4 %} {% bootstrap_css %} {% bootstrap_javascript jquery='full' %} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> {% block head %}{% endblock %} </head> <body> <nav class="navbar {% if not request.user.is_authenticated %} navbar-expand-lg {% endif %} navbar-dark bg-dark"> <a class="navbar-brand" href="/">クラウドソーシングアプリ</a> {% if not request.user.is_authenticated %} <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item mr-2 ml-4 {% if request.GET.next != '/courier/' %} active {% endif %}"> <a class="nav-link btn btn-light {% if request.GET.next != '/courier/' %}bg-success{% else %}bg-dark{% endif %}" href="/sign-in/?next=/customer/">依頼人</a> </li> <li class="nav-item {% if request.GET.next == '/courier/' %} active {% endif %}"> <a class="nav-link btn btn-light {% if request.GET.next == '/courier/' %}bg-primary{% else %}bg-dark{% endif %}" href="/sign-in/?next=/courier/">配達人</a> </li> </ul> </div> {% else %} <form class="form-inline"> <span class="mr-4 text-light"> {{ request.user.get_full_name | title }} </span> <span> <a href="/sign-out" class="btn btn-outline-dark bg-light">ログアウト</a> </span> </form> {% endif %} </nav> {% block content %}{% endblock %} <footer class="text-center mt-5 mb-5"> © クラウドソーシング </footer> <script src="https://unpkg.com/bootoast@1.0.1/dist/bootoast.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootoast@1.0.1/dist/bootoast.min.css"> <script> function toast(message, type) { bootoast.toast({ position: 'leftBottom', message, type: 'success', animationDuration: 300, dismissible: true, }); } {% if messages %} {% for message in messages %} toast('{{ message }}', '{{ message.tags }}'); {% endfor %} {% endif %} </script> </body> </html>
ブラウザで動作を確認してください。
http://127.0.0.1:8000/customer/create_job/
↓↓クリックして頂けると励みになります。
【24 | 配達依頼】 << 【ホーム】 >> 【26 | 配達依頼モデル】
