Skip to content

Commit bd91a5b

Browse files
slmgkckslmgkck
committed
Fix panel page view
1 parent 96e3f9d commit bd91a5b

3 files changed

Lines changed: 114 additions & 156 deletions

File tree

‎bun.lock‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/panel/components/view/CookiesSettings.svelte‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<div class="row mb-3">
3030
<label class="col-md-6 col-form-label" for="useCustomContent">
3131
{$_('settings.use-custom-content')}
32-
<small class="text-secondary d-block">{$_('settings.use-custom-content-desc')}</small>
32+
<small class=" d-block">{$_('settings.use-custom-content-desc')}</small>
3333
</label>
3434
<div class="col-md-6 d-flex align-items-center">
3535
<div class="form-check form-switch">
@@ -43,10 +43,10 @@
4343
</div>
4444

4545
{#if config.useCustomContent}
46-
<div class="mb-3 animate__animated animate__fadeIn">
46+
<div class="mb-3">
4747
<label class="form-label" for="customContent">
4848
{$_('settings.custom-content')}
49-
<small class="text-secondary d-block">{$_('settings.custom-content-desc')}</small>
49+
<small class=" d-block">{$_('settings.custom-content-desc')}</small>
5050
</label>
5151
<Editor
5252
bind:content={config.customContent}
@@ -56,25 +56,22 @@
5656
</div>
5757
{:else}
5858
<!-- Message -->
59-
<div class="row mb-3 animate__animated animate__fadeIn">
59+
<div class="row mb-3">
6060
<label class="col-md-6 col-form-label" for="message">
6161
{$_('settings.message')}
62-
<small class="text-secondary d-block">{$_('settings.message-desc')}</small>
62+
<small class=" d-block">{$_('settings.message-desc')}</small>
6363
</label>
6464
<div class="col-md-6">
65-
<textarea
66-
class="form-control"
67-
id="message"
68-
rows="2"
69-
bind:value={config.message}></textarea>
65+
<textarea class="form-control" id="message" rows="2" bind:value={config.message}
66+
></textarea>
7067
</div>
7168
</div>
7269

7370
<!-- Button Text -->
7471
<div class="row mb-3">
7572
<label class="col-md-6 col-form-label" for="buttonText">
7673
{$_('settings.button-text')}
77-
<small class="text-secondary d-block">{$_('settings.button-text-desc')}</small>
74+
<small class=" d-block">{$_('settings.button-text-desc')}</small>
7875
</label>
7976
<div class="col-md-6">
8077
<input
@@ -89,29 +86,21 @@
8986
<div class="row mb-3">
9087
<label class="col-md-6 col-form-label" for="linkText">
9188
{$_('settings.link-text')}
92-
<small class="text-secondary d-block">{$_('settings.link-text-desc')}</small>
89+
<small class=" d-block">{$_('settings.link-text-desc')}</small>
9390
</label>
9491
<div class="col-md-6">
95-
<input
96-
class="form-control"
97-
id="linkText"
98-
type="text"
99-
bind:value={config.linkText} />
92+
<input class="form-control" id="linkText" type="text" bind:value={config.linkText} />
10093
</div>
10194
</div>
10295

10396
<!-- Link URL -->
10497
<div class="row mb-3">
10598
<label class="col-md-6 col-form-label" for="linkUrl">
10699
{$_('settings.link-url')}
107-
<small class="text-secondary d-block">{$_('settings.link-url-desc')}</small>
100+
<small class=" d-block">{$_('settings.link-url-desc')}</small>
108101
</label>
109102
<div class="col-md-6">
110-
<input
111-
class="form-control"
112-
id="linkUrl"
113-
type="text"
114-
bind:value={config.linkUrl} />
103+
<input class="form-control" id="linkUrl" type="text" bind:value={config.linkUrl} />
115104
</div>
116105
</div>
117106
{/if}

‎src/theme/components/view/CookieBanner.svelte‎

Lines changed: 101 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,122 @@
1-
<style>
2-
.cookie-banner-bar {
3-
position: fixed;
4-
left: 0;
5-
right: 0;
6-
z-index: 1050;
7-
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
8-
border-top: 3px solid transparent;
9-
transition: all 0.3s ease;
10-
}
11-
.cookie-banner-bar.top {
12-
top: 0;
13-
border-top: none;
14-
border-bottom: 3px solid var(--primary);
15-
}
16-
.cookie-banner-bar.bottom {
17-
bottom: 0;
18-
}
19-
20-
.cookie-banner-floating,
21-
.cookie-banner-modal {
22-
position: fixed;
23-
z-index: 1050;
24-
width: 350px;
25-
padding: 1.5rem;
26-
border-radius: 12px;
27-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
28-
transition: all 0.3s ease;
29-
}
30-
31-
.cookie-banner-floating.bottom-left {
32-
bottom: 20px;
33-
left: 20px;
34-
}
35-
.cookie-banner-floating.bottom-right {
36-
bottom: 20px;
37-
right: 20px;
38-
}
39-
.cookie-banner-floating.top-left {
40-
top: 20px;
41-
left: 20px;
42-
}
43-
.cookie-banner-floating.top-right {
44-
top: 20px;
45-
right: 20px;
46-
}
47-
.cookie-banner-floating.top {
48-
top: 20px;
49-
left: 50%;
50-
transform: translateX(-50%);
51-
}
52-
.cookie-banner-floating.bottom {
53-
bottom: 20px;
54-
left: 50%;
55-
transform: translateX(-50%);
56-
}
57-
58-
.cookie-banner-modal {
59-
top: 50%;
60-
left: 50%;
61-
transform: translate(-50%, -50%);
62-
width: 400px;
63-
}
64-
65-
@media (max-width: 576px) {
66-
.cookie-banner-floating,
67-
.cookie-banner-modal {
68-
width: 90%;
69-
left: 5%;
70-
right: 5%;
71-
transform: none;
72-
}
73-
}
74-
75-
.cookie-banner-custom {
76-
position: fixed;
77-
z-index: 1050;
78-
transition: all 0.3s ease;
79-
}
80-
81-
.message {
82-
font-size: 0.9rem;
83-
line-height: 1.4;
84-
}
85-
</style>
86-
871
{#if show && config?.enabled}
882
{#if config.design === 'BAR'}
893
<div
90-
class="cookie-banner-bar {config.position.toLowerCase()}"
91-
style="background: {config.backgroundColor}; color: {config.textColor}; border-color: {config.primaryColor}">
4+
class="fixed-{config.position.toLowerCase()} start-0 end-0 border-top border-bottom shadow-sm p-3"
5+
style="background: {config.backgroundColor || '#fff'}; color: {config.textColor ||
6+
'#212529'}; border-color: {config.primaryColor} !important; z-index: 9999;">
927
{#if config.useCustomContent}
938
{@html config.customContent}
949
{:else}
95-
<div
96-
class="container d-flex flex-column flex-md-row align-items-center justify-content-between py-2">
97-
<div class="message mb-2 mb-md-0">
98-
{config.message}
99-
{#if config.linkText && config.linkUrl}
100-
<a
101-
href={config.linkUrl}
102-
target="_blank"
103-
style="color: {config.primaryColor}"
104-
class="ms-1">
105-
{config.linkText}
106-
</a>
107-
{/if}
10+
<div class="container text-center text-md-start">
11+
<div class="row align-items-center">
12+
<div class="col-md-9 mb-3 mb-md-0">
13+
<p class="mb-0">
14+
{config.message}
15+
{#if config.linkText && config.linkUrl}
16+
<a
17+
href={config.linkUrl}
18+
target="_blank"
19+
style="color: {config.primaryColor}; text-decoration: underline;"
20+
class="ms-1">
21+
{config.linkText}
22+
</a>
23+
{/if}
24+
</p>
25+
</div>
26+
<div class="col-md-3 text-md-end">
27+
{#if config.buttonText}
28+
<button
29+
class="btn btn-primary px-4"
30+
style="background-color: {config.primaryColor}; border-color: {config.primaryColor}"
31+
onclick={accept}>
32+
{config.buttonText}
33+
</button>
34+
{/if}
35+
</div>
10836
</div>
109-
{#if config.buttonText}
110-
<button
111-
class="btn"
112-
style="background: {config.primaryColor}; color: #fff"
113-
on:click={accept}>
114-
{config.buttonText}
115-
</button>
116-
{/if}
11737
</div>
11838
{/if}
11939
</div>
120-
{:else}
40+
{:else if config.design === 'FLOATING'}
12141
<div
122-
class="cookie-banner-{config.design.toLowerCase()} {config.position
123-
.toLowerCase()
124-
.replace('_', '-')}"
125-
style="background: {config.backgroundColor}; color: {config.textColor}; --primary: {config.primaryColor}">
126-
{#if config.useCustomContent}
127-
{@html config.customContent}
128-
{:else}
129-
<div class="content">
130-
<div class="message mb-3">
131-
{config.message}
132-
{#if config.linkText && config.linkUrl}
133-
<div class="mt-2">
134-
<a href={config.linkUrl} target="_blank" style="color: {config.primaryColor}">
42+
class="fixed-{config.position.toLowerCase().replace('_', '-')} p-4"
43+
style="z-index: 9999; max-width: 400px;">
44+
<div
45+
class="card shadow-lg border-0"
46+
style="background: {config.backgroundColor || '#fff'}; color: {config.textColor ||
47+
'#212529'};">
48+
<div class="card-body p-4">
49+
{#if config.useCustomContent}
50+
{@html config.customContent}
51+
{:else}
52+
<p class="card-text mb-4">
53+
{config.message}
54+
{#if config.linkText && config.linkUrl}
55+
<a
56+
href={config.linkUrl}
57+
target="_blank"
58+
style="color: {config.primaryColor}; text-decoration: underline;"
59+
class="d-block mt-2">
13560
{config.linkText}
13661
</a>
137-
</div>
138-
{/if}
139-
</div>
140-
{#if config.buttonText}
141-
<div class="actions text-end">
62+
{/if}
63+
</p>
64+
{#if config.buttonText}
14265
<button
143-
class="btn w-100"
144-
style="background: {config.primaryColor}; color: #fff"
145-
on:click={accept}>
66+
class="btn btn-primary w-100 py-2"
67+
style="background-color: {config.primaryColor}; border-color: {config.primaryColor}"
68+
onclick={accept}>
14669
{config.buttonText}
14770
</button>
148-
</div>
71+
{/if}
14972
{/if}
15073
</div>
151-
{/if}
74+
</div>
75+
</div>
76+
{:else if config.design === 'MODAL'}
77+
<div
78+
class="vw-100 vh-100 position-fixed top-0 start-0 d-flex align-items-center justify-content-center p-3"
79+
style="background: rgba(0,0,0,0.5); z-index: 9999;">
80+
<div style="width: 100%; max-width: 450px;">
81+
<div
82+
class="card shadow-lg border-0"
83+
style="background: {config.backgroundColor || '#fff'}; color: {config.textColor ||
84+
'#212529'};">
85+
<div class="card-body p-4 text-center">
86+
{#if config.useCustomContent}
87+
{@html config.customContent}
88+
{:else}
89+
<h5 class="card-title mb-3">Çerez Politikası</h5>
90+
<p class="card-text mb-4">
91+
{config.message}
92+
{#if config.linkText && config.linkUrl}
93+
<a
94+
href={config.linkUrl}
95+
target="_blank"
96+
style="color: {config.primaryColor}; text-decoration: underline;"
97+
class="d-block mt-2">
98+
{config.linkText}
99+
</a>
100+
{/if}
101+
</p>
102+
{#if config.buttonText}
103+
<button
104+
class="btn btn-primary w-100 py-2"
105+
style="background-color: {config.primaryColor}; border-color: {config.primaryColor}"
106+
onclick={accept}>
107+
{config.buttonText}
108+
</button>
109+
{/if}
110+
{/if}
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
{:else}
116+
<div
117+
class="position-fixed p-3 shadow"
118+
style="background: {config.backgroundColor}; color: {config.textColor}; z-index: 9999; bottom: 1rem; right: 1rem;">
119+
{@html config.customContent}
152120
</div>
153121
{/if}
154122
{/if}

0 commit comments

Comments
 (0)