mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Remove whitepace for spacing, and reduce grid dom size.
This commit is contained in:
parent
3a577a4dfa
commit
9b6e32683f
11 changed files with 50 additions and 67 deletions
|
@ -11,8 +11,7 @@
|
|||
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
|
||||
<font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/TeamPiped/Piped#donations">
|
||||
<a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
|
||||
<font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
|
||||
{{ $t("actions.donations") }}
|
||||
</a>
|
||||
|
|
|
@ -17,9 +17,14 @@
|
|||
<hr />
|
||||
|
||||
<div class="video-grid">
|
||||
<div v-for="video in channel.relatedStreams" :key="video.url">
|
||||
<VideoItem :video="video" height="94" width="168" hide-channel />
|
||||
</div>
|
||||
<VideoItem
|
||||
v-for="video in channel.relatedStreams"
|
||||
:key="video.url"
|
||||
:video="video"
|
||||
height="94"
|
||||
width="168"
|
||||
hide-channel
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="comment flex">
|
||||
<div class="comment flex mt-1.5">
|
||||
<img
|
||||
:src="comment.thumbnail"
|
||||
class="comment-avatar rounded-full w-12 h-12"
|
||||
|
@ -12,14 +12,15 @@
|
|||
<div class="comment-content pl-2">
|
||||
<div class="comment-header">
|
||||
<div v-if="comment.pinned" class="comment-pinned uk-text-meta">
|
||||
<font-awesome-icon icon="thumbtack"></font-awesome-icon> {{ $t("comment.pinned_by") }}
|
||||
<font-awesome-icon icon="thumbtack"></font-awesome-icon
|
||||
><span class="ml-1.5">{{ $t("comment.pinned_by") }}</span>
|
||||
{{ uploader }}
|
||||
</div>
|
||||
|
||||
<div class="comment-author">
|
||||
<router-link class="font-bold uk-text-small" :to="comment.commentorUrl">
|
||||
{{ comment.author }} </router-link
|
||||
> <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 class="comment-meta uk-text-meta uk-margin-small-bottom">
|
||||
{{ comment.commentedTime }}
|
||||
|
@ -36,15 +37,13 @@
|
|||
<template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
|
||||
<div @click="loadReplies">
|
||||
<a class="uk-link-text" v-t="'actions.show_replies'" />
|
||||
|
||||
<font-awesome-icon icon="level-down-alt" />
|
||||
<font-awesome-icon class="ml-1.5" icon="level-down-alt" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="showingReplies">
|
||||
<div @click="hideReplies">
|
||||
<a class="uk-link-text" v-t="'actions.hide_replies'" />
|
||||
|
||||
<font-awesome-icon icon="level-up-alt" />
|
||||
<font-awesome-icon class="ml-1.5" icon="level-up-alt" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-show="showingReplies" v-if="replies" class="replies">
|
||||
|
@ -53,8 +52,7 @@
|
|||
</div>
|
||||
<div v-if="nextpage" @click="loadReplies">
|
||||
<a class="uk-link-text" v-t="'actions.load_more_replies'" />
|
||||
|
||||
<font-awesome-icon icon="level-down-alt" />
|
||||
<font-awesome-icon class="ml-1.5" icon="level-down-alt" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -22,9 +22,7 @@
|
|||
<hr />
|
||||
|
||||
<div class="video-grid">
|
||||
<div v-for="video in videos" :key="video.url">
|
||||
<VideoItem :video="video" />
|
||||
</div>
|
||||
<VideoItem v-for="video in videos" :key="video.url" :video="video" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -18,9 +18,7 @@
|
|||
<hr />
|
||||
|
||||
<div class="video-grid">
|
||||
<div v-for="video in videos" :key="video.url">
|
||||
<VideoItem :video="video" />
|
||||
</div>
|
||||
<VideoItem v-for="video in videos" :key="video.url" :video="video" />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
|
|
@ -27,9 +27,13 @@
|
|||
<hr />
|
||||
|
||||
<div class="video-grid">
|
||||
<div v-for="video in playlist.relatedStreams" :key="video.url">
|
||||
<VideoItem :video="video" height="94" width="168" />
|
||||
</div>
|
||||
<VideoItem
|
||||
v-for="video in playlist.relatedStreams"
|
||||
:key="video.url"
|
||||
:video="video"
|
||||
height="94"
|
||||
width="168"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="uk-flex uk-flex-between uk-flex-middle">
|
||||
<button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
|
||||
<font-awesome-icon icon="chevron-left" /> {{ $t("actions.back") }}
|
||||
<font-awesome-icon icon="chevron-left" /><span class="ml-1.5">{{ $t("actions.back") }}</span>
|
||||
</button>
|
||||
<span><h1 v-t="'titles.preferences'" class="font-bold text-center"/></span>
|
||||
<span />
|
||||
|
|
|
@ -39,16 +39,16 @@
|
|||
<img style="width: 100%" :src="result.thumbnail" loading="lazy" />
|
||||
</div>
|
||||
<p>
|
||||
{{ result.name }} <font-awesome-icon
|
||||
v-if="result.verified"
|
||||
icon="check"
|
||||
></font-awesome-icon>
|
||||
{{ result.name
|
||||
}}<font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check"></font-awesome-icon>
|
||||
</p>
|
||||
</router-link>
|
||||
<p v-if="result.description">{{ result.description }}</p>
|
||||
<router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl">
|
||||
<p>
|
||||
{{ result.uploader }} <font-awesome-icon
|
||||
{{ result.uploader
|
||||
}}<font-awesome-icon
|
||||
class="ml-1.5"
|
||||
v-if="result.uploaderVerified"
|
||||
icon="check"
|
||||
></font-awesome-icon>
|
||||
|
|
|
@ -4,9 +4,7 @@
|
|||
<hr />
|
||||
|
||||
<div class="video-grid">
|
||||
<div v-for="video in videos" :key="video.url">
|
||||
<VideoItem :video="video" height="118" width="210" />
|
||||
</div>
|
||||
<VideoItem v-for="video in videos" :key="video.url" :video="video" height="118" width="210" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -56,10 +56,8 @@
|
|||
:to="video.uploaderUrl"
|
||||
:title="video.uploaderName"
|
||||
>
|
||||
{{ video.uploaderName }} <font-awesome-icon
|
||||
v-if="video.uploaderVerified"
|
||||
icon="check"
|
||||
></font-awesome-icon>
|
||||
{{ video.uploaderName
|
||||
}}<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
||||
</router-link>
|
||||
|
||||
<b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">
|
||||
|
|
|
@ -45,22 +45,18 @@
|
|||
<b v-t="'video.ratings_disabled'" />
|
||||
</div>
|
||||
</template>
|
||||
<a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left btn">
|
||||
<b>{{ $t("player.watch_on") }} </b>
|
||||
<font-awesome-icon :icon="['fab', 'youtube']"></font-awesome-icon>
|
||||
<a :href="'https://youtu.be/' + getVideoId()" class="btn">
|
||||
<b>{{ $t("player.watch_on") }}</b>
|
||||
<font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']"></font-awesome-icon>
|
||||
</a>
|
||||
<a
|
||||
v-if="video.lbryId"
|
||||
:href="'https://odysee.com/' + video.lbryId"
|
||||
class="uk-margin-small-left btn"
|
||||
>
|
||||
<a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
|
||||
<b>{{ $t("player.watch_on") }} LBRY</b>
|
||||
</a>
|
||||
<router-link
|
||||
:to="toggleListenUrl"
|
||||
:aria-label="(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>
|
||||
</router-link>
|
||||
|
@ -70,7 +66,7 @@
|
|||
<div class="flex">
|
||||
<div class="flex items-center">
|
||||
<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
|
||||
><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
||||
</div>
|
||||
|
@ -95,25 +91,13 @@
|
|||
|
||||
<label for="chkAutoLoop"
|
||||
><b>{{ $t("actions.loop_this_video") }}:</b></label
|
||||
>
|
||||
<input
|
||||
id="chkAutoLoop"
|
||||
v-model="selectedAutoLoop"
|
||||
class="uk-checkbox"
|
||||
type="checkbox"
|
||||
@change="onChange($event)"
|
||||
/>
|
||||
>
|
||||
<input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" />
|
||||
<br />
|
||||
<label for="chkAutoPlay"
|
||||
><b>{{ $t("actions.auto_play_next_video") }}:</b></label
|
||||
>
|
||||
<input
|
||||
id="chkAutoPlay"
|
||||
v-model="selectedAutoPlay"
|
||||
class="uk-checkbox"
|
||||
type="checkbox"
|
||||
@change="onChange($event)"
|
||||
/>
|
||||
>
|
||||
<input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" />
|
||||
|
||||
<hr />
|
||||
|
||||
|
@ -132,14 +116,15 @@
|
|||
<a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs">
|
||||
{{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
|
||||
</a>
|
||||
<div
|
||||
<VideoItem
|
||||
v-for="related in video.relatedStreams"
|
||||
class="w-auto"
|
||||
v-show="showRecs || !smallView"
|
||||
:key="related.url"
|
||||
class="uk-tile-default w-auto"
|
||||
>
|
||||
<VideoItem :video="related" height="94" width="168" />
|
||||
</div>
|
||||
:video="related"
|
||||
height="94"
|
||||
width="168"
|
||||
/>
|
||||
<hr class="sm:hidden" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue