Skip to content
This repository has been archived by the owner on Sep 9, 2024. It is now read-only.

Add CSS improvement to Admin dashboard UI #24

Merged
merged 1 commit into from
May 27, 2024
Merged

Add CSS improvement to Admin dashboard UI #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions dashboard/static/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,44 @@
/* dashboard.css */

.container {
flex-direction: column;
justify-content: center;
align-items: center;
}

.card {
background-color: #191313;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 3.5 auto;
background-color: #171111;
background-image: linear-gradient(to bottom, #ffffff, #f0f0f0);
border: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#popularItems {
list-style: none;
padding: 0;
}

#popularItems li {
padding: 8px 0;
border-bottom: 1px solid #eee;
font-size: 16px;
color: #555555;
}

#popularItems li:last-child {
border-bottom: none;
}

.dashboard-container {
padding: 20px;
background-color: #f5f5f5;
Expand Down
16 changes: 10 additions & 6 deletions dashboard/templates/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

{% load static %}

{% block css_files %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
{% endblock %}

{% block content %}
<div class="container" style="padding: 20px; background-color: #f5f5f5;">
<div class="section" style="margin-bottom: 20px;">
Expand All @@ -10,29 +14,29 @@ <h1 style="font-size: 24px; color: #333;">Dashboard</h1>
</div>

<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
<div
<div class="section card" id="totalOrdersSection"
style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Orders</h4>
<p style="font-size: 24px; color: #333;"><span id="totalOrders">0</span></p>
</div>
<div
<div class="section card" id="acceptedOrdersSection"
style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Accepted</h4>
<p style="font-size: 24px; color: #333;"><span id="acceptedOrders">0</span></p>
</div>
<div
<div class="section card" id="rejectedOrdersSection"
style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Rejected</h4>
<p style="font-size: 24px; color: #333;"><span id="rejectedOrders">0</span></p>
</div>
<div
<div class="section card" id="revenueSection"
style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Revenue</h4>
<p style="font-size: 24px; color: #333;">RM <span id="totalRevenue">0.00</span></p>
</div>
</div>

<div class="section"
<div class="section card" id="popularItemsSection"
style="background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 18px; color: #333;">Popular Menu Items</h4>
<ul id="popularItems" style="list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;">
Expand All @@ -49,7 +53,7 @@ <h4 style="margin-bottom: 10px; font-size: 18px; color: #333;">Popular Menu Item
</div>

<!-- Revenue Chart Section -->
<div class="section"
<div class="section card" id="revenueChartSection"
style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 18px; color: #333;">Revenue Chart (Monthly)</h4>
<div class="chart-container">
Expand Down
Loading