forked from Mirrors/elk
fix: improve SSR for settings back button
This commit is contained in:
parent
d8d163dbd0
commit
d09b4deb52
7 changed files with 14 additions and 28 deletions
|
@ -1,6 +1,9 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineProps<{
|
defineProps<{
|
||||||
back?: boolean
|
/**
|
||||||
|
* Show the back button on small screens
|
||||||
|
*/
|
||||||
|
backOnSmallScreen?: boolean
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -12,7 +15,10 @@ defineProps<{
|
||||||
>
|
>
|
||||||
<div flex justify-between px5 py4>
|
<div flex justify-between px5 py4>
|
||||||
<div flex gap-3 items-center overflow-hidden>
|
<div flex gap-3 items-center overflow-hidden>
|
||||||
<NuxtLink v-show="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
|
<NuxtLink
|
||||||
|
v-if="backOnSmallScreen" lg:hidden flex="~ gap1" items-center btn-text p-0
|
||||||
|
@click="$router.go(-1)"
|
||||||
|
>
|
||||||
<div i-ri:arrow-left-line />
|
<div i-ri:arrow-left-line />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<div truncate>
|
<div truncate>
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
const { lg } = breakpoints
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MainContent :back="!lg">
|
<MainContent back-on-small-screen>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
||||||
<span>{{ $t('settings.about.label') }}</span>
|
<span>{{ $t('settings.about.label') }}</span>
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
const { lg } = breakpoints
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MainContent :back="!lg">
|
<MainContent back-on-small-screen>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
||||||
<span>{{ $t('settings.interface.label') }}</span>
|
<span>{{ $t('settings.interface.label') }}</span>
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
const { lg } = breakpoints
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MainContent :back="!lg">
|
<MainContent back-on-small-screen>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
||||||
<span>{{ $t('settings.language.label') }}</span>
|
<span>{{ $t('settings.language.label') }}</span>
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
const { lg } = breakpoints
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MainContent :back="!lg">
|
<MainContent back-on-small-screen>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
||||||
<span>{{ $t('settings.preferences.label') }}</span>
|
<span>{{ $t('settings.preferences.label') }}</span>
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
const { lg } = breakpoints
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MainContent :back="!lg">
|
<MainContent back-on-small-screen>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
||||||
<span>{{ $t('settings.profile.label') }}</span>
|
<span>{{ $t('settings.profile.label') }}</span>
|
||||||
|
|
|
@ -63,7 +63,7 @@ async function importTokens() {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MainContent :back="!lg">
|
<MainContent back-on-small-screen>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
||||||
<span>{{ $t('settings.users.label') }}</span>
|
<span>{{ $t('settings.users.label') }}</span>
|
||||||
|
|
Loading…
Reference in a new issue