[ticket/17283] Adjust classes and lang call for icon

PHPBB3-17283
This commit is contained in:
Marc Alexander 2024-01-02 21:30:29 +01:00
parent e4974888bd
commit 455d6b071b
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
8 changed files with 40 additions and 35 deletions

View file

@ -1,3 +1,3 @@
{% apply spaceless %}
<i class="o-icon o-icon-font fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES : ' fas') }}"{% if S_HIDDEN %}{% if TITLE %} title="{{ TITLE }}"{% endif %} aria-hidden="true"{% endif %}{{ ATTRIBUTES }}></i>{% if TITLE %}<span{% if S_HIDDEN %} class="sr-only"{% endif %}>{{ lang(TITLE) }}</span>{% endif %}
<i class="o-icon o-icon-font fa-fw fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES : ' fas') }}"{% if S_HIDDEN %}{% if TITLE %} title="{{ TITLE }}"{% endif %} aria-hidden="true"{% endif %}{{ ATTRIBUTES }}></i>{% if TITLE %}<span{% if S_HIDDEN %} class="sr-only"{% endif %}>{{ TITLE }}</span>{% endif %}
{% endapply %}

View file

@ -1,8 +1,8 @@
<div class="dropdown-container dropdown-container-left dropdown-button-control sort-tools">
<span title="{L_SORT_OPTIONS}" class="button button-secondary dropdown-trigger dropdown-select">
{{ Icon('iconify', 'fa:sort-amount-asc', '', true, 'c-button-icon') }}
{{ Icon('font', 'arrow-down-short-wide', '', true, 'fas c-button-icon') }}
<span class="caret">
{{ Icon('iconify', 'fa:caret-down', '', true, 'c-button-icon') }}
{{ Icon('font', 'caret-down', '', true, 'fas c-button-icon') }}
</span>
</span>
<div class="dropdown hidden">

View file

@ -36,7 +36,7 @@
<dd>{faq_block.faq_row.FAQ_ANSWER}</dd>
</dl>
<a href="#faqlinks" class="top">
{{ Icon('iconify', 'fa:chevron-circle-up', lang('BACK_TO_TOP'), false) }}
{{ Icon('font', 'circle-chevron-up', lang('BACK_TO_TOP'), false) }}
</a>
<!-- IF not faq_block.faq_row.S_LAST_ROW --><hr class="dashed" /><!-- ENDIF -->
<!-- END faq_row -->

View file

@ -45,7 +45,7 @@
<!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED -->
<!--
<a class="feed-icon-forum" title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}">
{{ Icon('iconify', 'fa:rss-square', '', true, 'c-feed-icon') }}<span class="sr-only">{L_FEED} - {forumrow.FORUM_NAME}</span>
{{ Icon('font', 'square-rss', '', true, 'fas c-feed-icon') }}<span class="sr-only">{L_FEED} - {forumrow.FORUM_NAME}</span>
</a>
-->
<!-- ENDIF -->
@ -66,10 +66,11 @@
<!-- BEGIN subforum -->
<!-- EVENT forumlist_body_subforum_link_prepend -->
<a href="{forumrow.subforum.U_SUBFORUM}" class="subforum<!-- IF forumrow.subforum.S_UNREAD --> unread<!-- ELSE --> read<!-- ENDIF -->" title="{% if forumrow.subforum.IS_LINK %}{{ lang('FORUM_LINK') }}{% elseif forumrow.subforum.S_UNREAD %}{{ lang('UNREAD_POSTS') }}{% else %}{{ lang('NO_UNREAD_POSTS') }}{% endif %}">
{{ Icon('iconify', {
'fa:external-link' : forumrow.subforum.IS_LINK,
'fa:file-o' : true,
}, forumrow.subforum.SUBFORUM_NAME, false, 'c-subforum-icon') }}
{% if forumrow.subforum.IS_LINK %}
{{ Icon('font', 'arrow-up-right-from-square', forumrow.subforum.SUBFORUM_NAME, false, 'fas c-subforum-icon') }}
{% else %}
{{ Icon('font', 'file', forumrow.subforum.SUBFORUM_NAME, false, 'far c-subforum-icon') }}
{% endif %}
</a>{% if not forumrow.subforum.S_LAST_ROW %}{L_COMMA_SEPARATOR}{% endif %}
<!-- EVENT forumlist_body_subforum_link_append -->
<!-- END subforum -->
@ -113,7 +114,7 @@
{L_POST_BY_AUTHOR} <!-- EVENT forumlist_body_last_poster_username_prepend -->{forumrow.LAST_POSTER_FULL}<!-- EVENT forumlist_body_last_poster_username_append -->
<!-- IF not S_IS_BOT -->
<a href="{forumrow.U_LAST_POST}" title="{L_VIEW_LATEST_POST}">
{{ Icon('iconify', 'fa:external-link-square', lang('VIEW_LATEST_POST'), true, 'c-last-post-icon') }}
{{ Icon('font', 'arrow-up-right-from-square', lang('VIEW_LATEST_POST'), true, 'fas c-last-post-icon') }}
</a>
<!-- ENDIF -->
<br /><time datetime="{forumrow.LAST_POST_TIME_RFC3339}">{forumrow.LAST_POST_TIME}</time>

