versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-01-26 12:26:02 +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>
<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"
@click="setting.notImplemented ? $event.preventDefault() : undefined"
v-if="setting.type === SettingType.Boolean" @update:checked="c => checked = c">
@ -8,7 +9,8 @@
{{
setting.title
}}</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 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">{{
@ -23,11 +25,13 @@
<Switch.HiddenInput />
</Switch.Root>
<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>
<p class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented</p>
</div>
</div>
</div>
</template>
<script lang="ts" setup>

2
components/sidebars/navigation.vue
View file

@ -1,6 +1,6 @@
<template>
<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">
<NuxtLink href="/">
<img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"