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

Compare commits

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

No commits in common. "08b93a9e6cb8edb76067c5ae6debf2f95f7479cb" and "2a4b42172dbdb854bbd6fb5dd5d284098d3651dc" have entirely different histories.
08b93a9e6c ... 2a4b42172d

8 changed files with 37 additions and 118 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("pages/dashboard", "users")
"website" : template_dashboard.main(directory.page["dashboard"], "users")
}
```
@ -88,35 +88,30 @@ 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 fixed-bottom" id="footer">
<footer class="footer" id="footer">
<p>${copyright}</p>
</footer>

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

@ -6,8 +6,6 @@
<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 fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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" id="sidebar">
<div class="sidebar p-3" id="sidebar">
<!-- <h5>Sidebar</h5> -->
<ul class="navbar-nav flex-column">
<ul class="nav flex-column pb-5">
% 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']}">
<i class="${item['icon']} me-3"></i> ${item['name']}
${item['name']}
</a>
</li>
% endif

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

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

30
html/index.html
View File

@ -7,14 +7,12 @@
<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 fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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">
@ -49,33 +47,23 @@
</nav>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar p-3" id="sidebar">
<!-- <h5>Sidebar</h5> -->
<ul class="navbar-nav flex-column">
<ul class="nav flex-column pb-5">
<li class="nav-item">
<a class="nav-link text-white" href="#">
<i class="fa-solid fa-gauge me-3"></i> Dashboard
</a>
<a class="nav-link text-white" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">
<i class="fa-solid fa-users me-3"></i> Users
</a>
<a class="nav-link text-white" href="#">Users</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">
<i class="fa-solid fa-book me-3"></i> Items
</a>
<a class="nav-link text-white" href="#">Items</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">
<i class="fa-solid fa-book me-3"></i> Analytics
</a>
<a class="nav-link text-white" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">
<i class="fa-solid fa-book me-3"></i> Reports
</a>
<a class="nav-link text-white" href="#">Reports</a>
</li>
<!-- Add more items to test scrolling -->
</ul>
@ -89,7 +77,7 @@
</div>
<!-- Footer -->
<footer class="footer fixed-bottom" id="footer">
<footer class="footer" id="footer">
<p>&copy; 2024 Dita Aji Pratama. All rights reserved.</p>
</footer>

53
html/style.css
View File

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