View file

@ -3,25 +3,25 @@
<!-- IF S_VIEWTOPIC -->
<p class="jumpbox-return">
<a href="{U_VIEW_FORUM}" class="left-box arrow-{S_CONTENT_FLOW_BEGIN}" accesskey="r">
{{ Icon('iconify', 'fa:angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_FORUM'), false, 'c-return-arrow-icon') }}
{{ Icon('font', 'angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_FORUM'), false, 'fas c-return-arrow-icon') }}
</a>
</p>
<!-- ELSEIF S_VIEWFORUM -->
<p class="jumpbox-return">
<a href="{U_INDEX}" class="left-box arrow-{S_CONTENT_FLOW_BEGIN}" accesskey="r">
{{ Icon('iconify', 'fa:angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_INDEX'), false, 'c-return-arrow-icon') }}
{{ Icon('font', 'angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_INDEX'), false, 'fas c-return-arrow-icon') }}
</a>
</p>
<!-- ELSEIF SEARCH_TOPIC -->
<p class="jumpbox-return">
<a class="left-box arrow-{S_CONTENT_FLOW_BEGIN}" href="{U_SEARCH_TOPIC}" accesskey="r">
{{ Icon('iconify', 'fa:angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_TOPIC'), false, 'c-return-arrow-icon') }}
{{ Icon('font', 'angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_TOPIC'), false, 'fas c-return-arrow-icon') }}
</a>
</p>
<!-- ELSEIF S_SEARCH_ACTION -->
<p class="jumpbox-return">
<a class="left-box arrow-{S_CONTENT_FLOW_BEGIN}" href="{U_SEARCH}" title="{L_SEARCH_ADV}" accesskey="r">
{{ Icon('iconify', 'fa:angle-' ~ S_CONTENT_FLOW_BEGIN, lang('GO_TO_SEARCH_ADV'), false, 'c-return-arrow-icon') }}
{{ Icon('font', 'angle-' ~ S_CONTENT_FLOW_BEGIN, lang('GO_TO_SEARCH_ADV'), false, 'fas c-return-arrow-icon') }}
</a>
</p>
<!-- ENDIF -->
@ -30,7 +30,7 @@
<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-up<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">
<span title="<!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF -->" class="button button-secondary dropdown-trigger dropdown-select">
<span><!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF --></span>
<span class="caret">{{ Icon('iconify', 'fa:caret-down', '', true) }}</span>
<span class="caret">{{ Icon('font', 'caret-down', '', true) }}</span>
</span>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>

View file

@ -16,32 +16,32 @@
{% if S_REGISTERED_USER %}
<li>
<a href="{{ U_SEARCH_SELF }}" role="menuitem">
{{ Icon('font', 'file', 'SEARCH_SELF', false, 'far icon icon-gray') }}
{{ Icon('font', 'file', lang('SEARCH_SELF'), false, 'far icon icon-gray') }}
</a>
</li>
{% endif %}
{% if S_USER_LOGGED_IN %}
<li>
<a href="{{ U_SEARCH_NEW }}" role="menuitem">
{{ Icon('font', 'file', 'SEARCH_NEW', false, 'far icon icon-red') }}
{{ Icon('font', 'file', lang('SEARCH_NEW'), false, 'far icon icon-red') }}
</a>
</li>
{% endif %}
{% if S_LOAD_UNREADS %}
<li>
<a href="{{ U_SEARCH_UNREAD }}" role="menuitem">
{{ Icon('font', 'file', 'SEARCH_UNREAD', false, 'far icon icon-red') }}
{{ Icon('font', 'file', lang('SEARCH_UNREAD'), false, 'far icon icon-red') }}
</a>
</li>
{% endif %}
<li>
<a href="{{ U_SEARCH_UNANSWERED }}" role="menuitem">
{{ Icon('font', 'file', 'SEARCH_UNANSWERED', false, 'far icon icon-gray') }}
{{ Icon('font', 'file', lang('SEARCH_UNANSWERED'), false, 'far icon icon-gray') }}
</a>
</li>
<li>
<a href="{{ U_SEARCH_ACTIVE_TOPICS }}" role="menuitem">
{{ Icon('font', 'file-lines', 'SEARCH_ACTIVE_TOPICS', false, 'far icon icon-blue') }}
{{ Icon('font', 'file-lines', lang('SEARCH_ACTIVE_TOPICS'), false, 'far icon icon-blue') }}
</a>
</li>
<li class="separator"></li>
@ -91,14 +91,14 @@
{% if U_ACP %}
<li>
<a href="{{ U_ACP }}" title="{{ lang('ACP') }}" role="menuitem">
{{ Icon('font', 'gears', 'ACP_SHORT', false) }}
{{ Icon('font', 'gears', lang('ACP_SHORT'), false) }}
</a>
</li>
{% endif %}
{% if U_MCP %}
<li>
<a href="{{ U_MCP }}" title="{{ lang('MCP') }}" role="menuitem">
{{ Icon('font', 'gavel', 'MCP_SHORT', false) }}
{{ Icon('font', 'gavel', lang('MCP_SHORT'), false) }}
</a>
</li>
{% endif %}

View file

