add admin template and buttons

This commit is contained in:
Cayo Puigdefabregas 2023-10-05 12:14:33 +02:00
parent 86984bf0be
commit 73303bdd8f
7 changed files with 414 additions and 7 deletions

View File

@ -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;
}

View 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 %}

View File

@ -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">

View 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">&times;</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>

View File

@ -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 %}

View File

@ -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'),
] ]

View File

@ -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'