WIP: sub view heading adjustments

This commit is contained in:
Jose Olarte III
2025-10-01 18:38:43 +08:00
parent a6d282e59b
commit 88778a167c
3 changed files with 41 additions and 60 deletions

View File

@@ -1,6 +1,5 @@
<template> <template>
<QuickNav selected="Profile" /> <QuickNav selected="Profile" />
<TopMessage />
<!-- CONTENT --> <!-- CONTENT -->
<main <main
@@ -9,10 +8,19 @@
role="main" role="main"
aria-label="Account Profile" aria-label="Account Profile"
> >
<!-- Heading --> <!-- Main View Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light"> <div class="flex gap-4 items-center mb-8">
Your Identity <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
</h1> Your Identity
</h1>
<router-link
:to="{ name: 'help' }"
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
>
<font-awesome icon="question" class="block text-center w-[1em]" />
</router-link>
</div>
<!-- ID notice --> <!-- ID notice -->
<div <div

View File

@@ -1,26 +1,24 @@
<template> <template>
<!-- CONTENT --> <!-- CONTENT -->
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<div class="mb-2"> <!-- Sub View Heading -->
<h1 class="text-2xl text-center font-semibold relative px-7"> <div class="flex gap-4 items-center mb-8">
<!-- Back --> <!-- Back -->
<a <a class="text-lg text-center leading-none p-1" @click="handleBack">
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" <font-awesome icon="chevron-left" class="w-[1em]" />
@click="handleBack" </a>
>
<font-awesome icon="chevron-left" class="fa-fw" />
</a>
<!-- Quick Help -->
<a
class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
@click="toastQRCodeHelp()"
>
<font-awesome icon="circle-question" class="fa-fw" />
</a>
<h1 class="grow text-xl text-center font-semibold leading-none">
Share Contact Info Share Contact Info
</h1> </h1>
<!-- Quick Help -->
<a
class="block text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
@click="toastQRCodeHelp()"
>
<font-awesome icon="question" class="block text-center w-[1em]" />
</a>
</div> </div>
<div v-if="!givenName" :class="nameWarningClasses"> <div v-if="!givenName" :class="nameWarningClasses">

View File

@@ -14,45 +14,20 @@ Raymer * @version 1.0.0 */
:data-active-did="activeDid" :data-active-did="activeDid"
> >
<!-- Main View Heading --> <!-- Main View Heading -->
<div class="mb-12"> <div class="flex gap-4 items-center mb-8">
<div class="absolute top-0 inset-x-0"> <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
<div class="flex gap-4 items-center px-6 py-4 max-w-3xl mx-auto"> {{ AppString.APP_NAME }}
<h1 id="ViewHeading" class="text-2xl font-bold leading-none"> <span class="text-xs font-medium text-slate-500 uppercase">{{
{{ AppString.APP_NAME }} package.version
<span class="text-xs font-medium text-slate-500 uppercase">{{ }}</span>
package.version </h1>
}}</span>
</h1>
<router-link <router-link
:to="{ name: 'help' }" :to="{ name: 'help' }"
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full" class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
> >
<font-awesome icon="question" class="block text-center w-[1em]" /> <font-awesome icon="question" class="block text-center w-[1em]" />
</router-link> </router-link>
</div>
</div>
</div>
<!-- Main View Heading - Alternate Bar Design -->
<div v-if="false" class="mb-12">
<div class="absolute top-0 inset-x-0 bg-slate-200">
<div class="flex gap-2 items-center px-6 py-3 max-w-3xl mx-auto">
<h1 id="ViewHeading" class="text-2xl font-light leading-none">
{{ AppString.APP_NAME }}
<span class="text-xs font-medium text-slate-500 uppercase">{{
package.version
}}</span>
</h1>
<router-link
:to="{ name: 'help' }"
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
>
<font-awesome icon="question" class="block text-center w-[1em]" />
</router-link>
</div>
</div>
</div> </div>
<OnboardingDialog ref="onboardingDialog" /> <OnboardingDialog ref="onboardingDialog" />