Add search i18n, fix light mode search icon, reduce placeholder font
- Translate search placeholder to German and Dutch, fallback to English - Fix magnifying glass icon invisible in light mode (now uses dark color) - Reduce placeholder font size from 1.6rem to 1rem - Add form-label dark mode override for diagram generation labels - Add sync.sh deploy script
This commit is contained in:
@@ -224,11 +224,18 @@ class BockenTheme extends AbstractModule implements ModuleCustomInterface, Modul
|
|||||||
var path = window.location.pathname;
|
var path = window.location.pathname;
|
||||||
var searchAction = path.replace(/\/?$/, '/search-quick');
|
var searchAction = path.replace(/\/?$/, '/search-quick');
|
||||||
|
|
||||||
|
var lang = document.documentElement.getAttribute('lang') || 'en';
|
||||||
|
var placeholders = {
|
||||||
|
'de': 'Namen, Orte, Quellen durchsuchen…',
|
||||||
|
'nl': 'Zoek namen, plaatsen, bronnen…'
|
||||||
|
};
|
||||||
|
var placeholder = placeholders[lang] || 'Search names, places, sources…';
|
||||||
|
|
||||||
var searchDiv = document.createElement('div');
|
var searchDiv = document.createElement('div');
|
||||||
searchDiv.className = 'bocken-page-search';
|
searchDiv.className = 'bocken-page-search';
|
||||||
searchDiv.innerHTML =
|
searchDiv.innerHTML =
|
||||||
'<form method="post" action="' + searchAction + '" class="bocken-search-form" role="search">' +
|
'<form method="post" action="' + searchAction + '" class="bocken-search-form" role="search">' +
|
||||||
'<input type="search" class="bocken-search-input" name="query" placeholder="Search names, places, sources..." autocomplete="off">' +
|
'<input type="search" class="bocken-search-input" name="query" placeholder="' + placeholder + '" autocomplete="off">' +
|
||||||
'<span class="bocken-search-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="m338.29 338.29 105.25 105.25"/></svg></span>' +
|
'<span class="bocken-search-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="m338.29 338.29 105.25 105.25"/></svg></span>' +
|
||||||
'<input type="hidden" name="_csrf" value="' + csrfValue + '">' +
|
'<input type="hidden" name="_csrf" value="' + csrfValue + '">' +
|
||||||
'</form>';
|
'</form>';
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -932,6 +932,7 @@ a:hover,
|
|||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
|
font-size: 1rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -951,17 +952,9 @@ a:hover,
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Light mode: lighter search bar
|
// Light mode: lighter search bar + dark icon
|
||||||
:root[data-theme="light"] .bocken-page-search .bocken-search-input {
|
:root[data-theme="light"] .bocken-page-search {
|
||||||
background: var(--color-bg-elevated);
|
.bocken-search-input {
|
||||||
color: var(--color-text-primary);
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--color-text-muted);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root:not([data-theme]) .bocken-page-search .bocken-search-input {
|
|
||||||
background: var(--color-bg-elevated);
|
background: var(--color-bg-elevated);
|
||||||
color: var(--color-text-primary);
|
color: var(--color-text-primary);
|
||||||
|
|
||||||
@@ -969,6 +962,24 @@ a:hover,
|
|||||||
color: var(--color-text-muted);
|
color: var(--color-text-muted);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.bocken-search-icon {
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme]) .bocken-page-search {
|
||||||
|
.bocken-search-input {
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bocken-search-icon {
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// All nav links inside the header — glass bar style
|
// All nav links inside the header — glass bar style
|
||||||
@@ -1983,6 +1994,16 @@ div[id^=caldiv] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Form labels (used by full diagram plugin and elsewhere)
|
||||||
|
.form-label,
|
||||||
|
.col-form-label {
|
||||||
|
color: var(--color-text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-range {
|
||||||
|
accent-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
// Full diagram plugin
|
// Full diagram plugin
|
||||||
.full-diagram-container {
|
.full-diagram-container {
|
||||||
background: var(--color-bg-primary) !important;
|
background: var(--color-bg-primary) !important;
|
||||||
|
|||||||
10
sync.sh
Executable file
10
sync.sh
Executable file
@@ -0,0 +1,10 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
rsync -avz --delete \
|
||||||
|
--exclude 'node_modules' \
|
||||||
|
--exclude 'src' \
|
||||||
|
--exclude 'vite.config.js' \
|
||||||
|
--exclude 'package.json' \
|
||||||
|
--exclude 'package-lock.json' \
|
||||||
|
--exclude '.git' \
|
||||||
|
--exclude 'sync.sh' \
|
||||||
|
./ root@bocken.org:/usr/share/webapps/webtrees/modules_v4/BockenTheme/
|
||||||
Reference in New Issue
Block a user