[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 {
|
:root {
|
||||||
--admin-grey-color: #5A5656;
|
--admin-grey-color: #5A5656;
|
||||||
--admin-red-color: #FF0000;
|
--admin-red-color: #FF0000;
|
||||||
|
--admin-white-color: #FFFFFF;
|
||||||
--adming-yellow-color: #FFC800;
|
--adming-yellow-color: #FFC800;
|
||||||
--body-margin: 0.375em;
|
--body-margin: 0.375em;
|
||||||
font-family: "Roboto Mono", sans-serif;
|
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 {
|
html {
|
||||||
background-color: var(--admin-grey-color);
|
background-color: var(--admin-grey-color);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
svg {
|
||||||
margin: var(--body-margin);
|
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 {
|
#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>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<title>Admin Page</title>
|
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="admin_ui.css">
|
<title>Truth Inquiry - Interface d'administration</title>
|
||||||
<script src="/static/js/admin.js"></script>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="/admin/questions"> Questions </a>
|
<header>
|
||||||
<br>
|
<a class="short_color_transition" href="/admin" title="Cliquez ici pour revenir à l'accueil de l'interface d'administration du jeu">Accueil</a>
|
||||||
<a href="/admin/places"> Places </a>
|
<a class="short_color_transition" href="/admin/questions" title="Cliquez ici pour gérer les questions du jeu">Gestion des questions</a>
|
||||||
<br>
|
<a class="short_color_transition" href="/admin/places" title="Cliquez ici pour gérer les lieux du jeu">Gestion des lieux</a>
|
||||||
<a href="/admin/traits"> Traits </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>
|
||||||
<section>
|
<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>
|
||||||
<p> NPC list :</p>
|
</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%}
|
{%for npc in npcs%}
|
||||||
<a href="/admin/npc/{{npc['id']}}"> {{npc['name']}} </a>
|
<li class="character_item">
|
||||||
<br>
|
<a href="/admin/npc/{{npc['id']}}" title="Cliquez ici pour gérer le personnage « {{npc['name']}} »">{{npc['name']}}</a>
|
||||||
|
</li>
|
||||||
{%endfor%}
|
{%endfor%}
|
||||||
<br>
|
</ul>
|
||||||
<a href="/admin/npc/new"> Nouveau NPC </a>
|
<a class="add_npc_link short_color_transition" href="/admin/npc/new" title="Cliquez ici pour créer un nouveau personnage">
|
||||||
</section>
|
<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"/>
|
||||||
<a href="/api/v1/admin/logout"> Logout </a>
|
</svg>
|
||||||
|
Nouveau personnage
|
||||||
|
</a>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user