estel/play
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor classes

Browse Source
This commit is contained in:
Nicola Spadari
2024-06-16 23:07:18 +02:00
parent ba240a9faa
commit 7308ad03cb
17 changed files with 133 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/app.vue
View File

@@ -1,38 +1,36 @@
<template> <template>
<Body bg-dark-800 text-white> <Html min-h-screen>
<NuxtLayout> <Body overflow-x-hidden bg-dark-800 text-white>
<NuxtPage /> <NuxtLayout>
</NuxtLayout> <NuxtPage />
</Body> </NuxtLayout>
</Body>
</Html>
</template> </template>
<style lang="scss"> <style lang="scss">
html { html {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
scroll-behavior: smooth; scroll-behavior: smooth;
@apply min-h-screen; }
} img {
body { -webkit-user-drag: none;
@apply overflow-x-hidden; @apply select-none;
} }
img {
-webkit-user-drag: none;
@apply select-none;
}
// Transitions // Transitions
.page-enter-active, .page-enter-active,
.page-leave-active { .page-leave-active {
@apply transition-opacity ease-in-out duration-300; @apply transition-opacity ease-in-out duration-300;
} }
.layout-enter-active, .layout-enter-active,
.layout-leave-active { .layout-leave-active {
@apply transition-opacity ease-in-out duration-500; @apply transition-opacity ease-in-out duration-500;
} }
.page-enter-from, .page-enter-from,
.page-leave-to, .page-leave-to,
.layout-enter-from, .layout-enter-from,
.layout-leave-to { .layout-leave-to {
@apply opacity-0; @apply opacity-0;
} }
</style> </style>

10
src/components/Design/BottomBlob.vue
View File

@@ -1,5 +1,11 @@
<template> <template>
<div class="pointer-events-none absolute inset-x-0 top-1/5 transform-gpu blur-3xl -z-10" aria-hidden="true"> <div pointer-events-none absolute inset-x-0 top="1/5" transform-gpu blur-3xl z="-10" aria-hidden="true">
<div class="relative left-[calc(50%+36rem)] aspect-[1155/678] w-[72.1875rem] from-[#00DC82] to-[#FFC131] bg-gradient-to-tr opacity-30 -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" /> <div class="blob" relative left="[calc(50%+36rem)]" aspect="[1155/678]" w="[72.1875rem]" from-emerald-500 to-amber-400 bg-gradient-to-tr opacity-30 translate-x="-1/2" />
</div> </div>
</template> </template>
<style scoped>
.blob{
clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%);
}
</style>

10
src/components/Design/TopBlob.vue
View File

@@ -1,5 +1,11 @@
<template> <template>
<div class="pointer-events-none absolute inset-x-0 transform-gpu blur-3xl -top-1/4 -z-10" aria-hidden="true"> <div pointer-events-none absolute inset-x-0 transform-gpu blur-3xl top="-1/4" z="-10" aria-hidden="true">
<div class="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[72.1875rem] rotate-[30deg] from-[#FFC131] to-[#00DC82] bg-gradient-to-tr opacity-30 -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" /> <div class="blob" relative left="[calc(50%-30rem)]" aspect="[1155/678]" w="[72.1875rem]" rotate-30 from-amber-400 to-emerald-500 bg-gradient-to-tr opacity-30 translate-x="-1/2" />
</div> </div>
</template> </template>
<style scoped>
.blob{
clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%);
}
</style>

12
src/components/Layout/Tile.vue
View File

@@ -1,16 +1,16 @@
<template> <template>
<div class="grid grid-cols-1 lg:grid-cols-2"> <div grid grid-cols-1 lg="grid-cols-2">
<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16"> <div px-6 pb-10 pt-12 lg="px-8 pt-22" sm="pt-16">
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg"> <div mx-auto max-w-xl lg="mx-0 max-w-lg">
<h2 class="text-3xl text-white font-bold tracking-tight"> <h2 text-3xl text-white font-bold tracking-tight>
{{ props.title }} {{ props.title }}
</h2> </h2>
<p class="mt-6 text-lg text-gray-300 leading-8"> <p mt-6 text-lg text-gray-300 leading-8>
{{ props.description }} {{ props.description }}
</p> </p>
</div> </div>
</div> </div>
<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16"> <div px-6 pb-10 pt-12 lg="px-8 pt-22" sm="pt-16">
<slot /> <slot />
</div> </div>
</div> </div>

5
src/components/NavLink.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<NuxtLink lg="inline text-sm py-0" text-white font-semibold leading-6 py-2 block>
<slot />
</NuxtLink>
</template>

