javier/Stirling-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplified languages.html.

Browse Source 
Language wrappers now handled by languageEntry
This commit is contained in:
Connor Yoh
2025-02-21 15:29:34 +00:00
parent fcd844cb86
commit e628bdc4c9
6 changed files with 97 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
HowToAddNewLanguage.md
View File

@@ -16,7 +16,7 @@ Then add a reference to the language in the navbar by adding a new language entr
For example, to add Polish, you would add:
```html
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'pl_PL')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pl_PL"> Polski</a>
<div th:replace="~{fragments/languageEntry :: languageEntry ('pl_PL', 'Polski')}" ></div>
```
The `data-bs-language-code` is the code used to reference the file in the next step.

45
src/main/resources/static/css/navbar.css
View File

@@ -83,6 +83,51 @@
vertical-align: middle;
}
.scalable-languages-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill columns, with a minimum width of 180px */
}
.lang-dropdown-item-wrapper {
border-right: 2px solid var(--md-sys-color-inverse-surface);
}
/* Responsive adjustments */
@media (min-width: 1200px){
.lang_dropdown-mw{
min-width: 800px
}
}
@media (max-width: 600px) {
.scalable-languages-container {
grid-template-columns: repeat(2, 1fr);
}
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) {
border-right: 0px
}
}
@media (min-width: 601px) and (max-width: 900px) {
.scalable-languages-container {
grid-template-columns: repeat(3, 1fr);
}
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(3n) {
border-right: 0px
}
}
@media (min-width: 901px) {
.scalable-languages-container {
grid-template-columns: repeat(4, 1fr);
}
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(4n) {
border-right: 0px
}
}
.dropdown-item .icon-text {
text-wrap: wrap;
word-break: break-word;

7
src/main/resources/templates/fragments/languageEntry.html Normal file
View File

@@ -0,0 +1,7 @@
<th:block th:fragment="languageEntry(code, name)">
<div class="lang-dropdown-item-wrapper">
<a th:if="${code} == 'en_GB' or ${#lists.isEmpty(@languages) or #lists.contains(@languages, code)}"
class="dropdown-item lang_dropdown-item" href="" th:data-bs-language-code="@{${code}}" th:text="${name}">
</a>
</div>
</th:block>

81
src/main/resources/templates/fragments/languages.html
View File

@@ -1,42 +1,43 @@
<th:block th:fragment="langs">
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'bg_BG')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="bg_BG"> Български</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'ar_AR')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ar_AR"> العربية</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'ca_CA')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ca_CA"> Català</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'zh_CN')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="zh_CN"> 简体中文</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'zh_TW')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="zh_TW"> 繁體中文</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'zh_BO')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="zh_BO"> བོད་ཡིག</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'az_AZ')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="az_AZ"> Azərbaycan Dili</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'da_DK')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="da_DK"> Dansk</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'de_DE')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="de_DE"> Deutsch</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_GB"> English (GB)</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'en_US')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_US"> English (US)</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'eu_ES')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="eu_ES"> Euskara</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'es_ES')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="es_ES"> Español</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'fr_FR')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="fr_FR"> Français</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'id_ID')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="id_ID"> Indonesia</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'ga_IE')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ga_IE"> Irish</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'it_IT')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="it_IT"> Italiano</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'nl_NL')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="nl_NL"> Nederlands</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'fa_IR')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="fa_IR"> پارسی</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'pl_PL')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pl_PL"> Polski</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'pt_BR')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pt_BR"> Português (BR)</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'pt_PT')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pt_PT"> Português (PT)</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'ro_RO')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ro_RO"> Romanian</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'sk_SK')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sk_SK"> Slovensky</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'sl_SI')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sl_SI"> Slovenian</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'sv_SE')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sv_SE"> Svenska</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'tr_TR')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="tr_TR"> Türkçe</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'ru_RU')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ru_RU"> Русский</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'ko_KR')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ko_KR"> 한국어</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'ja_JP')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ja_JP"> 日本語</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'el_GR')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="el_GR"> Ελληνικά</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'hu_HU')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="hu_HU"> Hungarian</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'hi_IN')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="hi_IN"> हिन्दी</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'sr_LATN_RS')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sr_LATN_RS"> Srpski</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'uk_UA')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="uk_UA"> Українська</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'cs_CZ')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="cs_CZ"> Česky</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'hr_HR')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="hr_HR"> Hrvatski</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'no_NB')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="no_NB"> Norsk</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'th_TH')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="th_TH"> ไทย</a>
<a th:if="${#lists.isEmpty(@languages) or #lists.contains(@languages, 'vi_VN')}" class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="vi_VN"> Tiếng Việt</a>
<div th:replace="~{fragments/languageEntry :: languageEntry ('bg_BG', 'Български')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('ar_AR', 'العربية')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('ca_CA', 'Català')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('zh_CN', '简体中文')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('zh_TW', '繁體中文')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('zh_BO', 'བོད་ཡིག')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('az_AZ', 'Azərbaycan Dili')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('da_DK', 'Dansk')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('de_DE', 'Deutsch')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('en_GB', 'English (GB)')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('en_US', 'English (US)')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('eu_ES', 'Euskara')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('es_ES', 'Español')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('fr_FR', 'Français')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('id_ID', 'Indonesia')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('ga_IE', 'Irish')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('it_IT', 'Italiano')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('nl_NL', 'Nederlands')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('fa_IR', 'پارسی')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('pl_PL', 'Polski')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('pt_BR', 'Português (BR)')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('pt_PT', 'Português (PT)')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('ro_RO', 'Romanian')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('sk_SK', 'Slovensky')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('sl_SI', 'Slovenian')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('sv_SE', 'Svenska')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('tr_TR', 'Türkçe')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('ru_RU', 'Русский')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('ko_KR', '한국어')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('ja_JP', '日本語')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('el_GR', 'Ελληνικά')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('hu_HU', 'Hungarian')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('hi_IN', 'हिन्दी')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('sr_LATN_RS', 'Srpski')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('uk_UA', 'Українська')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('cs_CZ', 'Česky')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('hr_HR', 'Hrvatski')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('no_NB', 'Norsk')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('th_TH', 'ไทย')}" ></div>
<div th:replace="~{fragments/languageEntry :: languageEntry ('vi_VN', 'Tiếng Việt')}"></div>
</th:block>

2
src/main/resources/templates/fragments/navbar.html
View File

@@ -143,7 +143,7 @@
</a>
<div class="dropdown-menu dropdown-menu-tp" aria-labelledby="languageDropdown">
<div class="dropdown-menu-wrapper px-xl-2 px-2">
<div class="scrollable-y dropdown-mw-20">
<div class="scrollable-y lang_dropdown-mw scalable-languages-container">
<th:block th:insert="~{fragments/languages :: langs}"></th:block>
</div>
</div>

2
src/main/resources/templates/login.html
View File

@@ -138,7 +138,7 @@
<div class="mt-3"> <!-- Added a margin-top for spacing -->
<div class="dropdown text-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
English (GB)
<img th:src="@{'/images/flags/gb.svg'}" alt="icon" width="20" height="15"> English (GB)
<!-- Default language placeholder -->
</button>
<div class="dropdown-menu" aria-labelledby="languageDropdown">