lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Fix mozaic layout

Browse source
This commit is contained in:
Alexis Faizeau 2022-02-02 12:15:13 +01:00
parent 4a9cc57d60
commit 7e9343f1b7
2 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte
View file

@ -23,8 +23,9 @@
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
<MediaBox
streamable={peer}
mozaicSolo={$streamableCollectionStore.size === 1}
mozaicFullWidth={$streamableCollectionStore.size === 1 || $streamableCollectionStore.size === 2}
mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size === 4}
mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size >= 4}
/>
{/each}
</div>

9
front/src/Components/Video/MediaBox.svelte
View file

@ -9,6 +9,7 @@
export let streamable: Streamable;
export let isHightlighted = false;
export let isClickable = false;
export let mozaicSolo = false;
export let mozaicFullWidth = false;
export let mozaicQuarter = false;
</script>
@ -16,6 +17,7 @@
<div
class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}"
class:clickable={isClickable}
class:mozaic-solo={mozaicSolo}
class:mozaic-full-width={mozaicFullWidth}
class:mozaic-quarter={mozaicQuarter}
>
@ -66,6 +68,11 @@
}
}
&.mozaic-solo {
max-height: inherit !important;
width: 90% !important;
}
&.mozaic-full-width {
width: 95%;
max-width: 95%;
@ -73,6 +80,7 @@
margin-right: 3%;
margin-top: auto;
margin-bottom: auto;
max-height: 95%;
&:hover {
margin-top: auto;
@ -85,6 +93,7 @@
max-width: 95%;
margin-top: auto;
margin-bottom: auto;
max-height: 95%;
&:hover {
margin-top: auto;