Skip to content

Commit 6cf351a

Browse files
MrYuionMrYuion
committed
chore(concierge): tweak styling for booking rules modal
1 parent 10a3325 commit 6cf351a

File tree

2 files changed

+68
-52
lines changed

2 files changed

+68
-52
lines changed

‎apps/concierge/src/app/ui/booking-rules-modal.component.ts‎

Lines changed: 57 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ import {
5353
: ''
5454
"
5555
[hide_confirm]="true"
56+
[full_width]="view !== 'form'"
5657
>
5758
<div>
5859
<div
@@ -111,7 +112,7 @@ import {
111112
{
112113
key: 'actions',
113114
name: ' ',
114-
size: '11.5rem',
115+
size: '5.5rem',
115116
content: actions_template,
116117
},
117118
]"
@@ -161,57 +162,66 @@ import {
161162
</ng-template>
162163
<ng-template #actions_template let-row="row">
163164
<div
164-
class="mx-auto flex w-full items-center space-x-2 px-2"
165+
class="mx-auto flex w-full flex-col items-center justify-center gap-1 p-1"
165166
>
166-
<button
167-
icon
168-
matRipple
169-
(click)="editRuleset(row)"
170-
[matTooltip]="
171-
'APP.CONCIERGE.BOOKING_RULESET_EDIT'
172-
| translate
173-
"
174-
>
175-
<icon>edit</icon>
176-
</button>
177-
<button
178-
icon
179-
matRipple
180-
(click)="updateRulesetPriority(row, -1)"
181-
[matTooltip]="
182-
'APP.CONCIERGE.BOOKING_RULESET_PRIORITY_UP'
183-
| translate
184-
"
185-
>
186-
<icon>arrow_upward</icon>
187-
</button>
188-
<button
189-
icon
190-
matRipple
191-
(click)="updateRulesetPriority(row, 1)"
192-
[matTooltip]="
193-
'APP.CONCIERGE.BOOKING_RULESET_PRIORITY_DOWN'
194-
| translate
195-
"
196-
>
197-
<icon>arrow_downward</icon>
198-
</button>
199-
<button
200-
icon
201-
matRipple
202-
(click)="removeRuleset(row)"
203-
[matTooltip]="
204-
'APP.CONCIERGE.BOOKING_RULESET_REMOVE'
205-
| translate
206-
"
207-
>
208-
<icon class="text-error">delete</icon>
209-
</button>
167+
<div class="flex items-center gap-1">
168+
<button
169+
icon
170+
matRipple
171+
class="rounded"
172+
(click)="editRuleset(row)"
173+
[matTooltip]="
174+
'APP.CONCIERGE.BOOKING_RULESET_EDIT'
175+
| translate
176+
"
177+
>
178+
<icon>edit</icon>
179+
</button>
180+
<button
181+
icon
182+
matRipple
183+
class="rounded"
184+
(click)="updateRulesetPriority(row, -1)"
185+
[matTooltip]="
186+
'APP.CONCIERGE.BOOKING_RULESET_PRIORITY_UP'
187+
| translate
188+
"
189+
>
190+
<icon>arrow_upward</icon>
191+
</button>
192+
</div>
193+
<div class="flex items-center gap-1">
194+
<button
195+
icon
196+
matRipple
197+
class="rounded"
198+
(click)="removeRuleset(row)"
199+
[matTooltip]="
200+
'APP.CONCIERGE.BOOKING_RULESET_REMOVE'
201+
| translate
202+
"
203+
>
204+
<icon class="text-error">delete</icon>
205+
</button>
206+
<button
207+
icon
208+
matRipple
209+
class="rounded"
210+
(click)="updateRulesetPriority(row, 1)"
211+
[matTooltip]="
212+
'APP.CONCIERGE.BOOKING_RULESET_PRIORITY_DOWN'
213+
| translate
214+
"
215+
>
216+
<icon>arrow_downward</icon>
217+
</button>
218+
</div>
210219
</div>
211220
</ng-template>
212221
</ng-container>
213222
<footer
214-
class="fixed bottom-0 left-1/2 z-10 mx-auto my-2 flex w-full max-w-[39rem] -translate-x-1/2 items-center justify-end space-x-4 rounded border-none bg-base-200 px-4 py-2"
223+
class="fixed bottom-0 left-1/2 z-10 mx-auto my-2 flex w-[calc(100%-1rem)] -translate-x-1/2 items-center justify-end space-x-4 rounded border-none bg-base-200 px-4 py-2"
224+
[class.max-w-[39rem]]="view === 'form'"
215225
*ngIf="!loading"
216226
>
217227
<button

‎libs/components/src/lib/fullscreen-modal-shell.component.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@ import { TranslatePipe } from './translate.pipe';
1010
selector: 'fullscreen-modal-shell,[fs-modal-shell]',
1111
template: `
1212
<div
13-
class="fixed inset-0 flex flex-col items-center overflow-auto bg-base-200"
13+
class="fixed inset-0 flex flex-col items-center overflow-auto bg-base-200 px-2"
1414
>
1515
<div
16-
class="fixed top-0 mx-auto h-screen w-[40rem] max-w-full border-x border-base-300 bg-base-100"
16+
class="fixed top-0 mx-auto h-screen max-w-full border-x border-base-300 bg-base-100"
17+
[class.w-[40rem]]="!full_width()"
18+
[class.w-full]="full_width()"
1719
></div>
1820
<header
19-
class="sticky top-0 z-10 mx-auto my-2 flex h-14 w-full max-w-[39rem] items-center justify-between rounded border-none bg-base-200 px-4 py-2"
21+
class="sticky top-0 z-10 mx-auto my-2 flex h-14 w-full items-center justify-between rounded border-none bg-base-200 px-4 py-2"
22+
[class.max-w-[39rem]]="!full_width()"
2023
>
2124
<h2 class="text-xl font-medium capitalize">
2225
{{ heading() }}
@@ -36,7 +39,8 @@ import { TranslatePipe } from './translate.pipe';
3639
}
3740
</header>
3841
<main
39-
class="z-0 mx-auto h-1/2 w-full max-w-[39rem] flex-1 space-y-8 p-2"
42+
class="z-0 mx-auto h-1/2 w-full flex-1 space-y-8 p-2"
43+
[class.max-w-[39rem]]="!full_width()"
4044
>
4145
@if (!loading()) {
4246
<ng-content></ng-content>
@@ -52,7 +56,8 @@ import { TranslatePipe } from './translate.pipe';
5256
</main>
5357
@if (!loading() && !hide_confirm()) {
5458
<footer
55-
class="fixed bottom-0 left-1/2 z-10 mx-auto my-2 flex w-full max-w-[39rem] -translate-x-1/2 items-center justify-end rounded border-none bg-base-200 px-4 py-2"
59+
class="fixed bottom-0 left-1/2 z-10 mx-auto my-2 flex w-full -translate-x-1/2 items-center justify-end rounded border-none bg-base-200 px-4 py-2"
60+
[class.max-w-[39rem]]="!full_width()"
5661
>
5762
<button
5863
btn
@@ -88,6 +93,7 @@ export class FullscreenModalShellComponent {
8893
public readonly confirm_text = input('');
8994
public readonly close = input<string[]>([]);
9095
public readonly hide_confirm = input(false);
96+
public readonly full_width = input(false);
9197
public readonly confirm = output();
9298
public readonly closed = output();
9399
}

0 commit comments

Comments
 (0)