add admin template and buttons
This commit is contained in:
Cayo Puigdefabregas
parent
86984bf0be
commit
73303bdd8f
|
|
@ -55,6 +55,10 @@ body {
|
||||||
color: #9cc666;
|
color: #9cc666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar .admin.nav-link.active {
|
||||||
|
color: #56beac;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar .nav-link:hover .feather,
|
.sidebar .nav-link:hover .feather,
|
||||||
.sidebar .nav-link.active .feather {
|
.sidebar .nav-link.active .feather {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -99,6 +103,9 @@ body {
|
||||||
.bg-green {
|
.bg-green {
|
||||||
background-color: #9cc666;
|
background-color: #9cc666;
|
||||||
}
|
}
|
||||||
|
.admin.bg-green {
|
||||||
|
background-color: #56beac;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-grey {
|
.bg-grey {
|
||||||
background-color: #545f71;
|
background-color: #545f71;
|
||||||
|
|
@ -126,7 +133,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ul_sidebar {
|
.ul_sidebar {
|
||||||
margin-left: 2rem;
|
margin-left: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .nav-link.active2 {
|
.sidebar .nav-link.active2 {
|
||||||
|
|
@ -137,3 +144,24 @@ body {
|
||||||
h3 {
|
h3 {
|
||||||
font-sice: 1.2em;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
{% endfor %}
|
||||||
{% endblock messages %}
|
{% 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">
|
<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-toolbar mb-2 mb-md-0">
|
||||||
<div class="btn-group me-2">
|
<div class="btn-group me-2">
|
||||||
<input class="form-control form-control-grey " type="text" placeholder="Search" aria-label="Search">
|
<input class="form-control form-control-grey " type="text" placeholder="Search" aria-label="Search">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">#</th>
|
<th scope="col">#</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">Header</th>
|
<th scope="col"><button type="button" class="btn btn-grey border border-dark">Header</button></th>
|
||||||
<th scope="col">Header</th>
|
<th scope="col"><button type="button" class="btn btn-green-user">Header</button></th>
|
||||||
<th scope="col">Header</th>
|
<th scope="col"><button type="button" class="btn btn-grey">Header</button></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
@ -133,4 +133,8 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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 %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -25,4 +25,5 @@ urlpatterns = [
|
||||||
# path("", views.index, name="index"),
|
# path("", views.index, name="index"),
|
||||||
path('login/', views.LoginView.as_view(), name='login'),
|
path('login/', views.LoginView.as_view(), name='login'),
|
||||||
path('user/dashboard/', views.UserDashboardView.as_view(), name='user_dashboard'),
|
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
|
return context
|
||||||
|
|
||||||
|
|
||||||
|
class AdminDashboardView(UserDashboardView):
|
||||||
|
template_name = "idhub/admin_dashboard.html"
|
||||||
|
|
||||||
|
|
||||||
class LoginView(FormView):
|
class LoginView(FormView):
|
||||||
template_name = 'auth/login.html'
|
template_name = 'auth/login.html'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue