fix: back button icon rendering inconsistently (#2306)

Depending on the operating system and therefore the system font
the back icon being a unicode arrow means it'll render inconsistently,
sometimes I've seen it looking really odd.

Instead make use of the font awesome arrow so that'll it render consistently
no matter ths system font.
more-elegant-retoot-favourite
Nick Colley 2022-12-10 23:30:43 +00:00 zatwierdzone przez GitHub
rodzic 97e3b04f1f
commit 3fb152ac7c
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
2 zmienionych plików z 16 dodań i 6 usunięć

Wyświetl plik

@ -1,5 +1,6 @@
export default [
{ id: 'pinafore-logo', src: 'src/static/sailboat.svg', inline: true },
{ id: 'fa-arrow-left', src: 'src/thirdparty/font-awesome-svg-png/white/svg/arrow-left.svg' },
{ id: 'fa-bell', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell.svg', inline: true },
{ id: 'fa-bell-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell-o.svg' },
{ id: 'fa-users', src: 'src/thirdparty/font-awesome-svg-png/white/svg/users.svg', inline: true },

Wyświetl plik

@ -8,7 +8,10 @@
<button type="button"
class="dynamic-page-go-back"
aria-label="{intl.goBack}"
on:click|preventDefault="onGoBack()">{intl.back}</button>
on:click|preventDefault="onGoBack()">
<SvgIcon className="dynamic-page-go-back-icon" href="#fa-arrow-left" />
{intl.back}
</button>
</div>
<Shortcut key="Backspace" on:pressed="onGoBack()"/>
<style>
@ -34,19 +37,25 @@
text-overflow: ellipsis;
}
.dynamic-page-go-back {
font-size: 1.3em;
display: inline-flex;
align-items: center;
justify-self: flex-end;
font-size: 1.2857142857142858em;
color: var(--anchor-text);
border: 0;
padding: 0;
background: none;
justify-self: flex-end;
}
.dynamic-page-go-back:hover {
text-decoration: underline;
}
.dynamic-page-go-back::before {
content: '←';
margin-right: 5px;
:global(.dynamic-page-go-back-icon) {
position: relative;
bottom: 0.06em;
margin-right: 0.2em;
height: 0.66666666em;
width: 0.66666666em;
fill: currentColor;
}
@media (max-width: 767px) {
.dynamic-page-banner {