CostaPyTemplates/prime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: CostaPyTemplates:2a4b42172dbdb854bbd6fb5dd5d284098d3651dc
Branches Tags
CostaPyTemplates:master
CostaPyTemplates:update-change
..
compare: CostaPyTemplates:08b93a9e6cb8edb76067c5ae6debf2f95f7479cb
Branches Tags
CostaPyTemplates:master
CostaPyTemplates:update-change

15 Commits
2a4b42172d ... 08b93a9e6c

Author SHA1 Message Date
Dita Aji Pratama
08b93a9e6c Merge branch 'update-change' 2024-09-30 17:29:33 +07:00
Dita Aji Pratama
6618710f43 Give a border for a sidebar drawer button 2024-09-30 17:28:47 +07:00
Dita Aji Pratama
e54da717df Add custom scroll on sidebar 2024-09-30 17:27:15 +07:00
Dita Aji Pratama
80f2a47586 Add hover effect on sidebar items 2024-09-30 17:24:18 +07:00
Dita Aji Pratama
f6cdd3d9bb Bold a sidebar menu item when active 2024-09-30 17:19:45 +07:00
Dita Aji Pratama
721e811dc2 Giving a margin between icon and name on the sidebar menu 2024-09-30 17:15:56 +07:00
Dita Aji Pratama
7f339cce3e Give an icon on the menu configuration in the README.md doc 2024-09-30 17:13:43 +07:00
Dita Aji Pratama
1e3f18c72c Add fontawesome icon on sidebar menu 2024-09-30 17:10:31 +07:00
Dita Aji Pratama
2bb770c937 Fixing incorrect footer position when toggling sidebar drawer 2024-09-29 19:48:14 +07:00
Dita Aji Pratama
ce6e139e54 Because the navbar have a size 40px in the content and 8px in the both top and down padding, I add 56px of top padding in the body 2024-09-29 19:31:24 +07:00
Dita Aji Pratama
dd08dbfabd Profile image cannot make the default navbar size getting bigger than 40px 2024-09-29 19:26:36 +07:00
Dita Aji Pratama
ab203e01ce Make a navbar fixed on top 2024-09-29 19:21:00 +07:00
Dita Aji Pratama
ffc0cc13e7 Add fontawesome and datatable on head 2024-09-29 19:20:31 +07:00
Dita Aji Pratama
ab5e997241 Update README.md 2024-09-29 19:19:23 +07:00
Dita Aji Pratama
b1ff446c7f Add fontawesome and datatable on head 2024-09-29 19:18:52 +07:00
8 changed files with 116 additions and 35 deletions
Show Stats Expand all files Collapse all files

7
README.md
View File

