feat(i18n): add internationalization with DE, FR, ES, PT translations (#12)
Add a compile-time i18n system with 270 translation keys across 5 locales (EN, DE, FR, ES, PT). Translations are embedded via include_str! and parsed lazily into flat HashMaps with English fallback for missing keys. - Add src/i18n module with Locale enum, t()/tw() lookup functions, and tests - Add JSON translation files for all 5 locales under assets/i18n/ - Provide locale Signal via Dioxus context in App, persisted to localStorage - Replace all hardcoded UI strings across 33 component/page files - Add compact locale picker (globe icon + ISO alpha-2 code) in sidebar header - Add click-outside backdrop dismissal for locale dropdown Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com> Reviewed-on: #12
This commit was merged in pull request #12.
This commit is contained in:
@@ -356,6 +356,95 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
|
||||
& > *:not(:has(~ [class*="dropdown-content"])):focus {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
@media (forced-colors: active) {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
.dropdown-content {
|
||||
position: absolute;
|
||||
}
|
||||
&.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content {
|
||||
display: none;
|
||||
transform-origin: top;
|
||||
opacity: 0%;
|
||||
scale: 95%;
|
||||
}
|
||||
&[popover], .dropdown-content {
|
||||
z-index: 999;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: dropdown 0.2s;
|
||||
transition-property: opacity, scale, display;
|
||||
transition-behavior: allow-discrete;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
@starting-style {
|
||||
&[popover], .dropdown-content {
|
||||
scale: 95%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:not(.dropdown-close) {
|
||||
&.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
|
||||
> [tabindex]:first-child {
|
||||
pointer-events: none;
|
||||
}
|
||||
.dropdown-content {
|
||||
opacity: 100%;
|
||||
scale: 100%;
|
||||
}
|
||||
}
|
||||
&.dropdown-hover:hover {
|
||||
.dropdown-content {
|
||||
opacity: 100%;
|
||||
scale: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:is(details) {
|
||||
summary {
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:where([popover]) {
|
||||
background: #0000;
|
||||
}
|
||||
&[popover] {
|
||||
position: fixed;
|
||||
color: inherit;
|
||||
@supports not (position-area: bottom) {
|
||||
margin: auto;
|
||||
&.dropdown-close, &.dropdown-open:not(:popover-open) {
|
||||
display: none;
|
||||
transform-origin: top;
|
||||
opacity: 0%;
|
||||
scale: 95%;
|
||||
}
|
||||
&::backdrop {
|
||||
background-color: color-mix(in oklab, #000 30%, #0000);
|
||||
}
|
||||
}
|
||||
&.dropdown-close, &:not(.dropdown-open, :popover-open) {
|
||||
display: none;
|
||||
transform-origin: top;
|
||||
opacity: 0%;
|
||||
scale: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
:where(&) {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
|
||||
Reference in New Issue
Block a user