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

Merge pull request #45 from Pandipipas/expand-scoreboardpanel-width-and-reposition-bracketpanel

Browse Source 
Make Scoreboard full-width and move Bracket to right column
This commit is contained in:
Pandipipas
2026-02-12 01:43:44 +01:00
committed by GitHub
parent e004b00343 ea560318d0
commit ea92c08d7b
2 changed files with 65 additions and 26 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
+39 -22
View File
@@ -11,29 +11,27 @@ useHead({ title: 'Dashboard' });
<template> <template>
<QPage class="q-pa-lg"> <QPage class="q-pa-lg">
<div class="row q-col-gutter-lg items-start dashboard-panels q-mt-lg"> <div class="dashboard-panels q-mt-lg">
<div class="col-12 col-lg-6"> <div class="dashboard-row dashboard-row--scoreboard">
<div class="column q-gutter-lg"> <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>
<QCard
bordered
class="dashboard-panel-card"
>
<QCardSection class="dashboard-panel-content">
<CommentaryPanel />
</QCardSection>
</QCard>
</div>
</div> </div>
<div class="col-12 col-lg-6">
<div class="dashboard-row dashboard-row--bottom">
<QCard
bordered
class="dashboard-panel-card"
>
<QCardSection class="dashboard-panel-content">
<CommentaryPanel />
</QCardSection>
</QCard>
<QCard <QCard
bordered bordered
class="dashboard-panel-card" class="dashboard-panel-card"
@@ -50,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 {
@@ -59,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>