chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: improve layout structure and enhance scroll functionality in ViewPage
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 7s
Details

Browse source
This commit is contained in:
puriphatt 2025-03-17 16:34:40 +07:00
parent 5a2419c205
commit d16428002d
2 changed files with 57 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/DrawerComponent.vue
View file

@ -364,7 +364,7 @@ onMounted(async () => {
<nav
class="row items-center no-wrap"
:class="{
active: currentPath === sub.route,
active: sub.route && currentPath.includes(sub.route),
disabled: sub.disabled,
}"
>

107
src/pages/00_manual/ViewPage.vue
View file

@ -102,8 +102,8 @@ async function scrollTo(id: string) {
</script>
<template>
<div class="col full-height scroll rounded">
<div v-if="content" style="display: flex" class="markdown">
<main class="row full-height q-gutter-sm">
<section v-if="content" class="markdown col scroll full-height rounded">
<div
:key="ts"
style="
@ -123,56 +123,61 @@ async function scrollTo(id: string) {
)
"
></div>
</div>
</section>
<div>
<q-scroll-area class="fit">
<q-list padding>
<template v-for="(token, idx) in contentParsed">
<q-item
class="tabNative"
active-class="text-blue-7 active-item text-weight-medium tabActive"
:active="active === token.attrGet('id')"
@click="scrollTo(token.attrGet('id') || '')"
v-if="token.tag === 'h2' && token.type === 'heading_open'"
clickable
v-ripple
dense
exact
>
<q-item-section>
<q-item-label>
<q-icon size="11px" name="mdi-circle-medium" />
<span class="q-pl-xs">
{{ contentParsed?.[idx + 1].content }}
</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="token.tag === 'h3' && token.type === 'heading_open'"
class="tabNative child-tab"
active-class="text-blue-7 active-item text-weight-medium tabActive"
:active="active === token.attrGet('id')"
@click="scrollTo(token.attrGet('id') || '')"
clickable
v-ripple
dense
exact
>
<q-item-section>
<q-item-label>
<span class="q-pl-xl">
{{ contentParsed?.[idx + 1].content }}
</span>
</q-item-label>
</q-item-section>
</q-item>
</template>
</q-list>
</q-scroll-area>
</div>
</div>
<section class="surface-1 rounded col-3 scroll full-height">
<q-list padding>
<template v-for="(token, idx) in contentParsed" :key="idx">
<q-item
v-if="token.tag === 'h2' && token.type === 'heading_open'"
class="tabNative"
active-class="text-blue-7 active-item text-weight-medium tabActive"
:active="active === token.attrGet('id')"
@click="scrollTo(token.attrGet('id') || '')"
clickable
v-ripple
dense
exact
>
<q-item-section>
<q-item-label>
<q-icon size="11px" name="mdi-circle-medium" />
<span class="q-pl-xs">
{{ contentParsed?.[idx + 1].content }}
</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="token.tag === 'h3' && token.type === 'heading_open'"
class="tabNative child-tab"
active-class="text-blue-7 active-item text-weight-medium tabActive"
:active="active === token.attrGet('id')"
@click="scrollTo(token.attrGet('id') || '')"
clickable
v-ripple
dense
exact
>
<q-item-section>
<q-item-label>
<span class="q-pl-xl">
{{ contentParsed?.[idx + 1].content }}
</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-ripple dense exact>
<q-item-label>
<q-icon size="11px" name="mdi-circle-medium" />
mocking
</q-item-label>
</q-item>
</template>
</q-list>
</section>
</main>
</template>
<style lang="css" scoped>