infrastructure/extensions-website
4
8
Fork 10
Code Issues 20 Pull Requests 2 Projects Releases Wiki Activity

Implement Web Assets' theme system and selection, and add 'light' theme #118

Merged
Márton Lente merged 97 commits from martonlente/extensions-website:ui/theme-light into main 2024-05-08 14:20:07 +02:00
Conversation 0 Commits 97 Files Changed 6 +87 -63
2 changed files with 87 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7a06add6f0 - Show all commits

15
common/static/common/styles/_cards.sass
View File

@ -1,3 +1,18 @@
.card
@extend .box
.crads-item-excerpt
line-height: calc(24 / 18)
.cards-item-extra
text-transform: none
.cards-item-extra-rating-stars
margin-bottom: .2rem
.stars
font-size: 1.4rem
.cards-item-title
+padding(0, y)

135
extensions/templates/extensions/components/card.html
View File

@ -1,68 +1,77 @@
{% load common filters %}
{% with latest=extension.latest_version %}
<div class="ext-card {% if blur %}is-bg-blur{% endif %}">
{% if blur %}
<div class="ext-card-thumbnail-blur" style="background-image: url({{ extension.previews.listed.first.source.url }});"></div>
{% endif %}
<a class="ext-card-thumbnail" href="{{ extension.get_absolute_url }}">
<div class="ext-card-thumbnail-img" style="background-image: url({{ extension.previews.listed.first.source.url }});" title="{{ extension.name }}"></div>
</a>
<div class="ext-card-body">
<h3 class="ext-card-title">
<a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
</h3>
<p>
{{ latest.tagline }}
</p>
<ul class="ext-list-details">
<li class="ext-card-author">
{% if extension.team %}
{% with team=extension.team %}
<a href="{{ team.get_absolute_url }}" title="{{ team.name }}">{{ team.name }}</a>
{% endwith %}
{% elif extension.authors.count %}
{% include "extensions/components/authors.html" %}
{% endif %}
</li>
</ul>
<ul class="ext-list-details mt-1">
{% if extension.average_score %}
<li>
<a class="align-items-center d-flex" href="{{ extension.get_ratings_url }}">
{% include "ratings/components/average.html" with score=extension.average_score %}
({{ extension.text_ratings_count|int_compact }})
</a>
</li>
{% endif %}
{% if extension.download_count %}
<li title="{{ extension.download_count }} downloads">
<i class="i-download"></i> {{ extension.download_count | int_compact }}
</li>
{% endif %}
{% if show_type %}
<li class="ms-auto">
{{ extension.get_type_display }}
</li>
{% endif %}
</ul>
{% if latest.tags.count %}
<ul class="ext-list-details ext-card-tags">
<li class="ext-card-tags">
{% include "extensions/components/tags.html" with small=True version=latest %}
</li>
</ul>
{# TODO: add conditional if is bg blur to web-assets component card #}
{% comment %}
<div class="ext-card {% if blur %}is-bg-blur{% endif %}">
{% if blur %}
<div class="ext-card-thumbnail-blur" style="background-image: url({{ extension.previews.listed.first.source.url }});"></div>
{% endif %}
</div>
{# Author/admin tools can be added here in an extending template #}
{% block admin %}{% endblock admin %}
</div>
</div>
{% endcomment %}
<div class="cards-item">
<div class="cards-item-content">
<a href="{{ extension.get_absolute_url }}">
<div class="cards-item-thumbnail">
<img alt="{{ extension.name }}" src="{{ extension.previews.listed.first.source.url }}" title="{{ extension.name }}">
</div>
</a>
<h3 class="cards-item-title">
<a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
</h3>
<div class="cards-item-excerpt">
<p>
{{ latest.tagline }}
</p>
</div>
<div class="cards-item-extra">
<ul>
<li class="ext-card-author">
{% if extension.team %}
{% with team=extension.team %}
<a href="{{ team.get_absolute_url }}" title="{{ team.name }}">{{ team.name }}</a>
{% endwith %}
{% elif extension.authors.count %}
{% include "extensions/components/authors.html" %}
{% endif %}
</li>
</ul>
<ul class="cards-item-extra-rating-stars">
{% if extension.average_score %}
<li>
<a class="align-items-center d-flex" href="{{ extension.get_ratings_url }}">
{% include "ratings/components/average.html" with score=extension.average_score %}
({{ extension.text_ratings_count|int_compact }})
</a>
</li>
{% endif %}
{% if extension.download_count %}
<li title="{{ extension.download_count }} downloads">
<i class="i-download"></i> {{ extension.download_count | int_compact }}
</li>
{% endif %}
{% if show_type %}
<li class="ms-auto">
{{ extension.get_type_display }}
</li>
{% endif %}
</ul>
{% if latest.tags.count %}
<ul class="ext-card-tags">
<li class="ext-card-tags">
{% include "extensions/components/tags.html" with small=True version=latest %}
</li>
</ul>
{% endif %}
</div>
</div>
{# Author/admin tools can be added here in an extending template #}
{% block admin %}{% endblock admin %}
</div>
{% endwith %}