PWA improvments (#622)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: vikunja/frontend#622
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

index.html

@@ -6,8 +6,10 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<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="theme-color" content="#1973ff"/>
 
 	<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-italic.woff2" as="font">
 	<link rel="preload" crossorigin="anonymous" href="/fonts/quicksand-v7-latin-300.woff2" as="font">

src/components/home/contentLinkShare.vue

@@ -14,7 +14,7 @@
 				</h1>
 				<div class="box has-text-left 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') }}
 					</a>
 				</div>

src/components/home/contentNoAuth.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="no-auth-wrapper">
 		<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-header">
 					<p>{{ $t('misc.info') }}</p>

src/components/home/navigation.vue

@@ -2,7 +2,7 @@
 	<div :class="{'is-active': menuActive}" class="namespace-container">
 		<div class="menu top-menu">
 			<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>
 			<ul class="menu-list">
 				<li>
@@ -78,59 +78,62 @@
 					class="more-container"
 					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>
 			</template>
 		</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') }}
 		</a>
 	</div>

src/components/home/topNavigation.vue

@@ -7,8 +7,8 @@
 	>
 		<div class="navbar-brand">
 			<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>
 			<a
 				@click="$store.commit('toggleMenu')"
@@ -47,7 +47,7 @@
 			</a>
 			<notifications/>
 			<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">
 					<template v-slot:trigger>
 						<x-button
@@ -67,6 +67,7 @@
 						:href="imprintUrl"
 						class="dropdown-item"
 						target="_blank"
+						rel="noreferrer noopener nofollow"
 						v-if="imprintUrl">
 						{{ $t('navigation.imprint') }}
 					</a>
@@ -74,6 +75,7 @@
 						:href="privacyPolicyUrl"
 						class="dropdown-item"
 						target="_blank"
+						rel="noreferrer noopener nofollow"
 						v-if="privacyPolicyUrl">
 						{{ $t('navigation.privacy') }}
 					</a>

src/components/misc/error.vue

@@ -2,7 +2,7 @@
 	<div class="notification is-danger">
 		<i18n path="loadingError.failed">
 			<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>
 	</div>
 </template>

src/components/misc/legal.vue

@@ -1,8 +1,8 @@
 <template>
 	<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>
-		<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>
 </template>
 

src/views/list/settings/background.vue

@@ -35,7 +35,7 @@
 				v-model="backgroundSearchTerm"
 			/>
 			<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>
 			<div class="image-search-result">
 				<a
@@ -44,7 +44,7 @@
 					@click="() => setBackground(im.id)"
 					class="image"
 					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 }}
 					</a>
 				</a>

src/views/user/Settings.vue

@@ -264,7 +264,7 @@
 				</div>
 			</div>
 			<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') }}
 				</a>
 			</p>