[Client] Improve admin index page
- Use proper HTML; - Add common CSS to all administration pages and specific CSS to this one; - Add common header; - Remove unneeded script in the index page.
This commit is contained in:
AudricV
parent
af02671812
commit
6b1d278712
@ -11,18 +11,92 @@
|
||||
:root {
|
||||
--admin-grey-color: #5A5656;
|
||||
--admin-red-color: #FF0000;
|
||||
--admin-white-color: #FFFFFF;
|
||||
--adming-yellow-color: #FFC800;
|
||||
--body-margin: 0.375em;
|
||||
font-family: "Roboto Mono", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a, body {
|
||||
color: var(--admin-white-color);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: var(--body-margin);
|
||||
}
|
||||
|
||||
header {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header a {
|
||||
border-radius: 1em;
|
||||
border-style: solid;
|
||||
border-width: 0.125em;
|
||||
font-size: 1.25em;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
background-color: var(--admin-white-color);
|
||||
color: var(--admin-grey-color);
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--admin-grey-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: var(--body-margin);
|
||||
svg {
|
||||
fill: var(--admin-white-color);
|
||||
}
|
||||
|
||||
.page_category {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.page_category, .page_title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.page_category, .page_description, .page_title {
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page_description {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.page_title {
|
||||
font-size: 3em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.short_color_transition {
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.short_color_transition:hover {
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
#places>section {
|
||||
|
||||
57
truthinquiry/static/css/admin_ui_home.css
Normal file
57
truthinquiry/static/css/admin_ui_home.css
Normal file
@ -0,0 +1,57 @@
|
||||
.add_npc_icon {
|
||||
height: 2em;
|
||||
transition-property: fill;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.add_npc_icon:hover {
|
||||
transition-property: fill;
|
||||
}
|
||||
|
||||
.add_npc_link {
|
||||
align-items: center;
|
||||
border-color: var(--admin-white-color);
|
||||
border-radius: 1em;
|
||||
border-style: solid;
|
||||
border-width: 0.125em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 1.25em;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 15em;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.add_npc_link:hover {
|
||||
background-color: var(--admin-white-color);
|
||||
color: var(--admin-grey-color);
|
||||
}
|
||||
|
||||
.add_npc_link:hover > .add_npc_icon {
|
||||
fill: var(--admin-grey-color);
|
||||
}
|
||||
|
||||
.character_item {
|
||||
font-size: 1.5em;
|
||||
list-style-type: none;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.character_item a {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--admin-white-color);
|
||||
}
|
||||
|
||||
.character_list {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
padding: 0;
|
||||
}
|
||||
@ -1,27 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Admin Page</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="admin_ui.css">
|
||||
<script src="/static/js/admin.js"></script>
|
||||
<title>Truth Inquiry - Interface d'administration</title>
|
||||
<link rel="stylesheet" href="/static/css/admin_ui.css">
|
||||
<link rel="stylesheet" href="/static/css/admin_ui_home.css">
|
||||
<link rel="icon" href="/static/images/favicon/favicon_32.png" type="image/png" sizes="32x32">
|
||||
<link rel="icon" href="/static/images/favicon/favicon_64.png" type="image/png" sizes="64x64">
|
||||
<link rel="icon" href="/static/images/favicon/favicon_96.png" type="image/png" sizes="96x96">
|
||||
<link rel="icon" href="/static/images/favicon/favicon_128.png" type="image/png" sizes="128x128">
|
||||
<link rel="icon" href="/static/images/favicon/favicon_192.png" type="image/png" sizes="192x192">
|
||||
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="256x256">
|
||||
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<a href="/admin/questions"> Questions </a>
|
||||
<br>
|
||||
<a href="/admin/places"> Places </a>
|
||||
<br>
|
||||
<a href="/admin/traits"> Traits </a>
|
||||
<section>
|
||||
<p> NPC list :</p>
|
||||
<header>
|
||||
<a class="short_color_transition" href="/admin" title="Cliquez ici pour revenir à l'accueil de l'interface d'administration du jeu">Accueil</a>
|
||||
<a class="short_color_transition" href="/admin/questions" title="Cliquez ici pour gérer les questions du jeu">Gestion des questions</a>
|
||||
<a class="short_color_transition" href="/admin/places" title="Cliquez ici pour gérer les lieux du jeu">Gestion des lieux</a>
|
||||
<a class="short_color_transition" href="/admin/traits" title="Cliquez ici pour gérer les réactions du jeu">Gestion des réactions</a>
|
||||
<a class="short_color_transition" href="/api/v1/admin/logout" title="Cliquez ici pour vous déconnecter de l'interface d'administration du jeu">Déconnexion</a>
|
||||
</header>
|
||||
<h1 class="page_title">Truth Inquiry - Interface d'administration</h1>
|
||||
<h2 class="page_category">Gestion des personnages</h2>
|
||||
<p class="page_description">Cliquez sur un personnage pour le gérer ou créez-un autre à l'aide du bouton ci-dessous.</p>
|
||||
<ul class="character_list">
|
||||
{%for npc in npcs%}
|
||||
<a href="/admin/npc/{{npc['id']}}"> {{npc['name']}} </a>
|
||||
<br>
|
||||
<li class="character_item">
|
||||
<a href="/admin/npc/{{npc['id']}}" title="Cliquez ici pour gérer le personnage « {{npc['name']}} »">{{npc['name']}}</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
<br>
|
||||
<a href="/admin/npc/new"> Nouveau NPC </a>
|
||||
</section>
|
||||
|
||||
<a href="/api/v1/admin/logout"> Logout </a>
|
||||
</ul>
|
||||
<a class="add_npc_link short_color_transition" href="/admin/npc/new" title="Cliquez ici pour créer un nouveau personnage">
|
||||
<svg class="add_npc_icon short_color_transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
|
||||
<path d="M435 871V622H185v-91h250V281h91v250h250v91H526v249h-91Z"/>
|
||||
</svg>
|
||||
Nouveau personnage
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user