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

Replace video grids with windicss.

Browse source
This commit is contained in:
FireMasterK 2021-12-27 14:46:22 +00:00
parent 7314642efa
commit 69ae2bf131
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
10 changed files with 179 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/App.vue
View file

@ -116,8 +116,8 @@ b {
scrollbar-color: #15191a #444a4e;
}
.uk-grid > div {
padding-bottom: 1vh;
.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 gap-x-1vw gap-y-0.2vh;
}
.uk-button {

8
src/components/Channel.vue
View file

@ -15,12 +15,8 @@
<hr />
<div class="uk-grid uk-grid-xl">
<div
v-for="video in channel.relatedStreams"
:key="video.url"
class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
>
<div class="video-grid">
<div v-for="video in channel.relatedStreams" :key="video.url">
<VideoItem :video="video" height="94" width="168" hide-channel />
</div>
</div>

9
src/components/FeedPage.vue
View file

@ -27,13 +27,8 @@
<hr />
<div class="uk-grid uk-grid-xl">
<div
v-for="video in videos"
:key="video.url"
:style="[{ background: backgroundColor }]"
class="uk-width-1-1 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
>
<div class="video-grid">
<div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
<VideoItem :video="video" />
</div>
</div>

9
src/components/HistoryPage.vue
View file

@ -17,13 +17,8 @@
<hr />
<div class="uk-grid uk-grid-xl">
<div
v-for="video in videos"
:key="video.url"
:style="[{ background: backgroundColor }]"
class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
>
<div class="video-grid">
<div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
<VideoItem :video="video" />
</div>
</div>

35
src/components/Playlist.vue
View file

@ -7,27 +7,28 @@
{{ playlist.name }}
</h1>
<b
><router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
<img :src="playlist.uploaderAvatar" loading="lazy" class="uk-border-circle" />
{{ playlist.uploader }}</router-link
></b
>
<div class="uk-align-right">
<b>{{ playlist.videos }} {{ $t("video.videos") }}</b>
<br />
<a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
<div class="grid grid-cols-2">
<div>
<b
><router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
<img :src="playlist.uploaderAvatar" loading="lazy" class="uk-border-circle" />
{{ playlist.uploader }}</router-link
></b
>
</div>
<div>
<div class="right-2vw absolute">
<b>{{ playlist.videos }} {{ $t("video.videos") }}</b>
<br />
<a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
</div>
</div>
</div>
<hr />
<div class="uk-grid uk-grid-xl">
<div
v-for="video in playlist.relatedStreams"
:key="video.url"
class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
>
<div class="video-grid">
<div v-for="video in playlist.relatedStreams" :key="video.url">
<VideoItem :video="video" height="94" width="168" />
</div>
</div>

9
src/components/SearchResults.vue
View file

@ -30,13 +30,8 @@
</i>
</div>
<div v-if="results" class="uk-grid uk-grid-xl">
<div
v-for="result in results.items"
:key="result.url"
:style="[{ background: backgroundColor }]"
class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
>
<div v-if="results" class="video-grid">
<div v-for="result in results.items" :key="result.url" :style="[{ background: backgroundColor }]">
<VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
<div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary">
<router-link class="uk-text-emphasis" :to="result.url">

9
src/components/TrendingPage.vue
View file

@ -3,13 +3,8 @@
<hr />
<div class="uk-grid uk-grid-xl">
<div
v-for="video in videos"
:key="video.url"
:style="[{ background: backgroundColor }]"
class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
>
<div class="video-grid">
<div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
<VideoItem :video="video" height="118" width="210" />
</div>
</div>

1
src/main.js
View file

@ -49,6 +49,7 @@ TimeAgo.addDefaultLocale(en);
import { createI18n } from "vue-i18n";
import enLocale from "@/locales/en.json";
import "windi.css";
const timeAgo = new TimeAgo("en-US");