thm
/
upend
1
0
Fork 0
Code Issues 75 Pull Requests Packages Projects Releases 6 Wiki Activity

fix: blobpreview sizing

feat/type-attributes
Tomáš Mládek 2022-10-21 17:59:57 +02:00
parent 639d83f9ad
commit b5a46d928f
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
webui/src/components/display/BlobPreview.svelte
View File

@ -103,7 +103,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
max-height: max(25em, 100%); max-height: 100%;
flex-grow: 1;
min-height: 0;
} }
.image { .image {
@ -129,19 +132,24 @@
.group { .group {
padding: 0; padding: 0;
flex-grow: 1;
min-height: 0;
width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
min-height: 0; grid-template-rows: repeat(2, 1fr);
margin: 2px; margin: 2px;
border: 1px solid var(--foreground); border: 1px solid var(--foreground);
border-radius: 4px; border-radius: 4px;
li { li {
list-style: none;
min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: end;
list-style: none;
min-height: 0;
} }
} }
</style> </style>

11
webui/src/components/widgets/Gallery.svelte
View File

@ -96,7 +96,7 @@
{#each sortedEntities as entity (entity)} {#each sortedEntities as entity (entity)}
{#if thumbnails} {#if thumbnails}
<div class="thumbnail"> <div class="thumbnail">
<UpLink to={{ entity }}> <UpLink to={{ entity }} passthrough>
<BlobPreview address={entity} /> <BlobPreview address={entity} />
<div class="label"> <div class="label">
<UpObject <UpObject
@ -120,6 +120,7 @@
border: 1px solid var(--foreground-lighter); border: 1px solid var(--foreground-lighter);
border-radius: 4px; border-radius: 4px;
padding: 0.25em; padding: 0.25em;
max-height: 420px;
} }
.items { .items {
@ -133,6 +134,10 @@
:global(.gallery.style-grid .items) { :global(.gallery.style-grid .items) {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
.thumbnail {
height: 256px;
}
} }
:global(.gallery.style-flex .items) { :global(.gallery.style-flex .items) {
@ -151,9 +156,5 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
flex-grow: 1;
min-width: 0;
flex-basis: 20%;
} }
</style> </style>