DjalimSimaila/SAE-A2-TruthInquiry
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Client] Improve unsupported browser and footer code and design

Browse Source
This commit is contained in:
AudricV 2023-03-27 21:54:55 +02:00
parent c6687748a2
commit 8aed3a99da
No known key found for this signature in database
GPG Key ID: DA92EC7905614198
4 changed files with 53 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
truthinquiry/static/css/game_ui.css
View File

@ -31,7 +31,6 @@
/* Colors */
color-scheme: dark;
--alert-dialog-background-color: #000000DF;
--button-links-gray-color: #939393;
--dark-theme-background-color: #213C40;
--game-black: #000000;
--game-blue: #0096FF;
@ -54,6 +53,10 @@ body {
margin: var(--body-margin);
}
noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_dialog_title {
display: block;
}
.action_button {
background-color: var(--game-red);
border-color: var(--game-black);
@ -100,21 +103,23 @@ body {
/* Footer */
.footer_link {
color: var(--game-white);
font-family: sans-serif;
font-family: "Roboto Mono", sans-serif;
font-size: 1em;
font-weight: bold;
margin: 0.5em;
text-align: center;
transition: color 0.25s;
}
.footer_link:hover {
color: var(--button-links-gray-color);
color: var(--game-black);
}
.footer_links {
align-items: center;
align-self: flex-end;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: var(--footer-links-height);
justify-content: flex-end;
}
@ -130,6 +135,8 @@ body {
/* Alert dialogs */
.alert_dialog {
background-color: var(--game-grey);
border-color: var(--game-white);
border-radius: var(--button-and-dialog-border-radius);
display: none;
font-family: "Spicy Rice", serif;
@ -137,6 +144,7 @@ body {
flex-wrap: nowrap;
justify-content: center;
left: 50%;
overflow: auto;
padding: 2em;
position: absolute;
top: 50%;
@ -149,6 +157,8 @@ body {
}
.alert_dialog_title {
margin-bottom: 0.5em;
margin-top: 0.5em;
font-size: 2em;
font-weight: normal;
text-align: center;

22
truthinquiry/templates/game.html
View File

@ -89,8 +89,8 @@
</div>
</section>
<div class="alert_dialog_background"></div>
<div class="unsupported_browser">
<div id="unsupported_browser_dialog" class="alert_dialog">
<section class="unsupported_browser">
<dialog id="unsupported_browser_dialog" class="alert_dialog">
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
<p class="alert_dialog_msg unsupported_browser_msg"></p>
<div class="footer_links">
@ -98,21 +98,21 @@
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
<noscript>
<div class="alert_dialog_background" style="display: block;"></div>
<div class="js_requirement">
<div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
<h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="alert_dialog_background"></div>
<section class="js_requirement">
<dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
<h3 class="alert_dialog_title">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
</noscript>
<script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
<script src="/static/js/api.js"></script>

24
truthinquiry/templates/index.html
View File

@ -16,7 +16,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="game_app">
<div class="alert_dialog_background"></div>
<section class="game_start">
<menu class="header_actions">
<li class="header_action">
@ -59,8 +58,9 @@
</div>
</div>
</section>
<div class="unsupported_browser">
<div id="unsupported_browser_dialog" class="alert_dialog">
<div class="alert_dialog_background"></div>
<section class="unsupported_browser">
<dialog id="unsupported_browser_dialog" class="alert_dialog">
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
<p class="alert_dialog_msg unsupported_browser_msg"></p>
<div class="footer_links">
@ -68,21 +68,21 @@
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
<noscript>
<div class="alert_dialog_background" style="display: block;"></div>
<div class="js_requirement">
<div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
<h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="alert_dialog_background"></div>
<section class="js_requirement">
<dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
<h3 class="alert_dialog_title">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
</noscript>
<footer>
<div class="footer_links">

32
truthinquiry/templates/lobby.html
View File

@ -59,8 +59,8 @@
</div>
</section>
<div class="alert_dialog_background"></div>
<div class="unsupported_browser">
<div id="unsupported_browser_dialog" class="alert_dialog">
<section class="unsupported_browser">
<dialog id="unsupported_browser_dialog" class="alert_dialog">
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
<p class="alert_dialog_msg unsupported_browser_msg"></p>
<div class="footer_links">
@ -68,21 +68,21 @@
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
<noscript>
<div class="alert_dialog_background" style="display: block;"></div>
<div class="js_requirement">
<div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
<h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
</div>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
<div class="alert_dialog_background"></div>
<section class="js_requirement">
<dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
<h3 class="alert_dialog_title">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</dialog>
</section>
</noscript>
<script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
<script src="/static/js/api.js"></script>