matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Big layout changes.

Browse Source 
App now looks like an app.
This commit is contained in:
Robert Kossessa
2024-01-29 17:47:12 +01:00
parent 351f1435af
commit 82d9a8132f
9 changed files with 162 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/config/ConfigPane.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
class="flex-none px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
<div>
<h1 class="text-lg">
<ScrambleText class="align-middle" :text="$t(`config_options.${page}.title`)" />
@@ -11,7 +11,9 @@
</p>
</div>
</div>
<component :is="configPages[page]" />
<div class="overflow-y-auto">
<component :is="configPages[page]" />
</div>
</div>
</template>
<script setup>

4
src/components/device/DevicePreview.vue
View File

@@ -1,13 +1,13 @@
<template>
<div>
<div class="px-4 py-5">
<div class="px-4 pt-5 pb-3">
<h1 class="text-lg">
{{ $t('preview.title') }}
</h1>
</div>
<div class="flex justify-center">
<div
class="flex bg-cover m-6 w-full aspect-square"
class="flex bg-cover mb-6 w-72 aspect-square"
style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
<div class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
<div class="self-center w-8 mb-1 opacity-50">

2
src/components/profile/ProfileButton.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="h-12 flex profile-row"
class="h-12 flex"
@mouseenter="hover=true" @mouseleave="hover=false">
<form
v-if="nameEditable && editing"

30
src/components/profile/ProfileManager.vue
View File

@@ -1,18 +1,20 @@
<template>
<div>
<div
class="w-full px-4 h-20 flex items-center">
<div>
<h1 class="text-lg">
{{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
}})</span>
</h1>
<p class="text-xs text-muted-foreground">
{{ $t(`profiles.subtitle`) }}
</p>
<div>
<div
class="w-full px-4 h-20 flex items-center">
<div>
<h1 class="text-lg">
{{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
}})</span>
</h1>
<p class="text-xs text-muted-foreground">
{{ $t(`profiles.subtitle`) }}
</p>
</div>
</div>
<Separator />
</div>
<Separator />
<div>
<div class="flex w-full h-12 items-center">
<label for="filter" class="flex h-full items-center cursor-text">
@@ -22,13 +24,15 @@
id="filter"
v-model="filter"
:placeholder="$t('profiles.filter_placeholder')"
class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
<button
class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
<Plus />
</button>
</div>
<Separator />
</div>
<div class="overflow-y-auto">
<div v-if="filteredProfiles.length === 0">
<div class="flex flex-col items-center justify-center h-32">
<ScrambleText
@@ -36,7 +40,7 @@
:text="$t('profiles.not_found')" />
</div>
</div>
<div>
<div v-else>
<Collapsible
v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
v-model:open="collapse[profileTag]"