mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-04 21:32:02 +00:00
Improve Ingame UI ✨ (#3212)
## Description: - **Dynamic sidebar offset for top bars** - GameLeftSidebar, GameRightSidebar, and PlayerInfoOverlay now shift down when SpawnTimer and/or ImmunityTimer bars are visible (7px per bar). Implemented via events. - **Fixed text overflow** in HeadsUpMessage.ts (Random spawn message is long) - **Fixed inconsistent text sizing** in EventsDisplay - **Alliance icon horizontal** in PlayerInfoOverlay so the size of the overlay doesn't change if there is an alliance - **Nation relation coloring** - Nation player names are now colored based on their relation - **Background & Blur Unification** - **Border Radius & Page Edge Gap Standardization** - **EventsDisplay collapsed button:** Fixed badge hidden / inline-block CSS conflict (conditional rendering), added gap-2 between text and badge - **Right panel spacing:** Changed right container from sm:w-1/2 to sm:flex-1 to fill remaining space - **Leaderboard**: Rounded grid corners (rounded-lg overflow-hidden), removed last-row border, added `willUpdate` for auto-refresh on hide/show click, plus button styled to match toggle buttons - Other little CSS fixes (margins etc) Showcase: (Note the red mexico name on betrayal) https://github.com/user-attachments/assets/f0ed91de-3a07-4564-a209-3d7723edee55 Two progress bars at the top, mobile UI not cut off: https://github.com/user-attachments/assets/83f1fd64-ceab-4a74-8d16-6e1eeea1709d HeadsUpMessage text overflow fixed, SpawnTimer does not cut off the PlayerInfoOverlay: <img width="516" height="929" alt="Screenshot 2026-02-14 214410" src="https://github.com/user-attachments/assets/74f0edea-8c01-4394-a3d0-a3245922e0da" /> Previous: <img width="306" height="118" alt="Screenshot 2026-02-14 213705" src="https://github.com/user-attachments/assets/a7c7e8f3-f0e8-4213-8a8f-4f3677e9fc98" /> Smaller event panel text: <img width="594" height="975" alt="Screenshot 2026-02-14 215738" src="https://github.com/user-attachments/assets/33e80570-9260-40b0-b810-c71eda4861fc" /> ## 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: FloPinguin
This commit is contained in:
@@ -261,7 +261,7 @@ export class ControlPanel extends LitElement implements Layer {
|
||||
return html`
|
||||
<div
|
||||
class="pointer-events-auto ${this._isVisible
|
||||
? "relative z-[60] w-full lg:max-w-[400px] text-sm lg:text-base bg-gray-800/70 p-1.5 pr-2 lg:p-5 shadow-lg lg:rounded-tr-xl min-[1200px]:rounded-xl backdrop-blur-sm"
|
||||
? "relative z-[60] w-full lg:max-w-[400px] text-sm lg:text-base bg-gray-800/70 p-1.5 pr-2 lg:p-5 shadow-lg sm:rounded-tr-lg min-[1200px]:rounded-lg backdrop-blur-xs"
|
||||
: "hidden"}"
|
||||
@contextmenu=${(e: MouseEvent) => e.preventDefault()}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user