@ -10,7 +10,7 @@ A prime dashboard based on bootstrap 5
import templates.prime.main as template_dashboard import templates.prime.main as template_dashboard
params["mako"] = { params["mako"] = {
"website" : template_dashboard.main(directory.page["dashboard"], "users") "website" : template_dashboard.main("pages/dashboard", "users")
} }
``` ```
@ -88,30 +88,35 @@ A prime dashboard based on bootstrap 5
```python ```python
menu_sidebar = [ menu_sidebar = [
{ {
"icon":"fa-solid fa-gauge",
"name":"Dashboard", "name":"Dashboard",
"target":"_self", "target":"_self",
"href":"#", "href":"#",
"roles":[1,2] "roles":[1,2]
}, },
{ {
"icon":"fa-solid fa-users",
"name":"Users", "name":"Users",
"target":"_self", "target":"_self",
"href":"#", "href":"#",
"roles":[1,2] "roles":[1,2]
}, },
{ {
"icon":"fa-solid fa-book",
"name":"Items", "name":"Items",
"target":"_self", "target":"_self",
"href":"#", "href":"#",
"roles":[1,2] "roles":[1,2]
}, },
{ {
"icon":"fa-solid fa-book",
"name":"Analytic", "name":"Analytic",
"target":"_self", "target":"_self",
"href":"#", "href":"#",
"roles":[1,2] "roles":[1,2]
}, },
{ {
"icon":"fa-solid fa-book",
"name":"Reports", "name":"Reports",
"target":"_self", "target":"_self",
"href":"#", "href":"#",

2
costapy-templates/prime/html/footer.html
View File

@ -1,3 +1,3 @@
<footer class="footer" id="footer"> <footer class="footer fixed-bottom" id="footer">
<p>${copyright}</p> <p>${copyright}</p>
</footer> </footer>

2
costapy-templates/prime/html/index.html
View File

@ -6,6 +6,8 @@
<title>${title}</title> <title>${title}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/templates/prime/css/style.css"> <link rel="stylesheet" href="/templates/prime/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
</head> </head>
<body class="d-flex flex-column"> <body class="d-flex flex-column">
${navbar} ${navbar}

2
costapy-templates/prime/html/navbar.html
View File

@ -1,5 +1,5 @@
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">${title}</a> <a class="navbar-brand" href="#">${title}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

6
costapy-templates/prime/html/sidebar.html
View File

@ -1,12 +1,12 @@
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar p-3" id="sidebar"> <div class="sidebar" id="sidebar">
<!-- <h5>Sidebar</h5> --> <!-- <h5>Sidebar</h5> -->
<ul class="nav flex-column pb-5"> <ul class="navbar-nav flex-column">
% for item in menu: % for item in menu:
% if any(role in item['roles'] for role in user_roles): % if any(role in item['roles'] for role in user_roles):
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white ${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}"> <a class="nav-link text-white ${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
${item['name']} <i class="${item['icon']} me-3"></i> ${item['name']}
</a> </a>
</li> </li>
% endif % endif

51
costapy-templates/prime/static/css/style.css
View File

@ -1,5 +1,6 @@
body { body {
min-height: 100vh; min-height: 100vh;
padding-top: 56px;
} }
.navbar { .navbar {
@ -19,13 +20,46 @@ body {
overflow-y: auto; /* Make sidebar scrollable */ overflow-y: auto; /* Make sidebar scrollable */
} }
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: #bbb;
border-radius: 3px;
margin-top: 5px;
margin-bottom: 30px;
}
.sidebar::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
margin: 12px 0;
}
.sidebar .navbar-nav {
padding-bottom: 80px;
}
.sidebar .navbar-nav .nav-item .active {
font-weight: bold;
}
.sidebar .navbar-nav .nav-item :hover {
background-color: rgba(0, 0, 0, 0.2); /* Darkens on hover */
}
.sidebar .navbar-nav .nav-item .nav-link {
padding-left: 20px;
}
.sidebar.minimized { .sidebar.minimized {
transform: translateX(-100%); transform: translateX(-100%);
} }
.content { .content {
margin-left: 250px; margin-left: 250px;
padding: 20px; padding-bottom: 20px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
} }
@ -34,24 +68,21 @@ body {
} }
.footer { .footer {
position: fixed;
bottom: 0;
width: calc(100% - 250px);
margin-left: 250px;
background-color: #f8f9fa; background-color: #f8f9fa;
padding: 10px; padding-top: 5px;
text-align: center; text-align: center;
margin-left: 250px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
z-index: 1010;
} }
.footer.full-width { .footer.full-width {
width: 100%;
margin-left: 0; margin-left: 0;
} }
.profile-image { .profile-image {
width: 30px; width: 20px;
height: 30px; height: 20px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
} }
@ -62,7 +93,7 @@ body {
left: 20px; left: 20px;
background-color: #343a40; background-color: #343a40;
color: white; color: white;
border: none; border: 1px solid #fff;
width: 100px; width: 100px;
height: 40px; height: 40px;
display: flex; display: flex;

30
html/index.html
View File

@ -7,12 +7,14 @@
<title>Prime</title> <title>Prime</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
</head> </head>
<body class="d-flex flex-column"> <body class="d-flex flex-column">
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Prime Dashboard</a> <a class="navbar-brand" href="#">Prime Dashboard</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@ -47,23 +49,33 @@
</nav> </nav>
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar p-3" id="sidebar"> <div class="sidebar" id="sidebar">
<!-- <h5>Sidebar</h5> --> <!-- <h5>Sidebar</h5> -->
<ul class="nav flex-column pb-5"> <ul class="navbar-nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white" href="#">Dashboard</a> <a class="nav-link text-white" href="#">
<i class="fa-solid fa-gauge me-3"></i> Dashboard
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white" href="#">Users</a> <a class="nav-link text-white" href="#">
<i class="fa-solid fa-users me-3"></i> Users
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white" href="#">Items</a> <a class="nav-link text-white" href="#">
<i class="fa-solid fa-book me-3"></i> Items
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white" href="#">Analytics</a> <a class="nav-link text-white" href="#">
<i class="fa-solid fa-book me-3"></i> Analytics
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white" href="#">Reports</a> <a class="nav-link text-white" href="#">
<i class="fa-solid fa-book me-3"></i> Reports
</a>
</li> </li>
<!-- Add more items to test scrolling --> <!-- Add more items to test scrolling -->
</ul> </ul>
@ -77,7 +89,7 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="footer" id="footer"> <footer class="footer fixed-bottom" id="footer">
<p>&copy; 2024 Dita Aji Pratama. All rights reserved.</p> <p>&copy; 2024 Dita Aji Pratama. All rights reserved.</p>
</footer> </footer>

51
html/style.css
View File

@ -1,5 +1,6 @@
body { body {
min-height: 100vh; min-height: 100vh;
padding-top: 56px;
} }
.navbar { .navbar {
@ -19,13 +20,46 @@ body {
overflow-y: auto; /* Make sidebar scrollable */ overflow-y: auto; /* Make sidebar scrollable */
} }
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: #bbb;
border-radius: 3px;
margin-top: 5px;
margin-bottom: 30px;
}
.sidebar::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
margin: 12px 0;
}
.sidebar .navbar-nav {
padding-bottom: 80px;
}
.sidebar .navbar-nav .nav-item .active {
font-weight: bold;
}
.sidebar .navbar-nav .nav-item :hover {
background-color: rgba(0, 0, 0, 0.2); /* Darkens on hover */
}
.sidebar .navbar-nav .nav-item .nav-link {
padding-left: 20px;
}
.sidebar.minimized { .sidebar.minimized {
transform: translateX(-100%); transform: translateX(-100%);
} }
.content { .content {
margin-left: 250px; margin-left: 250px;
padding: 20px; padding-bottom: 20px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
} }
@ -34,24 +68,21 @@ body {
} }
.footer { .footer {
position: fixed;
bottom: 0;
width: calc(100% - 250px);
margin-left: 250px;
background-color: #f8f9fa; background-color: #f8f9fa;
padding: 10px; padding-top: 5px;
text-align: center; text-align: center;
margin-left: 250px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
z-index: 1010;
} }
.footer.full-width { .footer.full-width {
width: 100%;
margin-left: 0; margin-left: 0;
} }
.profile-image { .profile-image {
width: 30px; width: 20px;
height: 30px; height: 20px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
} }
@ -62,7 +93,7 @@ body {
left: 20px; left: 20px;
background-color: #343a40; background-color: #343a40;
color: white; color: white;
border: none; border: 1px solid #fff;
width: 100px; width: 100px;
height: 40px; height: 40px;
display: flex; display: flex;