Skip to content

Commit 248a811

Browse files
slmgkckslmgkck
committed
fix: update WhatsNewModal
1 parent abdc930 commit 248a811

5 files changed

Lines changed: 51 additions & 39 deletions

File tree

‎src/lib/component/modals/WhatsNewModal.svelte‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,85 +7,90 @@
77
justify-content: center;
88
flex-shrink: 0;
99
}
10+
11+
/* Override blocks paths due to /panel base path */
12+
.blocks {
13+
background-image:
14+
url('/panel/assets/img/red.svg'), url('/panel/assets/img/yellow.svg'),
15+
url('/panel/assets/img/green.svg') !important;
16+
}
1017
</style>
1118

1219
<div aria-hidden="true" class="modal fade" bind:this={$modalElement} role="dialog" tabindex="-1">
1320
<div class="modal-dialog modal-lg modal-dialog-centered" role="dialog">
1421
<div class="modal-content overflow-hidden">
15-
<div class="modal-header border-bottom-0 pb-0">
16-
<button type="button" class="btn-close" aria-label="Close" on:click={handleClose}></button>
22+
<div
23+
class="modal-header text-bg-primary d-block text-center border-bottom-0 py-5 position-relative blocks">
24+
<button
25+
type="button"
26+
class="btn-close btn-close-white position-absolute top-0 end-0 m-3"
27+
aria-label="Close"
28+
on:click={handleClose}></button>
29+
<img
30+
src="{base}/assets/img/pano-logo-heorizontal.png"
31+
alt="Pano"
32+
class="my-3"
33+
style="height: 3rem;" />
34+
<p class="lead mb-0 px-lg-5">{$_('components.whats-new.description')}</p>
1735
</div>
18-
<div class="modal-body px-lg-5 pb-5">
19-
<div class="text-center mb-4">
20-
<div class="display-5 mb-2">{$_('components.whats-new.title')}</div>
21-
<p class="lead text-muted">{$_('components.whats-new.description')}</p>
22-
</div>
23-
36+
<div class="modal-body px-lg-5 py-5">
2437
<div class="row g-4 mb-4 text-start">
2538
<div class="col-md-6">
2639
<div class="d-flex align-items-start">
2740
<div class="feature-icon-small bg-primary bg-gradient text-white rounded-3 p-2 me-3">
28-
<i class="fas fa-server"></i>
41+
<i class="fas fa-file-alt"></i>
2942
</div>
3043
<div>
31-
<h5 class="fw-bold mb-1">{$_('components.whats-new.features.management')}</h5>
32-
<p class="small text-muted mb-0">
33-
{$_('components.whats-new.features.management-description')}
44+
<h5 class="fw-bold mb-1">{$_('components.whats-new.features.cms')}</h5>
45+
<p class=" mb-0">
46+
{$_('components.whats-new.features.cms-description')}
3447
</p>
3548
</div>
3649
</div>
3750
</div>
3851
<div class="col-md-6">
3952
<div class="d-flex align-items-start">
4053
<div class="feature-icon-small bg-primary bg-gradient text-white rounded-3 p-2 me-3">
41-
<i class="fas fa-gamepad"></i>
54+
<i class="fas fa-server"></i>
4255
</div>
4356
<div>
44-
<h5 class="fw-bold mb-1">{$_('components.whats-new.features.integration')}</h5>
45-
<p class="small text-muted mb-0">
46-
{$_('components.whats-new.features.integration-description')}
57+
<h5 class="fw-bold mb-1">{$_('components.whats-new.features.management')}</h5>
58+
<p class=" mb-0">
59+
{$_('components.whats-new.features.management-description')}
4760
</p>
4861
</div>
4962
</div>
5063
</div>
5164
<div class="col-md-6">
5265
<div class="d-flex align-items-start">
5366
<div class="feature-icon-small bg-primary bg-gradient text-white rounded-3 p-2 me-3">
54-
<i class="fas fa-shield-alt"></i>
67+
<i class="fas fa-gamepad"></i>
5568
</div>
5669
<div>
57-
<h5 class="fw-bold mb-1">{$_('components.whats-new.features.e2ee')}</h5>
58-
<p class="small text-muted mb-0">
59-
{$_('components.whats-new.features.e2ee-description')}
70+
<h5 class="fw-bold mb-1">{$_('components.whats-new.features.integration')}</h5>
71+
<p class=" mb-0">
72+
{$_('components.whats-new.features.integration-description')}
6073
</p>
6174
</div>
6275
</div>
6376
</div>
6477
<div class="col-md-6">
6578
<div class="d-flex align-items-start">
6679
<div class="feature-icon-small bg-primary bg-gradient text-white rounded-3 p-2 me-3">
67-
<i class="fas fa-file-alt"></i>
80+
<i class="fas fa-shield-alt"></i>
6881
</div>
6982
<div>
70-
<h5 class="fw-bold mb-1">{$_('components.whats-new.features.cms')}</h5>
71-
<p class="small text-muted mb-0">
72-
{$_('components.whats-new.features.cms-description')}
83+
<h5 class="fw-bold mb-1">{$_('components.whats-new.features.e2ee')}</h5>
84+
<p class=" mb-0">
85+
{$_('components.whats-new.features.e2ee-description')}
7386
</p>
7487
</div>
7588
</div>
7689
</div>
7790
</div>
78-
79-
<div class="text-center">
80-
<a href="{PANO_WEBSITE_URL}/docs" target="_blank" class="btn btn-secondary px-4">
81-
<i class="fas fa-book me-2"></i>
82-
{$_('buttons.see-docs')}
83-
<i class="fas fa-external-link-alt ms-2 small"></i>
84-
</a>
85-
</div>
8691
</div>
87-
<div class="modal-footer d-flex justify-content-between align-items-center py-3 px-4">
88-
{#if $showDonotShowAgain}
92+
{#if $showDonotShowAgain}
93+
<div class="modal-footer d-flex justify-content-center align-items-center">
8994
<div class="form-check form-switch mb-0">
9095
<input
9196
class="form-check-input"
@@ -96,11 +101,8 @@
96101
{$_('components.whats-new.dont-show-again')}
97102
</label>
98103
</div>
99-
{/if}
100-
<button class="btn btn-primary px-4" type="button" on:click={handleClose}>
101-
{$_('buttons.close')}
102-
</button>
103-
</div>
104+
</div>
105+
{/if}
104106
</div>
105107
</div>
106108
</div>
@@ -143,6 +145,7 @@
143145
<script>
144146
import { onMount } from 'svelte';
145147
import { _ } from 'svelte-i18n';
148+
import { base } from '$app/paths';
146149
import ApiUtil from '$lib/api.util.js';
147150
import { PANO_WEBSITE_URL } from '$lib/variables.js';
148151

‎static/assets/img/green.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎static/assets/img/pano-logo-heorizontal.png‎

4.38 KB
Loading

‎static/assets/img/red.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎static/assets/img/yellow.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)