css fixes

diff --git a/frontend/src/lib/ALookBack.svelte b/frontend/src/lib/ALookBack.svelte
index c2d218ff0d6ad69465a7173dc8fd10a2cb2a479e..1b412fe34a1c1085f519cd7ea08ecc287eb30e13 100644 (file)
--- a/frontend/src/lib/ALookBack.svelte
+++ b/frontend/src/lib/ALookBack.svelte
@@ -42,8 +42,8 @@
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
-<button onclick={openModal} id="zoomButton" class="btn" style="width: 200px; height: 100px;">
-       <div class="d-flex flex-row h-100">
+<button onclick={openModal} id="zoomButton" class="btn" style="height:100px;">
+       <div class="d-flex flex-row h-100" style="width: 200px;">
                <div class="left d-flex flex-column justify-content-evenly px-1">
                        <div><b>{log?.year}</b></div>
                        <div><em><b>{log?.years_old}</b> {$t('aLookBack.Year_one_letter')}</em></div>

diff --git a/frontend/src/lib/FileList.svelte b/frontend/src/lib/FileList.svelte
index 56ad128c15750af2d345e2d5f4202c0a5eaf0b2d..4f9df856ab6ee3759048b32fc06fe731f363d414 100644 (file)
--- a/frontend/src/lib/FileList.svelte
+++ b/frontend/src/lib/FileList.svelte
@@ -80,169 +80,163 @@
        }
 </script>
 
