Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-08-09 20:24:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial migration to UnoCSS.

Browse Source
This commit is contained in:
Kavin
2022-08-17 19:04:57 +05:30
parent 527f564017
commit 471e81f556
15 changed files with 578 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@@ -102,11 +102,11 @@ b {
}
.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 <md:gap-x-2.5 md:gap-x-1vw gap-y-1.5;
@apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto lt-md:gap-x-2.5 md:gap-x-1vw gap-y-1.5;
}
.btn {
@apply h-full py-2 <md:(px-2) md:(px-4) rounded cursor-pointer;
@apply h-full py-2 lt-md:px-2 md:px-4 rounded cursor-pointer;
}
.reset {
@@ -114,7 +114,7 @@ b {
}
.auto {
@apply dark:(text-white bg-dark-900);
@apply @dark:(text-white bg-dark-900);
}
.dark {
@@ -145,7 +145,7 @@ b {
.auto .input,
.auto .select,
.auto .btn {
@apply dark:(text-gray-400 bg-dark-400);
@apply @dark:(text-gray-400 bg-dark-400);
}
.input {
@@ -161,7 +161,7 @@ hr {
}
.auto hr {
@apply dark:border-dark-100;
@apply @dark:border-dark-100;
}
h1,
@@ -194,7 +194,7 @@ h2 {
}
.auto .link {
@apply dark:hover:(text-gray-300 underline underline-gray-300);
@apply @dark:hover:(text-gray-300 underline underline-gray-300);
}
.dark .link-secondary {
@@ -202,7 +202,7 @@ h2 {
}
.auto .link-secondary {
@apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
@apply @dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
}
.line {

15
src/components/ChaptersBar.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- desktop view -->
<div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 <lg:hidden">
<div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden">
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }})
</h2>
@@ -45,16 +45,17 @@
}
.chapter {
@apply cursor-pointer self-center p-2.5;
img {
@apply w-full h-full;
}
}
.chapter img {
@apply w-full h-full;
}
.chapter-vertical {
@apply cursor-pointer self-center p-2.5;
img {
@apply w-3/10 h-3/10;
}
}
.chapter-vertical img {
@apply w-3/10 h-3/10;
}
.chapter-vertical:hover {
@apply bg-gray-500;
}

4
src/components/CommentItem.vue
View File

@@ -24,8 +24,8 @@
<div class="comment-meta text-sm mb-1.5" v-text="comment.commentedTime" />
</div>
<div class="whitespace-pre-wrap" v-text="comment.commentText" />
<div class="comment-footer mt-1">
<font-awesome-icon icon="thumbs-up" />
<div class="comment-footer mt-1 flex">
<div class="i-fa-solid:thumbs-up" />
<span class="ml-1" v-text="numberFormat(comment.likeCount)" />
<font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart" />
</div>

10
src/components/NavBar.vue
View File

@@ -1,7 +1,7 @@
<template>
<nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative">
<div class="flex-1 flex justify-start">
<router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
<router-link class="flex font-bold text-3xl items-center font-sans" to="/"
><img
alt="logo"
src="/img/icons/logo.svg"
@@ -11,10 +11,10 @@
/>iped</router-link
>
</div>
<div class="<md:hidden">
<div class="lt-md:hidden">
<input
v-model="searchText"
class="input !w-72 !h-10"
class="input w-72 h-10"
type="text"
role="search"
ref="videoSearch"
@@ -89,7 +89,7 @@
<div class="w-{full - 4} md:hidden mx-2">
<input
v-model="searchText"
class="input !h-10 !w-full"
class="input h-10 w-full"
type="text"
role="search"
:title="$t('actions.search')"
@@ -177,6 +177,6 @@ export default {
<style>
.input:focus {
@apply border-2 border-red-500;
box-shadow: 0 0 15px rgba(239, 68, 68, var(--tw-border-opacity));
box-shadow: 0 0 15px rgba(239, 68, 68, var(--un-border-opacity));
}
</style>

6
src/components/PreferencesPage.vue
View File

@@ -294,7 +294,7 @@
<th v-t="'preferences.instance_locations'" />
<th v-t="'preferences.has_cdn'" />
<th v-t="'preferences.registered_users'" />
<th class="<md:(hidden)" v-t="'preferences.version'" />
<th class="lt-md:hidden" v-t="'preferences.version'" />
<th v-t="'preferences.up_to_date'" />
<th v-t="'preferences.ssl_score'" />
</tr>
@@ -305,7 +305,7 @@
<td v-text="instance.locations" />
<td v-text="`${instance.cdn ? '&#9989;' : '&#10060;'}`" />
<td v-text="instance.registered" />
<td class="<md:(hidden)" v-text="instance.version" />
<td class="lt-md:hidden" v-text="instance.version" />
<td v-text="`${instance.up_to_date ? '&#9989;' : '&#10060;'}`" />
<td>
<a :href="sslScore(instance.api_url)" target="_blank" v-t="'actions.view_ssl_score'" />
@@ -616,6 +616,6 @@ export default {
<style>
.pref {
@apply flex justify-between items-center my-2 mx-[15vw] <md:(mx-[2vw]);
@apply flex justify-between items-center my-2 mx-[15vw] lt-md:mx-[2vw];
}
</style>

6
src/components/SearchSuggestions.vue
View File

@@ -77,7 +77,7 @@ export default {
<style>
.suggestions-container {
@apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)] bg-gray-300;
@apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 lt-md:max-w-[calc(100%-0.5rem)] bg-gray-300;
}
.dark .suggestions-container {
@@ -85,7 +85,7 @@ export default {
}
.auto .suggestions-container {
@apply dark:bg-dark-400;
@apply @dark:bg-dark-400;
}
.suggestion-selected {
@@ -97,7 +97,7 @@ export default {
}
.auto .suggestion-selected {
@apply dark:bg-dark-100;
@apply @dark:bg-dark-100;
}
.suggestion {

2
src/components/SubscriptionsPage.vue
View File

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

2
src/components/VideoItem.vue
View File

@@ -31,7 +31,7 @@
v-text="timeFormat(video.duration)"
/>
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
<font-awesome-icon class="!w-3" :icon="['fas', 'broadcast-tower']" />
<font-awesome-icon class="w-3" :icon="['fas', 'broadcast-tower']" />
</i18n-t>
<span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" v-t="'video.watched'" />
</div>

14
src/components/WatchVideo.vue
View File

@@ -47,13 +47,13 @@
<!-- Likes/dilikes -->
<div class="flex children:mr-2">
<template v-if="video.likes >= 0">
<div>
<font-awesome-icon icon="thumbs-up" />
<strong class="ml-2" v-text="addCommas(video.likes)" />
<div class="flex">
<div class="i-fa-solid:thumbs-up" />
<strong class="ml-1" v-text="addCommas(video.likes)" />
</div>
<div>
<font-awesome-icon icon="thumbs-down" />
<strong class="ml-2" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
<div class="flex">
<div class="i-fa-solid:thumbs-down" />
<strong class="ml-1" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
</div>
</template>
<template v-if="video.likes < 0">
@@ -105,7 +105,7 @@
<font-awesome-icon icon="rss" />
</a>
<!-- watch on youtube button -->
<a :href="`https://youtu.be/${getVideoId()}`" class="btn <lg:hidden">
<a :href="`https://youtu.be/${getVideoId()}`" class="btn lt-lg:hidden">
<i18n-t keypath="player.watch_on" tag="strong">
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
</i18n-t>

7
src/main.js
View File

@@ -1,8 +1,6 @@
import { createApp } from "vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
faThumbsUp,
faThumbsDown,
faEye,
faThumbtack,
faCheck,
@@ -22,8 +20,6 @@ import {
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(
faThumbsUp,
faThumbsDown,
faEye,
faGithub,
faBitcoin,
@@ -57,7 +53,8 @@ TimeAgo.addDefaultLocale(en);
import { createI18n } from "vue-i18n";
import enLocale from "@/locales/en.json";
import "windi.css";
import "@unocss/reset/tailwind.css";
import "uno.css";
const timeAgo = new TimeAgo("en-US");