Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-10 10:18:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove whitepace for spacing, and reduce grid dom size.

Browse Source
This commit is contained in:
FireMasterK 2021-12-27 14:46:39 +00:00
parent 3a577a4dfa
commit 9b6e32683f
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD
11 changed files with 50 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -11,8 +11,7 @@
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped"> <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
<font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon> <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
</a> </a>
&nbsp; <a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
<a href="https://github.com/TeamPiped/Piped#donations">
<font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon> <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
{{ $t("actions.donations") }} {{ $t("actions.donations") }}
</a> </a>

11
src/components/Channel.vue
View File

@ -17,9 +17,14 @@
<hr /> <hr />
<div class="video-grid"> <div class="video-grid">
<div v-for="video in channel.relatedStreams" :key="video.url"> <VideoItem
<VideoItem :video="video" height="94" width="168" hide-channel /> v-for="video in channel.relatedStreams"
</div> :key="video.url"
:video="video"
height="94"
width="168"
hide-channel
/>
</div> </div>
</div> </div>
</template> </template>

16
src/components/Comment.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="comment flex"> <div class="comment flex mt-1.5">
<img <img
:src="comment.thumbnail" :src="comment.thumbnail"
class="comment-avatar rounded-full w-12 h-12" class="comment-avatar rounded-full w-12 h-12"
@ -12,14 +12,15 @@
<div class="comment-content pl-2"> <div class="comment-content pl-2">
<div class="comment-header"> <div class="comment-header">
<div v-if="comment.pinned" class="comment-pinned uk-text-meta"> <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
<font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; {{ $t("comment.pinned_by") }} <font-awesome-icon icon="thumbtack"></font-awesome-icon
><span class="ml-1.5">{{ $t("comment.pinned_by") }}</span>
{{ uploader }} {{ uploader }}
</div> </div>
<div class="comment-author"> <div class="comment-author">
<router-link class="font-bold uk-text-small" :to="comment.commentorUrl"> <router-link class="font-bold uk-text-small" :to="comment.commentorUrl">
{{ comment.author }} </router-link {{ comment.author }} </router-link
>&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon> ><font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check"></font-awesome-icon>
</div> </div>
<div class="comment-meta uk-text-meta uk-margin-small-bottom"> <div class="comment-meta uk-text-meta uk-margin-small-bottom">
{{ comment.commentedTime }} {{ comment.commentedTime }}
@ -36,15 +37,13 @@
<template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)"> <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
<div @click="loadReplies"> <div @click="loadReplies">
<a class="uk-link-text" v-t="'actions.show_replies'" /> <a class="uk-link-text" v-t="'actions.show_replies'" />
&nbsp; <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
<font-awesome-icon icon="level-down-alt" />
</div> </div>
</template> </template>
<template v-if="showingReplies"> <template v-if="showingReplies">
<div @click="hideReplies"> <div @click="hideReplies">
<a class="uk-link-text" v-t="'actions.hide_replies'" /> <a class="uk-link-text" v-t="'actions.hide_replies'" />
&nbsp; <font-awesome-icon class="ml-1.5" icon="level-up-alt" />
<font-awesome-icon icon="level-up-alt" />
</div> </div>
</template> </template>
<div v-show="showingReplies" v-if="replies" class="replies"> <div v-show="showingReplies" v-if="replies" class="replies">
@ -53,8 +52,7 @@
</div> </div>
<div v-if="nextpage" @click="loadReplies"> <div v-if="nextpage" @click="loadReplies">
<a class="uk-link-text" v-t="'actions.load_more_replies'" /> <a class="uk-link-text" v-t="'actions.load_more_replies'" />
&nbsp; <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
<font-awesome-icon icon="level-down-alt" />
</div> </div>
</div> </div>
</div> </div>

4
src/components/FeedPage.vue
View File

@ -22,9 +22,7 @@
<hr /> <hr />
<div class="video-grid"> <div class="video-grid">
<div v-for="video in videos" :key="video.url"> <VideoItem v-for="video in videos" :key="video.url" :video="video" />
<VideoItem :video="video" />
</div>
</div> </div>
</template> </template>

4
src/components/HistoryPage.vue
View File

@ -18,9 +18,7 @@
<hr /> <hr />
<div class="video-grid"> <div class="video-grid">
<div v-for="video in videos" :key="video.url"> <VideoItem v-for="video in videos" :key="video.url" :video="video" />
<VideoItem :video="video" />
</div>
</div> </div>
<br /> <br />

10
src/components/Playlist.vue
View File

@ -27,9 +27,13 @@
<hr /> <hr />
<div class="video-grid"> <div class="video-grid">
<div v-for="video in playlist.relatedStreams" :key="video.url"> <VideoItem
<VideoItem :video="video" height="94" width="168" /> v-for="video in playlist.relatedStreams"
</div> :key="video.url"
:video="video"
height="94"
width="168"
/>
</div> </div>
</div> </div>
</template> </template>

