diff --git a/CHANGELOG.md b/CHANGELOG.md index 97ad64b..a9da417 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ ## [Unreleased] +## 6.0.1 + +### Added + +- feat(standard-menu): add unified-search-input size handling + +### Fixed + +- fix(ui): only apply always-displayed display css rules when the menu is displayed + ## 6.0.0 ### Added diff --git a/appinfo/info.xml b/appinfo/info.xml index ac89454..2f8750e 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -30,7 +30,7 @@ Notice Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**. In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/). ]]> - 6.0.0 + 6.0.1 agpl Simon Vieille SideMenu diff --git a/src/menus/StandardMenu.vue b/src/menus/StandardMenu.vue index 81b9ff9..c12e782 100644 --- a/src/menus/StandardMenu.vue +++ b/src/menus/StandardMenu.vue @@ -62,8 +62,9 @@ along with this program. If not, see . { const appLimit = () => { const headerStart = document.querySelector('#header .header-start') const headerEnd = document.querySelector('#header .header-end') + const unifiedSearch = document.querySelector('#header .unified-search-input') const body = document.querySelector('body') - let size = (headerEnd ? headerEnd.offsetWidth : 0) + 70 + let totalWidth = body.offsetWidth + let otherElementsWidth = headerEnd ? headerEnd.offsetWidth : 0 + + if (unifiedSearch && headerEnd.offsetWidth < unifiedSearch.offsetWidth) { + otherElementsWidth += unifiedSearch.offsetWidth + } + + let maxWidth = body.offsetWidth - otherElementsWidth if (headerStart) { Array.from(headerStart.children).forEach((child) => { if (child.id !== 'app-menu-container') { - size += child.offsetWidth + maxWidth -= child.offsetWidth } }) } - return Math.max(0, Math.floor((body.offsetWidth - size) / 70)) + return Math.max(0, Math.floor(maxWidth / 60)) } const makeStyle = (app) => { @@ -156,13 +165,9 @@ const makeStyle = (app) => { } const computeLists = () => { - mainAppList.value = appList.value.slice(0, appLimit()) - popoverAppList.value = appList.value.slice(appLimit()).sort((a, b) => a.order - b.order) -} - -const reComputeLists = (delay) => { - window.clearTimeout(resizeTimeout) - resizeTimeout = window.setTimeout(computeLists, delay || 100) + const limit = appLimit() + mainAppList.value = appList.value.slice(0, limit) + popoverAppList.value = appList.value.slice(limit).sort((a, b) => a.order - b.order) } onMounted(async () => { @@ -177,7 +182,7 @@ onMounted(async () => { setApps(await navStore.getCoreApps()) - window.addEventListener('resize', reComputeLists) + window.setInterval(computeLists, 100) }) diff --git a/src/scss/menu.scss b/src/scss/menu.scss index 097c002..5680536 100644 --- a/src/scss/menu.scss +++ b/src/scss/menu.scss @@ -363,6 +363,16 @@ right: 0 !important; margin-left: 0 !important; } + + #content { + left: 53px; + width: calc(100% - (var(--body-container-margin) * 2) - 62px); + } + + #content-vue { + width: calc(100% - (var(--body-container-margin) * 2) - 60px); + margin-left: 11px; + } } @media screen and (max-width: 1024px) { @@ -385,6 +395,16 @@ padding: 10px 0; } } + + #header { + .unified-search-input { + width: 80px !important; + + .unified-search-input__label { + display: none; + } + } + } } @media screen and (min-width: 1024px) { @@ -599,3 +619,9 @@ $header-icon-size: 20px; display: none; } } + +#header { + .unified-search-input:not(.unified-search-input--mobile) { + position: unset !important; + } +} diff --git a/templates/css/stylesheet.php b/templates/css/stylesheet.php index 5bdc08b..b670f53 100644 --- a/templates/css/stylesheet.php +++ b/templates/css/stylesheet.php @@ -117,15 +117,3 @@ body[data-theme-light], body[data-theme-light-highcontrast] { font-size: 16px; } - - - #content { - left: 53px; - width: calc(100% - (var(--body-container-margin) * 2) - 62px); - } - - #content-vue { - width: calc(100% - (var(--body-container-margin) * 2) - 60px); - margin-left: 11px; - } - diff --git a/webpack.config.js b/webpack.config.js index 0c16d61..5cfd868 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,6 +7,7 @@ const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') const TerserPlugin = require('terser-webpack-plugin') const appName = 'side_menu' +const appVersion = '6.x' const buildMode = process.env.NODE_ENV const isDev = buildMode === 'development' @@ -80,6 +81,7 @@ module.exports = { new webpack.DefinePlugin({ appName: JSON.stringify(appName), + appVersion: JSON.stringify(appVersion), }), ],