nyymix/muistox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Breadcrumb

Browse source
This commit is contained in:
Nyymix 2025-04-10 23:00:01 +03:00
parent 191fc0780c
commit 6cd4adf7c3
8 changed files with 178 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
gallery/templates/gallery/about.html
View file

@ -13,49 +13,55 @@
<!-- Content --> <!-- Content -->
{% block content %} {% block content %}
{% gallery_stats as counts %} <!-- Breadcrumb -->
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
<li class="uk-disabled"><a>About</a></li>
</ul>
</div>
<div class="uk-container uk-margin-top"> {% gallery_stats as counts %}
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-padding-small uk-text-center">
<h3 class="uk-card-title uk-text-bold">{{ site_config.about_title }}</h3>
<img class="uk-border-circle uk-box-shadow-small uk-margin-small"
src="{% static site_config.about_profile_image %}"
alt="Profile photo" width="120">
<p class="uk-text-muted uk-margin-small">
{{ site_config.about_description }}
</p>
<div class="uk-container uk-margin-top">
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-padding-small uk-text-center">
<h3 class="uk-card-title uk-text-bold">{{ site_config.about_title }}</h3>
<img class="uk-border-circle uk-box-shadow-small uk-margin-small"
src="{% static site_config.about_profile_image %}"
alt="Profile photo" width="120">
<p class="uk-text-muted uk-margin-small">
{{ site_config.about_description }}
</p>
<p class="uk-text-muted uk-margin-small"> <p class="uk-text-muted uk-margin-small">
Contact: Contact:
<a href="mailto:{{ site_config.contact_email }}"> <a href="mailto:{{ site_config.contact_email }}">
{{ site_config.contact_email }} {{ site_config.contact_email }}
</a> </a>
</p> </p>
<div class="uk-flex uk-flex-center uk-child-width-auto uk-margin-small-top" uk-grid>
{% if site_config.bluesky_url %}
<a href="{{ site_config.bluesky_url }}" uk-icon="icon: bluesky" uk-tooltip="Bluesky"></a>
{% endif %}
{% if site_config.twitter_url %}
<a href="{{ site_config.twitter_url }}" uk-icon="icon: twitter" uk-tooltip="Twitter"></a>
{% endif %}
{% if site_config.instagram_url %}
<a href="{{ site_config.instagram_url }}" uk-icon="icon: instagram" uk-tooltip="Instagram"></a>
{% endif %}
</div>
<div class="uk-flex uk-flex-center uk-child-width-auto uk-margin-small-top" uk-grid> <hr class="uk-divider-icon">
{% if site_config.bluesky_url %}
<a href="{{ site_config.bluesky_url }}" uk-icon="icon: bluesky" uk-tooltip="Bluesky"></a>
{% endif %}
{% if site_config.twitter_url %}
<a href="{{ site_config.twitter_url }}" uk-icon="icon: twitter" uk-tooltip="Twitter"></a>
{% endif %}
{% if site_config.instagram_url %}
<a href="{{ site_config.instagram_url }}" uk-icon="icon: instagram" uk-tooltip="Instagram"></a>
{% endif %}
</div>
<hr class="uk-divider-icon"> <div class="uk-text-small uk-text-muted">
<p>
<div class="uk-text-small uk-text-muted"> <strong>{{ counts.0 }}</strong> <a href="{% url 'gallery:albums_url' %}">Albums</a> (public {{ counts.1 }}),
<p> <strong>{{ counts.2 }}</strong> <a href="{% url 'gallery:photos_url' %}">Photos</a></p>
<strong>{{ counts.0 }}</strong> <a href="{% url 'gallery:albums_url' %}">Albums</a> (public {{ counts.1 }}), </div>
<strong>{{ counts.2 }}</strong> <a href="{% url 'gallery:photos_url' %}">Photos</a></p>
</div> </div>
</div> </div>
</div>
{% endblock %} {% endblock %}

9
gallery/templates/gallery/album_detail.html
View file

