mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-15 22:49:37 +00:00
Consistent border radius and padding from edge of screen for in game UI (#2576)
## Description: Moves all the in game ui to have a fixed padding around the edge of the screen and also makes all the in game ui have the same border radius. Before: <img width="569" height="802" alt="image" src="https://github.com/user-attachments/assets/2d51b66c-26bb-4835-abef-a646565280ba" /> <img width="2559" height="1238" alt="image" src="https://github.com/user-attachments/assets/00723649-bfc7-4e92-bee9-6cff0c2d688c" /> After: <img width="2559" height="1240" alt="image" src="https://github.com/user-attachments/assets/8dda98e3-8836-4363-8f33-5b699303ee4f" /> <img width="686" height="1122" alt="image" src="https://github.com/user-attachments/assets/a3820d1c-0579-4b2b-b2a8-7eb790e3ec39" /> ## 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: `rovi.`
This commit is contained in:
@@ -87,8 +87,8 @@ export class GameLeftSidebar extends LitElement implements Layer {
|
||||
render() {
|
||||
return html`
|
||||
<aside
|
||||
class=${`fixed top-[20px] left-0 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg transition-transform duration-300 ease-out transform ${
|
||||
this.isVisible ? "translate-x-0" : "-translate-x-full"
|
||||
class=${`fixed top-4 left-4 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-lg transition-transform duration-300 ease-out transform ${
|
||||
this.isVisible ? "translate-x-0" : "hidden"
|
||||
}`}
|
||||
>
|
||||
${this.isPlayerTeamLabelVisible
|
||||
@@ -109,7 +109,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
|
||||
this.isLeaderboardShow || this.isTeamLeaderboardShow ? "mb-2" : ""
|
||||
}`}
|
||||
>
|
||||
<div class="w-6 h-6 cursor-pointer" @click=${this.toggleLeaderboard}>
|
||||
<div class="cursor-pointer" @click=${this.toggleLeaderboard}>
|
||||
<img
|
||||
src=${this.isLeaderboardShow
|
||||
? leaderboardSolidIcon
|
||||
@@ -122,7 +122,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
|
||||
${this.isTeamGame
|
||||
? html`
|
||||
<div
|
||||
class="w-6 h-6 cursor-pointer"
|
||||
class="cursor-pointer"
|
||||
@click=${this.toggleTeamLeaderboard}
|
||||
>
|
||||
<img
|
||||
|
||||
Reference in New Issue
Block a user