💄 Optimized UI
This commit is contained in:
		| @@ -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> | ||||
| @@ -141,12 +141,12 @@ async function approve() { | ||||
|   loading.value = true | ||||
|   const res = await request( | ||||
|     "/api/auth/o/connect?" + | ||||
|       new URLSearchParams({ | ||||
|         client_id: route.query["client_id"] as string, | ||||
|         redirect_uri: encodeURIComponent(route.query["redirect_uri"] as string), | ||||
|         response_type: "code", | ||||
|         scope: route.query["scope"] as string, | ||||
|       }), | ||||
|     new URLSearchParams({ | ||||
|       client_id: route.query["client_id"] as string, | ||||
|       redirect_uri: encodeURIComponent(route.query["redirect_uri"] as string), | ||||
|       response_type: "code", | ||||
|       scope: route.query["scope"] as string, | ||||
|     }), | ||||
|     { | ||||
|       method: "POST", | ||||
|       headers: { Authorization: `Bearer ${getAtk()}` }, | ||||
|   | ||||
| @@ -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> | ||||
|   | ||||
| @@ -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> | ||||
|   | ||||
| @@ -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> | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user