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

added more interactive elements

Browse source
This commit is contained in:
keyboardreamer 2024-01-03 21:21:27 +08:00
parent b6a78a7be3
commit e9ce78ff9e
6 changed files with 8866 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc.json
View file

@ -4,7 +4,7 @@
"semi": true,
"tabWidth": 4,
"embeddedLanguageFormatting": "auto",
"endOfLine": "lf",
"endOfLine": "crlf",
"printWidth": 120,
"vueIndentScriptAndStyle": false,
"quoteProps": "as-needed",

8822
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

6
src/App.vue
View file

@ -222,7 +222,7 @@ b {
}
.input {
@apply px-2.5;
@apply px-2.5 rounded-md;
}
.input:focus {
@ -258,7 +258,7 @@ h2 {
}
.link {
@apply hover:(text-dark-300 underline underline-dark-300);
@apply hover:(focus:text-red-500 hover:text-red-500);
}
.link-secondary {
@ -266,7 +266,7 @@ h2 {
}
.dark .link {
@apply hover:(text-gray-300 underline underline-gray-300);
@apply hover:(focus:text-red-400 hover:text-red-400);
}
.dark .link-secondary {

12
src/components/FooterComponent.vue
View file

@ -2,27 +2,27 @@
<footer class="mt-10 w-full rounded-xl py-4 text-center children:(mx-3)">
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
<font-awesome-icon :icon="['fab', 'github']" />
<span v-t="'actions.source_code'" class="ml-2" />
<span v-t="'actions.source_code'" class="ml-2 hover:font-bold" />
</a>
<a href="https://docs.piped.video/" target="_blank">
<font-awesome-icon :icon="['fa', 'book']" />
<span v-t="'actions.documentation'" class="ml-2" />
<span v-t="'actions.documentation'" class="ml-2 hover:font-bold" />
</a>
<a href="https://github.com/TeamPiped/Piped#donations" target="_blank">
<font-awesome-icon :icon="['fab', 'bitcoin']" />
<span v-t="'actions.donations'" class="ml-2" />
<span v-t="'actions.donations'" class="ml-2 hover:font-bold" />
</a>
<a v-if="statusPageHref" :href="statusPageHref">
<font-awesome-icon :icon="['fa', 'server']" />
<span v-t="'actions.status_page'" class="ml-2" />
<span v-t="'actions.status_page'" class="ml-2 hover:font-bold" />
</a>
<a v-if="donationHref" :href="donationHref">
<font-awesome-icon :icon="['fa', 'donate']" />
<span v-t="'actions.instance_donations'" class="ml-2" />
<span v-t="'actions.instance_donations'" class="ml-2 hover:font-bold" />
</a>
<a v-if="privacyPolicyHref" :href="privacyPolicyHref" target="_blank">
<font-awesome-icon :icon="['fa', 'eye']" />
<span v-t="'actions.instance_privacy_policy'" class="ml-2" />
<span v-t="'actions.instance_privacy_policy'" class="ml-2 hover:font-bold" />
</a>
</footer>
</template>

30
src/components/NavBar.vue
View file

@ -39,25 +39,25 @@
<!-- navigation bar for large screen devices -->
<ul class="md:text-1xl hidden md:(flex flex flex-1 justify-end children:pl-3)">
<li v-if="shouldShowTrending">
<router-link v-t="'titles.trending'" to="/trending" />
<router-link v-t="'titles.trending'" to="/trending" class="nav-link" />
</li>
<li>
<router-link v-t="'titles.preferences'" to="/preferences" />
<router-link v-t="'titles.preferences'" to="/preferences" class="nav-link" />
</li>
<li v-if="shouldShowLogin">
<router-link v-t="'titles.login'" to="/login" />
<router-link v-t="'titles.login'" to="/login" class="nav-link" />
</li>
<li v-if="shouldShowRegister">
<router-link v-t="'titles.register'" to="/register" />
<router-link v-t="'titles.register'" to="/register" class="nav-link" />
</li>
<li v-if="shouldShowHistory">
<router-link v-t="'titles.history'" to="/history" />
<router-link v-t="'titles.history'" to="/history" class="nav-link" />
</li>
<li>
<router-link v-t="'titles.playlists'" to="/playlists" />
<router-link v-t="'titles.playlists'" to="/playlists" class="nav-link" />
</li>
<li v-if="!shouldShowTrending">
<router-link v-t="'titles.feed'" to="/feed" />
<router-link v-t="'titles.feed'" to="/feed" class="nav-link" />
</li>
</ul>
</nav>
@ -221,6 +221,22 @@ export default {
@apply mx-1;
}
#search-btn:hover {
@apply bg-red-400;
}
.dark #search-btn:hover {
@apply bg-dark-100;
}
.nav-link {
@apply hover:font-bold hover:text-red-500;
}
.dark .nav-link {
@apply hover:font-bold hover:text-red-400;
}
@media screen and (max-width: 848px) {
#search-btn {
display: none;

14
src/components/VideoItem.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-if="showVideo" class="flex flex-col flex-justify-between">
<router-link
class="inline-block w-full focus:underline hover:underline"
class="inline-block w-full focus:text-red-400 hover:text-red-400"
:to="{
path: '/watch',
query: {
@ -14,7 +14,7 @@
<div class="w-full">
<img
loading="lazy"
class="aspect-video w-full object-contain"
class="aspect-video w-full rounded-md object-contain"
:src="thumbnail"
:alt="title"
:class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
@ -81,7 +81,7 @@
<font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" />
</router-link>
<div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs text-gray-300 font-normal">
<div v-if="item.views >= 0 || item.uploadedDate" class="video-info">
<span v-if="item.views >= 0">
<font-awesome-icon icon="eye" />
<span class="pl-1" v-text="`${numberFormat(item.views)} •`" />
@ -207,4 +207,12 @@ export default {
.shorts-img {
@apply w-full object-contain;
}
.video-info {
@apply mt-1 text-xs text-gray-600 font-normal;
}
.video-info .dark {
@apply mt-1 text-xs text-gray-300 font-normal;
}
</style>