From 00836cc368c75ae2e23fa5dc4a53a5bb6eb2ce24 Mon Sep 17 00:00:00 2001
From: Yassine Doghri <yassine@doghri.fr>
Date: Mon, 7 Nov 2022 16:55:25 +0000
Subject: [PATCH] fix(dashboard-ui): fill the blank gaps between cards on
smaller screen sizes
---
app/Views/Components/DashboardCard.php | 8 ++++----
themes/cp_admin/dashboard.php | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/app/Views/Components/DashboardCard.php b/app/Views/Components/DashboardCard.php
index 474022378c..573d4955cd 100644
--- a/app/Views/Components/DashboardCard.php
+++ b/app/Views/Components/DashboardCard.php
@@ -29,17 +29,17 @@ class DashboardCard extends Component
$chevronRight = icon('chevron-right');
$viewLang = lang('Common.view');
return <<<HTML
- <a href="{$this->href}" class="flex items-center justify-between w-full max-w-sm p-4 bg-elevated focus:ring-accent rounded-xl border-3 border-subtle group">
+ <a href="{$this->href}" class="flex items-center justify-between w-full gap-4 p-4 lg:max-w-sm lg:flex-col xl:flex-row bg-elevated focus:ring-accent rounded-xl border-3 border-subtle group">
<div class="flex items-start">{$glyph}<div class="flex flex-col ml-2"><div class="flex items-center"><span class="text-xs font-semibold leading-loose tracking-wider uppercase">{$this->title}</span><div class="inline-flex items-center ml-4 transition -translate-x-full group-hover:translate-x-0 group-focus:translate-x-0"><span class="-ml-2 text-xs lowercase transition opacity-0 group-hover:opacity-100 group-focus:opacity-100">{$viewLang}</span>{$chevronRight}</div></div><p class="text-xs">{$this->subtitle}</p></div></div>
- <div class="mx-2 text-5xl font-bold">{$this->slot}</div>
+ <div class="text-5xl font-bold">{$this->slot}</div>
</a>
HTML;
}
return <<<HTML
- <div class="flex items-center justify-between w-full max-w-sm p-4 bg-elevated rounded-xl border-3 border-subtle">
+ <div class="flex items-center justify-between w-full gap-4 p-4 lg:max-w-sm lg:flex-col xl:flex-row bg-elevated rounded-xl border-3 border-subtle">
<div class="flex items-start">{$glyph}<div class="flex flex-col ml-2"><span class="text-xs font-semibold leading-loose tracking-wider uppercase">{$this->title}</span><p class="text-xs">{$this->subtitle}</p></div></div>
- <div class="mx-2 text-5xl font-bold">{$this->slot}</div>
+ <div class="text-5xl font-bold">{$this->slot}</div>
</div>
HTML;
}
diff --git a/themes/cp_admin/dashboard.php b/themes/cp_admin/dashboard.php
index e3f6222cbb..c47fa597c9 100644
--- a/themes/cp_admin/dashboard.php
+++ b/themes/cp_admin/dashboard.php
@@ -11,7 +11,7 @@
<?= $this->section('content') ?>
-<div class="flex flex-wrap items-start gap-4">
+<div class="flex flex-col items-stretch gap-4 lg:flex-row">
<DashboardCard href="<?= $onlyPodcastId === null ? route_to('podcast-list') : route_to('podcast-view', $onlyPodcastId) ?>" glyph="mic" title="<?= lang('Dashboard.podcasts.title') ?>" subtitle="<?= $podcastsData['last_published_at'] ? esc(lang('Dashboard.podcasts.last_published', [
'lastPublicationDate' => local_date($podcastsData['last_published_at']),
], null, false)) : lang('Dashboard.podcasts.not_found') ?>"><?= $podcastsData['number_of_podcasts'] ?></DashboardCard>
--
GitLab