@ -25,6 +25,15 @@
<!-- Content --> <!-- Content -->
{% block content %} {% block content %}
<!-- Breadcrumb -->
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
<li><a href="{% url 'gallery:albums_url' %}">Albums</a></li>
<li class="uk-disabled"><a>{{ album.name }}</a></li>
</ul>
</div>
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true"> <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">
{% for photo in photos %} {% for photo in photos %}
<a href="{{ photo.get_absolute_url }}"> <a href="{{ photo.get_absolute_url }}">

70
gallery/templates/gallery/album_list.html
View file

@ -12,39 +12,47 @@
<!-- Content --> <!-- Content -->
{% block content %} {% block content %}
<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true"> <!-- Breadcrumb -->
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
{% for album in album_list %} <ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
<div> <li><a href="{% url 'gallery:main_url' %}">Home</a></li>
<div class="uk-card uk-card-default uk-height-1-1"> <li class="uk-disabled"><a>Albums</a></li>
</ul>
<!-- Album cover image -->
<div class="uk-card-media-top">
<a href="{{ album.get_absolute_url }}">
<img src="{{ album.cover_url }}"
style="aspect-ratio: {{ album.cover.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy">
</a>
</div>
<!-- Album info overlay -->
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
<h3 class="uk-card-title uk-margin-remove-bottom">
<a href="{{ album.get_absolute_url }}">{{ album }}</a>
</h3>
<p class="uk-text-small uk-margin-remove-top">
{{ album.album_date|date:"d.m.Y" }} &bull; {{ album.photos_in_album }} photos
</p>
</div>
</div>
</div> </div>
{% endfor %}
</div> <div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
{% include "./partials/pagination.html" %} {% for album in album_list %}
<div>
<div class="uk-card uk-card-default uk-height-1-1">
<!-- Album cover image -->
<div class="uk-card-media-top">
<a href="{{ album.get_absolute_url }}">
<img src="{{ album.cover_url }}"
style="aspect-ratio: {{ album.cover.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy">
</a>
</div>
<!-- Album info overlay -->
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
<h3 class="uk-card-title uk-margin-remove-bottom">
<a href="{{ album.get_absolute_url }}">{{ album }}</a>
</h3>
<p class="uk-text-small uk-margin-remove-top">
{{ album.album_date|date:"d.m.Y" }} &bull; {{ album.photos_in_album }} photos
</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% include "./partials/pagination.html" %}
{% endblock %} {% endblock %}

6
gallery/templates/gallery/partials/pagination.html
View file

@ -1,8 +1,9 @@
{% load link_tags %} {% load link_tags %}
{% if page_obj.has_other_pages %} {% if page_obj.has_other_pages %}
<div class="uk-margin uk-background-muted uk-text-uppercase"> <div class="uk-margin uk-background-secondary uk-text-uppercase">
<ul class="uk-pagination uk-flex-center">
<ul class="uk-pagination uk-padding-small uk-flex-center">
{% if page_obj.has_previous %} {% if page_obj.has_previous %}
<li><a href="{% paginator_link page_obj.previous_page_number request.GET %}">&laquo; Prev</a></li> <li><a href="{% paginator_link page_obj.previous_page_number request.GET %}">&laquo; Prev</a></li>
@ -39,5 +40,6 @@
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
{% endif %} {% endif %}

15
gallery/templates/gallery/photo_detail.html
View file

@ -42,6 +42,20 @@
</div> </div>
<!-- Breadcrumb -->
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-middle">
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
<li><a href="{% url 'gallery:albums_url' %}">Albums</a></li>
<li><a href="{{ photo.album.get_absolute_url }}">{{ photo.album.name }}</a></li>
<li class="uk-disabled"><a>{{ photo.slug }}</a></li>
</ul>
</div>
</div>
<div class="uk-align-center uk-container-large uk-padding-medium"> <div class="uk-align-center uk-container-large uk-padding-medium">
<ul uk-accordion> <ul uk-accordion>
@ -125,5 +139,4 @@
</div> </div>
{% endblock %} {% endblock %}

