💄 Optimized UI

This commit is contained in:
LittleSheep 2024-03-23 09:48:22 +08:00
parent b69ac44885
commit 31bf242587
4 changed files with 31 additions and 97 deletions

View File

@ -8,7 +8,7 @@
<p>One Solarpass, entire internet.</p>
</div>
<v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window-item value="confirm">
<div class="flex flex-col gap-2">
<v-expand-transition>

View File

@ -10,11 +10,8 @@
<div v-if="challenge" class="flex items-center gap-4">
<v-tooltip>
<template v-slot:activator="{ props }">
<v-progress-circular
v-bind="props"
size="large"
:model-value="(challenge?.progress / challenge?.requirements) * 100"
/>
<v-progress-circular v-bind="props" size="large"
:model-value="(challenge?.progress / challenge?.requirements) * 100" />
</template>
<p><b>Risk: </b> {{ challenge?.risk_level }}</p>
<p><b>Progress: </b> {{ challenge?.progress }}/{{ challenge?.requirements }}</p>
@ -24,16 +21,10 @@
<p v-else>Sign in via your Solar ID to access the entire Solar Network.</p>
</div>
<v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window-item v-for="k in Object.keys(panels)" :value="k">
<component
:is="panels[k]"
@swap="(val: string) => (panel = val)"
v-model:loading="loading"
v-model:factors="factors"
v-model:currentFactor="currentFactor"
v-model:challenge="challenge"
/>
<component :is="panels[k]" @swap="(val: string) => (panel = val)" v-model:loading="loading"
v-model:factors="factors" v-model:currentFactor="currentFactor" v-model:challenge="challenge" />
</v-window-item>
</v-window>
</v-card-text>

View File

@ -8,7 +8,7 @@
<p>Confirm your account to keep your account longer than 48 hours.</p>
</div>
<v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window-item value="confirm">
<div>
<v-expand-transition>

View File

@ -5,60 +5,28 @@
<v-form class="mt-1" @submit.prevent="submit">
<v-row dense>
<v-col :xs="12" :md="6">
<v-text-field
readonly
hide-details
label="Username"
density="comfortable"
variant="outlined"
v-model="data.name"
/>
<v-text-field readonly hide-details label="Username" density="comfortable" variant="outlined"
v-model="data.name" />
</v-col>
<v-col :xs="12" :md="6">
<v-text-field
hide-details
label="Nickname"
density="comfortable"
variant="outlined"
v-model="data.nick"
/>
<v-text-field hide-details label="Nickname" density="comfortable" variant="outlined"
v-model="data.nick" />
</v-col>
<v-col :cols="12">
<v-textarea
hide-details
label="Description"
density="comfortable"
variant="outlined"
v-model="data.description"
/>
<v-textarea hide-details label="Description" density="comfortable" variant="outlined"
v-model="data.description" />
</v-col>
<v-col :xs="12" :md="6" :lg="4">
<v-text-field
hide-details
label="First Name"
density="comfortable"
variant="outlined"
v-model="data.first_name"
/>
<v-text-field hide-details label="First Name" density="comfortable" variant="outlined"
v-model="data.first_name" />
</v-col>
<v-col :xs="12" :md="6" :lg="4">
<v-text-field
hide-details
label="Last Name"
density="comfortable"
variant="outlined"
v-model="data.last_name"
/>
<v-text-field hide-details label="Last Name" density="comfortable" variant="outlined"
v-model="data.last_name" />
</v-col>
<v-col :xs="12" :lg="4">
<v-text-field
hide-details
label="Birthday"
density="comfortable"
variant="outlined"
type="datetime-local"
v-model="data.birthday"
/>
<v-text-field hide-details label="Birthday" density="comfortable" variant="outlined" type="datetime-local"
v-model="data.birthday" />
</v-col>
</v-row>
@ -71,42 +39,17 @@
<v-card>
<v-card-text class="flex items-center gap-3">
<v-avatar
color="grey-lighten-2"
icon="mdi-account-circle"
class="rounded-card"
size="large"
:image="'/api/avatar/' + id.userinfo.data.avatar"
/>
<v-file-input
clearable
hide-details
label="Upload another avatar"
variant="outlined"
density="comfortable"
accept="image/*"
prepend-icon=""
append-icon="mdi-upload"
v-model="avatar"
@click:append="applyAvatar"
/>
<v-avatar color="grey-lighten-2" icon="mdi-account-circle" class="rounded-card" size="large"
:image="'/api/avatar/' + id.userinfo.data.avatar" />
<v-file-input clearable hide-details label="Upload another avatar" variant="outlined" density="comfortable"
accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="avatar" @click:append="applyAvatar" />
</v-card-text>
<v-img cover class="bg-grey-lighten-2" :height="320" :src="'/api/avatar/' + id.userinfo.data.banner" />
<v-card-text>
<v-file-input
clearable
hide-details
label="Update your banner"
variant="outlined"
density="compact"
accept="image/*"
prepend-icon=""
append-icon="mdi-upload"
v-model="banner"
@click:append="applyBanner"
/>
<v-file-input clearable hide-details label="Update your banner" variant="solo-filled" density="comfortable"
accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="banner" @click:append="applyBanner" />
</v-card-text>
</v-card>