30
src/components/Site/Navbar.vue
View File

@@ -1,33 +1,32 @@
<template> <template>
<header class="top-0 z-10"> <header top-0 z-10>
<nav flex items-center justify-between py-6 crate> <nav flex items-center justify-between py-6 crate>
<div class="flex lg:flex-1"> <div flex lg="flex-1">
<NuxtLink to="/" class="home p-1.5 -m-1.5"> <NuxtLink to="/" class="home" p-1.5 m="-1.5">
<span class="sr-only">{{ name }}</span>
<SvgoLogo :font-controlled="false" size-8 /> <SvgoLogo :font-controlled="false" size-8 />
</NuxtLink> </NuxtLink>
</div> </div>
<div class="flex lg:hidden"> <div flex lg="hidden">
<button type="button" @click="showSidebar = true" class="inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 -m-2.5"> <button type="button" @click="showSidebar = true" inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 m="-2.5">
<i-heroicons-solid-bars-3 size-6 /> <i-heroicons-solid-bars-3 size-6 />
</button> </button>
</div> </div>
<div hidden lg="flex gap-x-12"> <div hidden lg="flex gap-x-12">
<NuxtLink to="/commands" class="text-sm text-white font-semibold leading-6"> <NavLink to="/commands">
Commands Commands
</NuxtLink> </NavLink>
<NuxtLink to="/notifications" class="text-sm text-white font-semibold leading-6"> <NavLink to="/notifications">
Notifications Notifications
</NuxtLink> </NavLink>
<NuxtLink to="/os" class="text-sm text-white font-semibold leading-6"> <NavLink to="/os">
OS Informations OS Informations
</NuxtLink> </NavLink>
<NuxtLink to="/foo" class="text-sm text-white font-semibold leading-6"> <NavLink to="/foo">
404 404
</NuxtLink> </NavLink>
</div> </div>
<div hidden lg="flex flex-1 justify-end"> <div hidden lg="flex flex-1 justify-end">
<p class="text-sm text-white font-semibold leading-6"> <p text-sm text-white font-semibold leading-6>
v{{ tauriVersion }} v{{ tauriVersion }}
</p> </p>
</div> </div>
@@ -36,7 +35,6 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const { name } = useConstants();
const { showSidebar } = useSidebar(); const { showSidebar } = useSidebar();
const tauriVersion = await getTauriVersion(); const tauriVersion = await getTauriVersion();
</script> </script>

38
src/components/Site/Sidebar.vue
View File

@@ -3,35 +3,35 @@
enter-from-class="opacity-0" enter-active-class="ease-in-out duration-500" enter-to-class="opacity-100" enter-from-class="opacity-0" enter-active-class="ease-in-out duration-500" enter-to-class="opacity-100"
leave-from-class="opacity-100" leave-active-class="ease-in-out duration-500" leave-to-class="opacity-0" leave-from-class="opacity-100" leave-active-class="ease-in-out duration-500" leave-to-class="opacity-0"
> >
<div v-if="showSidebar" class="relative z-20 lg:hidden" role="dialog" aria-modal="true"> <div v-if="showSidebar" relative z-20 lg="hidden" role="dialog" aria-modal="true">
<div class="fixed inset-0 overflow-hidden"> <div fixed inset-0 overflow-hidden>
<div class="h-full flex flex-col overflow-y-auto bg-neutral-800/70 px-4 py-6 backdrop-blur-md"> <div crate h-full flex flex-col overflow-y-auto bg="neutral-800/70" py-6 backdrop-blur-md>
<div class="flex items-center justify-between"> <div flex items-center justify-between>
<NuxtLink to="/" class="p-1.5 -m-1.5"> <NuxtLink to="/" p-1.5 m="-1.5">
<SvgoLogo :filled="true" :font-controlled="false" size-8 /> <SvgoLogo :filled="true" :font-controlled="false" size-8 />
</NuxtLink> </NuxtLink>
<button type="button" class="rounded-md p-2.5 text-neutral-300 -m-2.5" @click="showSidebar = false"> <button type="button" rounded-md p-2.5 text-neutral-300 m="2.5" @click="showSidebar = false">
<i-heroicons-solid-x-mark size-6 /> <i-heroicons-solid-x-mark size-6 />
</button> </button>
</div> </div>
<div class="mt-6 flow-root"> <div mt-6 flow-root>
<div class="-my-6 divide-y divide-gray-500/25"> <div my="-6" divide-y divide="gray-500/25">
<div class="py-6 space-y-2"> <div py-6 space-y-2>
<NuxtLink to="/commands" class="block px-3 py-2 text-base text-white font-semibold leading-7 -mx-3"> <NavLink to="/commands">
Commands Commands
</NuxtLink> </NavLink>
<NuxtLink to="/notifications" class="block px-3 py-2 text-base text-white font-semibold leading-7 -mx-3"> <NavLink to="/notifications">
Notifications Notifications
</NuxtLink> </NavLink>
<NuxtLink to="/os" class="block px-3 py-2 text-base text-white font-semibold leading-7 -mx-3"> <NavLink to="/os">
OS Informations OS Informations
</NuxtLink> </NavLink>
<NuxtLink to="/foo" class="block px-3 py-2 text-base text-white font-semibold leading-7 -mx-3"> <NavLink to="/foo">
404 404
</NuxtLink> </NavLink>
</div> </div>
<div class="py-6"> <div py-6>
<p class="px-3 text-base text-white font-semibold leading-7 -mx-3"> <p px-3 text-base text-white font-semibold leading-7 mx="-3">
v{{ tauriVersion }} v{{ tauriVersion }}
</p> </p>
</div> </div>

