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 { .text-muted {
color: #6c757d !important; 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;
}

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

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