nolanlawson/pinafore
1
0
Fork 0
forked from cybrespace/pinafore
Code Issues Pull requests Releases Wiki Activity

improve a11y of back button

Browse source
This commit is contained in:
Nolan Lawson 2018-01-22 08:30:36 -08:00
parent 9bba0d80d8
commit 5d9eba58be
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
routes/tags/[tagName].html
View file

@ -8,9 +8,9 @@
dynamicLabel="{{'#' + params.tagName}}"
dynamicIcon="#fa-hashtag" >
{{#if $isUserLoggedIn}}
<div class="hashtag-banner">
<h1 class="hashtag-title">{{'#' + params.tagName}}</h1>
<a href="#" class="hashtag-go-back" on:click="onGoBack(event)">Back</a>
<div class="dynamic-page-banner">
<h1 class="dynamic-page-title">{{'#' + params.tagName}}</h1>
<button type="button" class="dynamic-page-go-back" on:click="onGoBack(event)">Back</button>
</div>
<LazyTimeline timeline='tag/{{params.tagName}}' />
{{else}}
@ -24,19 +24,26 @@
{{/if}}
</Layout>
<style>
.hashtag-banner {
.dynamic-page-banner {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 20px 20px;
}
h1.hashtag-title {
h1.dynamic-page-title {
margin: 0;
}
a.hashtag-go-back {
button.dynamic-page-go-back {
font-size: 1.3em;
color: var(--anchor-text);
border: 0;
padding: 0;
background: none;
}
a.hashtag-go-back::before {
button.dynamic-page-go-back:hover {
text-decoration: underline;
}
button.dynamic-page-go-back::before {
content: '<';
margin-right: 5px;
}