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 class="row q-col-gutter-lg items-start">
<div class="col-12 col-md-5">
<div class="scoreboard-grid">
<div class="scoreboard-grid__side">
<QCard
flat
bordered
@@ -682,7 +682,7 @@ watchEffect(() => {
</QCard>
</div>
<div class="col-12 col-md-2">
<div class="scoreboard-grid__center">
<QCard
flat
bordered
@@ -720,7 +720,7 @@ watchEffect(() => {
</QCard>
</div>
<div class="col-12 col-md-5">
<div class="scoreboard-grid__side">
<QCard
flat
bordered
@@ -834,4 +834,26 @@ watchEffect(() => {
flex-direction: column;
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>
src/dashboard/example/views/Dashboard.vue
+46 -33
View File
@@ -11,41 +11,35 @@ useHead({ title: 'Dashboard' });
<template>
<QPage class="q-pa-lg">
<div class="column q-gutter-lg dashboard-panels q-mt-lg">
<div class="row">
<div class="col-12">
<QCard
bordered
class="dashboard-panel-card"
>
<QCardSection class="dashboard-panel-content">
<ScoreboardPanel />
</QCardSection>
</QCard>
</div>
<div class="dashboard-panels q-mt-lg">
<div class="dashboard-row dashboard-row--scoreboard">
<QCard
bordered
class="dashboard-panel-card"
>
<QCardSection class="dashboard-panel-content">
<ScoreboardPanel />
</QCardSection>
</QCard>
</div>
<div class="row q-col-gutter-lg items-start">
<div class="col-12 col-lg-6">
<QCard
bordered
class="dashboard-panel-card"
>
<QCardSection class="dashboard-panel-content">
<CommentaryPanel />
</QCardSection>
</QCard>
</div>
<div class="col-12 col-lg-6">
<QCard
bordered
class="dashboard-panel-card"
>
<QCardSection class="dashboard-panel-content">
<BracketPanel />
</QCardSection>
</QCard>
</div>
<div class="dashboard-row dashboard-row--bottom">
<QCard
bordered
class="dashboard-panel-card"
>
<QCardSection class="dashboard-panel-content">
<CommentaryPanel />
</QCardSection>
</QCard>
<QCard
bordered
class="dashboard-panel-card"
>
<QCardSection class="dashboard-panel-content">
<BracketPanel />
</QCardSection>
</QCard>
</div>
</div>
</QPage>
@@ -54,6 +48,19 @@ useHead({ title: 'Dashboard' });
<style scoped>
.dashboard-panels {
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 {
@@ -63,4 +70,10 @@ useHead({ title: 'Dashboard' });
.dashboard-panel-content {
padding-bottom: 16px;
}
@media (min-width: 1200px) {
.dashboard-row--bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
</style>