Skip to content

Commit a6e9e4c

Browse files
BobChao87BobChao87
committed
Replace NuxtLink with ElementLink
This allows us to have active classes on hash mapped routes for the page and the anchor links. This will also allow us to place more complex logic onto our linkings where relevant. Related to Issue #32
1 parent c1af088 commit a6e9e4c

File tree

11 files changed

+46
-43
lines changed

11 files changed

+46
-43
lines changed

‎components/element/Link.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,14 @@ export default Vue.extend({
3030
computed: {
3131
isActive(): IsActive {
3232
return {
33-
'is-active': this.$route.path === this.path,
33+
'is-active': (this.isHash ? this.$route.hash : this.$route.path) === this.path,
3434
};
3535
},
3636
path(): string {
37-
return this.localePath(this.to);
37+
return this.isHash ? this.to : this.localePath(this.to);
38+
},
39+
isHash(): boolean {
40+
return this.to.startsWith('#');
3841
},
3942
},
4043
});

‎components/header/Cookies.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
<button class="button is-warning" @click="setCookies(false)">
1212
{{ $t('action.decline') }}
1313
</button>
14-
<NuxtLink :to="localePath('/about')" class="button is-info">
14+
<ElementLink to="/about" class="button is-info">
1515
{{ $t('navbar.about') }}
16-
</NuxtLink>
16+
</ElementLink>
1717
</div>
1818
</div>
1919
</template>

‎components/header/Nav.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<nav class="navbar">
33
<div class="navbar-brand">
4-
<NuxtLink :to="localePath('/')" class="navbar-item icon-text">
4+
<ElementLink to="/" class="navbar-item icon-text">
55
<img src="~assets/oengus.svg" class="icon" alt="Oengus logo">
66
<span>
77
Oengus
88
</span>
9-
</NuxtLink>
9+
</ElementLink>
1010
<button class="button navbar-burger" :class="isActiveClass" @click="toggleNavbarActive">
1111
<span />
1212
<span />
@@ -41,12 +41,12 @@
4141
<div class="navbar-item">
4242
<WidgetV1Redirect />
4343
</div>
44-
<NuxtLink :to="localePath('/about')" class="navbar-item">
44+
<ElementLink to="/about" class="navbar-item">
4545
{{ $t('navbar.about') }}
46-
</NuxtLink>
47-
<NuxtLink :to="localePath('/patrons')" class="navbar-item">
46+
</ElementLink>
47+
<ElementLink to="/patrons" class="navbar-item">
4848
{{ $t('navbar.patrons') }}
49-
</NuxtLink>
49+
</ElementLink>
5050
<WidgetLanguagePicker />
5151
<WidgetSignInPicker type="navbar" is-right />
5252
</div>

‎components/homepage/Marathons.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{{ $t('calendar.title') }}
66
</span>
77
<span>
8-
(<NuxtLink :to="localePath('/calendar')">{{ $t('homepage.marathons.calendar') }}</NuxtLink>)
8+
(<ElementLink to="/calendar">{{ $t('homepage.marathons.calendar') }}</ElementLink>)
99
</span>
1010
</h3>
1111

@@ -18,9 +18,9 @@
1818
<div :key="marathonsList.key + 'prespacer'" class="spacer" />
1919
<template v-for="(marathon, index) in homepageMarathons[marathonsList.key]">
2020
<span :key="marathonsList.key + 'name' + index" class="notification" :class="getRowParity(index)">
21-
<NuxtLink :to="localePath(`/marathon/${marathon.id}`)">
21+
<ElementLink :to="`/marathon/${marathon.id}`">
2222
{{ marathon.name }}
23-
</NuxtLink>
23+
</ElementLink>
2424
</span>
2525
<span :key="marathonsList.key + 'location' + index" class="notification location" :class="getRowParity(index)">
2626
<span v-if="marathon.onsite && marathon.country" class="icon flag-icon" :class="`flag-icon-${marathon.country.toLowerCase()}`" />

‎components/marathon/schedule/Current.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div v-if="ticker" class="message" :class="messageClass">
33
<div class="message-header">
4-
<NuxtLink :to="linkedRun">
4+
<ElementLink :to="linkedRun">
55
{{ $t(messageHeaderTitle, messageHeaderArgs) }}
6-
</NuxtLink>
6+
</ElementLink>
77
</div>
88

99
<div class="message-body">

‎components/marathon/schedule/Run.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
{{ run.setupBlock ? run.setupBlockText : run.gameName }}
66
</h4>
77
<p v-for="runner in run.runners" :key="runner.id">
8-
<NuxtLink :to="localePath(`/user/${runner.username}`)">
8+
<ElementLink :to="`/user/${runner.username}`">
99
{{ runner.username }}
10-
</NuxtLink>
10+
</ElementLink>
1111
</p>
1212
</div>
1313

@@ -54,9 +54,9 @@
5454
</template>
5555

5656
<span class="is-label">{{ $t('marathon.schedule.table.link') }}</span>
57-
<NuxtLink :to="'#run-' + run.id" rel="nofollow">
57+
<ElementLink :to="`#run-${run.id}`" rel="nofollow">
5858
{{ `#run-${run.id}` }}
59-
</NuxtLink>
59+
</ElementLink>
6060
</div>
6161
</template>
6262

‎components/marathon/sidebar/Admin.vue

