feat: add basic admin panel concept

This commit is contained in:
Kazhnuz 2020-01-05 00:15:34 +01:00
parent b1a273a6b4
commit fe2a036420
7 changed files with 174 additions and 3 deletions

72
dist/admin/basic-panel.html vendored Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../dep/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../dep/fork-awesome/css/fork-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="bg-dark admin-sidebar text-white">
<ul>
<li><a href="basic-panel.html"><i class="fa fa-home"></i> Accueil</a></li>
<li><a href="basic-panel.html"><i class="fa fa-folder"></i> Catégories</a></li>
<li><a href="basic-panel.html"><i class="fa fa-file"></i> Pages</a></li>
<li><a href="basic-panel.html"><i class="fa fa-file-text"></i> Journaux</a></li>
</ul>
<ul>
<li><a href="basic-panel.html"><i class="fa fa-book"></i> Ecrits</a></li>
<li><a href="basic-panel.html"><i class="fa fa-file-image-o"></i> Images</a></li>
<li><a href="basic-panel.html"><i class="fa fa-link"></i> Projets externes</a></li>
<li><a href="basic-panel.html"><i class="fa fa-trophy"></i> Défis et Objectifs</a></li>
</ul>
<ul>
<li><a href="basic-panel.html"><i class="fa fa-globe"></i> Univers</a></li>
<li><a href="basic-panel.html"><i class="fa fa-user"></i> Personnages</a></li>
<li><a href="basic-panel.html"><i class="fa fa-users"></i> Groupes</a></li>
</ul>
<ul>
<li><a href="basic-panel.html"><i class="fa fa-gear"></i> Options</a></li>
</ul>
</nav>
<div id="main-area">
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
<a class="navbar-brand" href="#">ESPACE ADMIN</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<span class="navbar-text mr-auto">
Connecté en tant que Kazhnuz
</span>
<ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item">
<a class="btn btn-danger" href="../index.html">Déconnexion</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<!-- debut de la partie modifiable -->
<!-- fin de la partie modifiable -->
</div>
<nav class="nav justify-content-end">
<span class="nav-link disabled">Created with <i class="text-danger fa fa-heart"></i> with Bootstrap4 and Fork-Awesome</span>
</nav>
</div>
</body>
</html>

View file

@ -27,7 +27,7 @@
</span> </span>
<ul class="navbar-nav my-2 my-lg-0"> <ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="btn btn-danger" href="#">Déconnexion</a> <a class="btn btn-danger" href="../index.html">Déconnexion</a>
</li> </li>
</ul> </ul>
</div> </div>

24
dist/admin/style.css vendored
View file

@ -1,5 +1,7 @@
body { body {
background-color: #f8f9fa; } background-color: #f8f9fa;
display: flex;
flex-direction: row; }
#main-area { #main-area {
flex: 1; flex: 1;
@ -9,6 +11,26 @@ body {
#main-area > .container { #main-area > .container {
flex: 1; } flex: 1; }
.admin-sidebar {
min-height: 100vh;
width: 300px; }
.admin-sidebar ul {
margin: 0;
padding: 0;
margin-bottom: 3rem; }
.admin-sidebar a {
padding: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
display: block;
color: white; }
.admin-sidebar a:hover {
background-color: rgba(255, 255, 255, 0.2);
text-decoration: none; }
.admin-sidebar a i.fa {
display: inline-block;
width: 1.5rem; }
.card-connection { .card-connection {
margin: auto; margin: auto;
max-width: 360px; } max-width: 360px; }

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--=include includes/_links.html -->
</head>
<body>
<!--=include includes/_sidebar.html -->
<div id="main-area">
<!--=include includes/_navbar.html -->
<div class="container">
<!-- debut de la partie modifiable -->
<!-- fin de la partie modifiable -->
</div>
<!--=include includes/_footer.html -->
</div>
</body>
</html>

View file

@ -10,7 +10,7 @@
</span> </span>
<ul class="navbar-nav my-2 my-lg-0"> <ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="btn btn-danger" href="#">Déconnexion</a> <a class="btn btn-danger" href="../index.html">Déconnexion</a>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -0,0 +1,22 @@
<nav class="bg-dark admin-sidebar text-white">
<ul>
<li><a href="basic-panel.html"><i class="fa fa-home"></i> Accueil</a></li>
<li><a href="basic-panel.html"><i class="fa fa-folder"></i> Catégories</a></li>
<li><a href="basic-panel.html"><i class="fa fa-file"></i> Pages</a></li>
<li><a href="basic-panel.html"><i class="fa fa-file-text"></i> Journaux</a></li>
</ul>
<ul>
<li><a href="basic-panel.html"><i class="fa fa-book"></i> Ecrits</a></li>
<li><a href="basic-panel.html"><i class="fa fa-file-image-o"></i> Images</a></li>
<li><a href="basic-panel.html"><i class="fa fa-link"></i> Projets externes</a></li>
<li><a href="basic-panel.html"><i class="fa fa-trophy"></i> Défis et Objectifs</a></li>
</ul>
<ul>
<li><a href="basic-panel.html"><i class="fa fa-globe"></i> Univers</a></li>
<li><a href="basic-panel.html"><i class="fa fa-user"></i> Personnages</a></li>
<li><a href="basic-panel.html"><i class="fa fa-users"></i> Groupes</a></li>
</ul>
<ul>
<li><a href="basic-panel.html"><i class="fa fa-gear"></i> Options</a></li>
</ul>
</nav>

View file

@ -1,5 +1,7 @@
body { body {
background-color: #f8f9fa; background-color: #f8f9fa;
display:flex;
flex-direction:row;
} }
#main-area { #main-area {
@ -13,6 +15,36 @@ body {
} }
} }
.admin-sidebar {
min-height:100vh;
width:300px;
ul {
margin:0;
padding:0;
margin-bottom:3rem;
}
a {
padding:1.5rem;
padding-top:1rem;
padding-bottom:1rem;
display:block;
color:white;
&:hover {
background-color:rgba(255,255,255,0.2);
text-decoration:none;
}
i.fa {
display:inline-block;
width:1.5rem;
}
}
}
// Password-specific stuff // Password-specific stuff
.card-connection { .card-connection {