Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#1059] Added support for SVG logos #532

Merged
merged 2 commits into from
Mar 15, 2023
Merged

[#1059] Added support for SVG logos #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c00ded
[#1059] Updated django-filter and easy-thumbnails (for SVG support)
Mar 14, 2023
5d0cfe9
[#1059] Added support for SVG logos
Mar 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions requirements/base.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@ cryptography==38.0.4
# mozilla-django-oidc
# pyopenssl
cssselect2==0.4.1
# via weasyprint
# via
# svglib
# weasyprint
defusedxml==0.7.1
# via
# django-digid-eherkenning
Expand Down Expand Up @@ -143,7 +145,7 @@ django-elasticsearch-dsl==7.2.1
# via -r requirements/base.in
django-extra-fields==3.0.2
# via -r requirements/base.in
django-filer==2.0.2
django-filer==2.2.4
# via -r requirements/base.in
django-filter==21.1
# via -r requirements/base.in
Expand Down Expand Up @@ -228,7 +230,7 @@ djangorestframework-camel-case==1.2.0
# notifications-api-common
drf-spectacular==0.20.1
# via -r requirements/base.in
easy-thumbnails==2.7.1
easy-thumbnails[svg]==2.8.5
# via django-filer
elastic-apm==6.4.0
# via -r requirements/base.in
Expand Down Expand Up @@ -288,6 +290,7 @@ lxml==4.9.1
# via
# django-digid-eherkenning
# maykin-python3-saml
# svglib
# xmlsec
mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@f99e5c4920a95cf9141a71230d7dfb9f03b84e36
# via -r requirements/base.in
Expand Down Expand Up @@ -319,6 +322,7 @@ pillow==9.0.1
# via
# -r requirements/base.in
# easy-thumbnails
# reportlab
# weasyprint
playwright==1.28.0
# via -r requirements/base.in
Expand Down Expand Up @@ -375,6 +379,10 @@ qrcode==6.1
# via maykin-django-two-factor-auth
redis==3.5.3
# via django-redis
reportlab==3.6.12
# via
# easy-thumbnails
# svglib
requests==2.26.0
# via
# django-open-forms-client
Expand Down Expand Up @@ -408,13 +416,16 @@ soupsieve==2.3.1
# via beautifulsoup4
sqlparse==0.4.2
# via django
svglib==1.5.1
# via easy-thumbnails
tablib[html,ods,xls,xlsx,yaml]==3.1.0
# via django-import-export
text-unidecode==1.3
# via faker
tinycss2==1.1.1
# via
# cssselect2
# svglib
# weasyprint
typing-extensions==4.4.0
# via pyee
Expand Down
19 changes: 17 additions & 2 deletions requirements/ci.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ cssselect2==0.4.1
# via
# -c requirements/base.txt
# -r requirements/base.txt
# svglib
# weasyprint
defusedxml==0.7.1
# via
Expand Down Expand Up @@ -230,7 +231,7 @@ django-extra-fields==3.0.2
# via
# -c requirements/base.txt
# -r requirements/base.txt
django-filer==2.0.2
django-filer==2.2.4
# via
# -c requirements/base.txt
# -r requirements/base.txt
Expand Down Expand Up @@ -386,7 +387,7 @@ drf-spectacular==0.20.1
# via
# -c requirements/base.txt
# -r requirements/base.txt
easy-thumbnails==2.7.1
easy-thumbnails[svg]==2.8.5
# via
# -c requirements/base.txt
# -r requirements/base.txt
Expand Down Expand Up @@ -524,6 +525,7 @@ lxml==4.9.1
# django-digid-eherkenning
# maykin-python3-saml
# pyquery
# svglib
# xmlsec
mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@f99e5c4920a95cf9141a71230d7dfb9f03b84e36
# via
Expand Down Expand Up @@ -592,6 +594,7 @@ pillow==9.0.1
# -c requirements/base.txt
# -r requirements/base.txt
# easy-thumbnails
# reportlab
# weasyprint
platformdirs==2.4.0
# via pylint
Expand Down Expand Up @@ -705,6 +708,12 @@ redis==3.5.3
# -c requirements/base.txt
# -r requirements/base.txt
# django-redis
reportlab==3.6.12
# via
# -c requirements/base.txt
# -r requirements/base.txt
# easy-thumbnails
# svglib
requests==2.26.0
# via
# -c requirements/base.txt
Expand Down Expand Up @@ -757,6 +766,11 @@ sqlparse==0.4.2
# -c requirements/base.txt
# -r requirements/base.txt
# django
svglib==1.5.1
# via
# -c requirements/base.txt
# -r requirements/base.txt
# easy-thumbnails
tablib[html,ods,xls,xlsx,yaml]==3.1.0
# via
# -c requirements/base.txt
Expand All @@ -774,6 +788,7 @@ tinycss2==1.1.1
# -c requirements/base.txt
# -r requirements/base.txt
# cssselect2
# svglib
# weasyprint
toml==0.10.2
# via pylint
Expand Down
19 changes: 17 additions & 2 deletions requirements/dev.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ cssselect2==0.4.1
# via
# -c requirements/ci.txt
# -r requirements/ci.txt
# svglib
# weasyprint
ddt-api-calls==0.3.2
# via -r requirements/dev.in
Expand Down Expand Up @@ -259,7 +260,7 @@ django-extra-fields==3.0.2
# via
# -c requirements/ci.txt
# -r requirements/ci.txt
django-filer==2.0.2
django-filer==2.2.4
# via
# -c requirements/ci.txt
# -r requirements/ci.txt
Expand Down Expand Up @@ -421,7 +422,7 @@ drf-spectacular==0.20.1
# via
# -c requirements/ci.txt
# -r requirements/ci.txt
easy-thumbnails==2.7.1
easy-thumbnails[svg]==2.8.5
# via
# -c requirements/ci.txt
# -r requirements/ci.txt
Expand Down Expand Up @@ -580,6 +581,7 @@ lxml==4.9.1
# django-digid-eherkenning
# maykin-python3-saml
# pyquery
# svglib
# xmlsec
mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@f99e5c4920a95cf9141a71230d7dfb9f03b84e36
# via
Expand Down Expand Up @@ -668,6 +670,7 @@ pillow==9.0.1
# -c requirements/ci.txt
# -r requirements/ci.txt
# easy-thumbnails
# reportlab
# weasyprint
pip-tools==6.8.0
# via -r requirements/dev.in
Expand Down Expand Up @@ -800,6 +803,12 @@ redis==3.5.3
# -c requirements/ci.txt
# -r requirements/ci.txt
# django-redis
reportlab==3.6.12
# via
# -c requirements/ci.txt
# -r requirements/ci.txt
# easy-thumbnails
# svglib
requests==2.26.0
# via
# -c requirements/ci.txt
Expand Down Expand Up @@ -879,6 +888,11 @@ sqlparse==0.4.2
# django-debug-toolbar
stevedore==3.5.0
# via bandit
svglib==1.5.1
# via
# -c requirements/ci.txt
# -r requirements/ci.txt
# easy-thumbnails
tablib[html,ods,xls,xlsx,yaml]==3.1.0
# via
# -c requirements/ci.txt
Expand All @@ -898,6 +912,7 @@ tinycss2==1.1.1
# -c requirements/ci.txt
# -r requirements/ci.txt
# cssselect2
# svglib
# weasyprint
toml==0.10.2
# via
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Footer/Footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</div>

<div class="footer__logo">
{% logo src=config.footer_logo.file.url alt=logo_alt_text href=config.footer_logo_url %}
{% logo src=config.footer_logo.file.url alt=logo_alt_text href=config.footer_logo_url svg_height=60 %}
</div>

<div class="footer__visitor">
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Header/Header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<header class="header" aria-label="Navigatie header">
<div class="header__container">
{% firstof config.logo.default_alt_text config.name as logo_alt_text %}
{% logo src=config.logo.file.url alt=logo_alt_text %}
{% logo src=config.logo.file.url alt=logo_alt_text svg_height=75 %}

<div class="header__menu">
<button class="header__button">
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Logo/Logo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% load i18n link_tags %}

{% url 'root' as root_url %}
{% link extra_classes="logo" text=alt hide_text=True href=href|default:root_url src=src alt=alt hide_external_icon=True %}
{% link extra_classes="logo" text=alt hide_text=True href=href|default:root_url src=src alt=alt hide_external_icon=True svg_height=svg_height %}
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Typography/Link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
title="{% firstof title text %}"
>
{% if src %}
<img class="logo__image" src="{{src}}" alt="{{ text }}"/>
<img class="logo__image" src="{{src}}" alt="{{ text }}"{{ svg_height_attr }}/>
{% endif %}

{% if text and not hide_text %}<span class="link__text">{{ text }}</span>{% endif %}
Expand Down
7 changes: 7 additions & 0 deletions src/open_inwoner/components/templatetags/link_tags.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
from django import template
from django.urls import NoReverseMatch, reverse
from django.utils.html import format_html

register = template.Library()

Expand Down Expand Up @@ -100,6 +101,12 @@ def get_classes():

return " ".join(classes).strip()

src = kwargs.get("src")
if src and src.endswith(".svg"):
svg_height = kwargs.pop("svg_height", None)
if svg_height:
kwargs["svg_height_attr"] = format_html(' height="{}"', svg_height)

kwargs["base_class"] = get_base_class()
kwargs["classes"] = get_classes()
kwargs["href"] = get_href()
Expand Down
4 changes: 0 additions & 4 deletions src/open_inwoner/scss/components/Logo/Logo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
.logo {
&__image {
max-width: 100%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems completely fine actually - I've done some really weird testing with strange SVG's and the only SVG's that do not behave well are the ones with inline-styling and without an explicit viewbox - so: if users upload correct and valid SVG's then the styling behaves well (something to note for ourselves in case future users report problems with SVG).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ugh yes invalid or weird SVG's are a complication. The SVG used should at least look normal in a browser/viewer without margins (viewbox and transforms etc)

height: auto;

@media (min-width: 768px) {
display: block;
}
@media (max-width: 455px) {
height: auto;
}
}
}