mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-24 02:43:00 +00:00
RyanandGitHub
70f2abb181
## Description: Update UI check https://homepageupdate.openfront.dev/ Improved mobile UI (now fills whole screen for all modals) e.g.: <img width="432" height="852" alt="image" src="https://github.com/user-attachments/assets/56de40af-4137-4c57-96b7-3910c9a665b8" /> Converted PublicLobby to be "GameModeSelector" to get a nicer 4x4 grid div, where <GameModeSelector> now handles all the username validation now (removed redundant code from modals such as matchmaking) also fixed a bug where someone could have "[XX] X" as thier username (when the minimum should be 3 chars for their name) Now visually displays the 3 lobbies ffa/team/special (which is a continuation from the work done in: #3196 ) <img width="818" height="563" alt="image" src="https://github.com/user-attachments/assets/a15cd31b-6061-4fb8-83ee-ffde6225cfa7" /> updated the background: <img width="1919" height="807" alt="image" src="https://github.com/user-attachments/assets/358a7434-51b8-4540-baf2-d1be05053c44" /> slightly updated the glassy-look to be less glassy: <img width="825" height="729" alt="image" src="https://github.com/user-attachments/assets/1801871b-bbf8-43db-ac53-489337ae80a5" /> ## 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
81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { html, TemplateResult } from "lit";
|
|
|
|
export interface ModalHeaderProps {
|
|
title?: string | TemplateResult;
|
|
titleContent?: TemplateResult;
|
|
onBack: (event: MouseEvent) => void;
|
|
ariaLabel?: string;
|
|
rightContent?: TemplateResult;
|
|
leftClassName?: string;
|
|
buttonClassName?: string;
|
|
titleClassName?: string;
|
|
padded?: boolean;
|
|
showDivider?: boolean;
|
|
}
|
|
|
|
const DEFAULT_WRAPPER_CLASS = "flex flex-wrap items-center gap-2 shrink-0";
|
|
const DEFAULT_DIVIDER_CLASS = "border-b border-white/10";
|
|
const DEFAULT_PADDING_CLASS = "p-4 lg:p-6";
|
|
const DEFAULT_LEFT_CLASS = "flex items-center gap-4 flex-1";
|
|
const DEFAULT_BUTTON_CLASS =
|
|
"group flex items-center justify-center w-10 h-10 rounded-full shrink-0 " +
|
|
"bg-white/5 hover:bg-white/10 transition-all border border-white/10";
|
|
const DEFAULT_TITLE_CLASS =
|
|
"text-white text-xl lg:text-2xl font-bold uppercase " +
|
|
"tracking-widest break-words hyphens-auto";
|
|
|
|
const withClasses = (...classes: Array<string | undefined>) =>
|
|
classes.filter(Boolean).join(" ");
|
|
|
|
export const modalHeader = ({
|
|
title,
|
|
titleContent,
|
|
onBack,
|
|
ariaLabel = "Back",
|
|
rightContent,
|
|
leftClassName,
|
|
buttonClassName,
|
|
titleClassName,
|
|
padded = true,
|
|
showDivider = true,
|
|
}: ModalHeaderProps): TemplateResult => {
|
|
const wrapperClass = withClasses(
|
|
DEFAULT_WRAPPER_CLASS,
|
|
showDivider ? DEFAULT_DIVIDER_CLASS : undefined,
|
|
padded ? DEFAULT_PADDING_CLASS : undefined,
|
|
);
|
|
const leftClass = withClasses(DEFAULT_LEFT_CLASS, leftClassName);
|
|
const buttonClass = withClasses(DEFAULT_BUTTON_CLASS, buttonClassName);
|
|
const resolvedTitleClass = withClasses(DEFAULT_TITLE_CLASS, titleClassName);
|
|
|
|
return html`
|
|
<div class="${wrapperClass}">
|
|
<div class="${leftClass}">
|
|
<button
|
|
@click=${onBack}
|
|
class="${buttonClass}"
|
|
aria-label="${ariaLabel}"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5 text-gray-400 group-hover:text-white transition-colors"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
${titleContent ??
|
|
html`<span class="${resolvedTitleClass}">${title}</span>`}
|
|
</div>
|
|
${rightContent ?? ""}
|
|
</div>
|
|
`;
|
|
};
|