Navigate to "subscriptions" on logo click (#1394)

* Updated logo to navigate to "subscriptions" on click

* accessibility improvements

* don't change backgroud color on hover
This commit is contained in:
ChunkyProgrammer 2021-08-24 18:14:37 -04:00 committed by GitHub
parent 5e4b24f2bb
commit 6ebb000cb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 2 deletions

View File

@ -277,7 +277,9 @@ export default Vue.extend({
// Web placeholder // Web placeholder
} }
}, },
navigate: function (route) {
this.$router.push('/' + route)
},
...mapActions([ ...mapActions([
'showToast', 'showToast',
'getYoutubeUrlInfo', 'getYoutubeUrlInfo',

View File

@ -85,7 +85,13 @@
display: flex display: flex
align-items: center align-items: center
padding: 0px 25px 0px 10px padding: 0px 25px 0px 10px
cursor: pointer
&:active
background-color: var(--tertiary-text-color)
transition: background 0.2s ease-in
@include top-nav-is-colored
background-color: var(--primary-color-active)
.logoIcon .logoIcon
background-image: var(--logo-icon) background-image: var(--logo-icon)
background-repeat: no-repeat background-repeat: no-repeat

View File

@ -44,7 +44,15 @@
:title="newWindowText" :title="newWindowText"
@click="createNewWindow" @click="createNewWindow"
/> />
<div class="logo"> <div
class="logo"
role="link"
tabindex="0"
:title="$t('Subscriptions.Subscriptions')"
@click="navigate('subscriptions')"
@keydown.space.prevent="navigate('subscriptions')"
@keydown.enter.prevent="navigate('subscriptions')"
>
<div <div
class="logoIcon" class="logoIcon"
/> />