blob: cded0b78d4d6a2d3ff1995d171dae980d163a3de (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<script lang="ts" context="module">
import type { Badge, Shelf } from '@jet-app/app-store/api/models';
interface ProductBadgeShelf extends Shelf {
items: Badge[];
}
export function isProductBadgeShelf(
shelf: Shelf,
): shelf is ProductBadgeShelf {
const { contentType, items } = shelf || {};
return contentType === 'productBadge' && Array.isArray(items);
}
</script>
<script lang="ts">
import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
import ProductBadgeItem from '~/components/jet/item/ProductBadgeItem.svelte';
import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
export let shelf: ProductBadgeShelf;
$: shelf.items = shelf.items.filter(
(item) => item.type !== 'friendsPlaying',
);
</script>
<ShelfWrapper {shelf} withBottomPadding={false} withTopMargin={true}>
<div class="inforibbon-shelf-wrapper">
<ShelfItemLayout {shelf} gridType="ProductBadge" let:item>
<ProductBadgeItem {item} />
</ShelfItemLayout>
</div>
</ShelfWrapper>
<style lang="scss">
.inforibbon-shelf-wrapper {
padding-bottom: 16px;
}
.inforibbon-shelf-wrapper :global(ul) {
display: grid;
/*
Here we are overriding the grid template styles from `ShelfItemLayout -> Grid`,
to make it so the badge row always takes up the full-width of the browser until
when not in the XS/mobile view.
*/
@media (--range-small-up) {
display: flex;
justify-content: space-between;
}
}
// prevent collapse of focus outlines
.inforibbon-shelf-wrapper :global(a) {
display: block;
}
</style>
|
