chamomind/jws-frontend
chamomind/jws-frontend
6
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 <nav
class="row items-center no-wrap" class="row items-center no-wrap"
:class="{ :class="{
active: currentPath === sub.route, active: sub.route && currentPath.includes(sub.route),
disabled: sub.disabled, disabled: sub.disabled,
}" }"
> >

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

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