Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-19 23:40:07 +00:00
Code Issues Wiki Activity

ui: improve pwa prompt

Browse source
This commit is contained in:
Anthony Fu 2022-12-23 19:05:48 +01:00
parent 41568b2c2d
commit 589cf463bd
5 changed files with 17 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app.vue
View file

@ -13,5 +13,4 @@ const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:
<NuxtPage v-if="isMastoInitialised" /> <NuxtPage v-if="isMastoInitialised" />
</NuxtLayout> </NuxtLayout>
<AriaAnnouncer /> <AriaAnnouncer />
<PWAPrompt />
</template> </template>

28
components/PWAPrompt.client.vue
View file

@ -11,33 +11,21 @@ const { close, needRefresh, updateServiceWorker } = usePWA()
role="alertdialog" role="alertdialog"
aria-labelledby="pwa-toast-title" aria-labelledby="pwa-toast-title"
aria-describedby="pwa-toast-description" aria-describedby="pwa-toast-description"
animate animate-back-in-up md:animate-back-in-right m-2 p5 bg="fade" relative
z11 rounded-lg of-hidden
fixed flex="~ col gap-3"
bottom-14 md:bottom-0 right-0
m-2 p-4 w-100 max-w-fit
bg-base border="~ base"
rounded
text-left
shadow
flex="~ gap-4"
> >
<img src="/logo.svg" w-12 h-12 height="10" width="10" ma alt="logo"> <h2 id="pwa-toast-title" flex="~ gap-2" items-center>
<div>
<h2 id="pwa-toast-title" sr-only>
{{ $t('pwa.title') }} {{ $t('pwa.title') }}
</h2> </h2>
<div id="pwa-toast-message"> <div flex="~ gap-1">
{{ $t('pwa.message') }}
</div>
<div mt2 flex="~ gap-4">
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="updateServiceWorker()"> <button type="button" btn-solid px-4 py-1 text-center text-sm @click="updateServiceWorker()">
{{ $t('pwa.reload') }} {{ $t('pwa.update') }}
</button> </button>
<button type="button" btn-outline filter-saturate-0 px-4 py-1 text-center text-sm @click="close"> <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="close()">
{{ $t('pwa.dismiss') }} {{ $t('pwa.dismiss') }}
</button> </button>
</div> </div>
</div> <div i-ri-arrow-down-circle-line absolute text-8em bottom--10 right--10 text-primary op10 />
</div> </div>
</template> </template>

1
error.vue
View file

@ -56,5 +56,4 @@ const reload = async () => {
</MainContent> </MainContent>
</NuxtLayout> </NuxtLayout>
<AriaAnnouncer /> <AriaAnnouncer />
<PWAPrompt />
</template> </template>

1
layouts/default.vue
View file

@ -53,6 +53,7 @@
<slot name="right"> <slot name="right">
<SearchWidget /> <SearchWidget />
<div flex-auto /> <div flex-auto />
<PWAPrompt />
<NavFooter /> <NavFooter />
</slot> </slot>
</div> </div>

3
locales/en-US.json
View file

@ -209,7 +209,8 @@
"dismiss": "Dismiss", "dismiss": "Dismiss",
"message": "@:pwa.title{','} click on the @:pwa.reload button to update.", "message": "@:pwa.title{','} click on the @:pwa.reload button to update.",
"reload": "Reload", "reload": "Reload",
"title": "New Elk update available" "title": "New Elk update available!",
"update": "Update"
}, },
"search": { "search": {
"search_desc": "Search for people & hashtags" "search_desc": "Search for people & hashtags"