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),
}),
],