Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-22 10:46:19 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/ProcessingQueue: fix ui on narrow screens

Browse source
This commit is contained in:
wukko 2024-12-18 17:47:48 +06:00
parent eba8dc3767
commit f3ff3656ef
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
web/src/components/queue/ProcessingQueue.svelte
View file

@ -63,7 +63,7 @@
});
</script>
<div id="processing-manager">
<div id="processing-queue" class:expanded>
<ProcessingStatus {indeterminate} expandAction={popover?.showPopover} />
<PopoverContainer
@ -108,7 +108,8 @@
</div>
<style>
#processing-manager {
#processing-queue {
--holder-padding: 16px;
position: absolute;
right: 0;
display: flex;
@ -117,14 +118,17 @@
justify-content: end;
z-index: 9;
pointer-events: none;
padding: 16px;
padding: var(--holder-padding);
width: calc(100% - var(--holder-padding) * 2);
}
#processing-manager :global(#processing-popover) {
max-width: 425px;
#processing-queue :global(#processing-popover) {
gap: 12px;
padding: 16px;
padding-bottom: 0;
width: calc(100% - 16px * 2);
max-width: 425px;
}
#processing-header {
@ -166,13 +170,15 @@
display: flex;
flex-direction: column;
max-height: 60vh;
max-height: 65vh;
overflow: scroll;
}
@media screen and (max-width: 535px) {
#processing-manager {
top: calc(env(safe-area-inset-top) - var(--padding) + 4px);
#processing-queue {
--holder-padding: 8px;
padding-top: 4px;
top: env(safe-area-inset-top);
}
}
</style>

2
web/src/components/queue/ProcessingQueueItem.svelte
View file

@ -52,7 +52,7 @@
}
.processing-item {
width: 425px;
width: 100%;
padding: 8px 0;
gap: 8px;
border-bottom: 1.5px var(--button-elevated) solid;