PWA improvments (#622)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/622
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad 2021-07-28 20:58:12 +00:00
parent a1e1fe4eb0
commit c4067c7c35
9 changed files with 67 additions and 60 deletions

View file

@ -6,8 +6,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life."> <meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
<meta name="theme-color" content="#1973ff"/>
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png"/>
<link rel="preload" crossorigin="anonymous" href="/fonts/open-sans-v15-latin-700italic.woff2" as="font"> <link rel="preload" crossorigin="anonymous" href="/fonts/open-sans-v15-latin-700italic.woff2" as="font">
<link rel="preload" crossorigin="anonymous" href="/fonts/open-sans-v15-latin-italic.woff2" as="font"> <link rel="preload" crossorigin="anonymous" href="/fonts/open-sans-v15-latin-italic.woff2" as="font">
<link rel="preload" crossorigin="anonymous" href="/fonts/quicksand-v7-latin-300.woff2" as="font"> <link rel="preload" crossorigin="anonymous" href="/fonts/quicksand-v7-latin-300.woff2" as="font">

View file

@ -14,7 +14,7 @@
</h1> </h1>
<div class="box has-text-left view"> <div class="box has-text-left view">
<router-view/> <router-view/>
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank"> <a class="menu-bottom-link" href="https://vikunja.io" target="_blank" rel="noreferrer noopener nofollow">
{{ $t('misc.poweredBy') }} {{ $t('misc.poweredBy') }}
</a> </a>
</div> </div>

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="no-auth-wrapper"> <div class="no-auth-wrapper">
<div class="noauth-container"> <div class="noauth-container">
<img alt="Vikunja" src="/images/logo-full.svg"/> <img alt="Vikunja" src="/images/logo-full.svg" width="400" height="117"/>
<div class="message is-info" v-if="motd !== ''"> <div class="message is-info" v-if="motd !== ''">
<div class="message-header"> <div class="message-header">
<p>{{ $t('misc.info') }}</p> <p>{{ $t('misc.info') }}</p>

View file

@ -2,7 +2,7 @@
<div :class="{'is-active': menuActive}" class="namespace-container"> <div :class="{'is-active': menuActive}" class="namespace-container">
<div class="menu top-menu"> <div class="menu top-menu">
<router-link :to="{name: 'home'}" class="logo"> <router-link :to="{name: 'home'}" class="logo">
<img alt="Vikunja" src="/images/logo-full.svg"/> <img alt="Vikunja" src="/images/logo-full.svg" width="164" height="48"/>
</router-link> </router-link>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
@ -78,59 +78,62 @@
class="more-container" class="more-container"
v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true" v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true"
> >
<ul class="menu-list can-be-hidden"> <draggable
<draggable v-model="n.lists"
v-model="n.lists" :group="`namespace-${n.id}-lists`"
:group="`namespace-${n.id}-lists`" @start="() => drag = true"
@start="() => drag = true" @end="e => saveListPosition(e, nk)"
@end="e => saveListPosition(e, nk)" v-bind="dragOptions"
v-bind="dragOptions" handle=".handle"
handle=".handle" >
<transition-group
type="transition"
:name="!drag ? 'flip-list' : null"
tag="ul"
class="menu-list can-be-hidden"
> >
<transition-group type="transition" :name="!drag ? 'flip-list' : null"> <!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->
<!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if --> <li
<li v-for="l in n.lists"
v-for="l in n.lists" :key="l.id"
:key="l.id" v-if="!l.isArchived"
v-if="!l.isArchived" class="loader-container"
class="loader-container" :class="{'is-loading': listUpdating[l.id]}"
:class="{'is-loading': listUpdating[l.id]}" >
<router-link
class="list-menu-link"
:class="{'router-link-exact-active': currentList.id === l.id}"
:to="{ name: 'list.index', params: { listId: l.id} }"
tag="span"
> >
<router-link <span class="icon handle">
class="list-menu-link" <icon icon="grip-lines"/>
:class="{'router-link-exact-active': currentList.id === l.id}" </span>
:to="{ name: 'list.index', params: { listId: l.id} }" <span
tag="span" :style="{ backgroundColor: l.hexColor }"
> class="color-bubble"
<span class="icon handle"> v-if="l.hexColor !== ''">
<icon icon="grip-lines"/> </span>
</span> <span class="list-menu-title">
<span {{ getListTitle(l) }}
:style="{ backgroundColor: l.hexColor }" </span>
class="color-bubble" <span
v-if="l.hexColor !== ''"> :class="{'is-favorite': l.isFavorite}"
</span> @click.stop="toggleFavoriteList(l)"
<span class="list-menu-title"> class="favorite">
{{ getListTitle(l) }} <icon icon="star" v-if="l.isFavorite"/>
</span> <icon :icon="['far', 'star']" v-else/>
<span </span>
:class="{'is-favorite': l.isFavorite}" </router-link>
@click.stop="toggleFavoriteList(l)" <list-settings-dropdown :list="l" v-if="l.id > 0"/>
class="favorite"> <span class="list-setting-spacer" v-else></span>
<icon icon="star" v-if="l.isFavorite"/> </li>
<icon :icon="['far', 'star']" v-else/> </transition-group>
</span> </draggable>
</router-link>
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
<span class="list-setting-spacer" v-else></span>
</li>
</transition-group>
</draggable>
</ul>
</div> </div>
</template> </template>
</aside> </aside>
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank"> <a class="menu-bottom-link" href="https://vikunja.io" target="_blank" rel="noreferrer noopener nofollow">
{{ $t('misc.poweredBy') }} {{ $t('misc.poweredBy') }}
</a> </a>
</div> </div>

View file

@ -7,8 +7,8 @@
> >
<div class="navbar-brand"> <div class="navbar-brand">
<router-link :to="{name: 'home'}" class="navbar-item logo"> <router-link :to="{name: 'home'}" class="navbar-item logo">
<img alt="Vikunja" src="/images/logo-full-pride.svg" v-if="(new Date()).getMonth() === 5"/> <img width="164" height="48" alt="Vikunja" src="/images/logo-full-pride.svg" v-if="(new Date()).getMonth() === 5"/>
<img alt="Vikunja" src="/images/logo-full.svg" v-else/> <img width="164" height="48" alt="Vikunja" src="/images/logo-full.svg" v-else/>
</router-link> </router-link>
<a <a
@click="$store.commit('toggleMenu')" @click="$store.commit('toggleMenu')"
@ -47,7 +47,7 @@
</a> </a>
<notifications/> <notifications/>
<div class="user"> <div class="user">
<img :src="userAvatar" alt="" class="avatar"/> <img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
<dropdown class="is-right" ref="usernameDropdown"> <dropdown class="is-right" ref="usernameDropdown">
<template v-slot:trigger> <template v-slot:trigger>
<x-button <x-button
@ -67,6 +67,7 @@
:href="imprintUrl" :href="imprintUrl"
class="dropdown-item" class="dropdown-item"
target="_blank" target="_blank"
rel="noreferrer noopener nofollow"
v-if="imprintUrl"> v-if="imprintUrl">
{{ $t('navigation.imprint') }} {{ $t('navigation.imprint') }}
</a> </a>
@ -74,6 +75,7 @@
:href="privacyPolicyUrl" :href="privacyPolicyUrl"
class="dropdown-item" class="dropdown-item"
target="_blank" target="_blank"
rel="noreferrer noopener nofollow"
v-if="privacyPolicyUrl"> v-if="privacyPolicyUrl">
{{ $t('navigation.privacy') }} {{ $t('navigation.privacy') }}
</a> </a>

View file

@ -2,7 +2,7 @@
<div class="notification is-danger"> <div class="notification is-danger">
<i18n path="loadingError.failed"> <i18n path="loadingError.failed">
<a @click="() => location.reload()">{{ $t('loadingError.tryAgain') }}</a> <a @click="() => location.reload()">{{ $t('loadingError.tryAgain') }}</a>
<a href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</a> <a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
</i18n> </i18n>
</div> </div>
</template> </template>

View file

@ -1,8 +1,8 @@
<template> <template>
<div class="legal-links"> <div class="legal-links">
<a :href="imprintUrl" target="_blank" v-if="imprintUrl">{{ $t('navigation.imprint') }}</a> <a :href="imprintUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="imprintUrl">{{ $t('navigation.imprint') }}</a>
<span v-if="imprintUrl && privacyPolicyUrl"> | </span> <span v-if="imprintUrl && privacyPolicyUrl"> | </span>
<a :href="privacyPolicyUrl" target="_blank" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</a> <a :href="privacyPolicyUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</a>
</div> </div>
</template> </template>

View file

@ -35,7 +35,7 @@
v-model="backgroundSearchTerm" v-model="backgroundSearchTerm"
/> />
<p class="unsplash-link"> <p class="unsplash-link">
<a href="https://unsplash.com" target="_blank">{{ $t('list.background.poweredByUnsplash') }}</a> <a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">{{ $t('list.background.poweredByUnsplash') }}</a>
</p> </p>
<div class="image-search-result"> <div class="image-search-result">
<a <a
@ -44,7 +44,7 @@
@click="() => setBackground(im.id)" @click="() => setBackground(im.id)"
class="image" class="image"
v-for="im in backgroundSearchResult"> v-for="im in backgroundSearchResult">
<a :href="`https://unsplash.com/@${im.info.author}`" target="_blank" class="info"> <a :href="`https://unsplash.com/@${im.info.author}`" rel="noreferrer noopener nofollow" target="_blank" class="info">
{{ im.info.authorName }} {{ im.info.authorName }}
</a> </a>
</a> </a>

View file

@ -264,7 +264,7 @@
</div> </div>
</div> </div>
<p> <p>
<a href="https://vikunja.io/docs/caldav/" target="_blank"> <a href="https://vikunja.io/docs/caldav/" rel="noreferrer noopener nofollow" target="_blank">
{{ $t('user.settings.caldav.more') }} {{ $t('user.settings.caldav.more') }}
</a> </a>
</p> </p>