+8-8
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,36 @@
55
</p>
66
<ul class="menu-list">
77
<li>
8-
<NuxtLink :to="localePath(`/marathon/${marathonId}/settings`)">
8+
<ElementLink :to="`/marathon/${marathonId}/settings`">
99
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'cogs' ]" />
1010
<span class="menu-item-label">
1111
{{ $t('marathon.menu.settings') }}
1212
</span>
13-
</NuxtLink>
13+
</ElementLink>
1414
</li>
1515
<li>
16-
<NuxtLink :to="localePath(`/marathon/${marathonId}/selection`)">
16+
<ElementLink :to="`/marathon/${marathonId}/selection`">
1717
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'check-square' ]" />
1818
<span class="menu-item-label">
1919
{{ $t('marathon.menu.selectRuns') }}
2020
</span>
21-
</NuxtLink>
21+
</ElementLink>
2222
</li>
2323
<li>
24-
<NuxtLink :to="localePath(`/marathon/${marathonId}/schedule/manage`)">
24+
<ElementLink :to="`/marathon/${marathonId}/schedule/manage`">
2525
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'calendar-check' ]" />
2626
<span class="menu-item-label">
2727
{{ $t('marathon.menu.manageSchedule') }}
2828
</span>
29-
</NuxtLink>
29+
</ElementLink>
3030
</li>
3131
<li>
32-
<NuxtLink :to="localePath(`/marathon/${marathonId}/incentives/manage`)">
32+
<ElementLink :to="`/marathon/${marathonId}/incentives/manage`">
3333
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'dot-circle' ]" />
3434
<span class="menu-item-label">
3535
{{ $t('marathon.menu.manageIncentives') }}
3636
</span>
37-
</NuxtLink>
37+
</ElementLink>
3838
</li>
3939
</ul>
4040
</div>

‎components/marathon/sidebar/Overview.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
</p>
66
<ul class="menu-list">
77
<li>
8-
<NuxtLink :to="localePath(`/marathon/${marathonId}`)">
8+
<ElementLink :to="`/marathon/${marathonId}`">
99
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'home' ]" />
1010
<span class="menu-item-label">
1111
{{ $t('marathon.menu.home') }}
1212
</span>
13-
</NuxtLink>
13+
</ElementLink>
1414
</li>
1515
<li>
1616
<ElementLink :to="`/marathon/${marathonId}/schedule`">
@@ -21,20 +21,20 @@
2121
</ElementLink>
2222
</li>
2323
<li>
24-
<NuxtLink :to="localePath(`/marathon/${marathonId}/submissions`)">
24+
<ElementLink :to="`/marathon/${marathonId}/submissions`">
2525
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'book' ]" />
2626
<span class="menu-item-label">
2727
{{ $t('marathon.menu.viewSubmissions') }}
2828
</span>
29-
</NuxtLink>
29+
</ElementLink>
3030
</li>
3131
<li v-if="shouldShowRedirectLinks">
32-
<NuxtLink :to="localePath(`/marathon/${marathonId}/submit`)">
32+
<ElementLink :to="`/marathon/${marathonId}/submit`">
3333
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'paper-plane' ]" />
3434
<span class="menu-item-label">
3535
{{ $t('marathon.menu.submitRuns') }}
3636
</span>
37-
</NuxtLink>
37+
</ElementLink>
3838
</li>
3939
</ul>
4040
</div>

‎components/marathon/sidebar/Tracker.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,28 @@
55
</p>
66
<ul class="menu-list">
77
<li>
8-
<NuxtLink :to="localePath(`/marathon/${marathonId}/donate`)">
8+
<ElementLink :to="`/marathon/${marathonId}/donate`">
99
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'donate' ]" />
1010
<span class="menu-item-label">
1111
{{ $t('marathon.menu.donate') }}
1212
</span>
13-
</NuxtLink>
13+
</ElementLink>
1414
</li>
1515
<li>
16-
<NuxtLink :to="localePath(`/marathon/${marathonId}/donations`)">
16+
<ElementLink :to="`/marathon/${marathonId}/donations`">
1717
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'money-bill' ]" />
1818
<span class="menu-item-label">
1919
{{ $t('marathon.menu.donations') }}
2020
</span>
21-
</NuxtLink>
21+
</ElementLink>
2222
</li>
2323
<li>
24-
<NuxtLink :to="localePath(`/marathon/${marathonId}/incentives`)">
24+
<ElementLink :to="`/marathon/${marathonId}/incentives`">
2525
<FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'bullseye' ]" />
2626
<span class="menu-item-label">
2727
{{ $t('marathon.menu.incentives') }}
2828
</span>
29-
</NuxtLink>
29+
</ElementLink>
3030
</li>
3131
</ul>
3232
</div>

‎components/widget/v1/Redirect.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<NuxtLink v-if="shouldShowRedirectLink" :to="localePath(`${$route.path}/v1`)" class="button is-warning">
2+
<ElementLink v-if="shouldShowRedirectLink" :to="`${$route.path}/v1`" class="button is-warning">
33
{{ $t('footer.v1Link') }}
4-
</NuxtLink>
4+
</ElementLink>
55
</template>
66

77
<script lang="ts">

‎layouts/error.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
<FontAwesomeIcon :icon="[ 'fas', 'home' ]" />
1414
<span>Oengus</span>
1515
</a>
16-
<NuxtLink v-else class="error-link" :to="localePath('/')">
16+
<ElementLink v-else class="error-link" to="/">
1717
<FontAwesomeIcon :icon="[ 'fas', 'home' ]" />
1818
<span>Oengus</span>
19-
</NuxtLink>
19+
</ElementLink>
2020
</p>
2121

2222
<div class="logo">

0 commit comments

Comments
 (0)