forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-02-18 02:55:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improving the UX of the sidebar on mobile (#228)

Browse Source 
* refactor: move the sidebar to the bottom of the viewport on mobile for better UX

* feat(sidepanel): add a function which checks the viewport size and determines whether the side panel should be shown by default
This commit is contained in:
Mario N. Nikolov 2026-01-19 21:48:31 +02:00 committed by GitHub
parent 7b9ad68ce7
commit bff5d7f267
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.tsx
View File

@ -187,13 +187,29 @@ function getArguments(location: H.Location<any>): Arguments {
? {id: indi, generation: !isNaN(parsedGen) ? parsedGen : 0} ? {id: indi, generation: !isNaN(parsedGen) ? parsedGen : 0}
: undefined; : undefined;
/**
* Determines whether the side panel should be shown taking into account the
* URL parameter and the viewport size.
*
* On mobile devices (max-width: 767px), the side panel is hidden by default.
* On tablet and desktop, the side panel is shown by default.
*/
function getShowSidePanel() {
if (window.matchMedia('(max-width: 767px)').matches) {
// On mobile, hide the side panel by default.
return getParam('sidePanel') === 'true';
}
// On tablet and desktop, show the side panel by default.
return getParam('sidePanel') !== 'false';
}
return { return {
sourceSpec, sourceSpec,
selection, selection,
// Hourglass is the default view. // Hourglass is the default view.
chartType: chartTypes.get(view) || ChartType.Hourglass, chartType: chartTypes.get(view) || ChartType.Hourglass,
showSidePanel: getParam('sidePanel') !== 'false', // True by default. showSidePanel: getShowSidePanel(),
standalone: getParam('standalone') !== 'false' && !embedded && !staticUrl, standalone: getParam('standalone') !== 'false' && !embedded && !staticUrl,
showWikiTreeMenus: getParam('showWikiTreeMenus') !== 'false', // True by default. showWikiTreeMenus: getParam('showWikiTreeMenus') !== 'false', // True by default.
freezeAnimation: getParam('freeze') === 'true', // False by default freezeAnimation: getParam('freeze') === 'true', // False by default

49
src/index.css
View File

@ -336,26 +336,49 @@ div.zoom {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
#sidebar.wide { #sidebar {
width: 100%; background-color: #fff;
} }
#sidebar.wide {
width: 100%;
top: 50%;
max-height: 50%;
}
/* Position the thin sidebar at the bottom. */
#sidebar.very.thin { #sidebar.very.thin {
width: 35px; right: unset !important;
left: unset !important;
bottom: 0;
width: 100%;
height: 42px !important;
top: auto;
}
/* Display the name horizontally. */
.collapsed-details .vertical-name {
writing-mode: unset;
transform: none;
}
/* Substitute the right arrow with a down arrow. */
#sidebar.wide i.icon.arrow.right:before {
content: "\f063";
}
/* Substitute the left arrow with an up arrow. */
#sidebar.very.thin i.icon.arrow.left:before {
content: "\f062";
} }
#content #sidebar.wide ~ .pusher { #content #sidebar.wide ~ .pusher {
width: 0; width: 100%;
height: 50%;
min-height: unset;
} }
#content #sidebar.very.thin ~ .pusher { #content #sidebar.very.thin ~ .pusher {
width: calc(100% - 35px); width: 100%;
} }
}
#sidebar.very.thin #sideToggle {
width: 35px;
}
}