Skip to content

Commit 857a775

Browse files
duruerduruer
committed
Merge remote-tracking branch 'origin/dev' into dev
# Conflicts: # src/lib/pages/PostEditor.svelte
2 parents 3051f7a + ff6a72f commit 857a775

14 files changed

Lines changed: 475 additions & 434 deletions

‎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/lib/components/CardFiltersItem.svelte‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
1-
<a
2-
class:active
3-
class="btn btn-sm btn-outline-primary text-truncate"
4-
role="button"
5-
href={base + href}>
6-
<slot />
7-
</a>
8-
91
<script>
102
import { base } from '$app/paths';
11-
12-
export let href;
13-
export let active;
3+
4+
let {
5+
href = '',
6+
active = false,
7+
button = false,
8+
onclick,
9+
children
10+
} = $props();
1411
</script>
12+
13+
{#if button}
14+
<button
15+
type="button"
16+
class:active
17+
class="btn btn-sm btn-outline-primary text-truncate"
18+
onclick={(e) => { console.log('CardFiltersItem Button Clicked'); if (onclick) onclick(e); }}>
19+
{@render children?.()}
20+
</button>
21+
{:else}
22+
<a
23+
class:active
24+
class="btn btn-sm btn-outline-primary text-truncate"
25+
role="button"
26+
href={href ? (href.startsWith('http') ? href : base + href) : 'javascript:void(0)'}
27+
onclick={(e) => { console.log('CardFiltersItem Link Clicked'); if (onclick) onclick(e); }}>
28+
{@render children?.()}
29+
</a>
30+
{/if}

‎src/lib/components/DragAndDropZone.svelte‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,35 @@
11
<style>
22
.drop-zone {
3-
transition: all 0.2s ease-in-out;
4-
background-color: var(--bs-body-bg);
5-
cursor: pointer;
6-
user-select: none;
7-
box-sizing: border-box;
3+
border-style: dashed !important;
4+
transition:
5+
transform 0.2s ease,
6+
box-shadow 0.2s ease;
87
}
98
10-
:global(.list-group-horizontal) .drop-zone {
11-
height: 100%;
9+
.drop-zone:hover {
10+
background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
1211
}
1312
14-
.drop-zone:hover,
1513
.drop-zone.drag-over {
16-
background-color: var(--bs-tertiary-bg) !important;
17-
border-color: var(--bs-primary) !important;
14+
border-style: solid !important;
15+
background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
16+
transform: scale(0.995);
1817
}
1918
2019
.drop-zone.disabled {
21-
opacity: 0.6;
2220
cursor: not-allowed;
21+
opacity: 0.6;
22+
border-style: solid !important;
23+
}
24+
25+
:global(.list-group-horizontal) .drop-zone {
26+
height: 100%;
2327
}
2428
</style>
2529

2630
<div
27-
class="{className} {$$props.class || ''} drop-zone"
31+
class="p-3 w-100 h-100 d-flex flex-column align-items-center justify-content-center border rounded overflow-hidden text-center {$$props.class ||
32+
''} drop-zone"
2833
class:drag-over={isDragOver}
2934
class:disabled
3035
{style}
@@ -35,9 +40,22 @@
3540
on:drop={handleDrop}
3641
on:dragover={handleDragOver}
3742
on:dragleave={handleDragLeave}>
38-
<slot {isDragOver}></slot>
43+
{#if icon || title || subtitle}
44+
{#if icon}
45+
<i class="{icon} mb-2"></i>
46+
{/if}
47+
{#if title}
48+
<p class="mb-0">{@html title}</p>
49+
{/if}
50+
{#if subtitle}
51+
<small class="opacity-75">{subtitle}</small>
52+
{/if}
53+
{:else}
54+
<slot {isDragOver}></slot>
55+
{/if}
3956

4057
<input
58+
{id}
4159
type="file"
4260
class="d-none"
4361
bind:this={fileInput}
@@ -56,6 +74,10 @@
5674
export let style = '';
5775
export let multiple = false;
5876
export let maxFileSize = null;
77+
export let icon = '';
78+
export let title = '';
79+
export let subtitle = '';
80+
export let id = null;
5981
6082
let isDragOver = false;
6183
let fileInput;
@@ -144,7 +166,4 @@
144166
export function click() {
145167
onClick();
146168
}
147-
148-
export let className =
149-
'btn w-100 h-100 list-group-item list-group-item-action drop-zone d-flex flex-column align-items-center justify-content-center border rounded shadow-none m-0';
150169
</script>

‎src/lib/components/Navbar.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
disabled={selectingPanelTheme}>
3232
<i class="fa-solid fa-palette"></i>
3333
</button>
34-
<ul class="dropdown-menu dropdown-menu-start animate__animated animate__zoomIn">
34+
<ul class="dropdown-menu dropdown-menu-start animate__animated animate__fadeIn" style="animation-duration: 500ms;">
3535
<h6 class="dropdown-header">{$_('components.navbar.panel-theme')}</h6>
3636
{#each panelThemes as theme}
3737
<li>

‎src/lib/components/SearchInput.svelte‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,28 @@
1-
<div class="input-group">
2-
<input
3-
type="text"
4-
class="form-control form-control-sm focus-ring {String(value || '').trim() ? 'border-secondary' : ''}"
5-
placeholder={$_(placeholderKey)}
6-
aria-label={$_(ariaLabelKey)}
7-
aria-describedby="find-addon"
8-
{value}
9-
on:input={onInput} />
10-
11-
{#if showSpinner && (searching || pending)}
12-
<span class="input-group-text" aria-label={$_('components.search-input.searching')}>
13-
<span class="spinner-border spinner-border-sm" role="status"></span>
14-
</span>
15-
{/if}
16-
</div>
17-
181
<script>
19-
import { createEventDispatcher, onDestroy } from 'svelte';
2+
import { onDestroy } from 'svelte';
203
import { _ } from 'svelte-i18n';
21-
22-
export let placeholderKey = 'buttons.find';
23-
export let ariaLabelKey = 'buttons.find';
24-
export let debounceMs = 250;
25-
export let initialValue = '';
26-
export let searching = false;
27-
export let showSpinner = true;
28-
29-
const dispatch = createEventDispatcher();
30-
31-
let value = initialValue;
4+
5+
let {
6+
placeholderKey = 'buttons.find',
7+
ariaLabelKey = 'buttons.find',
8+
debounceMs = 250,
9+
initialValue = '',
10+
searching = false,
11+
showSpinner = true,
12+
onchange
13+
} = $props();
14+
15+
let value = $state(initialValue);
3216
let t;
33-
let pending = false;
17+
let pending = $state(false);
18+
19+
$effect(() => {
20+
value = initialValue;
21+
});
3422
3523
function emitNow(v) {
3624
pending = false;
37-
dispatch('change', { value: v });
25+
if (onchange) onchange(v);
3826
}
3927
4028
function onInput(e) {
@@ -48,3 +36,20 @@
4836
if (t) clearTimeout(t);
4937
});
5038
</script>
39+
40+
<div class="input-group">
41+
<input
42+
type="text"
43+
class="form-control form-control-sm focus-ring {String(value || '').trim() ? 'border-secondary' : ''}"
44+
placeholder={$_(placeholderKey)}
45+
aria-label={$_(ariaLabelKey)}
46+
aria-describedby="find-addon"
47+
{value}
48+
oninput={onInput} />
49+
50+
{#if showSpinner && (searching || pending)}
51+
<span class="input-group-text" aria-label={$_('components.search-input.searching')}>
52+
<span class="spinner-border spinner-border-sm" role="status"></span>
53+
</span>
54+
{/if}
55+
</div>

‎src/lib/components/Sidebar.svelte‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,13 @@
3030
{/if}
3131

3232
<div
33-
class="offcanvas offcanvas-start bg-primary h-100"
33+
class="offcanvas offcanvas-start bg-primary h-100 p-2 rounded-end-4"
3434
tabindex="-1"
3535
id="sidebar"
3636
aria-labelledby="sidebarLabel"
3737
class:offcanvas-lg={$isSidebarOpen}>
3838
<div class="offcanvas-body p-0">
39-
<div
40-
class="container-fluid pb-5 position-relative"
41-
style="min-height: 100%;">
39+
<div class="container-fluid position-relative">
4240
<!-- Sidebar Toggler & Logo -->
4341
<div class="navbar navbar-expand navbar-dark bg-body-primary">
4442
<button
@@ -52,7 +50,7 @@
5250
</button>
5351

5452
<a class="navbar-brand m-auto position-relative focus-ring" href="{base}/">
55-
<img alt="Pano" use:tooltip={["Pano"]} src={base + '/assets/img/logo.svg'} width="20" />
53+
<img alt="Pano" use:tooltip={['Pano']} src={base + '/assets/img/logo.svg'} width="20" />
5654
{#if isAlpha}
5755
<span
5856
class="badge text-bg-info position-absolute top-100 start-50 translate-middle"
@@ -77,34 +75,37 @@
7775
</a>
7876
</div>
7977

80-
<div class="my-3">
81-
{#if $sidebarTabsState === 'website'}
82-
<a type="button" href={UI_URL} class="btn btn-sm btn-secondary w-100" target="_blank">
83-
{$_('components.sidebar.show-website')}
84-
<i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
85-
</a>
86-
{/if}
78+
<div class="my-2">
79+
{#if $sidebarTabsState === 'website'}
80+
<a type="button" href={UI_URL} class="btn btn-sm btn-secondary w-100" target="_blank">
81+
{$_('components.sidebar.show-website')}
82+
<i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
83+
</a>
84+
{/if}
8785

88-
{#if $sidebarTabsState === 'game'}
89-
<div class="hstack gap-1">
90-
<button class="btn btn-sm btn-secondary w-100" type="button" on:click={showServersModal}>
91-
{$_('components.sidebar.show-servers')}
92-
</button>
93-
<button
94-
class="btn btn-sm btn-secondary"
95-
data-bs-target="#connectServer"
96-
data-bs-toggle="modal"
97-
aria-label={$_('components.server-navigation-menu.connect-server')}
98-
type="button"
99-
use:tooltip={[$_('components.server-navigation-menu.connect-server')]}>
100-
<i class="fa-solid fa-plus"></i>
101-
</button>
102-
</div>
103-
{/if}
86+
{#if $sidebarTabsState === 'game'}
87+
<div class="hstack gap-1">
88+
<button
89+
class="btn btn-sm btn-secondary w-100"
90+
type="button"
91+
on:click={showServersModal}>
92+
{$_('components.sidebar.show-servers')}
93+
</button>
94+
<button
95+
class="btn btn-sm btn-secondary"
96+
data-bs-target="#connectServer"
97+
data-bs-toggle="modal"
98+
aria-label={$_('components.server-navigation-menu.connect-server')}
99+
type="button"
100+
use:tooltip={[$_('components.server-navigation-menu.connect-server')]}>
101+
<i class="fa-solid fa-plus"></i>
102+
</button>
103+
</div>
104+
{/if}
104105
</div>
105106

106107
<!-- Sidebar Tabs -->
107-
<ul class="nav nav-pills nav-fill mb-2 gap-2" data-bs-theme="dark">
108+
<ul class="nav nav-pills nav-fill mb-2 gap-2 p-2 rounded-5" data-bs-theme="dark">
108109
<li class="nav-item">
109110
<button
110111
class="nav-link text-center"

‎src/lib/components/modals/InstallResourceModal.svelte‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,14 @@
2222
<div class="modal-body">
2323
<div class="list-group list-group-horizontal">
2424
<DragAndDropZone
25-
className="btn list-group-item list-group-item-action drop-zone d-flex flex-column align-items-center justify-content-center w-50 text-center rounded-end-0"
25+
class="list-group-item list-group-item-action w-50 rounded-end-0"
2626
style="height: 250px; cursor: pointer;"
27+
icon="fas fa-upload fa-2x"
28+
title={$_('components.modals.install-resource.drag-here')}
2729
accept={$type === 'THEME'
2830
? ['.zip', 'application/zip']
2931
: ['.jar', 'application/java-archive']}
30-
on:drop={(e) => handleFileUpload(e.detail)}>
31-
<i class="fas fa-upload fa-2x mb-2"></i>
32-
{@html $_('components.modals.install-resource.drag-here')}
33-
</DragAndDropZone>
32+
on:drop={(e) => handleFileUpload(e.detail)} />
3433

3534
<a
3635
href="{base}/{$type === 'PLUGIN' ? 'addons' : 'view'}/store"

‎src/lib/components/sidebar/Bottom.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav class="nav justify-content-around position-absolute bottom-0 w-100">
1+
<nav class="nav justify-content-around w-100 mt-auto py-2">
22
<a
33
class="nav-link text-light"
44
href="{PANO_WEBSITE_URL}/docs"

‎src/lib/pages/Dashboard.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
<!-- Welcome Alerts -->
4444
{#if data.gettingStartedBlocks.welcomeBoard}
4545
<div
46-
class="alert alert-secondary alert-dismissible mb-0 animate__animated animate__zoomIn welcome-board border">
46+
class="alert alert-secondary alert-dismissible mb-0 animate__animated animate__slideInDown welcome-board border" style="--animate-duration: 500ms;">
4747
<div class="row">
4848
<div class="mb-3">
4949
{@html $_('pages.dashboard.welcome-card.description')}
@@ -161,12 +161,12 @@
161161
<img
162162
src="/api/profile/picture/{ticket.writer.username}?{$avatarVersion}"
163163
alt={$_('pages.dashboard.last-tickets.player-name')}
164-
class="rounded-circle animate__animated animate__zoomIn"
164+
class="rounded-circle"
165165
height="32"
166166
width="32" />
167167
</a>
168168
<a
169-
class="text-decoration-none w-100 rounded focus-ring d-block text-truncate p-1"
169+
class="badge bg-primary-subtile text-decoration-none rounded focus-ring"
170170
href="{base}/tickets/detail/{ticket.id}"
171171
title={ticket.title}
172172
use:tooltip={[$_('buttons.view')]}
@@ -230,7 +230,7 @@
230230
href="{base}/players/detail/{player.username}">
231231
<img
232232
alt={player.username}
233-
class="rounded-circle animate__animated animate__zoomIn"
233+
class="rounded-circle"
234234
height="32"
235235
width="32"
236236
src="/api/profile/picture/{player.username}?{$avatarVersion}" />

0 commit comments

Comments
 (0)