29
gallery/templates/gallery/photo_list.html
View file

@ -12,13 +12,30 @@
<!-- Content --> <!-- Content -->
{% block content %} {% block content %}
{% load link_tags %} {% load link_tags %}
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-middle">
<!-- Breadcrumb -->
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
<li class="uk-disabled"><a>Photostream</a></li>
</ul>
<!-- Sort menu -->
<ul class="uk-subnav uk-subnav-divider uk-margin-remove uk-flex uk-flex-middle uk-margin-medium-top@s">
<li {% if order == 'latest' %}class="uk-active"{% endif %}>
<a href="{% search_link 'latest' request.GET %}">Latest</a>
</li>
<li {% if order == 'liked' %}class="uk-active"{% endif %}>
<a href="{% search_link 'liked' request.GET %}">Liked</a>
</li>
<li {% if order == 'popular' %}class="uk-active"{% endif %}>
<a href="{% search_link 'popular' request.GET %}">Popular</a>
</li>
</ul>
</div>
</div>
<ul class="uk-subnav uk-subnav-divider uk-margin-remove-top uk-flex-center" uk-margin>
<li {% if order == 'latest' %}class="uk-active" {% endif %}><a href="{% search_link 'latest' request.GET %}">Latest</a></li>
<li {% if order == 'liked' %}class="uk-active" {% endif %}><a href="{% search_link 'liked' request.GET %}">Liked</a></li>
<li {% if order == 'popular' %}class="uk-active" {% endif %}><a href="{% search_link 'popular' request.GET %}">Popular</a></li>
</ul>
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true"> <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">

78
gallery/templates/gallery/search.html
View file

@ -12,41 +12,49 @@
<!-- Content --> <!-- Content -->
{% block content %} {% block content %}
<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true"> <!-- Breadcrumb -->
{% if results %} <div class="uk-margin uk-background-secondary uk-padding-small uk-light">
{% for album in results %} <ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
<div> <li><a href="{% url 'gallery:main_url' %}">Home</a></li>
<div class="uk-card uk-card-default uk-height-1-1"> <li class="uk-disabled"><a>Search</a></li>
</ul>
<!-- Album cover image --> </div>
<div class="uk-card-media-top">
<a href="{{ album.get_absolute_url }}">
<img src="{{ album.cover_url }}"
style="aspect-ratio: {{ album.cover.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy">
</a>
</div>
<!-- Album info overlay -->
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
<h3 class="uk-card-title uk-margin-remove-bottom">
<a href="{{ album.get_absolute_url }}">{{ album }}</a>
</h3>
<p class="uk-text-small uk-margin-remove-top">
{{ album.album_date|date:"d.m.Y" }} &bull; {{ album.photos_in_album }} photos
</p>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>Not found: "{{ query }}".</p>
{% endif %}
</div>
{% include "./partials/pagination.html" %} <div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
{% if results %}
{% for album in results %}
<div>
<div class="uk-card uk-card-default uk-height-1-1">
<!-- Album cover image -->
<div class="uk-card-media-top">
<a href="{{ album.get_absolute_url }}">
<img src="{{ album.cover_url }}"
style="aspect-ratio: {{ album.cover.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy">
</a>
</div>
<!-- Album info overlay -->
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
<h3 class="uk-card-title uk-margin-remove-bottom">
<a href="{{ album.get_absolute_url }}">{{ album }}</a>
</h3>
<p class="uk-text-small uk-margin-remove-top">
{{ album.album_date|date:"d.m.Y" }} &bull; {{ album.photos_in_album }} photos
</p>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>Not found: "{{ query }}".</p>
{% endif %}
</div>
{% include "./partials/pagination.html" %}
{% endblock %} {% endblock %}

4
static/css/muistox.css
View file

@ -6,3 +6,7 @@ body {
min-height: 50px; min-height: 50px;
} }
.uk-align-center {
margin-top: 15px !important;
margin-bottom: 15px !important;
}