versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 💄 Add max width to settings pages

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-07-21 17:58:40 +02:00
parent ddfa3b050d
commit 4e370cd056
No known key found for this signature in database
2 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/settings/renderer.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100"> <div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100 h-full">
<div class="max-w-7xl mx-auto h-full">
<Switch.Root v-model:checked="checked" class="grid grid-cols-[1fr_auto] gap-x-4" <Switch.Root v-model:checked="checked" class="grid grid-cols-[1fr_auto] gap-x-4"
@click="setting.notImplemented ? $event.preventDefault() : undefined" @click="setting.notImplemented ? $event.preventDefault() : undefined"
v-if="setting.type === SettingType.Boolean" @update:checked="c => checked = c"> v-if="setting.type === SettingType.Boolean" @update:checked="c => checked = c">
@ -8,7 +9,8 @@
{{ {{
setting.title setting.title
}}</Switch.Label> }}</Switch.Label>
<p v-if="setting.notImplemented" class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented <p v-if="setting.notImplemented" class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not
implemented
</p> </p>
<p v-else :data-disabled="setting.notImplemented ? '' : undefined" <p v-else :data-disabled="setting.notImplemented ? '' : undefined"
class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{ class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
@ -23,11 +25,13 @@
<Switch.HiddenInput /> <Switch.HiddenInput />
</Switch.Root> </Switch.Root>
<div v-else class="grid grid-cols-[1fr_auto] gap-x-4"> <div v-else class="grid grid-cols-[1fr_auto] gap-x-4">
<h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title }} <h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
}}
</h4> </h4>
<p class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented</p> <p class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented</p>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

2
components/sidebars/navigation.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<aside <aside
class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500" class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
aria-label="Navigation" role="complementary"> aria-label="Navigation" role="complementary">
<NuxtLink href="/"> <NuxtLink href="/">
<img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200" <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"