mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 07:50:45 +00:00
Fix UI (again) 🖌️ (#3379)
## Description: **Fix UI spacing and border radius across multiple screen sizes** - Fix events panel missing right margin on wide screens - Fix incorrect border radius on events panel and control panel at various breakpoints - Remove border radius from attack/boat elements on small screens - Show running attacks above the events panel on mobile - Add left/right margin to the homepage on tablet-sized screens - Adjust lobby card spacing on mobile Previous <img width="410" height="124" alt="Screenshot 2026-03-07 203244" src="https://github.com/user-attachments/assets/d3feb9fe-97a3-44d0-9aba-db04062f9911" /> After <img width="417" height="117" alt="Screenshot 2026-03-07 203255" src="https://github.com/user-attachments/assets/31b88145-8e92-40db-b9cc-f2a00754f900" /> Previous <img width="828" height="123" alt="Screenshot 2026-03-07 203320" src="https://github.com/user-attachments/assets/4e162cf5-7d82-4e87-9dd9-9ab1d3782f23" /> After <img width="820" height="126" alt="Screenshot 2026-03-07 203337" src="https://github.com/user-attachments/assets/a25121aa-603c-41c7-b335-406a38a62cf9" /> Previous <img width="961" height="102" alt="Screenshot 2026-03-07 203353" src="https://github.com/user-attachments/assets/22ba9770-88a3-4f49-aeb6-6d875006946b" /> After <img width="954" height="78" alt="Screenshot 2026-03-07 203403" src="https://github.com/user-attachments/assets/0d4e3b19-de1c-4211-b1e3-bd935025de33" /> Previous <img width="557" height="154" alt="Screenshot 2026-03-07 203450" src="https://github.com/user-attachments/assets/2cc8a747-3e68-4449-9746-62fcbca76510" /> After <img width="602" height="146" alt="Screenshot 2026-03-07 203421" src="https://github.com/user-attachments/assets/bae399a3-8969-4b7a-a77c-c73c4f775ca0" /> Previous <img width="727" height="889" alt="Screenshot 2026-03-07 204707" src="https://github.com/user-attachments/assets/bc53febf-9beb-4195-a994-858333f30f24" /> After <img width="725" height="799" alt="Screenshot 2026-03-07 204714" src="https://github.com/user-attachments/assets/9d600212-73ae-4566-b1c5-df83e8edb8e9" /> Previous <img width="658" height="890" alt="Screenshot 2026-03-07 204633" src="https://github.com/user-attachments/assets/6c935fcc-3e46-4706-8c9a-9840cc469b60" /> After <img width="656" height="798" alt="Screenshot 2026-03-07 204639" src="https://github.com/user-attachments/assets/8e490f29-cf50-4c1f-a97e-f550fd4f9a13" /> ## 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:
FloPinguin
+8
-6
@@ -273,22 +273,24 @@
|
||||
padding-right: env(safe-area-inset-right);
|
||||
"
|
||||
>
|
||||
<!-- HUD: <sm full-width, sm..lg left side 460px, lg+ col-2 -->
|
||||
<!-- HUD: <sm contents (children join outer flex), sm+ flex-col 460px, lg+ col-2 -->
|
||||
<div
|
||||
class="flex flex-col pointer-events-none w-full sm:w-[460px] lg:col-start-2 z-10"
|
||||
class="contents sm:flex sm:flex-col sm:pointer-events-none w-full sm:w-[460px] lg:col-start-2 sm:z-10"
|
||||
>
|
||||
<attacks-display class="w-full pointer-events-auto"></attacks-display>
|
||||
<attacks-display
|
||||
class="w-full pointer-events-auto order-1 sm:order-none"
|
||||
></attacks-display>
|
||||
<div
|
||||
class="pointer-events-auto bg-gray-800/70 backdrop-blur-xs rounded-lg shadow-lg"
|
||||
class="pointer-events-auto bg-gray-800/70 backdrop-blur-xs sm:rounded-tr-lg lg:rounded-t-lg min-[1200px]:rounded-lg shadow-lg order-3 sm:order-none"
|
||||
>
|
||||
<control-panel class="w-full"></control-panel>
|
||||
<unit-display class="hidden lg:block w-full"></unit-display>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- events+chat: <sm above HUD (order-first), sm..lg right side, lg+ col-3 -->
|
||||
<!-- events+chat: <sm between attacks and control (order-2), sm+ right side, lg+ col-3 -->
|
||||
<div
|
||||
class="flex flex-col pointer-events-none items-end order-first sm:order-none sm:flex-1 lg:col-start-3 lg:self-end lg:justify-end"
|
||||
class="flex flex-col pointer-events-none items-end order-2 sm:order-none sm:flex-1 lg:col-start-3 lg:self-end lg:justify-end min-[1200px]:mr-4"
|
||||
>
|
||||
<chat-display
|
||||
class="w-full sm:w-auto pointer-events-auto"
|
||||
|
||||
@@ -119,7 +119,7 @@ export class GameModeSelector extends LitElement {
|
||||
const special = this.lobbies?.games?.["special"]?.[0];
|
||||
|
||||
return html`
|
||||
<div class="flex flex-col gap-4 w-[84%] sm:w-full mx-auto pb-4 sm:pb-0">
|
||||
<div class="flex flex-col gap-4 w-full px-4 sm:px-0 mx-auto pb-4 sm:pb-0">
|
||||
<!-- Solo: mobile only, top -->
|
||||
<div class="sm:hidden h-14">
|
||||
${this.renderSmallActionCard(
|
||||
|
||||
@@ -22,7 +22,7 @@ export class MainLayout extends LitElement {
|
||||
class="relative [.in-game_&]:hidden flex flex-col flex-1 overflow-hidden w-full px-0 lg:px-[clamp(1.5rem,3vw,3rem)] pt-0 lg:pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-0 lg:pb-[clamp(0.75rem,1.5vw,1.5rem)]"
|
||||
>
|
||||
<div
|
||||
class="w-full lg:max-w-[20cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden"
|
||||
class="w-full lg:max-w-[20cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden sm:px-4 lg:px-0"
|
||||
>
|
||||
${this._initialChildren}
|
||||
</div>
|
||||
|
||||
@@ -100,7 +100,7 @@ export class PlayPage extends LitElement {
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full pb-4 lg:pb-0 flex flex-col gap-4 lg:grid lg:grid-cols-[2fr_1fr] lg:gap-4"
|
||||
class="w-full pb-4 lg:pb-0 flex flex-col gap-4 sm:-mx-4 sm:w-[calc(100%+2rem)] lg:mx-0 lg:w-full lg:grid lg:grid-cols-[2fr_1fr] lg:gap-4"
|
||||
>
|
||||
<!-- Mobile: spacer for fixed top bar -->
|
||||
<div
|
||||
|
||||
@@ -221,7 +221,7 @@ export class AttacksDisplay extends LitElement implements Layer {
|
||||
return this.incomingAttacks.map(
|
||||
(attack) => html`
|
||||
<div
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
>
|
||||
${this.renderButton({
|
||||
content: html`<img
|
||||
@@ -254,7 +254,7 @@ export class AttacksDisplay extends LitElement implements Layer {
|
||||
/>`,
|
||||
onClick: () => this.handleRetaliate(attack),
|
||||
className:
|
||||
"ml-auto inline-flex items-center justify-center cursor-pointer bg-red-900/50 hover:bg-red-800/70 rounded-lg px-1.5 py-1 border border-red-700/50",
|
||||
"ml-auto inline-flex items-center justify-center cursor-pointer bg-red-900/50 hover:bg-red-800/70 sm:rounded-lg px-1.5 py-1 border border-red-700/50",
|
||||
translate: false,
|
||||
})
|
||||
: ""}
|
||||
@@ -269,7 +269,7 @@ export class AttacksDisplay extends LitElement implements Layer {
|
||||
return this.outgoingAttacks.map(
|
||||
(attack) => html`
|
||||
<div
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
>
|
||||
${this.renderButton({
|
||||
content: html`<img
|
||||
@@ -311,7 +311,7 @@ export class AttacksDisplay extends LitElement implements Layer {
|
||||
return this.outgoingLandAttacks.map(
|
||||
(landAttack) => html`
|
||||
<div
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
>
|
||||
${this.renderButton({
|
||||
content: html`<img
|
||||
@@ -367,7 +367,7 @@ export class AttacksDisplay extends LitElement implements Layer {
|
||||
return this.outgoingBoats.map(
|
||||
(boat) => html`
|
||||
<div
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
>
|
||||
${this.renderButton({
|
||||
content: html`${this.renderBoatIcon(boat)}
|
||||
@@ -403,7 +403,7 @@ export class AttacksDisplay extends LitElement implements Layer {
|
||||
return this.incomingBoats.map(
|
||||
(boat) => html`
|
||||
<div
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
|
||||
>
|
||||
${this.renderButton({
|
||||
content: html`${this.renderBoatIcon(boat)}
|
||||
|
||||
@@ -809,7 +809,7 @@ export class EventsDisplay extends LitElement implements Layer {
|
||||
`,
|
||||
onClick: this.toggleHidden,
|
||||
className:
|
||||
"text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 min-[1200px]:rounded-lg max-sm:rounded-tr-lg sm:rounded-tl-lg bg-gray-800/70 backdrop-blur-xs",
|
||||
"text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 min-[1200px]:rounded-lg sm:rounded-tl-lg bg-gray-800/70 backdrop-blur-xs",
|
||||
})}
|
||||
</div>
|
||||
`
|
||||
@@ -819,7 +819,9 @@ export class EventsDisplay extends LitElement implements Layer {
|
||||
class="relative w-full z-50 min-[1200px]:w-96 backdrop-blur-sm"
|
||||
>
|
||||
<!-- Button Bar -->
|
||||
<div class="w-full p-2 lg:p-3 bg-gray-800/70 rounded-t-lg">
|
||||
<div
|
||||
class="w-full p-2 lg:p-3 bg-gray-800/70 sm:rounded-tl-lg min-[1200px]:rounded-t-lg"
|
||||
>
|
||||
<div class="flex justify-between items-center gap-3">
|
||||
<div class="flex gap-4">
|
||||
${this.renderToggleButton(
|
||||
|
||||
Reference in New Issue
Block a user