Skip to content

Commit ef5c5d5

Browse files
n0099n0099
committed
* no longer restrict the width of .post-pages to minus the width of scroll bar
* grow flex item `.renderer-list` with factor `3` when `vw < 1250px` * replace shorthand property `flex` with longhand `flex-basis` as other values is same as `.col` on `.renderer-list` when `vw >= 1250px` * restrict the min width of `.post-nav-wrapper` to take all remaining space after taken by `.renderer-list` and scroll bar when `vw >= 1400px` @ src/pages/posts.vue * wrapping root elements into a `div` to have only one flex item in its only usage in `src/pages/posts.vue` @ `<PostNav>` @ fe
1 parent 24a8a14 commit ef5c5d5

2 files changed

Lines changed: 55 additions & 47 deletions

File tree

‎fe/src/components/post/Nav.vue‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
11
<template>
2-
<nav
3-
class="post-nav col p-0 sticky-top border-0"
4-
:class="{ 'd-none': !isPostNavExpanded }" :aria-expanded="isPostNavExpanded">
5-
<AMenu
6-
v-model:selectedKeys="selectedThreads" v-model:openKeys="expandedPages" @click="selectThread($event)"
7-
forceSubMenuRender :inlineIndent="16" mode="inline">
8-
<template v-for="posts in data?.pages ?? []">
9-
<ASubMenu
10-
v-for="cursor in [posts.pages.currentCursor]"
11-
:key="pageMenuKey(cursor)" :eventKey="pageMenuKey(cursor)" :title="cursorTemplate(cursor)">
12-
<AMenuItem
13-
v-for="thread in posts.threads" :key="threadMenuKey(cursor, thread.tid)"
14-
ref="threadMenuItemsRef" :title="thread.title"
15-
:class="menuThreadClasses(thread)" class="post-nav-thread border ps-2 ps-lg-3 pe-1">
16-
{{ thread.title }}
17-
<div class="d-block btn-group p-1 text-wrap" role="group">
18-
<template v-for="reply in thread.replies" :key="reply.pid">
19-
<NuxtLink
20-
@click.prevent="navigate(cursor, reply)" :to="routeHash(reply)"
21-
:class="menuReplyClasses(cursor, reply)" class="post-nav-reply btn ms-0 px-2">
22-
{{ reply.floor }}L
23-
</NuxtLink>
24-
</template>
25-
</div>
26-
</AMenuItem>
27-
</ASubMenu>
28-
</template>
29-
</AMenu>
30-
</nav>
31-
<div
32-
:class="{
33-
'border-start': isPostNavExpanded,
34-
'border-end': !isPostNavExpanded
35-
}"
36-
class="post-nav-expand col-auto align-items-center d-flex sticky-top border-light-subtle">
37-
<a
38-
v-if="!hydrationStore.isHydratingOrSSR"
39-
@click="togglePostNavExpanded()" class="text-primary">
40-
<FontAwesome v-show="isPostNavExpanded" :icon="faAngleLeft" />
41-
<FontAwesome v-show="!isPostNavExpanded" :icon="faAngleRight" />
42-
</a>
2+
<div>
3+
<nav
4+
class="post-nav col p-0 sticky-top border-0"
5+
:class="{ 'd-none': !isPostNavExpanded }" :aria-expanded="isPostNavExpanded">
6+
<AMenu
7+
v-model:selectedKeys="selectedThreads" v-model:openKeys="expandedPages" @click="selectThread($event)"
8+
forceSubMenuRender :inlineIndent="16" mode="inline">
9+
<template v-for="posts in data?.pages ?? []">
10+
<ASubMenu
11+
v-for="cursor in [posts.pages.currentCursor]"
12+
:key="pageMenuKey(cursor)" :eventKey="pageMenuKey(cursor)" :title="cursorTemplate(cursor)">
13+
<AMenuItem
14+
v-for="thread in posts.threads" :key="threadMenuKey(cursor, thread.tid)"
15+
ref="threadMenuItemsRef" :title="thread.title"
16+
:class="menuThreadClasses(thread)" class="post-nav-thread border ps-2 ps-lg-3 pe-1">
17+
{{ thread.title }}
18+
<div class="d-block btn-group p-1 text-wrap" role="group">
19+
<template v-for="reply in thread.replies" :key="reply.pid">
20+
<NuxtLink
21+
@click.prevent="navigate(cursor, reply)" :to="routeHash(reply)"
22+
:class="menuReplyClasses(cursor, reply)" class="post-nav-reply btn ms-0 px-2">
23+
{{ reply.floor }}L
24+
</NuxtLink>
25+
</template>
26+
</div>
27+
</AMenuItem>
28+
</ASubMenu>
29+
</template>
30+
</AMenu>
31+
</nav>
32+
<div
33+
:class="{
34+
'border-start': isPostNavExpanded,
35+
'border-end': !isPostNavExpanded
36+
}"
37+
class="post-nav-expand col-auto align-items-center d-flex sticky-top border-light-subtle">
38+
<a
39+
v-if="!hydrationStore.isHydratingOrSSR"
40+
@click="togglePostNavExpanded()" class="text-primary">
41+
<FontAwesome v-show="isPostNavExpanded" :icon="faAngleLeft" />
42+
<FontAwesome v-show="!isPostNavExpanded" :icon="faAngleRight" />
43+
</a>
44+
</div>
4345
</div>
4446
</template>
4547

‎fe/src/pages/posts.vue‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</aside>
1313
<div v-if="!(data === undefined || _.isEmpty(data.pages))" class="container-fluid">
1414
<div class="row flex-nowrap">
15-
<PostNav v-if="renderType === 'list'" :queryParam="queryParam" />
15+
<PostNav v-if="renderType === 'list'" :queryParam="queryParam" class="col p-0 post-nav-wrapper" />
1616
<div
1717
class="post-pages col" :class="{
1818
'px-0': renderType === 'table',
@@ -150,19 +150,25 @@ parseRouteThenFetch(route, false);
150150
</script>
151151

152152
<style scoped>
153-
.post-pages {
154-
/* minus the inline-size of .post-nav-expand in <PostNav> to prevent overflow */
155-
inline-size: calc(100% - v-bind(scrollBarWidth));
156-
}
157153
@media (width < 576px) {
158154
.post-pages {
159155
padding-inline-end: 0;
160156
}
161157
}
158+
@media (width < 1250px) {
159+
.renderer-list {
160+
flex-grow: 3;
161+
}
162+
}
162163
@media (width >= 1250px) {
163164
.renderer-list {
164-
flex: 1 0 auto;
165+
flex-basis: auto;
165166
max-inline-size: 1000px;
166167
}
167168
}
169+
@media (width >= 1400px) {
170+
.post-nav-wrapper {
171+
min-inline-size: calc(1400px - 1000px - v-bind(scrollBarWidth))
172+
}
173+
}
168174
</style>

0 commit comments

Comments
 (0)