i18n fix for dateStrings and css fixes

diff --git a/frontend/src/lib/ALookBack.svelte b/frontend/src/lib/ALookBack.svelte
index 1c30cb8c30e418f57479e563003c6d7adc5f54f1..c2d218ff0d6ad69465a7173dc8fd10a2cb2a479e 100644 (file)
--- a/frontend/src/lib/ALookBack.svelte
+++ b/frontend/src/lib/ALookBack.svelte
@@ -1,10 +1,11 @@
 <script>
        import { marked } from 'marked';
        import { selectedDate } from './calendarStore';
-       import { getTranslate } from '@tolgee/svelte';
+       import { getTranslate, getTolgee } from '@tolgee/svelte';
        import { onMount } from 'svelte';
 
        const { t } = getTranslate();
+       const tolgee = getTolgee(['language']);
 
        marked.use({
                breaks: true,
@@ -69,7 +70,7 @@
                                                log?.year,
                                                log?.month - 1,
                                                log?.day
-                                       ).toLocaleDateString('locale', {
+                                       ).toLocaleDateString($tolgee.getLanguage(), {
                                                weekday: 'long',
                                                day: '2-digit',
                                                month: '2-digit',

diff --git a/frontend/src/lib/Datepicker.svelte b/frontend/src/lib/Datepicker.svelte
index 96fb60d816a5d7bce262737afee028f9de8b7edf..fa9672641db62cdff04d82efd1d95d63967a24ae 100644 (file)
--- a/frontend/src/lib/Datepicker.svelte
+++ b/frontend/src/lib/Datepicker.svelte
@@ -5,9 +5,10 @@
        import { fly } from 'svelte/transition';
        import * as bootstrap from 'bootstrap';
        import { offcanvasIsOpen, sameDate, isAuthenticated } from '$lib/helpers.js';
-       import { getTranslate } from '@tolgee/svelte';
+       import { getTranslate, getTolgee } from '@tolgee/svelte';
 
        const { t } = getTranslate();
+       const tolgee = getTolgee(['language']);
 
        let { bookmarkDay } = $props();
 
@@ -115,7 +116,7 @@
        });
 
        let months = Array.from({ length: 12 }, (_, i) =>
-               new Date(2000, i).toLocaleString('default', { month: 'long' })
+               new Date(2000, i).toLocaleString($tolgee.getLanguage(), { month: 'long' })
        );
 
        const onMonthSelect = (event) => {
@@ -148,7 +149,9 @@
                <button type="button" class="btn btnLeftRight" onclick={() => changeMonth(-1)}>&lt;</button>
                <div class="date-selectors">
                        <select
-                               value={new Date(2000, $cal.currentMonth).toLocaleString('default', { month: 'long' })}
+                               value={new Date(2000, $cal.currentMonth).toLocaleString($tolgee.getLanguage(), {
+                                       month: 'long'
+                               })}
                                onchange={onMonthSelect}
                        >
                                {#each months as month}
@@ -291,6 +294,8 @@
                color: white;
                padding: 8px 16px;
                font-size: 16px;
+               border-top-left-radius: 8px;
+               border-top-right-radius: 8px;
        }
        .calendar-container {
                position: relative;
@@ -387,7 +392,8 @@
                cursor: pointer;
                padding: 2px 12px;
                border-radius: 4px;
-               max-width: 100px;
+               max-width: 150px;
+               min-width: 100px;
                text-align: center;
                text-align-last: center;
                -webkit-appearance: none;

diff --git a/frontend/src/lib/Sidenav.svelte b/frontend/src/lib/Sidenav.svelte
index 6ec22955b9d107c2ce6ea1eaca97951f274ed97c..61914f42151ac56d897cd53f31664ed2b1a5a2e5 100644 (file)
--- a/frontend/src/lib/Sidenav.svelte
+++ b/frontend/src/lib/Sidenav.svelte
@@ -12,9 +12,10 @@
        import { API_URL } from '$lib/APIurl.js';
        import axios from 'axios';
        import { cal } from '$lib/calendarStore.js';
-       import { getTranslate } from '@tolgee/svelte';
+       import { getTranslate, getTolgee } from '@tolgee/svelte';
 
        const { t } = getTranslate();
+       const tolgee = getTolgee(['language']);
 
        let oc;
 
@@ -358,11 +359,14 @@
                                        >
                                                <div class="search-result-content">
                                                        <div class="date">
-                                                               {new Date(result.year, result.month - 1, result.day).toLocaleDateString('locale', {
-                                                                       day: '2-digit',
-                                                                       month: '2-digit',
-                                                                       year: 'numeric'
-                                                               })}
+                                                               {new Date(result.year, result.month - 1, result.day).toLocaleDateString(
+                                                                       $tolgee.getLanguage(),
+                                                                       {
+                                                                               day: '2-digit',
+                                                                               month: '2-digit',
+                                                                               year: 'numeric'
+                                                                       }
+                                                               )}
                                                        </div>
                                                        <!-- <div class="search-separator"></div> -->
                                                        <div class="text">
@@ -447,6 +451,11 @@
                background-color: #eee;
        }
 
+       :global(.popover-body) {
+               overflow-y: auto;
+               max-height: 550px;
+       }
+
        .searchTagDropdown {
                position: absolute;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

diff --git a/frontend/src/lib/settings/Statistics.svelte b/frontend/src/lib/settings/Statistics.svelte
index e7c5f554c61796e85449503a8f4d94359b89ddf9..2a3463f73a4503d6eda9c3a0373c607678668752 100644 (file)
--- a/frontend/src/lib/settings/Statistics.svelte
+++ b/frontend/src/lib/settings/Statistics.svelte
@@ -177,7 +177,7 @@
        }
 
        const fmtDate = (d) =>
-               d.toLocaleDateString(undefined, {
+               d.toLocaleDateString($tolgee.getLanguage(), {
                        weekday: 'long',
                        year: 'numeric',
                        month: '2-digit',

diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index 7ef82dd61319164cfeb7355d4381988afeda15ea..0f31d636ee3c37aa56c8e783f900849cce5358d2 100644 (file)
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -35,9 +35,10 @@
        import { insertTemplate } from '$lib/templateStore';
        import ALookBack from '$lib/ALookBack.svelte';
        import { marked } from 'marked';
-       import { T, getTranslate } from '@tolgee/svelte';
+       import { getTranslate, getTolgee } from '@tolgee/svelte';
 
        const { t } = getTranslate();
+       const tolgee = getTolgee(['language']);
 
        axios.interceptors.request.use((config) => {
                config.withCredentials = true;
@@ -341,7 +342,7 @@
                let timezone = $settings.useBrowserTimezone
                        ? Intl.DateTimeFormat().resolvedOptions().timeZone
                        : $settings.timezone;
-               let date_written = new Date().toLocaleString('de-DE', {
+               let date_written = new Date().toLocaleString($tolgee.getLanguage(), {
                        timeZone: timezone,
                        year: 'numeric',
                        month: '2-digit',
@@ -1145,10 +1146,10 @@
                                <div class="flex-fill textAreaDate">
                                        {new Date(
                                                Date.UTC($selectedDate.year, $selectedDate.month - 1, $selectedDate.day)
-                                       ).toLocaleDateString('locale', { weekday: 'long', timeZone: 'UTC' })}<br />
+                                       ).toLocaleDateString($tolgee.getLanguage(), { weekday: 'long', timeZone: 'UTC' })}<br />
                                        {new Date(
                                                Date.UTC($selectedDate.year, $selectedDate.month - 1, $selectedDate.day)
-                                       ).toLocaleDateString('locale', {
+                                       ).toLocaleDateString($tolgee.getLanguage(), {
                                                day: '2-digit',
                                                month: '2-digit',
                                                year: 'numeric',

diff --git a/frontend/src/routes/test/+page.svelte b/frontend/src/routes/test/+page.svelte
deleted file mode 100644 (file)
index 9f16758..0000000
--- a/frontend/src/routes/test/+page.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<div class="row" style="height: 100%; overflow: hidden;">
-       <div class="col-4" style="height: 100%; overflow-y: auto;">
-               <p class="my-4 focus-ring" contenteditable="true">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-       </div>
-       <div class="col-8">
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-               <p class="my-4">huhu</p>
-       </div>
-</div>