From b05a38062e7f3b1ab4fec693be806a1f724604c1 Mon Sep 17 00:00:00 2001
From: Art Lukyanchyk <artiom.lukyanchyk@hs-hannover.de>
Date: Fri, 17 May 2019 17:36:15 +0200
Subject: [PATCH] Warning: breaking changes with icons
FontAwesome moved to icon prefixes "fas"/"far"/"fal" instead of single "fa".
Most old icons still work with "fa", but not all and none of the newer icons.
This commit changes old prefix to new prefixes in most places.
You might need to update your code and reference icons as
"fas something" or "far something" instead of "something" or "fa something".
---
hshassets/forms/utils.py | 6 +++---
.../templates/hshassets/includes/breadcrumbs.html | 2 +-
.../templates/hshassets/includes/default_footer.html | 10 +++++-----
.../templates/hshassets/includes/nav_auth_buttons.html | 2 +-
.../templates/hshassets/includes/session_timer.html | 6 +++---
hshassets/templates/hshassets/layout/hero.html | 10 +++++-----
6 files changed, 18 insertions(+), 18 deletions(-)
diff --git a/hshassets/forms/utils.py b/hshassets/forms/utils.py
index 8c803a52..31a1cf0b 100644
--- a/hshassets/forms/utils.py
+++ b/hshassets/forms/utils.py
@@ -71,7 +71,7 @@ class BulmaFieldMarkup(object):
Input field with icon in the left. Usage:
my_field = forms.CharField(widget=forms.TextInput(attrs={"icon": "fa-barcode"}))
"""
- icon_html = '<span class="icon is-small {side}"><i class="fa {icon}"></i></span>'
+ icon_html = '<span class="icon is-small {side}"><i class="{icon}"></i></span>'
control_classes = ['control']
icon_left, icon_right = None, None
# left icon is user customizable
@@ -81,7 +81,7 @@ class BulmaFieldMarkup(object):
# right icon appears on field errors
if field.errors and (get_input_type(field) in INPUT_TYPES_CAN_HAVE_ICON_ON_THE_RIGHT):
control_classes.append("has-icons-right")
- icon_right = 'fa-warning'
+ icon_right = 'fas fa-exclamation-triangle'
content = format_html(
'{content}{i1}{i2}',
content=content,
@@ -167,7 +167,7 @@ def render_form_errors(errors):
def render_submit_button(text, css_class, icon=None):
if icon:
icon_html = format_html(
- """<span class="icon is-small"><i class="fa {icon}"></i></span>""",
+ """<span class="icon is-small"><i class="{icon}"></i></span>""",
**locals(),
)
text_html = format_html(
diff --git a/hshassets/templates/hshassets/includes/breadcrumbs.html b/hshassets/templates/hshassets/includes/breadcrumbs.html
index ef1f659f..23417ad9 100644
--- a/hshassets/templates/hshassets/includes/breadcrumbs.html
+++ b/hshassets/templates/hshassets/includes/breadcrumbs.html
@@ -26,7 +26,7 @@
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
- <li><a href="{{ service_it_uri }}"><span class="icon"><i class="fa fa-home"></i></span> IT Services</a></li>
+ <li><a href="{{ service_it_uri }}"><span class="icon"><i class="fas fa-home"></i></span> IT Services</a></li>
{% for breadcrumb in breadcrumb_path %}
<li {% if forloop.last %}class="is-active"{% endif %}>
diff --git a/hshassets/templates/hshassets/includes/default_footer.html b/hshassets/templates/hshassets/includes/default_footer.html
index 5281945c..699744bf 100644
--- a/hshassets/templates/hshassets/includes/default_footer.html
+++ b/hshassets/templates/hshassets/includes/default_footer.html
@@ -11,11 +11,11 @@
<div class="column is-narrow has-text-centered-touch">
{% block footer-left %}
<p>
- <span class="icon is-small"><i class="fa fa-book"></i></span>
+ <span class="icon is-small"><i class="fas fa-book"></i></span>
<a href="https://service.it.hs-hannover.de/impressum/">{% trans "Imprint" %}</a>
</p>
<p>
- <span class="icon is-small"><i class="fa fa-eye-slash"></i></span>
+ <span class="icon is-small"><i class="fas fa-eye-slash"></i></span>
<a href="https://service.it.hs-hannover.de/privacy/">{% trans "Privacy" %}</a>
</p>
{% endblock %}
@@ -29,15 +29,15 @@
{% block footer-right %}
<p><b>Hochschule Hannover</b></p>
<p>
- <abbr title="{% trans "Phone" %}"><span class="icon is-small"><i class="fa fa-phone"></i></span></abbr>
+ <abbr title="{% trans "Phone" %}"><span class="icon is-small"><i class="fas fa-phone"></i></span></abbr>
<a href="tel:+4951192961441">+49 511 9296 1441</a>
</p>
<p>
- <abbr title="{% trans "Email" %}"><span class="icon is-small"><i class="fa fa-envelope"></i></span></abbr>
+ <abbr title="{% trans "Email" %}"><span class="icon is-small"><i class="fas fa-envelope"></i></span></abbr>
<a href="mailto:it-Support@hs-hannover.de">IT-Support@hs-hannover.de</a>
</p>
<p>
- <abbr title="{% trans "Web" %}"><span class="icon is-small"><i class="fa fa-globe"></i></span></abbr>
+ <abbr title="{% trans "Web" %}"><span class="icon is-small"><i class="fas fa-globe"></i></span></abbr>
<a href="https://www.hs-hannover.de/it">https://www.hs-hannover.de/it</a>
</p>
{% endblock %}
diff --git a/hshassets/templates/hshassets/includes/nav_auth_buttons.html b/hshassets/templates/hshassets/includes/nav_auth_buttons.html
index 7442e95c..a76d901f 100644
--- a/hshassets/templates/hshassets/includes/nav_auth_buttons.html
+++ b/hshassets/templates/hshassets/includes/nav_auth_buttons.html
@@ -11,7 +11,7 @@
<span class="navbar-item">
<span class="has-text-light">{% trans "Logged in as" %} <strong>{{ user.username }}</strong></span>
<a class="button is-white is-outlined" href="{% url 'sso-logout' %}">
- <span class="icon"><i class="fa fa-sign-out-alt"></i></span>
+ <span class="icon"><i class="fas fa-sign-out-alt"></i></span>
<span>{% trans "Log Out" %}</span>
</a>
</span>
diff --git a/hshassets/templates/hshassets/includes/session_timer.html b/hshassets/templates/hshassets/includes/session_timer.html
index e74d78c2..b430458a 100644
--- a/hshassets/templates/hshassets/includes/session_timer.html
+++ b/hshassets/templates/hshassets/includes/session_timer.html
@@ -14,7 +14,7 @@ To use the template as is simply include it in your "base.html":
You can also specify "end_session_icon" and "end_session_text" when including:
-{% include "hshassets/includes/session_timer.html" with end_session_icon="fa-lock" end_session_text="Lock" %}
+{% include "hshassets/includes/session_timer.html" with end_session_icon="fas fa-lock" end_session_text="Lock" %}
Chances are that you need even more fine grained control over the template so you can also extend
it in your app and include your extended template instead or write your own from the getgo.
@@ -35,11 +35,11 @@ Also make sure to include the corresponding javascript in your "base.html":
{% block session-nav-left %}{% endblock session-nav-left %}
<div class="navbar-item has-text-grey">
<span>{% trans "Your session will automatically expire in:" %}</span>
- <span class="icon is-small has-text-left has-text-right"><i class="fa fa-clock-o"></i></span>
+ <span class="icon is-small has-text-left has-text-right"><i class="far fa-clock"></i></span>
<span id="session-timer" data-initial-seconds-left="{{ initial_seconds_left|unlocalize }}">00:00</span>
</div>
<a href="{% url "flush-session" %}" class="navbar-item">
- <span class="icon is-small has-text-right"><i class="fa {% if end_session_icon %}{{ end_session_icon }}{% else %}fa-sign-out{% endif %}"></i></span>
+ <span class="icon is-small has-text-right"><i class="{% if end_session_icon %}{{ end_session_icon }}{% else %}fas fa-sign-out-alt{% endif %}"></i></span>
{% if end_session_text %}
<span>{{ end_session_text }}</span>
{% else %}
diff --git a/hshassets/templates/hshassets/layout/hero.html b/hshassets/templates/hshassets/layout/hero.html
index 7d9bedaf..cdd1b723 100644
--- a/hshassets/templates/hshassets/layout/hero.html
+++ b/hshassets/templates/hshassets/layout/hero.html
@@ -59,11 +59,11 @@
{% elif message.tags == 'warning'%}is-warning
{% elif message.tags == 'error'%}is-danger{% endif %}">
<span class="icon">
- {% if message.tags == 'debug' %}<i class="fa fa-bug"></i>
- {% elif message.tags == 'info'%}<i class="fa fa-info"></i>
- {% elif message.tags == 'success'%}<i class="fa fa-check"></i>
- {% elif message.tags == 'warning'%}<i class="fa fa-exclamation-triangle"></i>
- {% elif message.tags == 'error'%}<i class="fa fa-exclamation-triangle"></i>{% endif %}
+ {% if message.tags == 'debug' %}<i class="fas fa-bug fa-spin"></i>
+ {% elif message.tags == 'info'%}<i class="fas fa-info-circle"></i>
+ {% elif message.tags == 'success'%}<i class="fas fa-check-circle"></i>
+ {% elif message.tags == 'warning'%}<i class="fas fa-exclamation-triangle"></i>
+ {% elif message.tags == 'error'%}<i class="fas fa-exclamation-triangle"></i>{% endif %}
</span>
{{ message }}
</div>
--
GitLab