mirror of
https://github.com/TeamPiped/Piped.git
synced 2026-03-29 20:06:58 +00:00
Migrate to tailwind + reka ui
This commit is contained in:
Kavin
310
src/App.vue
310
src/App.vue
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="reset min-h-screen w-full flex flex-col px-1vw py-5 antialiased" :class="[theme]">
|
||||
<div
|
||||
class="flex min-h-screen w-full flex-col bg-white px-[1vw] py-5 text-black antialiased dark:bg-dark-900 dark:text-white"
|
||||
:class="[theme]"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<NavBar />
|
||||
<router-view v-slot="{ Component }">
|
||||
@@ -14,27 +17,28 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import NavBar from "./components/NavBar.vue";
|
||||
import FooterComponent from "./components/FooterComponent.vue";
|
||||
import { getPreferenceString } from "@/composables/usePreferences.js";
|
||||
import { testLocalStorage, usePreferenceString } from "@/composables/usePreferences.js";
|
||||
import { getDefaultLanguage, TimeAgo, TimeAgoConfig } from "@/composables/useFormatting.js";
|
||||
import { fetchSubscriptions } from "@/composables/useSubscriptions.js";
|
||||
import { getChannelGroups, createOrUpdateChannelGroup } from "@/composables/useChannelGroups.js";
|
||||
|
||||
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
const themePreference = usePreferenceString("theme", "dark");
|
||||
const localePreference = usePreferenceString("hl", "en");
|
||||
const theme = ref("dark");
|
||||
|
||||
function setTheme() {
|
||||
let themePref = getPreferenceString("theme", "dark");
|
||||
const themes = {
|
||||
dark: "dark",
|
||||
light: "light",
|
||||
auto: darkModePreference.matches ? "dark" : "light",
|
||||
};
|
||||
|
||||
theme.value = themes[themePref];
|
||||
theme.value = themes[themePreference.value] ?? themes.dark;
|
||||
|
||||
changeTitleBarColor();
|
||||
|
||||
@@ -48,11 +52,42 @@ function changeTitleBarColor() {
|
||||
themeColor.setAttribute("content", currentColor[theme.value]);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTheme();
|
||||
darkModePreference.addEventListener("change", () => {
|
||||
async function applyLocale(locale = localePreference.value) {
|
||||
const resolvedLocale = locale || (await getDefaultLanguage());
|
||||
|
||||
if (resolvedLocale !== TimeAgoConfig.locale) {
|
||||
const localeTime = await import(`../node_modules/javascript-time-ago/locale/${resolvedLocale}.json`)
|
||||
.catch(() => null)
|
||||
.then(module => module?.default);
|
||||
if (localeTime) {
|
||||
TimeAgo.addLocale(localeTime);
|
||||
TimeAgoConfig.locale = resolvedLocale;
|
||||
}
|
||||
}
|
||||
|
||||
if (window.i18n.global.locale.value !== resolvedLocale) {
|
||||
if (!window.i18n.global.availableLocales.includes(resolvedLocale)) {
|
||||
const messages = await import(`./locales/${resolvedLocale}.json`).then(module => module.default);
|
||||
window.i18n.global.setLocaleMessage(resolvedLocale, messages);
|
||||
}
|
||||
window.i18n.global.locale.value = resolvedLocale;
|
||||
}
|
||||
}
|
||||
|
||||
function handlePreferredColorSchemeChange() {
|
||||
if (themePreference.value === "auto") setTheme();
|
||||
}
|
||||
|
||||
watch(
|
||||
themePreference,
|
||||
() => {
|
||||
setTheme();
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
darkModePreference.addEventListener("change", handlePreferredColorSchemeChange);
|
||||
|
||||
if ("indexedDB" in window) {
|
||||
const request = indexedDB.open("piped-db", 6);
|
||||
@@ -107,202 +142,115 @@ onMounted(() => {
|
||||
} else console.log("This browser doesn't support IndexedDB");
|
||||
|
||||
(async function () {
|
||||
const defaultLang = await getDefaultLanguage();
|
||||
const locale = getPreferenceString("hl", defaultLang);
|
||||
if (locale !== TimeAgoConfig.locale) {
|
||||
const localeTime = await import(`../node_modules/javascript-time-ago/locale/${locale}.json`)
|
||||
.catch(() => null)
|
||||
.then(module => module?.default);
|
||||
if (localeTime) {
|
||||
TimeAgo.addLocale(localeTime);
|
||||
TimeAgoConfig.locale = locale;
|
||||
}
|
||||
}
|
||||
if (window.i18n.global.locale.value !== locale) {
|
||||
if (!window.i18n.global.availableLocales.includes(locale)) {
|
||||
const messages = await import(`./locales/${locale}.json`).then(module => module.default);
|
||||
window.i18n.global.setLocaleMessage(locale, messages);
|
||||
}
|
||||
window.i18n.global.locale.value = locale;
|
||||
}
|
||||
const initialLocale =
|
||||
testLocalStorage() && localStorage.getItem("hl") === null
|
||||
? await getDefaultLanguage()
|
||||
: localePreference.value;
|
||||
await applyLocale(initialLocale);
|
||||
|
||||
watch(localePreference, locale => {
|
||||
applyLocale(locale);
|
||||
});
|
||||
})();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
darkModePreference.removeEventListener("change", handlePreferredColorSchemeChange);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1,
|
||||
p,
|
||||
a,
|
||||
b {
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
}
|
||||
@reference "./app.css";
|
||||
|
||||
:root {
|
||||
color-scheme: only light;
|
||||
}
|
||||
@layer base {
|
||||
h1,
|
||||
p,
|
||||
a,
|
||||
b {
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
:root {
|
||||
color-scheme: only light;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #4b4f52;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #5b6469;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #4b4f52;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: #485053;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #5b6469;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #0b0e0f;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: #485053;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-color: #4b4f52 #d1d5db;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #0b0e0f;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar {
|
||||
background-color: #15191a;
|
||||
}
|
||||
:root {
|
||||
scrollbar-color: #4b4f52 #d1d5db;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background-color: #4b4f52;
|
||||
}
|
||||
.dark ::-webkit-scrollbar {
|
||||
background-color: #15191a;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #5b6469;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background-color: #4b4f52;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:active {
|
||||
background-color: #485053;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #5b6469;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-corner {
|
||||
background-color: #0b0e0f;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-thumb:active {
|
||||
background-color: #485053;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
scrollbar-color: #4b4f52 #15191a;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-corner {
|
||||
background-color: #0b0e0f;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply font-sans;
|
||||
}
|
||||
:root.dark {
|
||||
scrollbar-color: #4b4f52 #15191a;
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
@apply grid grid-cols-1 mx-2 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 col-auto lt-md:gap-x-3 md:gap-x-6 gap-y-5;
|
||||
}
|
||||
* {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply py-2 lt-md:px-2 md:px-4 rounded cursor-pointer inline-block hover:bg-gray-500 hover:text-white;
|
||||
}
|
||||
hr {
|
||||
margin-top: 0.5rem !important;
|
||||
margin-bottom: 0.75rem !important;
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
.reset {
|
||||
@apply text-black bg-white;
|
||||
}
|
||||
.dark hr {
|
||||
border-color: var(--color-dark-100);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@apply text-white bg-dark-900;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select,
|
||||
.btn {
|
||||
@apply w-auto text-gray-600 bg-gray-300;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select {
|
||||
@apply h-8;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@apply h-4 w-4;
|
||||
}
|
||||
|
||||
.dark .input,
|
||||
.dark .select,
|
||||
.dark .btn {
|
||||
@apply text-gray-400 bg-dark-400;
|
||||
}
|
||||
|
||||
.dark .btn {
|
||||
@apply hover:bg-dark-300;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply px-2.5 rounded-md;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
@apply outline-red-500;
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
box-shadow: 0 0 15px rgba(239, 68, 68, 1);
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply !mt-2 !mb-3 border-gray-300;
|
||||
}
|
||||
|
||||
.dark hr {
|
||||
@apply border-dark-100;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
@apply m-0 font-bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply !text-5xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply !text-3xl;
|
||||
}
|
||||
|
||||
.table {
|
||||
@apply w-full text-lg text-left font-light border;
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply focus:text-red-500 hover:text-red-500;
|
||||
}
|
||||
|
||||
.link-secondary {
|
||||
@apply hover:text-dark-400 focus:text-dark-400 underline underline-dark-400;
|
||||
}
|
||||
|
||||
.dark .link {
|
||||
@apply focus:text-red-400 hover:text-red-400;
|
||||
}
|
||||
|
||||
.dark .link-secondary {
|
||||
@apply text-gray-300 hover:(text-gray-400 underline underline-gray-400);
|
||||
}
|
||||
|
||||
.line {
|
||||
@apply px-2.5 py-0.25 my-0.45 rounded-xl bg-dark-900;
|
||||
}
|
||||
|
||||
.dark .line {
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
.thumbnail-overlay {
|
||||
@apply rounded-md absolute bg-black text-white bg-opacity-75 px-5px;
|
||||
}
|
||||
|
||||
.thumbnail-right {
|
||||
@apply bottom-5px right-5px;
|
||||
}
|
||||
.thumbnail-left {
|
||||
@apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase;
|
||||
h2 {
|
||||
font-size: 1.875rem !important;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user