diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-08-08 16:14:03 +0200 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-08-08 18:24:35 +0200 |
| commit | ed167930896cee93523780675a05d971e16c1a43 (patch) | |
| tree | 2db7d8f56906a642ed485a7ba7cf5c23a1a2da34 /core/src/components/AppMenu.vue | |
| parent | e49c55df12349a12245f35f044eb443c59a52862 (diff) | |
| download | nextcloud-server-ed167930896cee93523780675a05d971e16c1a43.tar.gz nextcloud-server-ed167930896cee93523780675a05d971e16c1a43.zip | |
fix: Make focussed app menu entry wider to see full name
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'core/src/components/AppMenu.vue')
| -rw-r--r-- | core/src/components/AppMenu.vue | 16 |
1 files changed, 15 insertions, 1 deletions
diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue index 5317d7b5758..28b0cd3b67e 100644 --- a/core/src/components/AppMenu.vue +++ b/core/src/components/AppMenu.vue @@ -7,7 +7,8 @@ <nav ref="appMenu" class="app-menu" :aria-label="t('core', 'Applications menu')"> - <ul class="app-menu__list"> + <ul :aria-label="t('core', 'Apps')" + class="app-menu__list"> <AppMenuEntry v-for="app in mainAppList" :key="app.id" :app="app" /> @@ -112,6 +113,8 @@ export default defineComponent({ <style scoped lang="scss"> .app-menu { + // The size the currently focussed entry will grow to show the full name + --app-menu-entry-growth: calc(var(--default-grid-baseline) * 4); display: flex; flex: 1 1; width: 0; @@ -119,6 +122,17 @@ export default defineComponent({ &__list { display: flex; flex-wrap: nowrap; + margin-inline: calc(var(--app-menu-entry-growth) / 2); + transition: margin-inline var(--animation-quick) ease-in-out; + + // Remove padding if the first child is focussed + &:has(.app-menu-entry:hover:first-child, .app-menu-entry:focus-within:first-child) { + margin-inline: 0 calc(var(--app-menu-entry-growth) / 2); + } + // Remove padding if the last child is focussed + &:has(.app-menu-entry:hover:last-child, .app-menu-entry:focus-within:last-child) { + margin-inline: calc(var(--app-menu-entry-growth) / 2) 0; + } } &__overflow { |