TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: use browser inbuilt tooltip on login/register page

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/LoginPage.vue
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,

4
src/components/PlaylistPage.vue
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>

5
src/components/RegisterPage.vue
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,

29
src/components/TooltipIcon.vue
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>