alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-01 19:33:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

reduce margin for player info & control panel (#3414)

Browse Source 
## Description:

To give more space in the center of the screen remove the top & bottom
margin. Also make the control panel & player info panel slightly shorter
& longer.

<img width="1167" height="961" alt="Screenshot 2026-03-12 at 7 20 40 PM"
src="https://github.com/user-attachments/assets/15baf640-daf0-4394-9107-d175130e7754"
/>

## 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:

evan
This commit is contained in:
Evan
2026-03-12 19:50:43 -07:00
committed by GitHub
parent 60e0ea6425
commit 37f4f606f6
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/ControlPanel.ts
+5 -5
View File
@@ -261,7 +261,7 @@ export class ControlPanel extends LitElement implements Layer {
private renderDesktop() {
return html`
<!-- Row 1: troop rate | troop bar | gold -->
<div class="flex gap-1.5 items-center mb-1.5">
<div class="flex gap-1.5 items-center mb-1">
<!-- Troop rate -->
<div
class="flex items-center gap-1 shrink-0 border rounded-md font-bold text-sm p-1 w-[5.5rem] ${this
@@ -300,9 +300,9 @@ export class ControlPanel extends LitElement implements Layer {
</div>
</div>
<!-- Row 2: attack ratio | slider -->
<div class="flex items-center gap-2" translate="no">
<div class="flex items-center gap-1.5" translate="no">
<div
class="flex items-center gap-1 shrink-0 border border-gray-600 rounded-md p-1 text-sm font-bold text-white cursor-pointer w-[8rem]"
class="flex items-center gap-1 shrink-0 border border-gray-600 rounded-md px-1 py-0.5 text-sm font-bold text-white cursor-pointer w-[8rem]"
>
<img
src=${swordIcon}
@@ -326,7 +326,7 @@ export class ControlPanel extends LitElement implements Layer {
.value=${String(Math.round(this.attackRatio * 100))}
@input=${(e: Event) => this.handleRatioSliderInput(e)}
@pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
class="flex-1 h-2 accent-blue-500 cursor-pointer"
class="flex-1 h-1.5 accent-blue-500 cursor-pointer"
/>
</div>
`;
@@ -384,7 +384,7 @@ export class ControlPanel extends LitElement implements Layer {
return html`
<div
class="relative pointer-events-auto ${this._isVisible
? "relative w-full text-sm px-2 py-1.5"
? "relative w-full text-sm px-2 py-1"
: "hidden"}"
@contextmenu=${(e: MouseEvent) => e.preventDefault()}
>