zumepro/libre-liberec-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added language selector

Browse Source
This commit is contained in:
Michal Procházka
2025-04-15 19:07:06 +02:00
parent 2d43ac88c1
commit c66b02d19a
14 changed files with 58 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Makefile
View File

@@ -1,8 +1,8 @@
PAGES := index.html 404.html info.html
SHARED_FILES := stallman.webp stallman_2024.webp favicon.ico poster.webp \
moon.svg sun.svg narrow_light.svg narrow_dark.svg wide_light.svg wide_dark.svg \
moon.svg sun.svg narrow_light.svg narrow_dark.svg wide_light.svg wide_dark.svg lang_cz.svg lang_en.svg \
styles.css icons.css \
countdown.js theme.js
countdown.js theme.js lang.js
SEARCH_REPLACE := lib/search_and_replace/target/release/search_and_replace
COMPONENTS := head.html header.html nav.html footer.html

1
components/cz/head.html
View File

@@ -5,3 +5,4 @@
<link href="../icons.css" rel="stylesheet">
<link href="../styles.css" rel="stylesheet">
<script src="../theme.js"></script>
<script src="../lang.js"></script>

1
components/cz/header.html
View File

@@ -6,5 +6,6 @@
<div class="buttons">
<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
<img src="data:," alt="Přepínač jazyka" class="lang-switch" onclick="switch_lang();">
</div>
</header>

1
components/en/head.html
View File

@@ -5,3 +5,4 @@
<link href="../icons.css" rel="stylesheet">
<link href="../styles.css" rel="stylesheet">
<script src="../theme.js"></script>
<script src="../lang.js"></script>

1
components/en/header.html
View File

@@ -6,5 +6,6 @@
<div class="buttons">
<img src="data:," alt="Lightmode/darkmode switch" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Wide/short layout switch" class="layout-switch" onclick="switch_layout();">
<img src="data:," alt="Language selector" class="lang-switch" onclick="switch_lang();">
</div>
</header>

10
icons/lang_cz.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<g id="color">
<rect x="5" y="17" width="62" height="38" fill="#fff"/>
<rect x="5" y="36" width="62" height="19" fill="#d22f27"/>
<path fill="#1e50a0" d="m36 36-31 18.6v-37.2z"/>
</g>
<g id="line">
<rect x="5" y="17" width="62" height="38" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 440 B

22
icons/lang_en.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<g id="color">
<rect x="5" y="17" width="62" height="38" fill="#1e50a0"/>
<g>
<polygon fill="#fff" points="40 28.856 40 32 50.181 32 67 21.691 67 17 59.346 17 40 28.856"/>
<polygon fill="#d22f27" points="67 17 67 17 63.173 17 40 31.203 40 32 43.482 32 67 17.586 67 17"/>
<polygon fill="#fff" points="59.347 55 67 55 67 55 67 50.308 50.182 40 40 40 40 43.143 59.347 55"/>
<polygon fill="#d22f27" points="67 55 67 52.653 46.355 40 41.568 40 66.042 55 67 55 67 55"/>
<polygon fill="#fff" points="32 43.144 32 40 21.819 40 5 50.309 5 55 12.654 55 32 43.144"/>
<polygon fill="#d22f27" points="5 55 5 55 8.827 55 32 40.797 32 40 28.518 40 5 54.414 5 55"/>
<polygon fill="#fff" points="12.653 17 5 17 5 17 5 21.692 21.818 32 32 32 32 28.857 12.653 17"/>
<polygon fill="#d22f27" points="5 17 5 19.347 25.646 32 30.432 32 5.958 17 5 17 5 17"/>
<rect x="5" y="31" width="62" height="10" fill="#fff"/>
<rect x="31" y="17" width="10" height="38" fill="#fff"/>
<rect x="5" y="33" width="62" height="6" fill="#d22f27"/>
<rect x="33" y="17" width="6" height="38" fill="#d22f27"/>
</g>
</g>
<g id="line">
<rect x="5" y="17" width="62" height="38" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
pages/cz/info.html
View File

@@ -4,7 +4,6 @@
<!--#include virtual="components/head.html" -->
<title>Info - Svobodný software Liberec</title>
<meta name="description" content="Krátký životopis pana Stallmana.">
<script src="../lang.js"></script>
</head>
<body>
<!--#include virtual="components/header.html" -->

2
pages/en/404.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="cs">
<html lang="en">
<head>
<!--#include virtual="components/head.html" -->
<title>Page not found - Software Libre Liberec</title>

2
pages/en/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="cs">
<html lang="en">
<head>
<!--#include virtual="components/head.html" -->
<title>Software Libre Liberec</title>

3
pages/en/info.html
View File

@@ -1,10 +1,9 @@
<!DOCTYPE html>
<html lang="cs">
<html lang="en">
<head>
<!--#include virtual="components/head.html" -->
<title>About - Software Libre Liberec</title>
<meta name="description" content="Short bio of mister Stallman.">
<script src="lang.js"></script>
</head>
<body>
<!--#include virtual="components/header.html" -->

13
scripts/lang.js
View File

@@ -1,15 +1,10 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
function change_lang(base) {
let cz = document.querySelector(base + "_cz");
let en = document.querySelector(base + "_en");
if(cz.style.display == "none") {
cz.style.display = "";
en.style.display = "none";
function switch_lang() {
if(document.documentElement.lang == "en") {
window.location.href = window.location.href.replace("/en", "/cz");
} else {
cz.style.display = "none";
en.style.display = "";
window.location.href = window.location.href.replace("/cz", "/en");
}
}

2
styles/icons.css
View File

@@ -5,4 +5,6 @@
--light-wide-layout-switch-icon: url("./narrow_dark.svg");
--dark-narrow-layout-switch-icon: url("./wide_light.svg");
--dark-wide-layout-switch-icon: url("./narrow_light.svg");
--cz-lang-switch-icon: url("./lang_cz.svg");
--en-lang-switch-icon: url("./lang_en.svg");
}

11
styles/styles.css
View File

@@ -99,6 +99,11 @@
:root {
--layout-switch-icon: var(--narrow-layout-switch-icon);
--lang-switch-icon: var(--en-lang-switch-icon);
}
[lang="en"] {
--lang-switch-icon: var(--cz-lang-switch-icon);
}
[data-layout="wide"] {
@@ -154,6 +159,12 @@ header .buttons {
width: 20px;
}
.lang-switch {
cursor: pointer;
content: var(--lang-switch-icon);
width: 20px;
}
a {
color: var(--link-idle-color);
}