Jocaru/echoes-of-the-ash
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UI Refinements Round 2: CSS fixes, Grid Layout, Sidebar Images

Browse Source
This commit is contained in:
Joan
2026-02-05 17:53:00 +01:00
parent ccf9ba3e28
commit 173d6c9117
66 changed files with 172 additions and 16521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
pwa/src/components/Game.css
View File

@@ -1052,6 +1052,35 @@ body.no-scroll {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
max-height: 400px;
overflow-y: auto;
padding-right: 5px;
/* Custom scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--game-border-active) rgba(0, 0, 0, 0.3);
/* Ensure overflow doesn't clip dropdowns if possible,
but for scrolling lists we need overflow-y: auto.
Dropdowns must use fixed position or Portal if they need to escape.
However, we can try to make sure cards have z-index context */
}
/* Ensure cards handle their own stacking context */
.entity-card {
position: relative;
/* ... existing styles ... */
}
.entity-list::-webkit-scrollbar {
width: 6px;
}
.entity-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.entity-list::-webkit-scrollbar-thumb {
background-color: var(--game-border-active);
border-radius: 3px;
}
.entity-card {
@@ -1879,13 +1908,9 @@ body.no-scroll {
/* Changed from center to space-between */
gap: 0.25rem;
/* Fixed dimensions for consistent sizing */
min-height: 150px;
min-width: 110px;
/* Increased to 150px for better visual balance */
max-height: 150px;
max-width: 110px;
height: 150px;
width: 110px;
min-height: 100px;
min-width: 80px;
max-width: 100%;
transition: all 0.2s;
cursor: pointer;
overflow: visible;
@@ -1894,6 +1919,29 @@ body.no-scroll {
/* For tooltip positioning */
}
/* Constrain item images in sidebar */
/* Constrain item images in sidebar */
.equipment-slot-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
border-radius: 6px;
opacity: 0.6;
z-index: 1;
/* Below text/buttons */
}
/* Ensure content is above image */
.equipment-slot>*:not(.equipment-slot-image) {
z-index: 10;
position: relative;
}
.equipment-slot.large {
min-width: 150px;
}
@@ -4137,4 +4185,84 @@ body.no-scroll {
/* Utility classes */
.text-danger {
color: #ff4444 !important;
}
/* --- Combat Actions --- */
.combat-actions {
display: flex;
flex-direction: column;
gap: 1rem;
min-height: 220px;
/* Reserve space for grid to prevent layout shift */
justify-content: center;
/* Center content vertically */
}
.combat-actions-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.combat-actions-group .btn {
padding: 1rem;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s;
}
/* Specific Combat Buttons */
.btn-attack {
background: linear-gradient(180deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.3) 100%);
border: 1px solid rgba(220, 38, 38, 0.5);
color: #fca5a5;
}
.btn-attack:hover:not(:disabled) {
background: linear-gradient(180deg, rgba(220, 38, 38, 0.3) 0%, rgba(153, 27, 27, 0.4) 100%);
border-color: #f87171;
box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
transform: translateY(-2px);
}
.btn-defend {
background: linear-gradient(180deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
border: 1px solid rgba(37, 99, 235, 0.5);
color: #93c5fd;
}
.btn-defend:hover:not(:disabled) {
background: linear-gradient(180deg, rgba(37, 99, 235, 0.3) 0%, rgba(30, 64, 175, 0.4) 100%);
border-color: #60a5fa;
box-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
transform: translateY(-2px);
}
.btn-supplies {
background: linear-gradient(180deg, rgba(217, 119, 6, 0.2) 0%, rgba(180, 83, 9, 0.3) 100%);
border: 1px solid rgba(217, 119, 6, 0.5);
color: #fcd34d;
}
.btn-supplies:hover:not(:disabled) {
background: linear-gradient(180deg, rgba(217, 119, 6, 0.3) 0%, rgba(180, 83, 9, 0.4) 100%);
border-color: #fbbf24;
box-shadow: 0 0 15px rgba(217, 119, 6, 0.3);
transform: translateY(-2px);
}
.btn-flee {
background: linear-gradient(180deg, rgba(75, 85, 99, 0.2) 0%, rgba(55, 65, 81, 0.3) 100%);
border: 1px solid rgba(75, 85, 99, 0.5);
color: #e5e7eb;
}
.btn-flee:hover:not(:disabled) {
background: linear-gradient(180deg, rgba(75, 85, 99, 0.3) 0%, rgba(55, 65, 81, 0.4) 100%);
border-color: #9ca3af;
box-shadow: 0 0 15px rgba(75, 85, 99, 0.3);
transform: translateY(-2px);
}

2
pwa/src/components/common/GameTooltip.tsx
View File

@@ -64,7 +64,7 @@ export const GameTooltip: React.FC<GameTooltipProps> = ({ content, children, cla
position: 'fixed',
top: position.y,
left: position.x,
zIndex: 9999,
zIndex: 100000,
pointerEvents: 'none', // Ensure mouse doesn't get stuck on the tooltip itself
maxWidth: '300px'
}}

35
pwa/src/components/game/InventoryModal.tsx
View File

@@ -360,30 +360,32 @@ function InventoryModal({
<div className="capacity-metric">
<span className="metric-icon">⚖️</span>
<div className="metric-bar-container">
<div className="metric-text">
<span className="metric-text" style={{ marginBottom: '4px', display: 'block' }}>
{t('game.weight')}: {(profile.current_weight || 0).toFixed(1)} / {profile.max_weight || 0} kg
</div>
<div className="metric-bar">
<div
className="metric-fill weight"
style={{ width: `${Math.min(100, ((profile.current_weight || 0) / (profile.max_weight || 1)) * 100)}%` }}
></div>
</div>
</span>
<GameProgressBar
value={profile.current_weight || 0}
max={profile.max_weight || 100}
type="weight"
height="8px"
showText={false}
/>
</div>
</div>
<div className="capacity-metric">
<span className="metric-icon">📦</span>
<div className="metric-bar-container">
<div className="metric-text">
<span className="metric-text" style={{ marginBottom: '4px', display: 'block' }}>
{t('game.volume')}: {(profile.current_volume || 0).toFixed(1)} / {profile.max_volume || 0} L
</div>
<div className="metric-bar">
<div
className="metric-fill volume"
style={{ width: `${Math.min(100, ((profile.current_volume || 0) / (profile.max_volume || 1)) * 100)}%` }}
></div>
</div>
</span>
<GameProgressBar
value={profile.current_volume || 0}
max={profile.max_volume || 100}
type="volume"
height="8px"
showText={false}
/>
</div>
</div>
</div>
@@ -493,3 +495,4 @@ function InventoryModal({
}
export default InventoryModal
import { GameProgressBar } from '../common/GameProgressBar'

24
pwa/src/components/game/Workbench.css
View File

@@ -91,11 +91,18 @@
/* Workbench Layout */
.workbench-content-grid {
display: flex;
/* Changed to flex to match inventory layout logic if needed, but grid is fine if aligned */
/* Keeping grid but fixing transparency */
display: grid;
grid-template-columns: 220px 1fr;
/* Changed to 2-column layout to match inventory? No, Inventory has 2 cols (sidebar + content). Workbench has 3 (sidebar + items + details). */
/* Let's keep 3 columns but better styled */
grid-template-columns: 220px 350px 1fr;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.2);
background: var(--game-bg-app);
/* Solid background */
}
/* Column 1: Sidebar */
@@ -144,9 +151,9 @@
}
.workbench-sidebar .category-btn.active {
background: rgba(234, 113, 66, 0.15);
border-color: var(--game-color-primary);
color: var(--game-color-primary);
background: rgba(66, 153, 225, 0.15);
border-color: #4299e1;
color: #63b3ed;
}
.workbench-sidebar .cat-icon {
@@ -165,15 +172,16 @@
.workbench-items-column {
display: flex;
flex-direction: column;
border-right: 1px solid #3a4b5c;
background: rgba(0, 0, 0, 0.1);
border-right: 1px solid var(--game-border-color);
background: var(--game-bg-app);
overflow: hidden;
}
.workbench-filters {
padding: 1rem;
border-bottom: 1px solid #3a4b5c;
background: rgba(0, 0, 0, 0.1);
border-bottom: 1px solid var(--game-border-color);
background: var(--game-bg-input);
/* Match search bar bg */
}
.workbench-items-list {

2
pwa/src/index.css
View File

@@ -9,7 +9,7 @@
--game-bg-slot: rgba(0, 0, 0, 0.6);
/* Item slots */
--game-bg-slot-hover: rgba(255, 255, 255, 0.1);
--game-bg-tooltip: rgba(15, 15, 20, 0.98);
--game-bg-tooltip: #151515;
/* --- Borders & Separators --- */
--game-border-color: rgba(255, 255, 255, 0.12);