@ -42,9 +42,9 @@
<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
<!-- IF S_IS_LOCKED -->
<span>{L_BUTTON_FORUM_LOCKED}</span> {{ Icon('iconify', 'fa:lock', '', true, 'c-button-icon') }}
<span>{L_BUTTON_FORUM_LOCKED}</span> {{ Icon('font', 'lock', '', true, 'fas c-button-icon') }}
<!-- ELSE -->
<span>{L_BUTTON_NEW_TOPIC}</span> {{ Icon('iconify', 'fa:pencil', '', true, 'c-button-icon') }}
<span>{L_BUTTON_NEW_TOPIC}</span> {{ Icon('font', 'pencil', '', true, 'fas c-button-icon') }}
<!-- ENDIF -->
</a>
<!-- EVENT viewforum_buttons_top_after -->
@ -56,10 +56,10 @@
<fieldset>
<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
<button class="button button-search" type="submit" title="{L_SEARCH}">
{{ Icon('iconify', 'fa:search', lang('SEARCH'), true, 'c-button-icon') }}
{{ Icon('font', 'search', lang('SEARCH'), true, 'fas c-button-icon') }}
</button>
<a href="{{ U_SEARCH_FORUM }}" class="button button-search-end" title="lang('SEARCH_ADV')">
{{ Icon('iconify', 'fa:cog', lang('SEARCH_ADV'), true, 'c-button-icon') }}
{{ Icon('font', 'gear', lang('SEARCH_ADV'), true, 'fas c-button-icon') }}
</a>
{S_SEARCH_LOCAL_HIDDEN_FIELDS}
</fieldset>
@ -186,17 +186,17 @@
{% endif %}
<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED -->
<a href="{topicrow.U_MCP_QUEUE}" title="<!-- IF topicrow.S_TOPIC_UNAPPROVED -->{L_TOPIC_UNAPPROVED}<!-- ELSE -->{L_POSTS_UNAPPROVED}<!-- ENDIF -->">
{{ Icon('iconify', 'fa:question', '', true, 'c-unapproved-icon') }}<span class="sr-only"><!-- IF topicrow.S_TOPIC_UNAPPROVED -->{L_TOPIC_UNAPPROVED}<!-- ELSE -->{L_POSTS_UNAPPROVED}<!-- ENDIF --></span>
{{ Icon('font', 'circle-question', '', true, 'fas icon icon-blue c-unapproved-icon o-icon-baseline') }}<span class="sr-only"><!-- IF topicrow.S_TOPIC_UNAPPROVED -->{L_TOPIC_UNAPPROVED}<!-- ELSE -->{L_POSTS_UNAPPROVED}<!-- ENDIF --></span>
</a>
<!-- ENDIF -->
<!-- IF topicrow.S_TOPIC_DELETED -->
<a href="{topicrow.U_MCP_QUEUE}" title="{L_TOPIC_DELETED}">
{{ Icon('iconify', 'fa:recycle', lang('TOPIC_DELETED'), true, 'c-topic-deleted-icon') }}
{{ Icon('font', 'recycle', lang('TOPIC_DELETED'), true, 'c-topic-deleted-icon') }}
</a>
<!-- ENDIF -->
<!-- IF topicrow.S_TOPIC_REPORTED -->
<a href="{topicrow.U_MCP_REPORT}" title="{L_TOPIC_REPORTED}">
{{ Icon('iconify', 'fa:exclamation', lang('TOPIC_REPORTED'), true, 'c-topic-reported-icon') }}
{{ Icon('font', 'triangle-exclamation', lang('TOPIC_REPORTED'), true, 'fas c-topic-reported-icon o-icon-baseline') }}
</a>
<!-- ENDIF -->
<br />
@ -213,8 +213,8 @@
<!-- ENDIF -->
<div class="topic-poster responsive-hide left-box">
<!-- IF topicrow.S_HAS_POLL -->{{ Icon('iconify', 'fa:bar-chart', '', true) }}<!-- ENDIF -->
<!-- IF topicrow.ATTACH_ICON_IMG -->{{ Icon('iconify', 'fa:paperclip', '', true) }}<!-- ENDIF -->
<!-- IF topicrow.S_HAS_POLL -->{{ Icon('font', 'chart-bar', '', true) }}<!-- ENDIF -->
<!-- IF topicrow.ATTACH_ICON_IMG -->{{ Icon('font', 'paperclip', '', true) }}<!-- ENDIF -->
{% EVENT topiclist_row_topic_by_author_before %}
{L_POST_BY_AUTHOR} <!-- EVENT viewforum_body_topic_author_username_prepend -->{topicrow.TOPIC_AUTHOR_FULL}<!-- EVENT viewforum_body_topic_author_username_append --> &raquo; <time datetime="{topicrow.FIRST_POST_TIME_RFC3339}">{topicrow.FIRST_POST_TIME}</time>
{% EVENT topiclist_row_topic_by_author_after %}
@ -223,7 +223,7 @@
<!-- IF .topicrow.pagination -->
<div class="pagination">
<span>{{ Icon('iconify', 'fa:clone', '', true) }}</span>
<span>{{ Icon('font', 'clone', '', true, 'far') }}</span>
<ul>
<!-- BEGIN pagination -->
<!-- IF topicrow.pagination.S_IS_PREV -->
@ -249,7 +249,7 @@
<span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} <!-- EVENT viewforum_body_last_post_author_username_prepend -->{topicrow.LAST_POST_AUTHOR_FULL}<!-- EVENT viewforum_body_last_post_author_username_append -->
<!-- IF not S_IS_BOT and topicrow.U_LAST_POST -->
<a href="{topicrow.U_LAST_POST}" title="{L_GOTO_LAST_POST}">
{{ Icon('iconify', 'fa:external-link-square', VIEW_LATEST_POST, true, 'c-last-post-icon') }}
{{ Icon('font', 'arrow-up-right-from-square', VIEW_LATEST_POST, true, 'fas c-last-post-icon') }}
</a>
<!-- ENDIF -->
<br /><time datetime="{topicrow.LAST_POST_TIME_RFC3339}">{topicrow.LAST_POST_TIME}</time>
@ -289,9 +289,9 @@
<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
<!-- IF S_IS_LOCKED -->
<span>{L_BUTTON_FORUM_LOCKED}</span> {{ Icon('iconify', 'fa:lock', '', true, 'c-button-icon') }}
<span>{L_BUTTON_FORUM_LOCKED}</span> {{ Icon('font', 'lock', '', true, 'fas c-button-icon') }}
<!-- ELSE -->
<span>{L_BUTTON_NEW_TOPIC}</span> {{ Icon('iconify', 'fa:pencil', '', true, 'c-button-icon') }}
<span>{L_BUTTON_NEW_TOPIC}</span> {{ Icon('font', 'pencil', '', true, 'fas c-button-icon') }}
<!-- ENDIF -->
</a>

View file

@ -42,6 +42,10 @@ svg {
text-rendering: auto; /* optimizelegibility throws things off #1094 */
}
.o-icon-baseline {
vertical-align: baseline !important;
}
.o-icon + span,
span + .o-icon {
padding-left: 4px;