💄 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> <p>One Solarpass, entire internet.</p>
</div> </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"> <v-window-item value="confirm">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<v-expand-transition> <v-expand-transition>

View File

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

View File

@ -8,7 +8,7 @@
<p>Confirm your account to keep your account longer than 48 hours.</p> <p>Confirm your account to keep your account longer than 48 hours.</p>
</div> </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"> <v-window-item value="confirm">
<div> <div>
<v-expand-transition> <v-expand-transition>

View File

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