add admin template and buttons
This commit is contained in:
Cayo Puigdefabregas
parent
86984bf0be
commit
73303bdd8f
|
|
@ -55,6 +55,10 @@ body {
|
|||
color: #9cc666;
|
||||
}
|
||||
|
||||
.sidebar .admin.nav-link.active {
|
||||
color: #56beac;
|
||||
}
|
||||
|
||||
.sidebar .nav-link:hover .feather,
|
||||
.sidebar .nav-link.active .feather {
|
||||
color: inherit;
|
||||
|
|
@ -99,6 +103,9 @@ body {
|
|||
.bg-green {
|
||||
background-color: #9cc666;
|
||||
}
|
||||
.admin.bg-green {
|
||||
background-color: #56beac;
|
||||
}
|
||||
|
||||
.bg-grey {
|
||||
background-color: #545f71;
|
||||
|
|
@ -126,7 +133,7 @@ body {
|
|||
}
|
||||
|
||||
.ul_sidebar {
|
||||
margin-left: 2rem;
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active2 {
|
||||
|
|
@ -136,4 +143,25 @@ body {
|
|||
|
||||
h3 {
|
||||
font-sice: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.1em 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-green-admin {
|
||||
background-color: #a3e3d7;
|
||||
}
|
||||
|
||||
.btn-grey {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.btn-green-user {
|
||||
background-color: #c7e3a3;
|
||||
}
|
||||
|
||||
.btn-yellow {
|
||||
background-color: #efe3b4;
|
||||
}
|
||||
|
|
|
|||
140
idhub/templates/idhub/admin_dashboard.html
Normal file
140
idhub/templates/idhub/admin_dashboard.html
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
{% extends "idhub/base_admin.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<h3>
|
||||
<i class="bi bi-patch-check"></i>
|
||||
Identities (DID)
|
||||
</h3>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col"><button type="button" class="btn btn-green-admin border border-dark">Header</button></th>
|
||||
<th scope="col"><button type="button" class="btn btn-grey border border-dark">Header</button></th>
|
||||
<th scope="col"><button type="button" class="btn btn-green-admin">Header</button></th>
|
||||
<th scope="col"><button type="button" class="btn btn-grey ">Header</button></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1,001</td>
|
||||
<td>random</td>
|
||||
<td>data</td>
|
||||
<td>placeholder</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,002</td>
|
||||
<td>placeholder</td>
|
||||
<td>irrelevant</td>
|
||||
<td>visual</td>
|
||||
<td>layout</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>data</td>
|
||||
<td>rich</td>
|
||||
<td>dashboard</td>
|
||||
<td>tabular</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>information</td>
|
||||
<td>placeholder</td>
|
||||
<td>illustrative</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,004</td>
|
||||
<td>text</td>
|
||||
<td>random</td>
|
||||
<td>layout</td>
|
||||
<td>dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,005</td>
|
||||
<td>dashboard</td>
|
||||
<td>irrelevant</td>
|
||||
<td>text</td>
|
||||
<td>placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,006</td>
|
||||
<td>dashboard</td>
|
||||
<td>illustrative</td>
|
||||
<td>rich</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,007</td>
|
||||
<td>placeholder</td>
|
||||
<td>tabular</td>
|
||||
<td>information</td>
|
||||
<td>irrelevant</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,008</td>
|
||||
<td>random</td>
|
||||
<td>data</td>
|
||||
<td>placeholder</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,009</td>
|
||||
<td>placeholder</td>
|
||||
<td>irrelevant</td>
|
||||
<td>visual</td>
|
||||
<td>layout</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,010</td>
|
||||
<td>data</td>
|
||||
<td>rich</td>
|
||||
<td>dashboard</td>
|
||||
<td>tabular</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,011</td>
|
||||
<td>information</td>
|
||||
<td>placeholder</td>
|
||||
<td>illustrative</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,012</td>
|
||||
<td>text</td>
|
||||
<td>placeholder</td>
|
||||
<td>layout</td>
|
||||
<td>dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,013</td>
|
||||
<td>dashboard</td>
|
||||
<td>irrelevant</td>
|
||||
<td>text</td>
|
||||
<td>visual</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,014</td>
|
||||
<td>dashboard</td>
|
||||
<td>illustrative</td>
|
||||
<td>rich</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,015</td>
|
||||
<td>random</td>
|
||||
<td>tabular</td>
|
||||
<td>information</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6"><button type="button" class="btn btn-grey rounded-pill">Cancel</button></div>
|
||||
<div class="col-6"><button type="button" class="btn btn-green-admin rounded-pill">Revoke</button></div>
|
||||
<div>
|
||||
{% endblock %}
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
{% endfor %}
|
||||
{% endblock messages %}
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h1 text-center bg-primary">{{ title }}</h1>
|
||||
<h1 class="h1">{{ title }}</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<input class="form-control form-control-grey " type="text" placeholder="Search" aria-label="Search">
|
||||
|
|
|
|||
231
idhub/templates/idhub/base_admin.html
Normal file
231
idhub/templates/idhub/base_admin.html
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
{% load i18n static %}
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% block head %}
|
||||
{% block meta %}
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="NONE,NOARCHIVE" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Pangea">
|
||||
{% endblock %}
|
||||
<title>{% block title %}{% if title %}{{ title }} – {% endif %}IdHub{% endblock %}</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
{% block style %}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
||||
<link href="{% static "/css/bootstrap.min.css" %}" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="{% static "/css/dashboard.css" %}" rel="stylesheet">
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header class="navbar navbar-dark sticky-top admin bg-green flex-md-nowrap p-0 shadow">
|
||||
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">ID HUB</a>
|
||||
<div class="navbar-nav navbar-sub-brand">
|
||||
PANGEA
|
||||
</div>
|
||||
<div class="navbar-nav">
|
||||
<div class="nav-item text-nowrap">
|
||||
<i id="user-avatar" class="bi bi-person-circle"></i>
|
||||
<a class="navbar-sub-brand px-3" href="#">Lorena</a>
|
||||
<span class="logout">
|
||||
<i class="fa-solid fa-arrow-right-from-bracket"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
||||
<div class="position-sticky pt-5">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="admin nav-link fw-bold" href="javascript:void()">
|
||||
<i class="bi bi-house-door icon_sidebar"></i>
|
||||
Home
|
||||
</a>
|
||||
<hr />
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="admin active nav-link fw-bold" data-bs-toggle="collapse" data-bs-target="#people" aria-expanded="false" aria-controls="people" href="javascript:void()">
|
||||
<i class="bi bi-people icon_sidebar"></i>
|
||||
People
|
||||
</a>
|
||||
<ul class="flex-column mb-2 ul_sidebar accordion-collapse collapse" id="people" data-bs-parent="#sidebarMenu">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
People list
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Register a new user
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="admin nav-link fw-bold" data-bs-toggle="collapse" data-bs-target="#control-access" aria-expanded="false" aria-controls="control-access" href="javascript:void()">
|
||||
<i class="fa-solid fa-arrow-right-from-bracket icon_sidebar"></i>
|
||||
Control access
|
||||
</a>
|
||||
<ul class="flex-column mb-2 ul_sidebar accordion-collapse collapse" id="control-access" data-bs-parent="#sidebarMenu">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active2" href="#">
|
||||
roles
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="admin nav-link fw-bold" data-bs-toggle="collapse" data-bs-target="#credentials" aria-expanded="false" aria-controls="credentials" href="javascript:void()">
|
||||
<i class="bi bi-patch-check icon_sidebar"></i>
|
||||
Credentials
|
||||
</a>
|
||||
<ul class="flex-column mb-2 ul_sidebar accordion-collapse collapse" id="credentials" data-bs-parent="#sidebarMenu">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active2" href="#">
|
||||
Credentials list
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Issue credentials
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Revoke Credentials
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a id="wallet" class="nav-link" data-bs-toggle="collapse" data-bs-target="#lwallet" aria-expanded="false" aria-controls="lwallet" href="javascript:void()">
|
||||
Wallet
|
||||
</a>
|
||||
<ul class="flex-column mb-2 accordion-collapse collapse" id="lwallet" data-bs-parent="#wallet">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active2" href="#">
|
||||
Identities (DID)
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Credentials
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Configure Issue
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="admin nav-link fw-bold" data-bs-toggle="collapse" data-bs-target="#schemas" aria-expanded="false" aria-controls="schemas" href="javascript:void()">
|
||||
<i class="bi bi-file-earmark-text icon_sidebar"></i>
|
||||
Schemas
|
||||
</a>
|
||||
<ul class="flex-column mb-2 ul_sidebar accordion-collapse collapse" id="schemas" data-bs-parent="#sidebarMenu">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active2" href="#">
|
||||
List of schemas
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Import schema
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Export schema
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="admin nav-link fw-bold" data-bs-toggle="collapse" data-bs-target="#import-export" aria-expanded="false" aria-controls="import-export" href="javascript:void()">
|
||||
<i class="bi bi-arrow-down-square icon_sidebar"></i>
|
||||
Imports/Exports
|
||||
</a>
|
||||
<ul class="flex-column mb-2 ul_sidebar accordion-collapse collapse" id="import-export" data-bs-parent="#sidebarMenu">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active2" href="#">
|
||||
Import
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
Export
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
||||
{% block messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock messages %}
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h1">{{ title }}</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<input class="form-control form-control-grey " type="text" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
|
||||
<script src="/static/js/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -11,10 +11,10 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col"><button type="button" class="btn btn-green-user border border-dark">Header</button></th>
|
||||
<th scope="col"><button type="button" class="btn btn-grey border border-dark">Header</button></th>
|
||||
<th scope="col"><button type="button" class="btn btn-green-user">Header</button></th>
|
||||
<th scope="col"><button type="button" class="btn btn-grey">Header</button></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -133,4 +133,8 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6"><button type="button" class="btn btn-yellow rounded-pill">Cancel</button></div>
|
||||
<div class="col-6"><button type="button" class="btn btn-green-user rounded-pill">Revoke</button></div>
|
||||
<div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -25,4 +25,5 @@ urlpatterns = [
|
|||
# path("", views.index, name="index"),
|
||||
path('login/', views.LoginView.as_view(), name='login'),
|
||||
path('user/dashboard/', views.UserDashboardView.as_view(), name='user_dashboard'),
|
||||
path('admin/dashboard/', views.AdminDashboardView.as_view(), name='user_dashboard'),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -38,6 +38,9 @@ class UserDashboardView(TemplateView):
|
|||
return context
|
||||
|
||||
|
||||
class AdminDashboardView(UserDashboardView):
|
||||
template_name = "idhub/admin_dashboard.html"
|
||||
|
||||
|
||||
class LoginView(FormView):
|
||||
template_name = 'auth/login.html'
|
||||
|
|
|
|||
Loading…
Reference in a new issue