2
src/components/Preferences.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="uk-flex uk-flex-between uk-flex-middle"> <div class="uk-flex uk-flex-between uk-flex-middle">
<button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')"> <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
<font-awesome-icon icon="chevron-left" /> &nbsp;{{ $t("actions.back") }} <font-awesome-icon icon="chevron-left" /><span class="ml-1.5">{{ $t("actions.back") }}</span>
</button> </button>
<span><h1 v-t="'titles.preferences'" class="font-bold text-center"/></span> <span><h1 v-t="'titles.preferences'" class="font-bold text-center"/></span>
<span /> <span />

10
src/components/SearchResults.vue
View File

@ -39,16 +39,16 @@
<img style="width: 100%" :src="result.thumbnail" loading="lazy" /> <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
</div> </div>
<p> <p>
{{ result.name }}&thinsp;<font-awesome-icon {{ result.name
v-if="result.verified" }}<font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check"></font-awesome-icon>
icon="check"
></font-awesome-icon>
</p> </p>
</router-link> </router-link>
<p v-if="result.description">{{ result.description }}</p> <p v-if="result.description">{{ result.description }}</p>
<router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl"> <router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl">
<p> <p>
{{ result.uploader }}&thinsp;<font-awesome-icon {{ result.uploader
}}<font-awesome-icon
class="ml-1.5"
v-if="result.uploaderVerified" v-if="result.uploaderVerified"
icon="check" icon="check"
></font-awesome-icon> ></font-awesome-icon>

4
src/components/TrendingPage.vue
View File

@ -4,9 +4,7 @@
<hr /> <hr />
<div class="video-grid"> <div class="video-grid">
<div v-for="video in videos" :key="video.url"> <VideoItem v-for="video in videos" :key="video.url" :video="video" height="118" width="210" />
<VideoItem :video="video" height="118" width="210" />
</div>
</div> </div>
</template> </template>

6
src/components/VideoItem.vue
View File

@ -56,10 +56,8 @@
:to="video.uploaderUrl" :to="video.uploaderUrl"
:title="video.uploaderName" :title="video.uploaderName"
> >
{{ video.uploaderName }}&thinsp;<font-awesome-icon {{ video.uploaderName
v-if="video.uploaderVerified" }}<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
icon="check"
></font-awesome-icon>
</router-link> </router-link>
<b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small"> <b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">

47
src/components/WatchVideo.vue
View File

@ -45,22 +45,18 @@
<b v-t="'video.ratings_disabled'" /> <b v-t="'video.ratings_disabled'" />
</div> </div>
</template> </template>
<a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left btn"> <a :href="'https://youtu.be/' + getVideoId()" class="btn">
<b>{{ $t("player.watch_on") }}&nbsp;</b> <b>{{ $t("player.watch_on") }}</b>
<font-awesome-icon :icon="['fab', 'youtube']"></font-awesome-icon> <font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']"></font-awesome-icon>
</a> </a>
<a <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
v-if="video.lbryId"
:href="'https://odysee.com/' + video.lbryId"
class="uk-margin-small-left btn"
>
<b>{{ $t("player.watch_on") }} LBRY</b> <b>{{ $t("player.watch_on") }} LBRY</b>
</a> </a>
<router-link <router-link
:to="toggleListenUrl" :to="toggleListenUrl"
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title" :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title" :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="uk-margin-small-left btn" class="btn"
> >
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon> <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon>
</router-link> </router-link>
@ -70,7 +66,7 @@
<div class="flex"> <div class="flex">
<div class="flex items-center"> <div class="flex items-center">
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" /> <img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
<router-link v-if="video.uploaderUrl" class="link" :to="video.uploaderUrl"> <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">
{{ video.uploader }} </router-link {{ video.uploader }} </router-link
><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon> ><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
</div> </div>
@ -95,25 +91,13 @@
<label for="chkAutoLoop" <label for="chkAutoLoop"
><b>{{ $t("actions.loop_this_video") }}:</b></label ><b>{{ $t("actions.loop_this_video") }}:</b></label
>&nbsp; >
<input <input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" />
id="chkAutoLoop"
v-model="selectedAutoLoop"
class="uk-checkbox"
type="checkbox"
@change="onChange($event)"
/>
<br /> <br />
<label for="chkAutoPlay" <label for="chkAutoPlay"
><b>{{ $t("actions.auto_play_next_video") }}:</b></label ><b>{{ $t("actions.auto_play_next_video") }}:</b></label
>&nbsp; >
<input <input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" />
id="chkAutoPlay"
v-model="selectedAutoPlay"
class="uk-checkbox"
type="checkbox"
@change="onChange($event)"
/>
<hr /> <hr />
@ -132,14 +116,15 @@
<a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs"> <a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs">
{{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }} {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
</a> </a>
<div <VideoItem
v-for="related in video.relatedStreams" v-for="related in video.relatedStreams"
class="w-auto"
v-show="showRecs || !smallView" v-show="showRecs || !smallView"
:key="related.url" :key="related.url"
class="uk-tile-default w-auto" :video="related"
> height="94"
<VideoItem :video="related" height="94" width="168" /> width="168"
</div> />
<hr class="sm:hidden" /> <hr class="sm:hidden" />
</div> </div>
</div> </div>