6
src/components/Tab/Row.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div px-4 py-6 sm="grid grid-cols-3 gap-4 px-6">
<dt class="flex items-center text-sm text-light-200 font-medium"> <dt flex items-center text-sm text-light-200 font-medium>
{{ props.heading }} {{ props.heading }}
</dt> </dt>
<dd class="flex items-center text-sm text-neutral-300 leading-6 sm:col-span-2 sm:mt-0"> <dd flex items-center text-sm text-neutral-300 leading-6 sm="col-span-2 mt-0">
{{ props.body }} {{ props.body }}
</dd> </dd>
</div> </div>

4
src/layouts/blank.vue
View File

@@ -1,6 +1,8 @@
<template> <template>
<div> <div>
<SiteNavbar /> <SiteNavbar sticky />
<SiteSidebar />
<slot /> <slot />
</div> </div>
</template> </template>

1
src/layouts/default.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div> <div>
<SiteNavbar sticky /> <SiteNavbar sticky />
<SiteSidebar />
<div crate> <div crate>
<slot /> <slot />

2
src/layouts/home.vue
View File

@@ -3,7 +3,7 @@
<SiteNavbar class="fixed w-full" /> <SiteNavbar class="fixed w-full" />
<SiteSidebar /> <SiteSidebar />
<div relative isolate overflow-hidden px-6 lg="px-8"> <div relative overflow-hidden px-6 lg="px-8">
<DesignTopBlob /> <DesignTopBlob />
<DesignBottomBlob /> <DesignBottomBlob />

16
src/pages/[...all].vue
View File

@@ -1,22 +1,22 @@
<template> <template>
<main class="grid place-items-center px-6 py-24 lg:px-8 sm:py-32"> <div grid place-items-center px-6 py-24 sm="py-32" lg="px-8">
<div class="text-center"> <div text-center>
<p class="text-base text-emerald-500 font-semibold"> <p text-base text-emerald-500 font-semibold>
404 404
</p> </p>
<h1 class="mt-4 text-3xl text-neutral-300 font-bold tracking-tight sm:text-5xl"> <h1 mt-4 text-3xl text-neutral-300 font-bold tracking-tight sm="text-5xl">
Page not found Page not found
</h1> </h1>
<p class="mt-6 text-base text-neutral-400 leading-7"> <p mt-6 text-base text-neutral-400 leading-7>
Sorry, we couldn't find the page you're looking for. Sorry, we couldn't find the page you're looking for.
</p> </p>
<div class="mt-10 flex items-center justify-center gap-x-6"> <div mt-10 flex items-center justify-center gap-x-6>
<Hyperlink to="/"> <Hyperlink to="/" px-7>
Back Back
</Hyperlink> </Hyperlink>
</div> </div>
</div> </div>
</main> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

18
src/pages/commands.vue
View File

