Fakultas Ilmu Komputer UI

detail_materi.html 7.58 KB
Newer Older
1
2
3
4
5
{% extends 'base.html' %}
{% load static %}

{% block header %}
<link rel="stylesheet" type="text/css" href="{% static 'app/css/detail_materi.css' %}">
Saul Andre's avatar
Saul Andre committed
6
<script src="{% static 'app/js/detail_materi.js' %}"></script>
7
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,100&display=swap" rel="stylesheet">
8
9
10
11
12
{% endblock header %}

{% block title %}
Materi
{% endblock title %}
13
14

{% block content %}
15
    {% block verification %} {% endblock verification %}
16
17
18
    <div class="container">
        <div class="row materi-data">
            <div class="col col-3 cover">
19
                <img src={{materi_data.cover}} alt="cover">
20
            </div>
21
22
23
24
25
26
27
            <div class="col col-6 ml-3 book">
                <h2>{{materi_data.title}}</h2>
                <div class="category-wrapper">
                    {% for category in materi_data.categories.all %}
                        <span class="mr-1">#{{category.name}}</span>
                    {% endfor %}
                </div>
28
29
30
31
32
33
                <div class="info-wrapper">
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Penulis</p>
                        </dt>
                        <dd>
34
                            <p class="info-content">{{materi_data.author}}</p>
35
36
37
38
39
40
41
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Penerbit</p>
                        </dt>
                        <dd>
42
                            <p class="info-content">{{materi_data.publisher}}</p>
43
44
45
46
47
48
49
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Jumlah Halaman</p>
                        </dt>
                        <dd>
50
                            <p class="info-content">{{materi_data.author}}</p>
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Ukuran File</p>
                        </dt>
                        <dd>
                            <p class="info-content">5 Mb</p>
                        </dd>
                    </div>
                </div>
                <button class="btn btn-link btn-book shadow-sm p-2 mb-1 bg-white rounded">Baca</button>
                <button class="btn btn-link btn-book shadow-sm p-2 mb-1 bg-white rounded">Unduh</button>
                <button class="btn btn-link btn-book shadow-sm p-2 mb-1 bg-white rounded">Bagikan</button>
            </div>
        </div>
        <div class="row menu-wrapper">
                <nav class="navbar navbar-expand-sm">  
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#section1">Deskripsi</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#section2">Komentar</a>
                        </li>
                    </ul>
                </nav>
                <div id="section1" class="container-fluid description-wrapper">
                    <h1>Deskripsi</h1>
                    <div class="col col-8 description">
81
                        <p>{{materi_data.descriptions}}</p>
82
83
84
85
86
                    </div>
                </div>
                <div id="section2" class="container-fluid comments-wrapper">
                    <h1>Komentar</h1>
                    <div class="add-comments col col-8 ">
Saul Andre's avatar
Saul Andre committed
87
88
                        <form method="POST">
                            {% csrf_token %}
89
90
91
92
                            <div class="form-group">
                                <textarea placeholder="komentar..." 
                                            class="form-control mb-2" 
                                            id="exampleFormControlTextarea1" 
Saul Andre's avatar
Saul Andre committed
93
94
                                            rows="3"
                                            name="comment">
95
                                </textarea>
Saul Andre's avatar
Saul Andre committed
96
                                <button type="submit" class="btn btn-book shadow-sm p-2 mb-1 bg-white rounded">Kirim</button>
97
98
99
100
                            </div>
                        </form>
                        
                    </div>
101
102
103
104
105
106
107
                    {% for comment in materi_data.comments.all %}
                        <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
                            <div class="user">
                                <span class="profile"></span>
                                <p><b>{{comment.user}}</b></p>
                            </div>
                            <p class="text">{{comment.comment}}</p>
108
                        </div>
109
                    {% endfor %}
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
                </div>
            <!-- <div class="col col-12">
                <nav id="navbar-example2" class="navbar ">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                        <a class="nav-link" href="#fat">Deskripsi</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#mdo">Komentar</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col col-8 offset-md-1">
                <div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
                    <div class="description-wrapper">
                        <h4 id="fat">Deskripsi</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </div>
                    
                </div>
            </div> -->
        </div>
    </div>
136
{% endblock content %}