mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Migrate more css classes.
This commit is contained in:
parent
4899c9717c
commit
defe4d6c91
7 changed files with 43 additions and 52 deletions
12
src/App.vue
12
src/App.vue
|
@ -7,7 +7,7 @@
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</router-view>
|
</router-view>
|
||||||
|
|
||||||
<div style="text-align: center">
|
<footer class="text-center">
|
||||||
<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>
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
<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>
|
||||||
</div>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -113,7 +113,7 @@ 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 gap-x-1vw gap-y-0.2vh;
|
@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-1.5 mx-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
@ -121,7 +121,7 @@ b {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
@apply text-white bg-dark-800;
|
@apply text-white bg-dark-800 bg-opacity-70;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .input,
|
.dark .input,
|
||||||
|
@ -141,4 +141,8 @@ h1 {
|
||||||
hr {
|
hr {
|
||||||
@apply !mt-2 !mb-3;
|
@apply !mt-2 !mb-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
@apply hover:(text-gray-300 underline underline-gray-300);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -2,10 +2,11 @@
|
||||||
<ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
|
<ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
|
||||||
|
|
||||||
<div v-if="channel" v-show="!channel.error">
|
<div v-if="channel" v-show="!channel.error">
|
||||||
<h1 class="text-center">
|
<div class="flex justify-center place-items-center">
|
||||||
<img height="48" width="48" class="rounded-full" :src="channel.avatarUrl" />{{ channel.name }}
|
<img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
|
||||||
</h1>
|
<h1>{{ channel.name }}</h1>
|
||||||
<img v-if="channel.bannerUrl" :src="channel.bannerUrl" style="width: 100%" loading="lazy" />
|
</div>
|
||||||
|
<img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
|
||||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
<p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
|
<p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
|
||||||
|
|
||||||
|
|
|
@ -22,9 +22,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-form-row">
|
<div class="uk-form-row">
|
||||||
<a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="register">
|
<a class="uk-width-1-1 btn w-auto" @click="register"> {{ $t("titles.register") }}</a>
|
||||||
{{ $t("titles.register") }}</a
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,38 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<h1 class="font-bold text-center">{{ $t("titles.subscriptions") }}</h1>
|
<h1 class="font-bold text-center">{{ $t("titles.subscriptions") }}</h1>
|
||||||
|
|
||||||
<div>
|
<div v-if="authenticated">
|
||||||
<button v-if="authenticated" class="uk-button uk-button-small" style=" margin-right: 0.5rem">
|
<button class="btn mr-0.5">
|
||||||
<router-link to="/import">
|
<router-link to="/import">
|
||||||
{{ $t("actions.import_from_json") }}
|
{{ $t("actions.import_from_json") }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button v-if="authenticated" class="uk-button uk-button-small" style="color: white" @click="exportHandler">
|
<button class="btn" @click="exportHandler">
|
||||||
{{ $t("actions.export_to_json") }}
|
{{ $t("actions.export_to_json") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div v-for="subscription in subscriptions" :key="subscription.url" style="text-align: center">
|
<div class="grid">
|
||||||
<div class="uk-text-primary" :style="[{ background: backgroundColor }]">
|
<div class="mb-3" v-for="subscription in subscriptions" :key="subscription.url">
|
||||||
<a :href="subscription.url">
|
<div class="flex justify-center place-items-center">
|
||||||
<img :src="subscription.avatar" class="uk-margin-small-right rounded-full" width="96" height="96" />
|
<div class="w-full grid grid-cols-3">
|
||||||
<span
|
<router-link :to="subscription.url" class="col-start-2 block flex text-center font-bold text-4xl">
|
||||||
class="uk-text-large"
|
<img :src="subscription.avatar" class="rounded-full" width="48" height="48" />
|
||||||
style="width: 30rem; display: inline-block; text-align: center; margin-left: 6rem"
|
<span>{{ subscription.name }}</span>
|
||||||
>{{ subscription.name }}</span
|
</router-link>
|
||||||
>
|
<button class="btn !w-min" @click="handleButton(subscription)">
|
||||||
</a>
|
{{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
||||||
<button
|
</button>
|
||||||
class="uk-button uk-button-large"
|
</div>
|
||||||
style="background: #222; margin-left: 0.5rem; width: 185px"
|
</div>
|
||||||
@click="handleButton(subscription)"
|
|
||||||
>
|
|
||||||
{{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
|
<div class="uk-text-secondary">
|
||||||
<router-link class="uk-text-emphasis" :to="video.url">
|
<router-link class="uk-text-emphasis" :to="video.url">
|
||||||
<img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" />
|
<img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
|
<span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
|
||||||
timeFormat(video.duration)
|
timeFormat(video.duration)
|
||||||
|
@ -14,13 +14,11 @@
|
||||||
<div>
|
<div>
|
||||||
<p
|
<p
|
||||||
style="
|
style="
|
||||||
padding-top: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
|
||||||
"
|
"
|
||||||
|
class="my-2 overflow-hidden flex link"
|
||||||
:title="video.title"
|
:title="video.title"
|
||||||
>
|
>
|
||||||
{{ video.title }}
|
{{ video.title }}
|
||||||
|
@ -28,7 +26,7 @@
|
||||||
</div>
|
</div>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<div class="float-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
|
<div class="float-right ml-0 mb-0 inline-block">
|
||||||
<router-link
|
<router-link
|
||||||
:to="video.url + '&listen=1'"
|
:to="video.url + '&listen=1'"
|
||||||
:aria-label="'Listen to ' + video.title"
|
:aria-label="'Listen to ' + video.title"
|
||||||
|
@ -38,7 +36,7 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; flex-flow: row; height: 15%">
|
<div class="flex" style="flex-flow: row">
|
||||||
<router-link class="uk-link-muted" :to="video.uploaderUrl">
|
<router-link class="uk-link-muted" :to="video.uploaderUrl">
|
||||||
<img
|
<img
|
||||||
v-if="video.uploaderAvatar"
|
v-if="video.uploaderAvatar"
|
||||||
|
@ -55,7 +53,6 @@
|
||||||
class="uk-link-muted overflow-hidden block"
|
class="uk-link-muted overflow-hidden block"
|
||||||
:to="video.uploaderUrl"
|
:to="video.uploaderUrl"
|
||||||
:title="video.uploaderName"
|
:title="video.uploaderName"
|
||||||
style="display: block; width: 90%"
|
|
||||||
>
|
>
|
||||||
{{ video.uploaderName }} <font-awesome-icon
|
{{ video.uploaderName }} <font-awesome-icon
|
||||||
v-if="video.uploaderVerified"
|
v-if="video.uploaderVerified"
|
||||||
|
|
|
@ -44,22 +44,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 uk-button uk-button-small">
|
<a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left btn">
|
||||||
<b>{{ $t("player.watch_on") }} </b>
|
<b>{{ $t("player.watch_on") }} </b>
|
||||||
<font-awesome-icon class="uk-margin-small-right" :icon="['fab', 'youtube']"></font-awesome-icon>
|
<font-awesome-icon class="uk-margin-small-right" :icon="['fab', 'youtube']"></font-awesome-icon>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="uk-margin-small-left btn">
|
||||||
v-if="video.lbryId"
|
|
||||||
:href="'https://odysee.com/' + video.lbryId"
|
|
||||||
class="uk-margin-small-left uk-button uk-button-small"
|
|
||||||
>
|
|
||||||
<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 uk-button uk-button-small"
|
class="uk-margin-small-left 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>
|
||||||
|
@ -71,16 +67,16 @@
|
||||||
{{ video.uploader }} </router-link
|
{{ video.uploader }} </router-link
|
||||||
> <font-awesome-icon v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
> <font-awesome-icon v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
||||||
<div class="uk-flex-1"></div>
|
<div class="uk-flex-1"></div>
|
||||||
<button v-if="authenticated" class="uk-button uk-button-small" @click="subscribeHandler">
|
<button v-if="authenticated" class="btn" @click="subscribeHandler">
|
||||||
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<a class="uk-button uk-button-small" @click="showDesc = !showDesc">
|
<button class="btn" @click="showDesc = !showDesc">
|
||||||
{{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
|
{{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
|
||||||
</a>
|
</button>
|
||||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
<p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="purifyHTML(video.description)"></p>
|
<p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="purifyHTML(video.description)"></p>
|
||||||
<div v-if="showDesc && sponsors && sponsors.segments">
|
<div v-if="showDesc && sponsors && sponsors.segments">
|
||||||
|
@ -127,7 +123,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first">
|
<div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first">
|
||||||
<a class="uk-button uk-button-small uk-margin-small-bottom sm:hidden" @click="showRecs = !showRecs">
|
<a class="btn uk-margin-small-bottom 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
|
<div
|
||||||
|
|
|
@ -49,7 +49,7 @@ TimeAgo.addDefaultLocale(en);
|
||||||
|
|
||||||
import { createI18n } from "vue-i18n";
|
import { createI18n } from "vue-i18n";
|
||||||
import enLocale from "@/locales/en.json";
|
import enLocale from "@/locales/en.json";
|
||||||
import "windi.css";
|
import("windi.css");
|
||||||
|
|
||||||
const timeAgo = new TimeAgo("en-US");
|
const timeAgo = new TimeAgo("en-US");
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue