Pandipipas/scoreko-dev
1
0
Fork 0
mirror of https://github.com/Pandipipas/scoreko-dev.git synced 2026-06-06 03:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix dashboard spacing and scoreboard column symmetry

Browse Source
This commit is contained in:
Pandipipas
2026-02-12 01:41:01 +01:00
parent 3d3e92e66e
commit ea560318d0
2 changed files with 72 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboard/example/components/ScoreboardPanel.vue
+26 -4
View File
@@ -576,8 +576,8 @@ watchEffect(() => {
</div> </div>
</div> </div>
<div class="row q-col-gutter-lg items-start"> <div class="scoreboard-grid">
<div class="col-12 col-md-5"> <div class="scoreboard-grid__side">
<QCard <QCard
flat flat
bordered bordered
@@ -682,7 +682,7 @@ watchEffect(() => {
</QCard> </QCard>
</div> </div>
<div class="col-12 col-md-2"> <div class="scoreboard-grid__center">
<QCard <QCard
flat flat
bordered bordered
@@ -720,7 +720,7 @@ watchEffect(() => {
</QCard> </QCard>
</div> </div>
<div class="col-12 col-md-5"> <div class="scoreboard-grid__side">
<QCard <QCard
flat flat
bordered bordered
@@ -834,4 +834,26 @@ watchEffect(() => {
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.scoreboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
.scoreboard-grid__side,
.scoreboard-grid__center {
min-width: 0;
}
@media (min-width: 1024px) {
.scoreboard-grid {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.scoreboard-grid__center {
width: 220px;
}
}
</style> </style>
src/dashboard/example/views/Dashboard.vue
+46 -33
View File
@@ -11,41 +11,35 @@ useHead({ title: 'Dashboard' });
<template> <template>
<QPage class="q-pa-lg"> <QPage class="q-pa-lg">
<div class="column q-gutter-lg dashboard-panels q-mt-lg"> <div class="dashboard-panels q-mt-lg">
<div class="row"> <div class="dashboard-row dashboard-row--scoreboard">
<div class="col-12"> <QCard
<QCard bordered
bordered class="dashboard-panel-card"
class="dashboard-panel-card" >
> <QCardSection class="dashboard-panel-content">
<QCardSection class="dashboard-panel-content"> <ScoreboardPanel />
<ScoreboardPanel /> </QCardSection>
</QCardSection> </QCard>
</QCard>
</div>
</div> </div>
<div class="row q-col-gutter-lg items-start"> <div class="dashboard-row dashboard-row--bottom">
<div class="col-12 col-lg-6"> <QCard
<QCard bordered
bordered class="dashboard-panel-card"
class="dashboard-panel-card" >
> <QCardSection class="dashboard-panel-content">
<QCardSection class="dashboard-panel-content"> <CommentaryPanel />
<CommentaryPanel /> </QCardSection>
</QCardSection> </QCard>
</QCard> <QCard
</div> bordered
<div class="col-12 col-lg-6"> class="dashboard-panel-card"
<QCard >
bordered <QCardSection class="dashboard-panel-content">
class="dashboard-panel-card" <BracketPanel />
> </QCardSection>
<QCardSection class="dashboard-panel-content"> </QCard>
<BracketPanel />
</QCardSection>
</QCard>
</div>
</div> </div>
</div> </div>
</QPage> </QPage>
@@ -54,6 +48,19 @@ useHead({ title: 'Dashboard' });
<style scoped> <style scoped>
.dashboard-panels { .dashboard-panels {
width: 100%; width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
}
.dashboard-row {
width: 100%;
}
.dashboard-row--bottom {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
} }
.dashboard-panel-card { .dashboard-panel-card {
@@ -63,4 +70,10 @@ useHead({ title: 'Dashboard' });
.dashboard-panel-content { .dashboard-panel-content {
padding-bottom: 16px; padding-bottom: 16px;
} }
@media (min-width: 1200px) {
.dashboard-row--bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
</style> </style>