Skip to content

Commit ea7de78

Browse files
MrYuionMrYuion
committed
chore(concierge): fix overflow on signage approvals
1 parent b61b5d7 commit ea7de78

File tree

1 file changed

+129
-121
lines changed

1 file changed

+129
-121
lines changed

‎apps/concierge/src/app/signage/signage-approve-playlist-modal.component.ts‎

Lines changed: 129 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -43,139 +43,147 @@ import { SignageStateService } from './signage-state.service';
4343
}
4444
</header>
4545
@if (!loading()) {
46-
<main class="flex space-x-2 py-2">
46+
<main class="max-h-[60vh] gap-2 overflow-auto py-2">
4747
@let versions = playlist_versions | async;
4848
@let media = playlist_media | async;
49-
<div
50-
class="border-base-300 bg-success-light w-[24rem] rounded-sm border"
51-
>
52-
@let current_version = versions?.[0];
53-
@let current_media = media?.[0] || [];
49+
<div class="flex gap-2">
5450
<div
55-
class="border-base-300 bg-base-200 flex items-center space-x-8 rounded-sm border-b px-4 py-2"
51+
class="border-base-300 bg-success-light w-[24rem] rounded-sm border"
5652
>
57-
<h3>Version to approve</h3>
58-
<div class="font-mono text-xs opacity-50">
59-
{{
60-
current_version?.updated_at * 1000
61-
| date: 'dd MMM, HH:mm'
62-
}}
63-
</div>
64-
</div>
65-
<div class="space-y-2 p-2">
66-
<div class="px-2 text-sm">
67-
{{
68-
'COMMON.ITEM_COUNT'
69-
| translate
70-
: {
71-
count:
72-
current_version?.items
73-
.length || 0,
74-
}
75-
: current_version?.items.length || 0
76-
}}
53+
@let current_version = versions?.[0];
54+
@let current_media = media?.[0] || [];
55+
<div
56+
class="border-base-300 bg-base-200 flex items-center space-x-8 rounded-sm border-b px-4 py-2"
57+
>
58+
<h3>Version to approve</h3>
59+
<div class="font-mono text-xs opacity-50">
60+
{{
61+
current_version?.updated_at * 1000
62+
| date: 'dd MMM, HH:mm'
63+
}}
64+
</div>
7765
</div>
78-
@for (item of current_media; track item.id) {
79-
<div
80-
class="border-base-300 bg-base-100 flex items-center space-x-2 rounded-sm border p-2"
81-
>
82-
<button
83-
class="bg-base-200 h-10 w-10 shrink-0 overflow-hidden rounded-sm"
84-
matRipple
85-
(click)="previewItem(item)"
66+
<div class="space-y-2 p-2">
67+
<div class="px-2 text-sm">
68+
{{
69+
'COMMON.ITEM_COUNT'
70+
| translate
71+
: {
72+
count:
73+
current_version?.items
74+
.length || 0,
75+
}
76+
: current_version?.items
77+
.length || 0
78+
}}
79+
</div>
80+
@for (item of current_media; track item.id) {
81+
<div
82+
class="border-base-300 bg-base-100 flex items-center space-x-2 rounded-sm border p-2"
8683
>
87-
@if (item.thumbnail_url) {
88-
<img
89-
auth
90-
[source]="item.thumbnail_url"
91-
class="h-full w-full object-cover"
92-
/>
93-
<div
94-
class="absolute inset-0 flex items-end justify-end p-1 opacity-0 transition-opacity duration-200 hover:opacity-100"
95-
>
96-
<icon class="text-lg"
97-
>expand_content</icon
84+
<button
85+
class="bg-base-200 h-10 w-10 shrink-0 overflow-hidden rounded-sm"
86+
matRipple
87+
(click)="previewItem(item)"
88+
>
89+
@if (item.thumbnail_url) {
90+
<img
91+
auth
92+
[source]="
93+
item.thumbnail_url
94+
"
95+
class="h-full w-full object-cover"
96+
/>
97+
<div
98+
class="absolute inset-0 flex items-end justify-end p-1 opacity-0 transition-opacity duration-200 hover:opacity-100"
9899
>
99-
</div>
100-
}
101-
</button>
102-
<span class="truncate">{{
103-
item.name
104-
}}</span>
105-
</div>
106-
} @empty {
107-
<div
108-
class="flex flex-col items-center justify-center p-8 opacity-30"
109-
>
110-
<icon class="text-4xl">hide_image</icon>
111-
<p class="text-sm">
112-
{{ 'COMMON.NO_ITEMS' | translate }}
113-
</p>
114-
</div>
115-
}
100+
<icon class="text-lg"
101+
>expand_content</icon
102+
>
103+
</div>
104+
}
105+
</button>
106+
<span class="truncate">{{
107+
item.name
108+
}}</span>
109+
</div>
110+
} @empty {
111+
<div
112+
class="flex flex-col items-center justify-center p-8 opacity-30"
113+
>
114+
<icon class="text-4xl">hide_image</icon>
115+
<p class="text-sm">
116+
{{ 'COMMON.NO_ITEMS' | translate }}
117+
</p>
118+
</div>
119+
}
120+
</div>
116121
</div>
117-
</div>
118-
<div
119-
class="border-base-300 bg-error-light w-[24rem] rounded-sm border"
120-
>
121-
@let previous_version = versions?.[1];
122-
@let previous_media = media?.[1] || [];
123122
<div
124-
class="border-base-300 bg-base-200 flex items-center space-x-8 rounded-sm border-b px-4 py-2"
123+
class="border-base-300 bg-error-light w-[24rem] rounded-sm border"
125124
>
126-
<h3>Previous version</h3>
127-
<div class="font-mono text-xs opacity-50">
128-
{{
129-
previous_version?.updated_at * 1000
130-
| date: 'dd MMM, HH:mm'
131-
}}
132-
</div>
133-
</div>
134-
<div class="space-y-2 p-2">
135-
<div class="space-y-2 px-2 text-sm">
136-
{{
137-
'COMMON.ITEM_COUNT'
138-
| translate
139-
: {
140-
count:
141-
previous_version?.items
142-
.length || 0,
143-
}
144-
: previous_version?.items.length ||
145-
0
146-
}}
147-
</div>
148-
@for (item of previous_media; track item.id) {
149-
<div
150-
class="border-base-300 bg-base-100 flex items-center space-x-2 rounded-sm border p-2"
151-
>
152-
<button
153-
class="bg-base-200 h-10 w-10 shrink-0 overflow-hidden rounded-sm"
154-
matRipple
155-
(click)="previewItem(item)"
156-
>
157-
@if (item.thumbnail_url) {
158-
<img
159-
auth
160-
[source]="item.thumbnail_url"
161-
class="h-full w-full object-cover"
162-
/>
163-
}
164-
</button>
165-
<span class="truncate">{{
166-
item.name
167-
}}</span>
125+
@let previous_version = versions?.[1];
126+
@let previous_media = media?.[1] || [];
127+
<div
128+
class="border-base-300 bg-base-200 flex items-center space-x-8 rounded-sm border-b px-4 py-2"
129+
>
130+
<h3>Previous version</h3>
131+
<div class="font-mono text-xs opacity-50">
132+
{{
133+
previous_version?.updated_at * 1000
134+
| date: 'dd MMM, HH:mm'
135+
}}
168136
</div>
169-
} @empty {
170-
<div
171-
class="flex flex-col items-center justify-center p-8 opacity-30"
172-
>
173-
<icon class="text-4xl">hide_image</icon>
174-
<p class="text-sm">
175-
{{ 'COMMON.NO_ITEMS' | translate }}
176-
</p>
137+
</div>
138+
<div class="space-y-2 p-2">
139+
<div class="space-y-2 px-2 text-sm">
140+
{{
141+
'COMMON.ITEM_COUNT'
142+
| translate
143+
: {
144+
count:
145+
previous_version
146+
?.items.length ||
147+
0,
148+
}
149+
: previous_version?.items
150+
.length || 0
151+
}}
177152
</div>
178-
}
153+
@for (item of previous_media; track item.id) {
154+
<div
155+
class="border-base-300 bg-base-100 flex items-center space-x-2 rounded-sm border p-2"
156+
>
157+
<button
158+
class="bg-base-200 h-10 w-10 shrink-0 overflow-hidden rounded-sm"
159+
matRipple
160+
(click)="previewItem(item)"
161+
>
162+
@if (item.thumbnail_url) {
163+
<img
164+
auth
165+
[source]="
166+
item.thumbnail_url
167+
"
168+
class="h-full w-full object-cover"
169+
/>
170+
}
171+
</button>
172+
<span class="truncate">{{
173+
item.name
174+
}}</span>
175+
</div>
176+
} @empty {
177+
<div
178+
class="flex flex-col items-center justify-center p-8 opacity-30"
179+
>
180+
<icon class="text-4xl">hide_image</icon>
181+
<p class="text-sm">
182+
{{ 'COMMON.NO_ITEMS' | translate }}
183+
</p>
184+
</div>
185+
}
186+
</div>
179187
</div>
180188
</div>
181189
</main>

0 commit comments

Comments
 (0)