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:
398
assets/main.css
398
assets/main.css
@@ -57,6 +57,16 @@ h6 {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ===== Mobile Header ===== */
|
||||
.mobile-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===== Sidebar Backdrop ===== */
|
||||
.sidebar-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===== Sidebar ===== */
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
@@ -70,13 +80,113 @@ h6 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* -- Sidebar Header -- */
|
||||
/* -- Sidebar Top Row (header + locale picker) -- */
|
||||
.sidebar-top-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 20px 14px 16px 20px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px 20px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* -- Locale Picker -- */
|
||||
.locale-picker {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.locale-picker-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-primary);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.locale-picker-btn:hover {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
.locale-picker-code {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.locale-picker-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 49;
|
||||
}
|
||||
|
||||
.locale-picker-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
min-width: 140px;
|
||||
background-color: var(--bg-sidebar);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.locale-picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease, color 0.12s ease;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.locale-picker-item:hover {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.locale-picker-item--active {
|
||||
color: var(--accent);
|
||||
background-color: rgba(145, 164, 210, 0.1);
|
||||
}
|
||||
|
||||
.locale-picker-item-code {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.locale-picker-item-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.avatar-circle {
|
||||
@@ -2840,7 +2950,7 @@ h6 {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== Responsive: Dashboard Pages ===== */
|
||||
/* ===== Responsive: Tablet (max-width: 1024px) ===== */
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
.news-grid,
|
||||
@@ -2888,10 +2998,97 @@ h6 {
|
||||
.news-grid--compact {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.chat-page {
|
||||
margin: -32px -24px;
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Responsive: Mobile (max-width: 768px) ===== */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* -- Mobile header bar with hamburger -- */
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 90;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
background-color: var(--bg-sidebar);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.mobile-menu-btn:hover {
|
||||
background-color: var(--bg-surface);
|
||||
}
|
||||
|
||||
.mobile-header-title {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
/* -- Sidebar: hidden off-screen, slides in as overlay -- */
|
||||
.app-shell {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 200;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.sidebar--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 199;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* -- Main content: add top padding for mobile header -- */
|
||||
.main-content {
|
||||
padding: 72px 16px 24px;
|
||||
min-height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
/* -- Dashboard grids -- */
|
||||
.news-grid,
|
||||
.tools-grid,
|
||||
.pricing-grid {
|
||||
@@ -2902,9 +3099,16 @@ h6 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* -- Chat page -- */
|
||||
.chat-page {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: calc(100vh - 56px);
|
||||
margin: -72px -16px -24px;
|
||||
}
|
||||
|
||||
.chat-sidebar-panel {
|
||||
@@ -2915,11 +3119,34 @@ h6 {
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.chat-messages,
|
||||
.chat-message-list {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.chat-input-bar {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.chat-model-bar {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
/* -- Page header -- */
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* -- Stats bars -- */
|
||||
.analytics-stats-bar {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -2928,8 +3155,171 @@ h6 {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* -- Sub navigation (Developer/Org tabs) -- */
|
||||
.sub-nav {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.sub-nav-item {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* -- Modal -- */
|
||||
.modal-content {
|
||||
min-width: unset;
|
||||
margin: 16px;
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
/* -- Dashboard filters -- */
|
||||
.dashboard-filters {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* -- Providers page -- */
|
||||
.providers-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* -- Tables: horizontal scroll -- */
|
||||
.knowledge-table-wrapper,
|
||||
.org-table-wrapper {
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* -- Settings -- */
|
||||
.settings-input {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* -- Placeholder pages -- */
|
||||
.placeholder-card {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
/* -- Article detail -- */
|
||||
.article-detail-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.article-detail-content {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
/* -- CTA banner -- */
|
||||
.cta-banner {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* -- Pricing cards -- */
|
||||
.pricing-card {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Responsive: Small Phones (max-width: 480px) ===== */
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.main-content {
|
||||
padding: 64px 12px 16px;
|
||||
}
|
||||
|
||||
.chat-page {
|
||||
margin: -64px -12px -16px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.overview-heading {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.news-card-body {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.social-proof-stats {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.proof-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proof-stat-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
max-width: 95%;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.landing-nav-inner {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.features-section,
|
||||
.how-it-works-section {
|
||||
padding: 48px 16px;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user