data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: back button icon rendering inconsistently (#2306)

Browse source 
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.
This commit is contained in:
Nick Colley 2022-12-10 23:30:43 +00:00 committed by GitHub
parent 97e3b04f1f
commit 3fb152ac7c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
bin/svgs.js
View file

@ -1,5 +1,6 @@
export default [ export default [
{ id: 'pinafore-logo', src: 'src/static/sailboat.svg', inline: true }, { 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', 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-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 }, { id: 'fa-users', src: 'src/thirdparty/font-awesome-svg-png/white/svg/users.svg', inline: true },

21
src/routes/_components/DynamicPageBanner.html
View file

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