@@ -4,23 +4,23 @@
description="Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application." description="Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application."
> >
<form @submit.prevent="sendCommand()"> <form @submit.prevent="sendCommand()">
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg"> <div mx-auto max-w-xl lg="mr-0 max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6"> <div grid grid-cols-1 gap-x-8 gap-y-6>
<div> <div>
<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label> <label for="command-input" block text-sm text-white font-semibold leading-6>Command input</label>
<div class="mt-2.5"> <div mt="2.5">
<input id="command-input" v-model="input" type="text" name="command-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset"> <input id="command-input" v-model="input" type="text" name="command-input" block w-full border-0 rounded-md bg="white/5" px="3.5" py-2 text-white shadow-sm ring-1 ring="white/10" ring-inset sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset">
</div> </div>
</div> </div>
<div class="flex justify-end"> <div flex justify-end>
<Btn type="submit"> <Btn type="submit">
Send command Send command
</Btn> </Btn>
</div> </div>
<div mt-8> <div mt-8>
<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label> <label for="command-output" block text-sm text-white font-semibold leading-6>Command Output</label>
<div class="mt-2.5"> <div mt="2.5">
<textarea id="command-output" v-model="result" name="command-output" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-indigo-500 focus:ring-inset" /> <textarea id="command-output" v-model="result" name="command-output" rows="10" block w-full border-0 rounded-md bg="white/5" px="3.5" py-2 text-white shadow-sm ring-1 ring="white/10" ring-inset sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset" />
</div> </div>
</div> </div>
</div> </div>

8
src/pages/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div relative isolate overflow-hidden px-6 lg="px-8"> <div relative overflow-hidden px-6 lg="px-8">
<div grid mx-auto h-screen max-w-2xl place-content-center> <div grid mx-auto h-screen max-w-2xl place-content-center>
<SvgoLogo :filled="true" :font-controlled="false" mx-auto mb-8 size-40 /> <SvgoLogo :filled="true" :font-controlled="false" mx-auto mb-8 size-40 />
@@ -23,11 +23,15 @@
</p> </p>
<div mt-15> <div mt-15>
<Hyperlink :to="repo"> <Hyperlink :to="repo">
Made by {{ author }} Star on GitHub
</Hyperlink> </Hyperlink>
</div> </div>
</div> </div>
</div> </div>
<div fixed text-sm bottom-6 absolute-center-h>
<p text-sm text-neutral-500>Made by {{ author }}</p>
</div>
</div> </div>
</template> </template>

14
src/pages/notifications.vue
View File

@@ -7,15 +7,15 @@
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg"> <div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6"> <div class="grid grid-cols-1 gap-x-8 gap-y-6">
<div> <div>
<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label> <label for="notification-title" block text-sm text-white font-semibold leading-6>Notification title</label>
<div class="mt-2.5"> <div mt="2.5">
<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset"> <input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" block w-full border-0 rounded-md bg="white/5" px="3.5" py-2 text-white shadow-sm ring-1 ring="white/10" ring-inset sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset">
</div> </div>
</div> </div>
<div> <div>
<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label> <label for="notification-body" block text-sm text-white font-semibold leading-6>Notification body</label>
<div class="mt-2.5"> <div mt="2.5">
<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset"> <input id="notification-body" v-model="notificationBody" type="text" name="notification-body" block w-full border-0 rounded-md bg="white/5" px="3.5" py-2 text-white shadow-sm ring-1 ring="white/10" ring-inset sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset">
</div> </div>
</div> </div>
@@ -25,7 +25,7 @@
</Btn> </Btn>
</div> </div>
<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6"> <p v-if="permissionError" mt-3 text-right text-sm text-red-500 font-semibold leading-6>
Missing permissions Missing permissions
</p> </p>
</div> </div>

4
src/pages/os.vue
View File

@@ -3,8 +3,8 @@
title="OS Information" title="OS Information"
description="Read information about the operating system using the OS Information plugin." description="Read information about the operating system using the OS Information plugin."
> >
<div class="overflow-hidden bg-neutral-800 shadow sm:rounded-lg"> <div overflow-hidden bg-neutral-800 shadow rounded-lg>
<dl class="divide-y divide-neutral-600"> <dl divide-y divide-neutral-600>
<TabRow heading="Platform" :body="`${currentPlatform} ${currentVersion}`" /> <TabRow heading="Platform" :body="`${currentPlatform} ${currentVersion}`" />
<TabRow heading="Arch" :body="currentArch" /> <TabRow heading="Arch" :body="currentArch" />
<TabRow heading="Locale" :body="currentLocale" /> <TabRow heading="Locale" :body="currentLocale" />

4
uno.config.ts
View File

@@ -13,7 +13,9 @@ import {
export default defineConfig({ export default defineConfig({
shortcuts: [ shortcuts: [
["crate", "mx-auto max-w-7xl px-4 lg:px-8 sm:px-6"], ["crate", "mx-auto max-w-7xl px-4 lg:px-8 sm:px-6"],
["flex-center", "flex justify-center items-center"] ["flex-center", "flex justify-center items-center"],
["absolute-center-h", "left-50% transform -translate-x-50%"],
["absolute-center-v", "top-50% transform -translate-y-50%"]
], ],
presets: [ presets: [
presetUno(), presetUno(),