diff --git a/apps/dashboard/js/dashboard.js b/apps/dashboard/js/dashboard.js index f0177c38e45a736be3a9bbe4d20847a3883d685a..b08cd960f03f8d34e67396f3af3e4382205f5c94 100644 Binary files a/apps/dashboard/js/dashboard.js and b/apps/dashboard/js/dashboard.js differ diff --git a/apps/dashboard/js/dashboard.js.map b/apps/dashboard/js/dashboard.js.map index c15a2b37582c8951093d1ea6a7531ce4d550a4cb..d7d4dd075868d0d78730603c77e8899fa32bec11 100644 Binary files a/apps/dashboard/js/dashboard.js.map and b/apps/dashboard/js/dashboard.js.map differ diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue index eb745252b12e025113a43a6710e541d5de0d4f81..62035a6a60346d2614256b67d7d3aa174daeda34 100644 --- a/apps/dashboard/src/App.vue +++ b/apps/dashboard/src/App.vue @@ -15,9 +15,9 @@ @end="saveLayout"> <div v-for="panelId in layout" :key="panels[panelId].id" class="panel"> <div class="panel--header"> - <h3 :class="panels[panelId].iconClass"> + <h2 :class="panels[panelId].iconClass"> {{ panels[panelId].title }} - </h3> + </h2> </div> <div class="panel--content"> <div :ref="panels[panelId].id" :data-id="panels[panelId].id" /> @@ -313,14 +313,14 @@ export default { background-color: var(--color-main-background); --color-background-translucent: var(--color-main-background); } - } - h2 { - color: var(--color-primary-text); - text-align: center; - font-size: 32px; - line-height: 130%; - padding: 120px 16px 0px; + > h2 { + color: var(--color-primary-text); + text-align: center; + font-size: 32px; + line-height: 130%; + padding: 120px 16px 0px; + } } .panels { @@ -374,7 +374,7 @@ export default { flex-grow: 1; } - h3 { + > h2 { display: block; flex-grow: 1; margin: 0; @@ -395,7 +395,8 @@ export default { & > .panel--content { margin: 0 16px 16px 16px; height: 420px; - overflow: auto; + // We specifically do not want scrollbars inside widgets + overflow: hidden; } // No need to extend height of widgets if only one column is shown @@ -431,12 +432,14 @@ export default { } .edit-panels, - .statuses ::v-deep .action-item > button { + .statuses ::v-deep .action-item > button, + .statuses ::v-deep .action-item.action-item--open .action-item__menutoggle { background-color: var(--color-background-translucent); backdrop-filter: var(--background-blur); &:hover, - &:focus { + &:focus, + &:active { background-color: var(--color-background-hover); } } @@ -484,6 +487,13 @@ export default { margin-top: 64px; } } + + // Adjust design of 'Get more widgets' button + .button { + display: inline-block; + padding: 12px 24px; + margin: 0; + } } .flip-list-move { diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue index d87a6154de2da8b1e14da981485864e75080d3f8..3eaa2cbc1f616e260ba3e831bc39c4bb67502293 100644 --- a/apps/dashboard/src/components/BackgroundSettings.vue +++ b/apps/dashboard/src/components/BackgroundSettings.vue @@ -157,7 +157,6 @@ export default { &.filepicker, &.default, &.color { border-color: var(--color-border); - line-height: 96px; } &.color {