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

feat(sitemap): redesign UI for improved navigation

Browse source 
The sitemap page has undergone a significant redesign for enhanced user navigation. The update introduces a card-based layout with updated CSS for better visuals and user interaction, focusing on accessibility and aesthetics. The redesigned sitemap now features a containerized layout with cards, improving the overall page structure and readability. Each group within the sitemap is now displayed as a card, making individual sections more distinguishable and easier to navigate. This change aims to provide a more engaging user experience by making information easier to find and the page more pleasant to interact with.
This commit is contained in:
Kumi 2024-05-23 17:23:04 +02:00
parent d10381c687
commit ee6cc2de6d
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 54 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/structables/static/css/style.css
View file

@ -321,3 +321,34 @@ iframe {
.text-muted {
color: #6c757d !important;
}
.sitemap-group .card {
background-color: var(--primary-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 2px 4px var(--shadow-color);
overflow: hidden;
}
.sitemap-group .card-title {
font-size: 1.5em;
margin-bottom: 0.5em;
}
.sitemap-group .list-unstyled {
padding-left: 0;
}
.sitemap-group .list-unstyled li {
margin-bottom: 0.5em;
}
.sitemap-group .list-unstyled li a {
color: var(--link-color);
}
.sitemap-group .list-unstyled li a:hover {
text-decoration: underline;
}

42
src/structables/templates/sitemap.html
View file

@ -1,23 +1,27 @@
{% extends "base.html" %}
{% block content %}
<center>
<h1>Sitemap</h1>
<div class="container">
<div class="row sitemap-groups"></div>
{% for group in groups %}
<div class="sitemap-group col-xs-12 col-sm-6 col-lg-4">
<a href="{{ group[1] }}">
<h2>{{ group[0] }}</h2>
</a>
<ul>
{% for channel in group[2] %}
<li><a href="{{ channel[1] }}">{{ channel[0] }}</a></li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
</center>
<div class="container my-5">
<div class="text-center mb-5">
<h1>Sitemap</h1>
</div>
<div class="row">
{% for group in groups %}
<div class="sitemap-group col-xs-12 col-sm-6 col-lg-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">
<a href="{{ group[1] }}" class="text-decoration-none">{{ group[0] }}</a>
</h2>
<ul class="list-unstyled">
{% for channel in group[2] %}
<li><a href="{{ channel[1] }}" class="text-decoration-none">{{ channel[0] }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}