Skip to content

Commit 992f0e0

Browse files
slmgkckslmgkck
committed
fix: redesign play button and PostDetailPage
1 parent cd2a070 commit 992f0e0

6 files changed

Lines changed: 197 additions & 74 deletions

File tree

‎src/lib/component/Footer.svelte‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,3 @@
1-
<div class="container">
2-
<div class="col-4 mx-auto">
3-
<div class="card mt-5 ratio ratio-1x1">
4-
<div class="card-body">
5-
<div class="row">
6-
<div class="col-4">
7-
<p>
8-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aut,
9-
accusantium cum itaque, est nisi labore, quia temporibus pariatur
10-
fuga necessitatibus. Quia modi labore atque dicta eligendi tempore
11-
molestiae itaque!
12-
</p>
13-
</div>
14-
<div class="col-8">
15-
<p>
16-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aut,
17-
accusantium cum itaque, est nisi labore, quia temporibus pariatur
18-
fuga necessitatibus. Quia modi labore atque dicta eligendi tempore
19-
molestiae itaque!
20-
</p>
21-
</div>
22-
</div>
23-
</div>
24-
</div>
25-
</div>
26-
27-
</div>
28-
291
<!-- Footer -->
302
<div class="container my-3">
313
<div class="text-center">

‎src/lib/component/Navbar.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- Navbar -->
22
<div class:container={themeSettings.navbarWidthOption !== "FULL_SIZE"}>
33
<nav
4-
class="navbar navbar-expand-lg navbar-dark bg-cake bg-gradient border rounded rounded-{themeSettings.navRoundLevel
4+
class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient border rounded rounded-{themeSettings.navRoundLevel
55
? +themeSettings.navRoundLevel
66
: '5'}">
77
<div class="container">

