flightsimulatorplatfrom/OpenSquawk
1
0
Fork 0
mirror of https://github.com/OpenSquawk/OpenSquawk synced 2026-08-11 03:45:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make classroom intro skip action more visible

Browse Source
This commit is contained in:
itsrubberduck
2026-07-22 21:41:21 +02:00
parent af59c2a1cf
commit 87bf320512
1 changed files with 53 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/pages/classroom-introduction.vue
View File

@@ -163,10 +163,17 @@
</p> </p>
<NuxtLink <NuxtLink
to="/classroom" to="/classroom"
class="mt-4 block text-center text-xs text-white/30 transition hover:text-white/60" class="skip-classroom mt-5"
@click="handleClassroomEntry" @click="handleClassroomEntry"
> >
Skip to Classroom <span class="skip-classroom__icon" aria-hidden="true">
<v-icon icon="mdi-skip-forward-circle-outline" size="22" />
</span>
<span class="text-left">
<span class="block text-sm font-semibold">Skip orientation</span>
<span class="mt-0.5 block text-xs">Go straight to the Classroom hub</span>
</span>
<v-icon icon="mdi-arrow-right" size="20" class="skip-classroom__arrow" aria-hidden="true" />
</NuxtLink> </NuxtLink>
</div> </div>
</div> </div>
@@ -964,6 +971,50 @@ onBeforeUnmount(() => {
text-transform: uppercase; text-transform: uppercase;
} }
.skip-classroom {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, #67e8f9 42%, transparent);
border-radius: 14px;
background: color-mix(in srgb, #22d3ee 10%, transparent);
color: rgb(207 250 254 / 0.9);
text-decoration: none;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
.skip-classroom:hover,
.skip-classroom:focus-visible {
border-color: rgb(103 232 249 / 0.85);
background: color-mix(in srgb, #22d3ee 18%, transparent);
color: #ecfeff;
transform: translateY(-1px);
}
.skip-classroom:focus-visible {
outline: 2px solid #67e8f9;
outline-offset: 3px;
}
.skip-classroom__icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgb(103 232 249 / 0.14);
color: #a5f3fc;
}
.skip-classroom__arrow {
flex: 0 0 auto;
margin-left: auto;
}
.progress-fill { .progress-fill {
height: 0.5rem; height: 0.5rem;
border-radius: 9999px; border-radius: 9999px;