diff options
| author | John Molakvoæ <skjnldsv@protonmail.com> | 2022-02-28 14:34:30 +0100 |
|---|---|---|
| committer | nextcloud-command <nextcloud-command@users.noreply.github.com> | 2022-02-28 13:46:03 +0000 |
| commit | 8c969085acddb2ebd543d4ca76d3f9f17b90e332 (patch) | |
| tree | a3f734cfcceb302d0c4de72aa7879cd575926847 /apps | |
| parent | 49a7d9b7d3f798bed864a15efb0d7c19905c0b97 (diff) | |
| download | nextcloud-server-8c969085acddb2ebd543d4ca76d3f9f17b90e332.tar.gz nextcloud-server-8c969085acddb2ebd543d4ca76d3f9f17b90e332.zip | |
Apps toolbar height and alignment fix
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/settings/css/settings.scss | 16 | ||||
| -rw-r--r-- | apps/settings/src/components/AppList.vue | 7 | ||||
| -rw-r--r-- | apps/settings/src/views/Apps.vue | 30 |
3 files changed, 34 insertions, 19 deletions
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index 87478983644..e2b9099f5d3 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -1021,6 +1021,9 @@ span.version { } .apps-list { + $toolbar-padding: 8px; + $toolbar-height: 44px + $toolbar-padding * 2; + .section { cursor: pointer; } @@ -1033,14 +1036,17 @@ span.version { margin-left: 10px; } - .counter { - padding-left: $header-height; - padding-top: 10px; + .toolbar { + height: $toolbar-height; + padding: $toolbar-padding; + // Leave room for app-navigation-toggle + padding-left: $toolbar-height; width: 100%; background-color: var(--color-main-background); position: fixed; z-index: 1; - height: $header-height + 10px; + display: flex; + align-items: center; } &.installed { @@ -1048,7 +1054,7 @@ span.version { display: table; width: 100%; height: auto; - margin-top: $header-height + 10px; + margin-top: $toolbar-height; } margin-bottom: 100px; diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue index 31d85e51092..d32f3b08102 100644 --- a/apps/settings/src/components/AppList.vue +++ b/apps/settings/src/components/AppList.vue @@ -24,7 +24,7 @@ <div id="app-content-inner"> <div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}"> <template v-if="useListView"> - <div v-if="showUpdateAll" class="counter"> + <div v-if="showUpdateAll" class="toolbar"> {{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }} <Button v-if="showUpdateAll" id="app-list-update-all" @@ -33,9 +33,11 @@ {{ t('settings', 'Update all') }} </Button> </div> - <div v-if="!showUpdateAll" class="counter"> + + <div v-if="!showUpdateAll" class="toolbar"> {{ t('settings', 'All apps are up-to-date.') }} </div> + <transition-group name="app-list" tag="div" class="apps-list-container"> <AppItem v-for="app in apps" :key="app.id" @@ -43,6 +45,7 @@ :category="category" /> </transition-group> </template> + <transition-group v-if="useBundleView" name="app-list" tag="div" diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue index eb6d85795bf..6bbd1008f54 100644 --- a/apps/settings/src/views/Apps.vue +++ b/apps/settings/src/views/Apps.vue @@ -361,19 +361,25 @@ export default { } } - .app-sidebar-tabs__release { - h2 { - border-bottom: 1px solid var(--color-border); - } +// Align the appNavigation toggle with the apps header toolbar +.app-navigation::v-deep button.app-navigation-toggle { + top: 8px; + right: -8px; +} - // Overwrite changelog heading styles - ::v-deep { - h3 { - font-size: 20px; - } - h4 { - font-size: 17px; - } +.app-sidebar-tabs__release { + h2 { + border-bottom: 1px solid var(--color-border); + } + + // Overwrite changelog heading styles + ::v-deep { + h3 { + font-size: 20px; + } + h4 { + font-size: 17px; } } +} </style> |