-{#each files as file, index (file.uuid_filename)}
-       <!-- svelte-ignore a11y_no_static_element_interactions -->
-       <div
-               class="btn-group file mt-2 {dragOverIndex === index ? 'drag-over' : ''}"
-               transition:slide
-               draggable="false"
-               ondragover={(e) => handleDragOver(e, index)}
-               ondragleave={handleDragLeave}
-               ondrop={(e) => handleDrop(e, index)}
-       >
-               <!-- svelte-ignore a11y_no_static_element_interactions -->
-               {#if editable && files.length > 1}
-                       <div
-                               class="drag-handle d-flex align-items-center px-2"
-                               draggable="true"
-                               ondragstart={(e) => {
-                                       e.stopPropagation();
-                                       handleDragStart(e, index);
-                               }}
-                               ondragend={(e) => {
-                                       e.stopPropagation();
-                                       handleDragEnd(e);
-                               }}
-                       >
-                               <Fa icon={faGripVertical} class="text-muted" />
-                       </div>
-               {/if}
-               <button
-                       onclick={() => downloadFile(file.uuid_filename)}
-                       class="p-2 fileBtn d-flex flex-column flex-fill"
-               >
-                       <div class="d-flex flex-row align-items-center">
-                               <div class="filename filenameWeight">{file.filename}</div>
-                               <span class="filesize">({formatBytes(file.size)})</span>
-                       </div>
-                       {#if file.downloadProgress >= 0}
+{#if files.length > 0}
+       <div class="file-list">
+               {#each files as file, index (file.uuid_filename)}
+                       <div class="file-row" transition:slide|global>
+                               <!-- svelte-ignore a11y_no_static_element_interactions -->
                                <div
-                                       class="progress"
-                                       role="progressbar"
-                                       aria-label="Download progress"
-                                       aria-valuemin="0"
-                                       aria-valuemax="100"
+                                       class="btn-group file {dragOverIndex === index ? 'drag-over' : ''}"
+                                       draggable="false"
+                                       ondragover={(e) => handleDragOver(e, index)}
+                                       ondragleave={handleDragLeave}
+                                       ondrop={(e) => handleDrop(e, index)}
                                >
-                                       <div
-                                               class="progress-bar overflow-visible bg-info {file.downloadProgress === 0
-                                                       ? 'progress-bar-striped progress-bar-animated'
-                                                       : ''}"
-                                               style:width={file.downloadProgress + '%'}
-                                               aria-valuenow={file.downloadProgress}
-                                               aria-valuemax="100"
+                                       {#if editable && files.length > 1}
+                                               <div
+                                                       class="drag-handle d-flex align-items-center px-2"
+                                                       draggable="true"
+                                                       ondragstart={(e) => {
+                                                               e.stopPropagation();
+                                                               handleDragStart(e, index);
+                                                       }}
+                                                       ondragend={(e) => {
+                                                               e.stopPropagation();
+                                                               handleDragEnd(e);
+                                                       }}
+                                               >
+                                                       <Fa icon={faGripVertical} class="text-muted" />
+                                               </div>
+                                       {/if}
+                                       <button
+                                               onclick={() => downloadFile(file.uuid_filename)}
+                                               class="p-2 fileBtn d-flex flex-column flex-fill"
                                        >
-                                               {#if file.downloadProgress === 0}
-                                                       <span class="text-dark">
-                                                               {$t('files.decrypting')}
-                                                       </span>
-                                               {:else}
-                                                       <span class="text-dark">{$t('files.download')}: {file.downloadProgress}%</span>
+                                               <div class="d-flex flex-row align-items-center">
+                                                       <div class="filename filenameWeight">{file.filename}</div>
+                                                       <span class="filesize">({formatBytes(file.size)})</span>
+                                               </div>
+                                               {#if file.downloadProgress >= 0}
+                                                       <div
+                                                               class="progress"
+                                                               role="progressbar"
+                                                               aria-label="Download progress"
+                                                               aria-valuemin="0"
+                                                               aria-valuemax="100"
+                                                       >
+                                                               <div
+                                                                       class="progress-bar overflow-visible bg-info {file.downloadProgress === 0
+                                                                               ? 'progress-bar-striped progress-bar-animated'
+                                                                               : ''}"
+                                                                       style:width={file.downloadProgress + '%'}
+                                                                       aria-valuenow={file.downloadProgress}
+                                                                       aria-valuemax="100"
+                                                               >
+                                                                       {#if file.downloadProgress === 0}
+                                                                               <span class="text-dark">{$t('files.decrypting')}</span>
+                                                                       {:else}
+                                                                               <span class="text-dark">{$t('files.download')}: {file.downloadProgress}%</span>
+                                                                       {/if}
+                                                               </div>
+                                                       </div>
                                                {/if}
-                                       </div>
+                                       </button>
+                                       {#if editable}
+                                               <button
+                                                       class="p-2 fileBtn optionsBtn"
+                                                       onclick={() => {
+                                                               if (openOptionsMenu === file.uuid_filename) {
+                                                                       openOptionsMenu = null;
+                                                                       editingFilename = null;
+                                                               } else {
+                                                                       openOptionsMenu = file.uuid_filename;
+                                                                       editingFilename = null;
+                                                               }
+                                                       }}
+                                               >
+                                                       <Fa icon={faWrench} fw />
+                                               </button>
+                                       {/if}
                                </div>
-                       {/if}
-               </button>
-               {#if editable}
-                       <button
-                               class="p-2 fileBtn optionsBtn"
-                               onclick={() => {
-                                       if (openOptionsMenu === file.uuid_filename) {
-                                               openOptionsMenu = null;
-                                               editingFilename = null;
-                                       } else {
-                                               openOptionsMenu = file.uuid_filename;
-                                               editingFilename = null;
-                                       }
-                               }}
-                       >
-                               <Fa icon={faWrench} fw />
-                       </button>
-               {/if}
-       </div>
+                       </div>
 
-       {#if editable && openOptionsMenu === file.uuid_filename}
-               <div transition:slide>
-                       <div class="options-menu p-3 mt-1">
-                               <div class="mb-3">
-                                       <!-- svelte-ignore a11y_label_has_associated_control -->
-                                       <label class="form-label small fw-bold">{$t('fileList.change_filename')}:</label>
-                                       <div class="d-flex gap-2">
-                                               {#if editingFilename === file.uuid_filename}
-                                                       <input
-                                                               type="text"
-                                                               class="form-control form-control-sm"
-                                                               id="newFilename-{file.uuid_filename}"
-                                                               bind:value={newFilename}
-                                                               onkeydown={(e) => {
-                                                                       if (e.key === 'Enter') {
-                                                                               if (renameFile) {
-                                                                                       renameFile(file.uuid_filename, newFilename);
+                       {#if editable && openOptionsMenu === file.uuid_filename}
+                               <div in:slide|global out:slide|global>
+                                       <div class="card options-menu p-3 mt-1">
+                                               <!-- svelte-ignore a11y_label_has_associated_control -->
+                                               <label class="form-label small fw-bold">{$t('fileList.change_filename')}:</label>
+                                               <div class="d-flex gap-2">
+                                                       {#if editingFilename === file.uuid_filename}
+                                                               <input
+                                                                       type="text"
+                                                                       class="form-control form-control-sm"
+                                                                       id="newFilename-{file.uuid_filename}"
+                                                                       bind:value={newFilename}
+                                                                       onkeydown={(e) => {
+                                                                               if (e.key === 'Enter') {
+                                                                                       if (renameFile) renameFile(file.uuid_filename, newFilename);
+                                                                                       editingFilename = null;
+                                                                                       openOptionsMenu = null;
+                                                                               } else if (e.key === 'Escape') {
+                                                                                       editingFilename = null;
                                                                                }
+                                                                       }}
+                                                               />
+                                                               <button
+                                                                       class="btn btn-sm btn-success"
+                                                                       onclick={() => {
+                                                                               if (renameFile) renameFile(file.uuid_filename, newFilename);
                                                                                editingFilename = null;
                                                                                openOptionsMenu = null;
-                                                                       } else if (e.key === 'Escape') {
+                                                                       }}
+                                                               >
+                                                                       <Fa icon={faSave} fw />
+                                                               </button>
+                                                               <button
+                                                                       class="btn btn-sm btn-secondary"
+                                                                       onclick={() => {
                                                                                editingFilename = null;
-                                                                       }
-                                                               }}
-                                                       />
+                                                                       }}
+                                                               >
+                                                                       <Fa icon={faTimes} fw />
+                                                               </button>
+                                                       {:else}
+                                                               <input
+                                                                       type="text"
+                                                                       class="form-control form-control-sm"
+                                                                       value={file.filename}
+                                                                       disabled
+                                                               />
+                                                               <button
+                                                                       class="btn btn-sm btn-primary"
+                                                                       onclick={() => {
+                                                                               editingFilename = file.uuid_filename;
+                                                                               newFilename = file.filename;
+                                                                       }}
+                                                               >
+                                                                       <Fa icon={faEdit} fw />
+                                                               </button>
+                                                       {/if}
+                                               </div>
+                                               <hr style="color: black;" />
+                                               <div>
                                                        <button
-                                                               class="btn btn-sm btn-success"
+                                                               class="btn btn-sm btn-danger w-100"
                                                                onclick={() => {
-                                                                       if (renameFile) {
-                                                                               renameFile(file.uuid_filename, newFilename);
-                                                                       }
-                                                                       editingFilename = null;
+                                                                       askDeleteFile(file.uuid_filename, file.filename);
                                                                        openOptionsMenu = null;
                                                                }}
                                                        >
-                                                               <Fa icon={faSave} fw />
+                                                               <Fa icon={faTrash} fw class="me-2" />
+                                                               {$t('fileList.delete_file')}
                                                        </button>
-                                                       <button
-                                                               class="btn btn-sm btn-secondary"
-                                                               onclick={() => {
-                                                                       editingFilename = null;
-                                                               }}
-                                                       >
-                                                               <Fa icon={faTimes} fw />
-                                                       </button>
-                                               {:else}
-                                                       <input
-                                                               type="text"
-                                                               class="form-control form-control-sm"
-                                                               value={file.filename}
-                                                               disabled
-                                                       />
-                                                       <button
-                                                               class="btn btn-sm btn-primary"
-                                                               onclick={() => {
-                                                                       editingFilename = file.uuid_filename;
-                                                                       newFilename = file.filename;
-                                                               }}
-                                                       >
-                                                               <Fa icon={faEdit} fw />
-                                                       </button>
-                                               {/if}
+                                               </div>
                                        </div>
                                </div>
-
-                               <hr style="color: black;" />
-
-                               <div>
-                                       <button
-                                               class="btn btn-sm btn-danger w-100"
-                                               onclick={() => {
-                                                       askDeleteFile(file.uuid_filename, file.filename);
-                                                       openOptionsMenu = null;
-                                               }}
-                                       >
-                                               <Fa icon={faTrash} fw class="me-2" />
-                                               {$t('fileList.delete_file')}
-                                       </button>
-                               </div>
-                       </div>
-               </div>
-       {/if}
-{/each}
+                       {/if}
+               {/each}
+       </div>
+{/if}
 
 <style>
        .filename {
@@ -281,7 +275,6 @@
        }
 
        .options-menu {
-               background-color: rgba(248, 249, 250, 0.95);
                border: 1px solid rgba(0, 0, 0, 0.125);
                border-radius: 5px;
                backdrop-filter: blur(5px);
@@ -306,4 +299,10 @@
                border: 2px dashed #007bff;
                background-color: rgba(0, 123, 255, 0.1);
        }
+
+       .file-list {
+               display: flex;
+               flex-direction: column;
+               gap: 0.5rem;
+       }
 </style>

diff --git a/frontend/src/lib/ImageViewer.svelte b/frontend/src/lib/ImageViewer.svelte
index 60d8be0aea84ba112e4b91b306efd6155c95205d..b2c752698bafc812a6f53c3c60e7046b04dc76e0 100644 (file)
--- a/frontend/src/lib/ImageViewer.svelte
+++ b/frontend/src/lib/ImageViewer.svelte
@@ -220,6 +220,8 @@
                gap: 1rem;
                overflow-x: auto;
                padding: 0.5rem 0;
+               height: 116px;
+               min-height: 116px;
        }
 
        .image-container {

diff --git a/frontend/src/lib/Sidenav.svelte b/frontend/src/lib/Sidenav.svelte
index 61914f42151ac56d897cd53f31664ed2b1a5a2e5..c8014a8382d40009e13b87d4efbe3dd073211e18 100644 (file)
--- a/frontend/src/lib/Sidenav.svelte
+++ b/frontend/src/lib/Sidenav.svelte
@@ -427,6 +427,12 @@
                margin-bottom: 3rem;
        }
 
+       @media (max-height: 800px) {
+               :global(.datepicker) {
+                       margin-bottom: 1rem;
+               }
+       }
+
        .noResult {
                font-size: 25pt;
                font-weight: 750;
@@ -453,7 +459,8 @@
 
        :global(.popover-body) {
                overflow-y: auto;
-               max-height: 550px;
+               /* max-height: 550px; */
+               max-height: 90vh;
        }
 
        .searchTagDropdown {

diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 0e7265ab3f297b6f9d9390c7387836047ed8db30..e27935aa99d723f8a75e09ff94a174be2c1764e6 100644 (file)
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -1167,7 +1167,7 @@
 
        {#key page.data}
                <div
-                       class="transition-wrapper overflow-y-auto"
+                       class="transition-wrapper overflow-y-auto h-100"
                        out:blur={{ duration: outDuration }}
                        in:blur={{ duration: inDuration, delay: outDuration }}
                >

diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index 9c2cee2faf88f2f1fddca34498347690ab96f401..18a628f33813a1304aac1050c60aa7daa1628c57 100644 (file)
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -1166,7 +1166,7 @@
        <Sidenav />
 </div>
 
-<div class="d-flex flex-row justify-content-between h-100 main-row">
+<div class="d-flex flex-row justify-content-between main-row h-100">
        <!-- shown on large Screen -->
        {#if $alwaysShowSidenav}
                <div class="sidenav p-3">
@@ -1234,7 +1234,7 @@
                        {/if}
 
                        {#if $settings.useALookBack && aLookBack.length > 0}
-                               <div class="mt-3 d-flex gap-2 overflow-x-auto">
+                               <div class="mt-3 d-flex gap-2 overflow-x-auto mb-2 a-look-back">
                                        {#each aLookBack as log}
                                                <ALookBack {log} />
                                        {/each}
@@ -1349,14 +1349,17 @@
                                >
                                <input type="file" id="fileInput" multiple style="display: none;" onchange={onFileChange} />
 
-                               <FileList
-                                       files={filesOfDay}
-                                       {downloadFile}
-                                       {askDeleteFile}
-                                       {renameFile}
-                                       {reorderFiles}
-                                       editable
-                               />
+                               <div class="fileScroll">
+                                       <FileList
+                                               files={filesOfDay}
+                                               {downloadFile}
+                                               {askDeleteFile}
+                                               {renameFile}
+                                               {reorderFiles}
+                                               editable
+                                       />
+                               </div>
+
                                {#each uploadingFiles as file}
                                        <div>
                                                {file.name}
@@ -1770,6 +1773,11 @@
 </div>
 
 <style>
+       .a-look-back {
+               height: 110px;
+               min-height: 110px;
+       }
+
        #modalHistory > div > div {
                height: 80vh;
        }
@@ -1937,6 +1945,11 @@
                margin-bottom: 1rem;
                border-radius: 10px;
                padding: 1rem;
+               min-height: 0;
+       }
+
+       .fileScroll {
+               overflow-y: auto;
        }
 
        :global(#uploadIcon) {