mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-07-01 00:50:42 -05:00
Add locale tester to website
This commit is contained in:
montylion
parent
85eb608414
commit
91d644e87d
|
|
@ -135,5 +135,13 @@
|
|||
"progressPage": {
|
||||
"title": "Il nostro progresso",
|
||||
"description": "Controlla il progresso del progetto e gli obiettivi! (Aggiornato circa ogni ora, non riflette TUTTI gli obiettivi e il progresso del progetto)"
|
||||
},
|
||||
"localizationPage": {
|
||||
"title": "Localizziamo",
|
||||
"description": "Incolla il link di una localizzazione in formato JSON accessibile al pubblico per testarla sul sito",
|
||||
"instructions": "Vedi le istruzioni su come localizzare",
|
||||
"fileInput": "File da testare",
|
||||
"filePlaceholder": "https://il.link.di/un_file.json",
|
||||
"button": "Testa file"
|
||||
}
|
||||
}
|
||||
|
|
@ -135,5 +135,13 @@
|
|||
"progressPage": {
|
||||
"title": "Our progress",
|
||||
"description": "Check the project progress and goals! (Updated every hour or so, does not reflect ALL project goals or progress)"
|
||||
},
|
||||
"localizationPage": {
|
||||
"title": "Let's localize",
|
||||
"description": "Paste a link to a publicly accessible JSON locale to test it on the website",
|
||||
"instructions": "View localization instructions",
|
||||
"fileInput": "File to test",
|
||||
"filePlaceholder": "https://a.link.to/the_file.json",
|
||||
"button": "Test file"
|
||||
}
|
||||
}
|
||||
95
public/assets/css/localization.css
Normal file
95
public/assets/css/localization.css
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
.localization-wrapper {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 155px);
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.localization-widget {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: var(--text-secondary);
|
||||
max-width: 400px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.title.dot {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.localization-instr,
|
||||
.localization-instr:visited {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--theme-light);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
left: -4px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.localization-instr svg {
|
||||
height: 1.3em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.localization-form {
|
||||
padding: 36px;
|
||||
background-color: #151934;
|
||||
border-radius: 12px;
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.localization-form input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 0;
|
||||
font-family: Poppins;
|
||||
font-size: 1rem;
|
||||
background-color: var(--btn-secondary);
|
||||
border: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 12px 24px;
|
||||
color: var(--text-secondary);
|
||||
width: 20px;
|
||||
flex: 2 10%;
|
||||
}
|
||||
|
||||
.localization-form input::placeholder {
|
||||
color: var(--text-secondary-2);
|
||||
}
|
||||
|
||||
.localization-form input:focus {
|
||||
background-color: #fff;
|
||||
color: var(--btn-secondary);
|
||||
transition: 200ms;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.localization-form button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-family: Poppins;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
padding: 12px 36px;
|
||||
background: var(--btn);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
--btn: #673DB6;
|
||||
--btn-secondary: #333960;
|
||||
--theme: var(--btn);
|
||||
--theme-light: #A185D6;
|
||||
--text-secondary-2: #8990C1;
|
||||
}
|
||||
|
||||
|
|
@ -16,10 +17,8 @@ body {
|
|||
body, .main-body {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: Poppins, Arial;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -46,6 +45,7 @@ body, .main-body {
|
|||
.wrapper {
|
||||
width: 95%;
|
||||
max-width: 1590px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1.dot:not([data-title-suffix]):after, h2.dot:not([data-title-suffix]):after {
|
||||
|
|
|
|||
8
public/assets/js/locale-tester-handler.js
Normal file
8
public/assets/js/locale-tester-handler.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
const form = document.querySelector(".localization-form");
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
window.location.href=`https://prete.herokuapp.com/?url=${e.target[0].value}`
|
||||
});
|
||||
|
||||
17
src/routers/localization.js
Normal file
17
src/routers/localization.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
const { Router } = require('express');
|
||||
const util = require('../util');
|
||||
const router = new Router();
|
||||
|
||||
router.get('/', async (request, response) => {
|
||||
|
||||
const reqLocale = request.locale
|
||||
const locale = util.getLocale(reqLocale.region, reqLocale.language);
|
||||
|
||||
response.render('localization', {
|
||||
layout: 'main',
|
||||
locale,
|
||||
localeString: reqLocale.toString(),
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
|
@ -22,7 +22,8 @@ logger.info('Importing page routers');
|
|||
const routers = {
|
||||
home: require('./routers/home'),
|
||||
faq: require('./routers/faq'),
|
||||
progress: require('./routers/progress')
|
||||
progress: require('./routers/progress'),
|
||||
localization: require('./routers/localization')
|
||||
};
|
||||
|
||||
app.use(cookieParser())
|
||||
|
|
@ -61,6 +62,7 @@ app.use(expressLocale({
|
|||
app.use('/', routers.home);
|
||||
app.use('/faq', routers.faq);
|
||||
app.use('/progress', routers.progress);
|
||||
app.use('/localization', routers.localization);
|
||||
|
||||
logger.info('Creating 404 status handler');
|
||||
// This works because it is the last router created
|
||||
|
|
|
|||
28
views/localization.handlebars
Normal file
28
views/localization.handlebars
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<link rel="stylesheet" href="/assets/css/localization.css" />
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
{{> header}}
|
||||
|
||||
<div class="localization-wrapper">
|
||||
<div class="localization-widget">
|
||||
<h1 class="title dot">{{ locale.localizationPage.title }}</h1>
|
||||
<p class="caption">{{ locale.localizationPage.description }}</p>
|
||||
<a href="https://github.com/PretendoNetwork/Pretendo/blob/master/CONTRIBUTING.md#localization" target="_blank" class="localization-instr">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--theme-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
||||
{{ locale.localizationPage.instructions }}
|
||||
</a>
|
||||
<form class="localization-form" autocomplete="off">
|
||||
<label for="url">{{ locale.localizationPage.fileInput }}</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="url" id="url" placeholder="{{ locale.localizationPage.filePlaceholder }}" required />
|
||||
<button type="submit" class="submit-btn">{{ locale.localizationPage.button }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{> footer }}
|
||||
|
||||
<script src="/assets/js/locale-tester-handler.js" />
|
||||
Loading…
Reference in New Issue
Block a user