structables/templates/article.html
Kumi 9f117f5ccc
Improve text overflow handling in articles
Updated CSS to include word-wrapping rules and adjusted the article template to apply these styles to content rows, ensuring better handling of long strings without space characters and improving the readability of articles with unusual text content. No layout disruption expected.
2024-01-17 19:11:43 +01:00

74 lines
1.9 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> &gt;
<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 wrap">
<h2>{{ step.title }}</h2>
<div class="step-imgs">
{% for step_img in step.imgs %}
<img src="{{ step_img.src }}" alt="{{ step_img.alt }}" />
{% endfor %}
</div>
<div class="step-vids">
{% for step_video in step.videos %}
<video src="{{ step_video }}"></video>
{% endfor %}
</div>
{{ step.text|safe }}
</div>
{% endfor %}
<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 %}