Kumi
b730e9c6db
Improved visual consistency in 'article.html' by adding 'justify-content-center' to each media row, ensuring images, videos, and iframes are centered within their containers. Additionally, applied 'wrap' class to text content for enhanced readability. These changes cater to better user engagement and a more polished layout presentation.
116 lines
3 KiB
HTML
116 lines
3 KiB
HTML
{% extends "base.html" %} {% block content %}
|
|
<center>
|
|
<h1>{{ title }}</h1>
|
|
|
|
<p>
|
|
by <a href="{{ author_link }}">{{ author }}</a> in
|
|
<a href="{{ category_link }}">{{ category }}</a> >
|
|
<a href="{{ channel_link }}">{{ channel }}</a>
|
|
</p>
|
|
<p>
|
|
{{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
|
|
</p>
|
|
</center>
|
|
|
|
<div class="container">
|
|
{% for step in steps %}
|
|
<div class="row mb-6">
|
|
<div class="col-12">
|
|
<h2>{{ step.title }}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{% if step.imgs %}
|
|
<div class="row mb-3 justify-content-center">
|
|
{% for step_img in step.imgs %}
|
|
<div class="col-md-3">
|
|
<img src="{{ step_img.src }}" alt="{{ step_img.alt }}" class="img-fluid" />
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if step.videos %}
|
|
<div class="row mb-3 justify-content-center">
|
|
{% for step_video in step.videos %}
|
|
<div class="col-md-3">
|
|
<video src="{{ step_video }}" controls class="w-100"></video>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if step.iframes %}
|
|
<div class="row mb-3 justify-content-center">
|
|
{% for step_iframe in step.iframes %}
|
|
<div class="col-md-3 mb-3">
|
|
<iframe src="{{ step_iframe.src }}" width="100%" height="{{ step_iframe.height }}"></iframe>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if step.downloads %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h3>Downloads</h3>
|
|
</div>
|
|
{% for step_download in step.downloads %}
|
|
<div class="col-md-2 mb-3">
|
|
<a href="{{ step_download.src }}" class="btn btn-primary">{{ step_download.name }}</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="col-12 mb-3 wrap">
|
|
{{ step.text|safe }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
|
|
<br />
|
|
{% for index, comment in enumerate(comments) %}
|
|
<!-- TODO: Fix comments -->
|
|
<a href="{{ comment[4] }}">
|
|
<img
|
|
style="display: inline-block"
|
|
width="30px"
|
|
height="30px"
|
|
src="{{ comment[1] }}"
|
|
alt="{{ comment[2] }}"
|
|
/>
|
|
<span>{{ comment[3] }}</span>
|
|
</a>
|
|
<span>{{ comment[5] }}</span>
|
|
<span>{{ comment[0] }} votes</span>
|
|
{{ comment[6]|safe }}
|
|
<input type="checkbox" id="replies{{ index }}" class="reply-button" />
|
|
<label for="replies{{ index }}"><b>{{ comment[7] }} replies</b></label>
|
|
<div class="replies">
|
|
{% for reply in comment[8] %}
|
|
<blockquote>
|
|
<a href="{{ reply[4] }}">
|
|
<img
|
|
style="display: inline-block"
|
|
width="30px"
|
|
height="30px"
|
|
src="{{ reply[1] }}"
|
|
alt="{{ comment[2] }}"
|
|
/>
|
|
<span>{{ reply[3] }}</span>
|
|
</a>
|
|
<span>{{ reply[5] }}</span>
|
|
<span>{{ reply[0] }} votes</span>
|
|
{{ reply[6]|safe }}
|
|
</blockquote>
|
|
{% endfor %}
|
|
</div>
|
|
<br />
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|