refactor: use browser inbuilt tooltip on login/register page

This commit is contained in:
Bnyro 2024-05-16 16:51:04 +02:00
parent 3b18da84b1
commit c0a9b16aa8
5 changed files with 6 additions and 41 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex justify-center"> <div class="flex justify-center">
<h1 v-t="'titles.login'" class="my-4 text-center font-bold" /> <h1 v-t="'titles.login'" class="my-4 text-center font-bold" />
<TooltipIcon class="mb-6" icon="i-fa6-solid:circle-info" :tooltip="$t('info.login_note')" /> <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.login_note')" />
</div> </div>
<hr /> <hr />
<div class="w-full flex items-center justify-center text-center"> <div class="w-full flex items-center justify-center text-center">
@ -36,12 +36,7 @@
</template> </template>
<script> <script>
import TooltipIcon from "./TooltipIcon.vue";
export default { export default {
components: {
TooltipIcon,
},
data() { data() {
return { return {
username: null, username: null,

View File

@ -6,10 +6,10 @@
<CollapsableText v-if="playlist?.description" :text="playlist.description" /> <CollapsableText v-if="playlist?.description" :text="playlist.description" />
<div class="mt-1 flex <md:flex-col md:items-center justify-between"> <div class="mt-1 flex justify-between <md:flex-col md:items-center">
<div> <div>
<router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'"> <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
<img loading="lazy" :src="playlist.uploaderAvatar" class="rounded-full h-12" /> <img loading="lazy" :src="playlist.uploaderAvatar" class="h-12 rounded-full" />
<strong v-text="playlist.uploader" /> <strong v-text="playlist.uploader" />
</router-link> </router-link>
</div> </div>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex justify-center"> <div class="flex justify-center">
<h1 v-t="'titles.register'" class="my-4 text-center font-bold" /> <h1 v-t="'titles.register'" class="my-4 text-center font-bold" />
<TooltipIcon class="mb-6" icon="i-fa6-solid:circle-info" :tooltip="$t('info.register_note')" /> <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.register_note')" />
</div> </div>
<hr /> <hr />
<div class="flex flex-col items-center justify-center text-center"> <div class="flex flex-col items-center justify-center text-center">
@ -65,10 +65,9 @@
<script> <script>
import { isEmail } from "../utils/Misc.js"; import { isEmail } from "../utils/Misc.js";
import ConfirmModal from "./ConfirmModal.vue"; import ConfirmModal from "./ConfirmModal.vue";
import TooltipIcon from "./TooltipIcon.vue";
export default { export default {
components: { ConfirmModal, TooltipIcon }, components: { ConfirmModal },
data() { data() {
return { return {
username: null, username: null,

View File

@ -1,29 +0,0 @@
<template>
<div id="container" class="m-2 self-center">
<div :class="icon" class="cursor-pointer"></div>
<p id="tooltip" class="absolute mr-[20vw] mt-2 hidden rounded-l bg-gray-800 px-2 py-1 text-gray-200">
{{ tooltip }}
</p>
</div>
</template>
<script>
export default {
props: {
icon: {
type: String, // the class name of a font awesome icon
required: true,
},
tooltip: {
type: String,
required: true,
},
},
};
</script>
<style>
#container:hover #tooltip {
display: block;
}
</style>

View File

@ -227,4 +227,4 @@
"register_note": "Register an account for this Piped instance. This will allow you to sync your subscriptions and playlists with your account, so they're stored on the server side. You can use all features without an account, but all data will be stored in your browser's local cache. Please make sure you do NOT use an email address as your username and choose a secure password that you do not use elsewhere.", "register_note": "Register an account for this Piped instance. This will allow you to sync your subscriptions and playlists with your account, so they're stored on the server side. You can use all features without an account, but all data will be stored in your browser's local cache. Please make sure you do NOT use an email address as your username and choose a secure password that you do not use elsewhere.",
"login_note": "Log in with an account created on this instance." "login_note": "Log in with an account created on this instance."
} }
} }