Skip to content

Commit

Permalink
refactor(dashboard): polish styles
Browse files Browse the repository at this point in the history
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
  • Loading branch information
ShGKme committed Oct 24, 2023
1 parent 405fe6d commit 6013747
Showing 1 changed file with 35 additions and 58 deletions.
93 changes: 35 additions & 58 deletions apps/dashboard/src/DashboardApp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,14 @@
<Draggable v-model="layout"
class="panels"
v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}"
handle=".panel--header"
handle=".panel__header"
@end="saveLayout">
<div v-for="panelId in layout" :key="panels[panelId].id" class="panel">
<div class="panel--header">
<h2>
<span aria-hidden="true" class="panel__header-icon" :class="getWidgetIconClass(panels[panelId])" />
{{ getWidgetTitle(panels[panelId]) }}
</h2>
</div>
<div class="panel--content" :class="{ loading: !isApiWidgetV2(panels[panelId].id) && !panels[panelId].mounted }">
<h2 class="panel__header">
<span aria-hidden="true" class="panel__header-icon" :class="getWidgetIconClass(panels[panelId])" />
{{ getWidgetTitle(panels[panelId]) }}
</h2>
<div class="panel__content" :class="{ loading: !isApiWidgetV2(panels[panelId].id) && !panels[panelId].mounted }">
<ApiDashboardWidget v-if="isApiWidgetV2(panels[panelId].id)"
:widget="apiWidgets[panels[panelId].id]"
:data="apiWidgetItems[panels[panelId].id]"
Expand Down Expand Up @@ -470,16 +468,18 @@ export default {
flex-wrap: wrap;
}
.panel, .panels > div {
.panel {
width: 320px;
max-width: 100%;
margin: 16px;
margin: calc(var(--default-grid-baseline) * 4);
align-self: stretch;
background-color: var(--color-main-background-blur);
-webkit-backdrop-filter: var(--filter-background-blur);
backdrop-filter: var(--filter-background-blur);
border-radius: var(--border-radius-rounded);
padding: calc(var(--default-grid-baseline) * 4);
#body-user.theme--highcontrast & {
border: 2px solid var(--color-border);
}
Expand All @@ -488,66 +488,43 @@ export default {
opacity: 0.1;
}
& > .panel--header {
&__header {
display: flex;
z-index: 1;
top: 50px;
padding: 16px;
align-items: flex-end;
margin: 0;
padding: calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 2);
line-height: 24px;
height: 56px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: grab;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&, ::v-deep * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&:active {
cursor: grabbing;
}
a {
flex-grow: 1;
}
> h2 {
display: block;
align-items: center;
flex-grow: 1;
margin: 0;
font-size: 20px;
line-height: 24px;
font-weight: bold;
padding: 16px 8px;
height: 56px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: grab;
span {
background-size: 32px;
width: 32px;
height: 32px;
margin-right: 16px;
background-position: center;
float: left;
margin-top: -6px;
}
}
&__header-icon {
background-position: center;
background-size: 32px;
background-repeat: no-repeat;
height: 32px;
width: 32px;
margin-right: 16px;
}
& > .panel--content {
margin: 0 16px 16px 16px;
&__content {
height: 424px;
// We specifically do not want scrollbars inside widgets
overflow: visible;
}
// No need to extend height of widgets if only one column is shown
@media only screen and (max-width: 709px) {
& > .panel--content {
&__content {
height: auto;
}
}
Expand Down

0 comments on commit 6013747

Please sign in to comment.