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

- Adjusted verified checkmark aligning (top text)

Browse source 
- Changed import button (in /import) element to button, that causes buggy click pointer not working
- Made the image on WatchVideo component redirects to channel
- Centered the video card relative to their parent (Useful when theres not enough space for another column in a grid but still made an extra unnecessary space, what happen is the card would justify to the left)
This commit is contained in:
SubTeno 2022-10-10 02:59:11 +00:00
parent 8da139f7c1
commit fb52fb7b41
7 changed files with 44 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -3,8 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve over network": "vite --host",
"serve over local": "vite",
"serve": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint --fix --color --ignore-path .gitignore --ext .js,.vue ."

6
src/components/ChannelPage.vue
View file

@ -6,10 +6,12 @@
<div class="pp-channel-page-author flex place-items-center">
<img height="48" width="48" class="m-1" :src="channel.avatarUrl" />
<div>
<h5 v-text="channel.name" />
<div class="flex">
<h5 v-text="channel.name" />
<font-awesome-icon class="ml-1.5" v-if="channel.verified" icon="check" />
</div>
<p class="text-left">{{ numberFormat(channel.subscriberCount) }} Subscribers</p>
</div>
<font-awesome-icon class="ml-1.5" v-if="channel.verified" icon="check" />
</div>
<!-- eslint-disable-next-line vue/no-v-html -->
<p class="whitespace-pre-wrap mt-2">

2
src/components/ImportPage.vue
View file

@ -12,7 +12,7 @@
<label for="import-override">Override</label>
</div>
<div>
<a class="btn w-auto" @click="handleImport">Import</a>
<button class="btn w-auto" @click="handleImport">Import</button>
</div>
</form>
<br />

2
src/components/SubscriptionsPage.vue
View file

@ -19,7 +19,7 @@
<span class="mx-2" v-text="subscription.name" />
</router-link>
<button
class="btn w-min"
class="btn w-fit"
@click="handleButton(subscription)"
v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
/>

67
src/components/VideoItem.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-if="showVideo">
<div v-if="showVideo" class="flex flex-col justify-between w-full">
<router-link
:to="{
path: '/watch',
@ -50,38 +50,8 @@
/>
</div>
</router-link>
<div class="float-right m-0 inline-block children:px-1">
<router-link
:to="{
path: '/watch',
query: {
v: video.url.substr(-11),
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
listen: '1',
},
}"
:aria-label="'Listen to ' + video.title"
:title="'Listen to ' + video.title"
>
<font-awesome-icon icon="headphones" />
</router-link>
<button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
<font-awesome-icon icon="circle-plus" />
</button>
<button
v-if="admin"
:title="$t('actions.remove_from_playlist')"
ref="removeButton"
@click="removeVideo(video.url.substr(-11))"
>
<font-awesome-icon icon="circle-minus" />
</button>
</div>
<div class="flex">
<router-link :to="video.uploaderUrl">
<div class="flex mt-10">
<router-link :to="video.uploaderUrl" class="w-fit h-fit">
<img
v-if="video.uploaderAvatar"
:src="video.uploaderAvatar"
@ -96,7 +66,7 @@
<div class="w-[calc(100%-32px-1rem)]">
<router-link
v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
class="link-secondary overflow-hidden block"
class="link-secondary overflow-hidden block w-fit"
:to="video.uploaderUrl"
:title="video.uploaderName"
>
@ -113,6 +83,35 @@
<span v-else-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" />
</strong>
</div>
<div class="inline-block children:px-1 self-end">
<router-link
:to="{
path: '/watch',
query: {
v: video.url.substr(-11),
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
listen: '1',
},
}"
:aria-label="'Listen to ' + video.title"
:title="'Listen to ' + video.title"
>
<font-awesome-icon icon="headphones" />
</router-link>
<button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
<font-awesome-icon icon="circle-plus" />
</button>
<button
v-if="admin"
:title="$t('actions.remove_from_playlist')"
ref="removeButton"
@click="removeVideo(video.url.substr(-11))"
>
<font-awesome-icon icon="circle-minus" />
</button>
</div>
</div>
</div>
<PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />

4
src/components/WatchVideo.vue
View file

@ -67,7 +67,9 @@
<div class="pp-watch-bellow-options flex">
<!-- Channel Image & Info -->
<div class="flex">
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="w-auto" />
<router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="w-auto" />
</router-link>
<div>
<router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">{{
video.uploader

2
src/piped.css
View file

@ -25,7 +25,7 @@
/*Avatar*/ .comment-avatar, .pp-import-channel img {width: 40rem; height: 40rem}
/*Video Grid */ .video-grid {display: grid; gap: 15rem; grid-template-columns: repeat(auto-fit, minmax(300rem, 1fr));}
/*Video Grid */ .video-grid {display: grid; gap: 15rem; grid-template-columns: repeat(auto-fit, minmax(300rem, 1fr)); justify-items:center;}
tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)}