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
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
menu_sidebar = [
{
"icon":"fa-solid fa-gauge",
"name":"Dashboard",
"target":"_self",
"href":"#",
"roles":[1,2]
},
{
"icon":"fa-solid fa-users",
"name":"Users",
"target":"_self",
"href":"#",
"roles":[1,2]
},
{
"icon":"fa-solid fa-book",
"name":"Items",
"target":"_self",
"href":"#",
"roles":[1,2]
},
{
"icon":"fa-solid fa-book",
"name":"Analytic",
"target":"_self",
"href":"#",
"roles":[1,2]
},
{
"icon":"fa-solid fa-book",
"name":"Reports",
"target":"_self",
"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>
</footer>

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

@ -6,6 +6,8 @@
<title>${title}</title>
<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="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>
<body class="d-flex flex-column">
${navbar}

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

@ -1,5 +1,5 @@
<!-- 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">
<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">

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

@ -1,12 +1,12 @@
<!-- Sidebar -->
<div class="sidebar p-3" id="sidebar">
<div class="sidebar" id="sidebar">
<!-- <h5>Sidebar</h5> -->
<ul class="nav flex-column pb-5">
<ul class="navbar-nav flex-column">
% for item in menu:
% if any(role in item['roles'] for role in user_roles):
<li class="nav-item">
<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>
</li>
% endif

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

@ -1,5 +1,6 @@
body {
min-height: 100vh;
padding-top: 56px;
}
.navbar {
@ -19,13 +20,46 @@ body {
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 {
transform: translateX(-100%);
}
.content {
margin-left: 250px;
padding: 20px;
padding-bottom: 20px;
transition: margin-left 0.3s ease-in-out;
}
@ -34,24 +68,21 @@ body {
}
.footer {
position: fixed;
bottom: 0;
width: calc(100% - 250px);
margin-left: 250px;
background-color: #f8f9fa;
padding: 10px;
padding-top: 5px;
text-align: center;
margin-left: 250px;
transition: margin-left 0.3s ease-in-out;
z-index: 1010;
}
.footer.full-width {
width: 100%;
margin-left: 0;
}
.profile-image {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
}
@ -62,7 +93,7 @@ body {
left: 20px;
background-color: #343a40;
color: white;
border: none;
border: 1px solid #fff;
width: 100px;
height: 40px;
display: flex;

30
html/index.html
View File

@ -7,12 +7,14 @@
<title>Prime</title>
<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="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>
<body class="d-flex flex-column">
<!-- 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">
<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">
@ -47,23 +49,33 @@
</nav>
<!-- Sidebar -->
<div class="sidebar p-3" id="sidebar">
<div class="sidebar" id="sidebar">
<!-- <h5>Sidebar</h5> -->
<ul class="nav flex-column pb-5">
<ul class="navbar-nav flex-column">
<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 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 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 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 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>
<!-- Add more items to test scrolling -->
</ul>
@ -77,7 +89,7 @@
</div>
<!-- Footer -->
<footer class="footer" id="footer">
<footer class="footer fixed-bottom" id="footer">
<p>&copy; 2024 Dita Aji Pratama. All rights reserved.</p>
</footer>

51
html/style.css
View File

@ -1,5 +1,6 @@
body {
min-height: 100vh;
padding-top: 56px;
}
.navbar {
@ -19,13 +20,46 @@ body {
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 {
transform: translateX(-100%);
}
.content {
margin-left: 250px;
padding: 20px;
padding-bottom: 20px;
transition: margin-left 0.3s ease-in-out;
}
@ -34,24 +68,21 @@ body {
}
.footer {
position: fixed;
bottom: 0;
width: calc(100% - 250px);
margin-left: 250px;
background-color: #f8f9fa;
padding: 10px;
padding-top: 5px;
text-align: center;
margin-left: 250px;
transition: margin-left 0.3s ease-in-out;
z-index: 1010;
}
.footer.full-width {
width: 100%;
margin-left: 0;
}
.profile-image {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
}
@ -62,7 +93,7 @@ body {
left: 20px;
background-color: #343a40;
color: white;
border: none;
border: 1px solid #fff;
width: 100px;
height: 40px;
display: flex;