From 9ab817cc89cc64a9898f8a66bf86c0a5367952cf Mon Sep 17 00:00:00 2001 From: Ryan <7389646+ryanbarlow97@users.noreply.github.com> Date: Wed, 6 May 2026 23:06:33 +0100 Subject: [PATCH] [bugfix] fixes border around clans ui (#3873) ## Description: fixes border around clans ui image also fixes weird padding: image what it should be: image ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: w.o.n --- resources/lang/en.json | 1 + src/client/ClanModal.ts | 67 +++- src/client/UserSettingModal.ts | 4 +- src/client/components/baseComponents/Modal.ts | 7 +- src/client/components/clan/ClanBansView.ts | 211 +++++------ src/client/components/clan/ClanBrowseView.ts | 5 +- src/client/components/clan/ClanDetailView.ts | 99 ++--- src/client/components/clan/ClanManageView.ts | 357 ++++++++---------- .../components/clan/ClanMyRequestsView.ts | 90 ++--- .../components/clan/ClanRequestsView.ts | 155 ++++---- src/client/components/clan/ClanShared.ts | 3 - .../components/clan/ClanTransferView.ts | 198 +++++----- 12 files changed, 551 insertions(+), 646 deletions(-) diff --git a/resources/lang/en.json b/resources/lang/en.json index b1c181b7a..5b60e9d3d 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -310,6 +310,7 @@ "ban": "Ban", "unban": "Unban", "banned_players": "Banned Players", + "banned_players_count": "{count, plural, one {# banned player} other {# banned players}}", "no_bans": "No banned players.", "ban_reason_prompt": "Ban reason (optional, max 200 characters):", "confirm_ban": "Are you sure you want to ban this player? They will be removed from the clan and unable to rejoin.", diff --git a/src/client/ClanModal.ts b/src/client/ClanModal.ts index e611fc424..1aebed5dd 100644 --- a/src/client/ClanModal.ts +++ b/src/client/ClanModal.ts @@ -73,7 +73,7 @@ export class ClanModal extends BaseModal { onBack: () => this.close(), ariaLabel: translateText("common.back"), }) - : null; + : this.renderSubViewHeader(); return html` this.handleTabChange(key as Tab)} > ${header ? html`
${header}
` : ""} - ${this.renderInner()} +
${this.renderInner()}
 `; } + private tagPill(tag: string) { + return html`[${tag}]`; + } + + private renderSubViewHeader() { + const clan = this.selectedClan; + const ariaLabel = translateText("common.back"); + if (this.view === "my-requests") { + return modalHeader({ + title: translateText("clan_modal.pending_applications"), + onBack: () => (this.view = "list"), + ariaLabel, + }); + } + if (this.view === "manage") { + return modalHeader({ + title: translateText("clan_modal.manage_clan"), + onBack: () => (this.view = "detail"), + ariaLabel, + rightContent: clan ? this.tagPill(clan.tag) : undefined, + }); + } + if (this.view === "transfer") { + return modalHeader({ + title: translateText("clan_modal.transfer_leadership"), + onBack: () => (this.view = "manage"), + ariaLabel, + }); + } + if (this.view === "requests") { + return modalHeader({ + title: translateText("clan_modal.join_requests"), + onBack: () => (this.view = "detail"), + ariaLabel, + }); + } + if (this.view === "bans") { + return modalHeader({ + title: translateText("clan_modal.banned_players"), + onBack: () => (this.view = "manage"), + ariaLabel, + }); + } + // Default: detail + return modalHeader({ + title: clan?.name ?? translateText("clan_modal.title"), + onBack: () => { + this.view = "list"; + this.selectedClan = null; + this.selectedClanTag = ""; + this.myRole = null; + this.detailCache = null; + }, + ariaLabel, + rightContent: clan ? this.tagPill(clan.tag) : undefined, + }); + } + private handleTabChange(tab: Tab) { this.activeTab = tab; this.view = "list"; @@ -351,7 +412,7 @@ export class ClanModal extends BaseModal { } return html` -
+
${hasRequests ? this.renderPendingRequestsButton() : ""} ${this.myClans.map( (clan) => html` diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts index 7860b9296..60d434dbf 100644 --- a/src/client/UserSettingModal.ts +++ b/src/client/UserSettingModal.ts @@ -343,7 +343,9 @@ export class UserSettingModal extends BaseModal { showDivider: true, })}
-
${activeContent}
+
+ ${activeContent} +
`; } diff --git a/src/client/components/baseComponents/Modal.ts b/src/client/components/baseComponents/Modal.ts index fc4801064..68ebd4462 100644 --- a/src/client/components/baseComponents/Modal.ts +++ b/src/client/components/baseComponents/Modal.ts @@ -126,9 +126,8 @@ export class OModal extends LitElement { !this.inline && this.maxWidth ? `max-width: ${this.maxWidth};` : ""; const hasTabs = this.tabs.length > 0; - const sectionClass = hasTabs - ? "relative flex-1 min-h-0 flex flex-col text-white bg-black/70 backdrop-blur-xl lg:rounded-2xl lg:border border-white/10 overflow-hidden" - : "relative flex-1 min-h-0 flex flex-col text-white bg-[#23232382] backdrop-blur-md lg:rounded-lg overflow-hidden"; + const sectionClass = + "relative flex-1 min-h-0 flex flex-col text-white bg-black/70 backdrop-blur-xl lg:rounded-2xl lg:border border-white/10 overflow-hidden"; return html`