* [PATCH gwspamd] gwspamd: web: Add new layout profile with demo chart
@ 2023-04-27 23:35 Memet Zx
2023-04-28 1:34 ` Ammar Faizi
0 siblings, 1 reply; 3+ messages in thread
From: Memet Zx @ 2023-04-27 23:35 UTC (permalink / raw)
To: Ammar Faizi; +Cc: Memet Zx, GNU/Weeb Mailing List, Memet Zx
This commit adds a new layout profile with a demo chart to display the
difference between spam and non-spam messages. We added a script tag for
a CDN to enable the chart. This improves the user experience.
Signed-off-by: Memet Zx <[email protected]>
---
web/views/pages/profile.php | 113 +++++++++++++++++++++++++++---------
1 file changed, 84 insertions(+), 29 deletions(-)
diff --git a/web/views/pages/profile.php b/web/views/pages/profile.php
index a67ce79..e54dce0 100644
--- a/web/views/pages/profile.php
+++ b/web/views/pages/profile.php
@@ -3,37 +3,92 @@
$opt["title"] = $u["full_name"];
?>
-<div class="mw-full text-center">
+<div class="mw-full card text-center">
<img id="user-photo" class="img-fluid mt-5 rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?> Images">
- <h1 class="font-weight-bolder"><?= $u["full_name"]; ?></h1>
- <a href="settings.php?section=profile" class="btn btn-action m-5">Edit Profile</a>
+ <h1 class="font-weight-bolder"><?= $u["full_name"]; ?> <a href="settings.php?section=profile">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
+ <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
+ <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
+ </svg>
+ </a>
+ </h1>
</div>
-<div class="mw-full d-flex justify-content-center">
- <table class="table w-400 table-striped">
- <tbody>
- <tr>
- <th>User ID</th>
- <td><?= e($u["id"]); ?></td>
- </tr>
- <tr>
- <th>First Name</th>
- <td><?= e($u["first_name"]); ?></td>
- </tr>
- <tr>
- <th>Last Name</th>
- <td><?= e($u["last_name"]); ?></td>
- </tr>
- <tr>
- <th>User Name</th>
- <td><?= e($u["username"]); ?></td>
- </tr>
- <tr>
- <th>Email</th>
- <td><?= e($u["email"]); ?></td>
- </tr>
- </tbody>
- </table>
+<div class="row row-eq-spacing-lg">
+ <div class="col-lg-4">
+ <div class="card">
+ <h2 class="card-title">
+ Info
+ </h2>
+ <table class="table">
+ <tbody>
+ <tr>
+ <th>User ID</th>
+ <td><?= e($u["id"]); ?></td>
+ </tr>
+ <tr>
+ <th>First Name</th>
+ <td><?= e($u["first_name"]); ?></td>
+ </tr>
+ <tr>
+ <th>Last Name</th>
+ <td><?= e($u["last_name"]); ?></td>
+ </tr>
+ <tr>
+ <th>User Name</th>
+ <td><?= e($u["username"]); ?></td>
+ </tr>
+ <tr>
+ <th>Email</th>
+ <td><?= e($u["email"]); ?></td>
+ </tr>
+ </tbody>
+ </table>
+ <a href="settings.php?section=profile" class="btn btn-action m-5">Edit Profile</a>
+ </div>
+ </div>
+ <div class="col-lg-8">
+ <div class="card">
+ <h2 class="card-title">
+ Stats
+ </h2>
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <div class="content h-full">
+ <canvas id="chart-demo" class="w-full h-auto"></canvas>
+ </div>
+ <div class="fake-content bg-primary mb-20"></div>
+ <div class="fake-content mb-20"></div>
+ <div class="fake-content mb-20"></div>
+ <div class="fake-content mb-20"></div>
+ <div class="fake-content mb-10"></div>
+ </div>
+ </div>
</div>
-</div>
\ No newline at end of file
+<script>
+ const ctx = gid('chart-demo');
+
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['Sun', 'Mon', 'Tue', 'Thu', 'Friday', 'Sat'],
+ datasets: [{
+ label: '# Not Spam',
+ data: [12, 19, 3, 5, 2, 3],
+ borderWidth: 2
+ }, {
+ label: '# Spam',
+ data: [16, 10, 7, 2, 9, 4],
+ borderWidth: 2
+ }]
+ },
+ options: {
+ responsive: false,
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+</script>
base-commit: 961deae39a099913ca8566e7fec8f3d3f9c4b5f2
--
Memet Zx
^ permalink raw reply related [flat|nested] 3+ messages in thread
* Re: [PATCH gwspamd] gwspamd: web: Add new layout profile with demo chart
2023-04-27 23:35 [PATCH gwspamd] gwspamd: web: Add new layout profile with demo chart Memet Zx
@ 2023-04-28 1:34 ` Ammar Faizi
2023-04-28 1:47 ` Memet Zx
0 siblings, 1 reply; 3+ messages in thread
From: Ammar Faizi @ 2023-04-28 1:34 UTC (permalink / raw)
To: Memet Zx; +Cc: GNU/Weeb Mailing List, Memet Zx
On Fri, Apr 28, 2023 at 06:35:50AM +0700, Memet Zx wrote:
> + <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
No external CDN asset, please.
--
Ammar Faizi
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [PATCH gwspamd] gwspamd: web: Add new layout profile with demo chart
2023-04-28 1:34 ` Ammar Faizi
@ 2023-04-28 1:47 ` Memet Zx
0 siblings, 0 replies; 3+ messages in thread
From: Memet Zx @ 2023-04-28 1:47 UTC (permalink / raw)
To: Ammar Faizi; +Cc: GNU/Weeb Mailing List, Memet Zx
On 2023-04-28 08:34, Ammar Faizi wrote:
> On Fri, Apr 28, 2023 at 06:35:50AM +0700, Memet Zx wrote:
>> + <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
>
> No external CDN asset, please.
Okay, i'll try to fix that
--
Memet Zx
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2023-04-28 1:47 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-04-27 23:35 [PATCH gwspamd] gwspamd: web: Add new layout profile with demo chart Memet Zx
2023-04-28 1:34 ` Ammar Faizi
2023-04-28 1:47 ` Memet Zx
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox