chk
/
KoogleApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout optimization for tablets

This commit is contained in:
beo3000 2026-01-09 10:59:15 +01:00
parent 325bf5b002
commit 310cc0e2ec
1 changed files with 91 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/Koogle.Web/Components/Game/GameInputPanel.razor
View File

@ -14,72 +14,77 @@
@GameState.Value.ThrowPanelBefore *@
<div class="game-input-panel">
@* Current player display *@
<div class="current-player-section">
<MudText Typo="Typo.h6" Class="player-label">Aktueller Spieler</MudText>
<MudText Typo="Typo.h4" Class="player-name">
@(CurrentPlayerName ?? "Kein Spieler")
</MudText>
@if (GameState.Value.Participants.Mode == ParticipantsMode.FreeToChoose)
@* Left column: Player + Pins *@
<div class="left-column">
@* Current player display *@
<div class="current-player-section">
<MudText Typo="Typo.h6" Class="player-label">Aktueller Spieler</MudText>
<MudText Typo="Typo.h4" Class="player-name">
@(CurrentPlayerName ?? "Kein Spieler")
</MudText>
@if (GameState.Value.Participants.Mode == ParticipantsMode.FreeToChoose)
{
<MudButton Variant="Variant.Outlined"
Color="Color.Warning"
Size="Size.Small"
OnClick="ShowPlayerSelector"
StartIcon="@Icons.Material.Filled.SwapHoriz">
Spieler wechseln
</MudButton>
}
</div>
@* Pin input area *@
<div class="pin-input-section">
<PinPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
IsInteractive="@IsInteractive"
OnPinClicked="HandlePinClick" />
</div>
@* Number quick-entry (below pins) *@
@if (@GameState.Value.ThrowPanelAfter.ThrowMode == ThrowMode.Reposition)
{
<MudButton Variant="Variant.Outlined"
Color="Color.Warning"
Size="Size.Small"
OnClick="ShowPlayerSelector"
StartIcon="@Icons.Material.Filled.SwapHoriz">
Spieler wechseln
</MudButton>
<div class="number-input-section">
<NumberPanel IsInteractive="@IsInteractive"
CanConfirmThrow="@CanConfirmThrow"
SelectedNumber="@_selectedNumber"
OnNumberClicked="HandleNumberClick" />
</div>
}
</div>
@* Pin input area *@
<div class="pin-input-section">
<PinPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
IsInteractive="@IsInteractive"
OnPinClicked="HandlePinClick" />
</div>
@* Right column: Controls *@
<div class="right-column">
<ConfirmPanel IsInteractive="@IsInteractive"
CanConfirmThrow="@CanConfirmThrow"
OnBellClicked="HandleBellClick"
OnThrowConfirmed="HandleThrowConfirmed"/>
@if (@GameState.Value.ThrowPanelAfter.ThrowMode == ThrowMode.Reposition)
{
@* Number quick-entry *@
<div class="number-input-section">
<NumberPanel IsInteractive="@IsInteractive"
CanConfirmThrow="@CanConfirmThrow"
SelectedNumber="@_selectedNumber"
OnNumberClicked="HandleNumberClick" />
@* Throw info and controls *@
<div class="throw-control-section">
<ThrowPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
IsInteractive="@IsInteractive"
OnGutterClicked="HandleGutterClick" />
</div>
}
<ConfirmPanel IsInteractive="@IsInteractive"
CanConfirmThrow="@CanConfirmThrow"
OnBellClicked="HandleBellClick"
OnThrowConfirmed="HandleThrowConfirmed"/>
@* Throw info and controls *@
<div class="throw-control-section">
<ThrowPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
IsInteractive="@IsInteractive"
OnGutterClicked="HandleGutterClick" />
@* Undo/Redo buttons *@
<div class="undo-section">
<UndoRedoButtons IsDisabled="@GameState.Value.IsSaving" />
</div>
@* Game-specific actions *@
<GameActionPanel />
</div>
@* Undo/Redo buttons *@
<div class="undo-section">
<UndoRedoButtons IsDisabled="@GameState.Value.IsSaving" />
</div>
@* Game-specific actions *@
<GameActionPanel />
@* Error display *@
@* Error display (full width) *@
@if (!string.IsNullOrEmpty(GameState.Value.Error))
{
<MudAlert Severity="Severity.Error" Class="mt-2">
<MudAlert Severity="Severity.Error" Class="mt-2 error-section">
@GameState.Value.Error
</MudAlert>
}
@* Saving indicator *@
@* Saving indicator (full width) *@
@if (GameState.Value.IsSaving)
{
<div class="saving-indicator">
@ -95,10 +100,44 @@
flex-direction: column;
gap: 16px;
padding: 16px;
max-width: 500px;
max-width: 900px;
margin: 0 auto;
}
.left-column {
display: flex;
flex-direction: column;
gap: 16px;
}
.right-column {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Tablet and larger: two-column layout */
@@media (min-width: 768px) {
.game-input-panel {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr);
gap: 24px;
align-items: start;
}
.error-section,
.saving-indicator {
grid-column: 1 / -1;
}
}
/* Mobile: stack everything vertically */
@@media (max-width: 767px) {
.game-input-panel {
max-width: 500px;
}
}
.current-player-section {
text-align: center;
padding: 16px;