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

UI changes, resized and moved the trending icon, and separated the video items

Browse source
This commit is contained in:
Ara 2022-05-10 12:23:21 -04:00
parent 3dec3744f0
commit 93eefd8775
4 changed files with 26 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -102,6 +102,8 @@ b {
.video-grid { .video-grid {
@apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto <md:gap-x-2.5 md:gap-x-1vw gap-y-1.5; @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto <md:gap-x-2.5 md:gap-x-1vw gap-y-1.5;
grid-gap: 45px 45px !important;
margin: 20px 2% 5% 2% !important;
} }
.btn { .btn {

5
src/components/NavBar.vue
View file

@ -1,5 +1,8 @@
<template> <template>
<nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative"> <nav
class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative"
style="padding-top: 1.625rem; padding-bottom: 1.625rem"
>
<div class="flex-1 flex justify-start"> <div class="flex-1 flex justify-start">
<router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/" <router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
><img ><img

4
src/components/TrendingPage.vue
View file

@ -1,8 +1,6 @@
<template> <template>
<h1 v-t="'titles.trending'" class="font-bold text-center" />
<hr /> <hr />
<h2 v-t="'titles.trending'" class="font-bold text-center" style="font-size: 1.5rem !important" />
<div class="video-grid"> <div class="video-grid">
<VideoItem v-for="video in videos" :key="video.url" :video="video" height="118" width="210" /> <VideoItem v-for="video in videos" :key="video.url" :video="video" height="118" width="210" />
</div> </div>

28
src/components/VideoItem.vue
View file

@ -63,14 +63,14 @@
<PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" /> <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
</div> </div>
<div class="flex"> <div class="flex" style="column-gap: 8px">
<router-link :to="video.uploaderUrl"> <router-link :to="video.uploaderUrl">
<img <img
v-if="video.uploaderAvatar" v-if="video.uploaderAvatar"
:src="video.uploaderAvatar" :src="video.uploaderAvatar"
loading="lazy" loading="lazy"
:alt="video.uploaderName" :alt="video.uploaderName"
class="rounded-full mr-0.5 mt-0.5 w-32px h-32px" class="rounded-full mr-0.5 mt-0.5 w-40px h-40px"
width="68" width="68"
height="68" height="68"
/> />
@ -83,18 +83,28 @@
:to="video.uploaderUrl" :to="video.uploaderUrl"
:title="video.uploaderName" :title="video.uploaderName"
> >
<span v-text="video.uploaderName" /> <strong v-text="video.uploaderName" style="font-size: 14px" />
<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" /> <font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
</router-link> </router-link>
<strong v-if="video.views >= 0 || video.uploadedDate" class="text-sm"> <span v-if="video.views >= 0 || video.uploadedDate" class="text-sm">
<span v-if="video.views >= 0"> <span v-if="video.views >= 0">
<font-awesome-icon icon="eye" /> <font-awesome-icon icon="eye" style="font-size: 13.5px" />
<span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" /> <span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" style="font-size: 13.5px" />
</span> </span>
<span v-if="video.uploaded > 0" class="pl-0.5" v-text="timeAgo(video.uploaded)" /> <span
<span v-else-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" /> v-if="video.uploaded > 0"
</strong> class="pl-0.5"
v-text="timeAgo(video.uploaded)"
style="font-size: 13.5px"
/>
<span
v-else-if="video.uploadedDate"
class="pl-0.5"
v-text="video.uploadedDate"
style="font-size: 13.5px"
/>
</span>
</div> </div>
</div> </div>
</div> </div>