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

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

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