‎src/lib/component/TicketRow.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
title={$_("components.ticket-row.show-ticket")}
1919
>#{ticket.id} {ticket.title}</a>
2020
</td>
21-
<td class="align-middle text-nowrap">
21+
<td class="align-middle">
2222
<TicketStatus status={ticket.status} />
2323
</td>
2424
<td class="align-middle text-nowrap">
@@ -27,7 +27,7 @@
2727
$_("components.ticket-row.filter"),
2828
{ placement: "bottom" },
2929
]}
30-
class="badge rounded-pill bg-light text-black"
30+
class="badge rounded-pill text-bg-light focus-ring"
3131
href="/tickets?category={ticket.category.url}">
3232
{ticket.category.title === "-"
3333
? $_("components.ticket-row.no-category")

‎src/lib/component/sidebars/HomeSidebar.svelte‎

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
11
<Sidebar side={side}>
22
<div class="vstack gap-3">
3-
<!-- Server Status Card -->
4-
<div class="card text-bg-secondary">
5-
<div class="card-header text-center">
6-
<!-- Play Button -->
7-
<button
8-
class="btn btn-lg btn-link link-black text-decoration-none w-100"
9-
type="button"
10-
on:click={onCopyCommandTextClick}
11-
use:tooltip={[
12-
isCommandTextCopied
13-
? $_("sidebars.home.copied")
14-
: $_("sidebars.home.copy"),
15-
{ placement: "bottom", hideOnClick: false },
16-
]}>
17-
<b>{$data.ipAddress}</b>
18-
</button>
19-
<!-- Play Button End -->
3+
<!-- Play Button -->
4+
<div class="ratio ratio-1x1">
5+
<div class="card">
6+
<div class="card-header p-0 h-50 100">
7+
<button
8+
class="btn btn-lg shadow-none btn-light border-0 rounded-bottom-0 bg-gradient text-decoration-none h-100 w-100"
9+
type="button"
10+
on:click={onCopyCommandTextClick}
11+
use:tooltip={[
12+
isCommandTextCopied
13+
? $_("sidebars.home.copied")
14+
: $_("sidebars.home.copy"),
15+
{ placement: "bottom", hideOnClick: false },
16+
]}>
17+
<b>{$data.ipAddress}</b>
18+
<br />
19+
<span class="text-muted fs-6 fw-normal">
20+
{$_("buttons.click-to-copy")}</span>
21+
</button>
22+
</div>
23+
<div
24+
class="card-body rounded-bottom d-flex flex-column align-items-center justify-content-center h-50 blocks">
25+
<ul class="list-group list-group-flush text-center">
26+
<li class="list-group-item">
27+
{#if serverOnline}
28+
{$_("sidebars.home.online")}
29+
{:else}
30+
{$_("sidebars.home.offline")}
31+
{/if}
32+
</li>
33+
<li class="list-group-item">
34+
{$_("sidebars.home.playing", {
35+
values: {
36+
playerCount: $data.mainServer?.playerCount || 0,
37+
maxPlayerCount: $data.mainServer?.maxPlayerCount || 0,
38+
},
39+
})}
40+
</li>
41+
<li class="list-group-item">
42+
{$data.serverGameVersion}
43+
</li>
44+
</ul>
45+
</div>
2046
</div>
21-
<ul class="list-group list-group-flush text-center">
22-
<li class="list-group-item list-group-item-action">
23-
{#if serverOnline}
24-
{$_("sidebars.home.online")}
25-
{:else}
26-
{$_("sidebars.home.offline")}
27-
{/if}
28-
</li>
29-
<li class="list-group-item list-group-item-action">
30-
{$_("sidebars.home.playing", {
31-
values: {
32-
playerCount: $data.mainServer?.playerCount || 0,
33-
maxPlayerCount: $data.mainServer?.maxPlayerCount || 0,
34-
},
35-
})}
36-
</li>
37-
<li class="list-group-item list-group-item-action">
38-
{$data.serverGameVersion}
39-
</li>
40-
</ul>
4147
</div>
42-
<!-- Server Status Card End -->
48+
<!-- Play Button End -->
4349

4450
<!-- Last Registrants Card -->
4551
<div
@@ -54,7 +60,9 @@
5460
<div class="row g-3">
5561
{#each $data.lastRegisteredUsers as player, index (player)}
5662
<div class="col-auto">
57-
<a href="/player/{player}">
63+
<a
64+
href="/player/{player}"
65+
class="d-inline-block rounded focus-ring">
5866
<img
5967
alt={player}
6068
class="rounded"

‎src/lib/pages/PostDetailPage.svelte‎

Lines changed: 133 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,134 @@
1-
<div class="col-lg-8 mx-auto">
2-
<Post post={data.post} detail={true} />
3-
<div class="row justify-content-between">
1+
<div class="col-lg-10 mx-auto">
2+
<div class="card rounded-4 my-3 border-0">
3+
<!-- Kapak görseli + gradient + başlık + footer -->
4+
{#if (typeof themeSettings.postCoverImageEnabled === "undefined" ? true : themeSettings.postCoverImageEnabled) && data.post.thumbnailUrl}
5+
<div
6+
class="position-relative"
7+
style="
8+
aspect-ratio: 16 / 9;
9+
width: 100%;
10+
overflow: hidden;
11+
">
12+
<img
13+
src={data.post.thumbnailUrl}
14+
class="w-100 h-100 d-block rounded-4"
15+
style="object-fit: cover;"
16+
alt={data.post.title}
17+
title={data.post.title} />
18+
19+
<!-- Başlık + footer -->
20+
<div
21+
class="position-absolute bottom-0 start-0 w-100 text-white p-3"
22+
style="
23+
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
24+
border-bottom-left-radius: 1rem;
25+
border-bottom-right-radius: 1rem;
26+
">
27+
<h1 class="m-0 text-truncate display-4">
28+
{truncate(data.post.title, 100)}{@html data.post.title.length > 100
29+
? "&hellip;"
30+
: ""}
31+
</h1>
32+
33+
<!-- Footer bilgileri -->
34+
<div
35+
class="d-flex align-items-center justify-content-between mt-2 small text-white-50">
36+
{#if typeof themeSettings.postViewCountEnabled === "undefined" ? true : themeSettings.postViewCountEnabled}
37+
<div class="text-white">
38+
<i class="fas fa-eye me-2"></i>
39+
{data.post.views}
40+
</div>
41+
{/if}
42+
43+
<div class="d-flex align-items-center">
44+
<Date time={data.post.date} />
45+
<a
46+
href="/player/{data.post.writer.username}"
47+
class="d-inline-block rounded focus-ring rounded-circle ms-2"
48+
hidden={typeof themeSettings.postAuthorImageEnabled ===
49+
"undefined"
50+
? false
51+
: !themeSettings.postAuthorImageEnabled}>
52+
<img
53+
src="https://minotar.net/avatar/{data.post.writer.username}"
54+
alt={data.post.writer.username}
55+
width="28"
56+
height="28"
57+
use:tooltip={[
58+
data.post.writer.username,
59+
{ placement: "bottom" },
60+
]}
61+
class="rounded-circle" />
62+
</a>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
{/if}
68+
</div>
69+
70+
<div class="card mt-3">
71+
<div class="card-body">
72+
{#if data.post.category.title !== "-"}
73+
<div class="col text-center">
74+
<a
75+
class="badge text-bg-secondary text-decoration-none rounded-pill focus-ring mb-2"
76+
href="/?category={data.post.category.url}"
77+
use:tooltip={[$_("buttons.filter"), { placement: "bottom" }]}>
78+
{data.post.category.title}
79+
</a>
80+
</div>
81+
{/if}
82+
83+
<h1
84+
class="m-0 text-truncate display-4"
85+
hidden={(typeof themeSettings.postCoverImageEnabled === "undefined"
86+
? true
87+
: themeSettings.postCoverImageEnabled) && data.post.thumbnailUrl}>
88+
{truncate(data.post.title, 100)}{@html data.post.title.length > 100
89+
? "&hellip;"
90+
: ""}
91+
</h1>
92+
93+
<div class="card-text text-break word-break">
94+
{@html data.post.text}
95+
</div>
96+
</div>
97+
<div
98+
class="card-footer"
99+
hidden={(typeof themeSettings.postCoverImageEnabled === "undefined"
100+
? true
101+
: themeSettings.postCoverImageEnabled) && data.post.thumbnailUrl}>
102+
<div class="d-flex align-items-center justify-content-between small">
103+
{#if typeof themeSettings.postViewCountEnabled === "undefined" ? true : themeSettings.postViewCountEnabled}
104+
<div>
105+
<i class="fas fa-eye me-2"></i>
106+
{data.post.views}
107+
</div>
108+
{/if}
109+
110+
<div class="d-flex align-items-center">
111+
<Date time={data.post.date} />
112+
<a
113+
href="/player/{data.post.writer.username}"
114+
class="d-inline-block rounded focus-ring rounded-circle ms-2"
115+
hidden={typeof themeSettings.postAuthorImageEnabled === "undefined"
116+
? false
117+
: !themeSettings.postAuthorImageEnabled}>
118+
<img
119+
src="https://minotar.net/avatar/{data.post.writer.username}"
120+
alt={data.post.writer.username}
121+
width="28"
122+
height="28"
123+
use:tooltip={[data.post.writer.username, { placement: "bottom" }]}
124+
class="rounded-circle" />
125+
</a>
126+
</div>
127+
</div>
128+
</div>
129+
</div>
130+
131+
<div class="row justify-content-between mt-3">
4132
<div class="col-auto">
5133
<a
6134
href="/post/{data.previousPost === '-' ? '' : data.previousPost.url}"
@@ -14,6 +142,7 @@
14142
{$_("pages.post-detail.previous-post")}
15143
</a>
16144
</div>
145+
17146
<div class="col-auto">
18147
<a
19148
href="/post/{data.nextPost === '-' ? '' : data.nextPost.url}"
@@ -46,7 +175,7 @@
46175
47176
import tooltip from "$lib/tooltip.util";
48177
49-
import Post from "$lib/component/Post.svelte";
178+
import { truncate } from "$lib/string.util";
50179
import { getContext } from "svelte";
51180
52181
export let data;

‎src/styles/style.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,17 @@
3232
// url("/assets/img/header-bg.jpg");
3333
// background-size: cover;
3434
// }
35+
36+
.blocks {
37+
background-position:
38+
bottom right,
39+
bottom left,
40+
bottom left;
41+
background-image: url("/assets/img/red.svg"), url("/assets/img/yellow.svg"),
42+
url("/assets/img/green.svg");
43+
background-repeat: no-repeat;
44+
background-size:
45+
64px 64px,
46+
128px 64px,
47+
64px 128px;
48+
}

0 commit comments

Comments
 (0)