PrivateCoffee/structables
4
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(article layout): Improve readability and multimedia integration

Browse source 
Revamped the article template to enhance visual appeal and user engagement. Introduced a modern, centered layout for article headers, enriched steps display, and standardized multimedia elements with rounded corners and shadows for a cohesive look. Adjustments ensure content is more engaging and accessible, encouraging longer visitor sessions and interaction. This change aligns with the goal of providing a more immersive user experience while maintaining the site's aesthetic consistency.

Refactored CSS to support these changes, defining variables for easier future theme adjustments and promoting code reuse across similar elements. The update signifies a pivotal shift towards a refined and flexible presentation of articles, potentially increasing visitor retention and satisfaction.
This commit is contained in:
Kumi 2024-05-23 07:30:45 +02:00
parent c32144d437
commit 25a07d797b
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 100 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
static/css/style.css
View file

@ -141,15 +141,28 @@ blockquote {
line-height: 1em;
}
.step-imgs {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.step-section {
background-color: var(--primary-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 2px 4px var(--shadow-color);
padding: 1.5rem;
}
.step-imgs img {
max-width: 300px;
.step-header h2 {
font-size: 2em;
color: var(--heading-color);
}
.step-images img,
.step-videos video,
.step-iframes iframe {
border-radius: 8px;
box-shadow: 0 2px 4px var(--shadow-color);
}
.step-text {
font-size: 1.1em;
}
.reply-button,
@ -288,4 +301,23 @@ header {
.navbar-logo {
height: 64px;
}
.img-fluid {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
video {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
iframe {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.text-muted {
color: #6c757d !important;
}

151
templates/article.html
View file

@ -1,116 +1,87 @@
{% extends "base.html" %} {% block content %}
<center>
<h1>{{ title }}</h1>
<div class="container my-5">
<div class="header-section text-center mb-5">
<h1 class="display-4">{{ title }}</h1>
<p class="text-muted">
by
<a href="{{ author_link }}" class="text-decoration-none">{{ author }}</a>
in
<a href="{{ category_link }}" class="text-decoration-none"
>{{ category }}</a
>
&gt;
<a href="{{ channel_link }}" class="text-decoration-none"
>{{ channel }}</a
>
</p>
<p class="text-muted">
{{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
</p>
</div>
<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 mb-6">
<div class="col-12">
<h2>{{ step.title }}</h2>
</div>
<section class="step-section mb-5 p-4 rounded shadow-sm">
<div class="step-header mb-4">
<h2>{{ step.title }}</h2>
</div>
{% if step.imgs %}
<div class="row mb-3 justify-content-center">
<div class="step-images row mb-4">
{% for step_img in step.imgs %}
<div class="col-md-3">
<img src="{{ step_img.src }}" alt="{{ step_img.alt }}" class="img-fluid" />
</div>
<div class="col-md-4 mb-3">
<img
src="{{ step_img.src }}"
alt="{{ step_img.alt }}"
class="img-fluid rounded shadow-sm"
/>
</div>
{% endfor %}
</div>
{% endif %}
{% if step.videos %}
<div class="row mb-3 justify-content-center">
{% endif %} {% if step.videos %}
<div class="step-videos row mb-4">
{% for step_video in step.videos %}
<div class="col-md-3">
<video src="{{ step_video }}" controls class="w-100"></video>
</div>
<div class="col-md-6 mb-3">
<video
src="{{ step_video }}"
controls
class="w-100 rounded shadow-sm"
></video>
</div>
{% endfor %}
</div>
{% endif %} {% if step.iframes %}
<div class="step-iframes row mb-4">
{% for step_iframe in step.iframes %}
<div class="col-md-8 mb-3">
<iframe
src="{{ step_iframe.src }}"
width="100%"
height="{{ step_iframe.height }}"
frameborder="0"
class="rounded shadow-sm"
></iframe>
</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 %}
<div class="step-text mb-3">{{ step.text|safe }}</div>
{% if step.downloads %}
<div class="row">
<div class="step-downloads row mb-4">
<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>
<div class="col-md-2 mb-3">
<a href="{{ step_download.src }}" class="btn btn-primary w-100"
>{{ 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>
</section>
{% endfor %}
</div>
{% endblock %}