Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix top navigation positioning when window is resized #13007

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Fix top navigation positioning when window is resized #13007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87c221c
Add breakpointLimit and showTopNavBar data props to control NavBar po…
LianaHarris360 Jan 15, 2025
984a76b
Add a window resize listener to AppBarPage to adjust appBarHeight to …
LianaHarris360 Jan 15, 2025
d1bb439
Move event listeners to mounted() and add comment + descriptive varia…
LianaHarris360 Jan 31, 2025
8a29723
Use window width threshold instead of windowBreakpoint to determine N…
LianaHarris360 Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions packages/kolibri/components/pages/AppBarPage/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,9 @@
},
mixins: [commonCoreStrings],
setup() {
const { windowBreakpoint, windowIsSmall } = useKResponsiveWindow();
const { windowIsSmall } = useKResponsiveWindow();
const { isAppContext } = useUser();
return {
windowBreakpoint,
windowIsSmall,
isAppContext,
};
Expand Down Expand Up @@ -146,20 +145,17 @@
return show;
},
},
watch: {
windowBreakpoint() {
//Update the the app bar height at every breakpoint
this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
},
beforeUpdate() {
// Update appBarHeight after AppBar is rerendered and updated
this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
},
mounted() {
this.$nextTick(() => {
this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
});
this.addScrollListener();
window.addEventListener('resize', this.handleWindowResize);
},
beforeUnmount() {
beforeDestroy() {
this.removeScrollListener();
window.removeEventListener('resize', this.handleWindowResize);
},
methods: {
addScrollListener() {
Expand Down Expand Up @@ -190,6 +186,10 @@
this.throttledHandleScroll = null;
}
},
handleWindowResize() {
// Update the app bar height when window is resized
this.appBarHeight = this.$refs.appBar.$el.offsetHeight || 0;
},
},
};

Expand Down
38 changes: 31 additions & 7 deletions packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<div
v-show="!$isPrint"
ref="appBar"
:style="{
backgroundColor: themeConfig.appBar.background,
color: themeConfig.appBar.textColor,
Expand All @@ -23,7 +24,11 @@
:removeBrandDivider="true"
>
<KTextTruncator
:text="windowIsSmall ? truncateText(title, 20) : truncateText(title, 50)"
:text="
windowIsMedium
? truncateText(title, smallScreensMaxTitleLength)
: truncateText(title, 50)
"
:maxLines="1"
/>
<template
Expand All @@ -49,7 +54,7 @@
</template>

<template
v-if="showNavigation && windowIsLarge"
v-if="showNavigation && showTopNavBar"
#navigation
>
<slot name="sub-nav">
Expand Down Expand Up @@ -116,7 +121,7 @@
</KToolbar>
</header>
<div
v-if="showNavigation && !windowIsLarge && !showAppNavView"
v-show="showNavigation && !showAppNavView && !showTopNavBar"
class="subpage-nav"
>
<slot name="sub-nav">
Expand Down Expand Up @@ -160,7 +165,7 @@
setup() {
const store = getCurrentInstance().proxy.$store;
const $route = computed(() => store.state.route);
const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
const { windowIsSmall, windowIsMedium } = useKResponsiveWindow();
const { topBarHeight, navItems } = useNav();
const { isLearner, isUserLoggedIn, username, full_name } = useUser();
const { totalPoints, fetchPoints } = useTotalProgress();
Expand All @@ -178,8 +183,8 @@
});
return {
themeConfig,
windowIsLarge,
windowIsSmall,
windowIsMedium,
topBarHeight,
links,
isUserLoggedIn,
Expand Down Expand Up @@ -207,6 +212,11 @@
data() {
return {
pointsDisplayed: false,
showTopNavBar: false,
// Limit for title length on small screens to hide overflow menu button
smallScreensMaxTitleLength: 20,
appBarWidth: 0,
widthThreshold: 1600,
};
},
computed: {
Expand All @@ -219,12 +229,22 @@
if (this.isLearner) {
this.fetchPoints();
}
window.addEventListener('click', this.handleWindowClick);
window.addEventListener('keydown', this.handlePopoverByKeyboard, true);
Copy link
Member

@akolson akolson Jan 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably out of scope for this fix, but might be worth using the opportunity to move the event additions to the mounted hook instead? Unless there are strong opinions one why it was done that way :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not against moving these event listeners to the mounted hook instead, I will update the PR with this change.

},
beforeUpdate() {
// Essential for title updates after data finishes loading
this.widthThreshold =
this.title && this.title.length >= this.smallScreensMaxTitleLength ? 1600 : 1350;
},
beforeDestroy() {
window.removeEventListener('click', this.handleWindowClick);
window.removeEventListener('keydown', this.handlePopoverByKeyboard, true);
window.removeEventListener('resize', this.handleWindowResize);
},
mounted() {
window.addEventListener('click', this.handleWindowClick);
window.addEventListener('keydown', this.handlePopoverByKeyboard, true);
window.addEventListener('resize', this.handleWindowResize);
this.handleWindowResize();
},
methods: {
handleWindowClick(event) {
Expand All @@ -246,6 +266,10 @@
this.pointsDisplayed = false;
}
},
handleWindowResize() {
this.appBarWidth = this.$refs.appBar.clientWidth;
this.showTopNavBar = this.appBarWidth > this.widthThreshold;
},
truncateText(value, maxLength) {
if (value && value.length > maxLength) {
return value.substring(0, maxLength) + '...';
Expand Down