lucas/Shogi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css subgrid

Browse Source
This commit is contained in:
Lucas Morgan
2024-11-01 17:42:07 -05:00
parent a67d03b4e2
commit f681497561
4 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css
View File

@@ -1,27 +1,17 @@
.game-board { .game-board {
--ratio: 0.9; --ratio: 0.9;
display: grid; display: grid;
grid-template-areas: "board side-board icons"; grid-template-columns: min-content repeat(9, minmax(2rem, 4rem)) max-content;
grid-template-columns: minmax(min-content, calc(100vmin * var(--ratio) - 2rem)) 1fr 1fr; grid-template-rows: repeat(9, 1fr) auto;
background-color: #444; background-color: #444;
position: relative; /* For absolute positioned promote prompt. */ gap: 3px;
place-self: center;
} }
.board { .board {
grid-area: board;
}
.side-board {
grid-area: side-board;
}
.icons {
grid-area: icons;
}
.board {
position: relative;
display: grid; display: grid;
grid-column: span 10;
grid-row: span 10;
grid-template-areas: grid-template-areas:
"rank A9 B9 C9 D9 E9 F9 G9 H9 I9" "rank A9 B9 C9 D9 E9 F9 G9 H9 I9"
"rank A8 B8 C8 D8 E8 F8 G8 H8 I8" "rank A8 B8 C8 D8 E8 F8 G8 H8 I8"
@@ -33,10 +23,8 @@
"rank A2 B2 C2 D2 E2 F2 G2 H2 I2" "rank A2 B2 C2 D2 E2 F2 G2 H2 I2"
"rank A1 B1 C1 D1 E1 F1 G1 H1 I1" "rank A1 B1 C1 D1 E1 F1 G1 H1 I1"
". file file file file file file file file file"; ". file file file file file file file file file";
grid-template-columns: auto repeat(9, 1fr); grid-template-columns: subgrid;
grid-template-rows: repeat(9, 1fr) auto; grid-template-rows: subgrid;
gap: 3px;
padding: 1rem;
background-color: #444444; background-color: #444444;
max-height: 100%; max-height: 100%;
aspect-ratio: var(--ratio); aspect-ratio: var(--ratio);
@@ -89,6 +77,7 @@
} }
.side-board { .side-board {
grid-row: span 9;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-content: space-between; place-content: space-between;
@@ -108,3 +97,17 @@
place-items: center start; place-items: center start;
padding: 0.5rem; padding: 0.5rem;
} }
@media all and (max-width: 1000px) {
.game-board {
grid-template-columns: min-content repeat(9, minmax(2rem, 4rem));
grid-template-rows: repeat(9, 1fr) auto max-content;
}
.side-board {
grid-row: unset;
grid-column: span 10;
flex-direction: row;
}
}

5
Shogi.UI/Pages/Play/GameBoard/SeatedGameBoard.razor
View File

@@ -4,7 +4,7 @@
@using System.Net; @using System.Net;
@inject ShogiApi ShogiApi; @inject ShogiApi ShogiApi;
<div style="position: relative;"> <Stretch style="position: relative;">
<GameBoardPresentation Session="Session" <GameBoardPresentation Session="Session"
Perspective="Perspective" Perspective="Perspective"
OnClickHand="OnClickHand" OnClickHand="OnClickHand"
@@ -25,7 +25,8 @@
</div> </div>
</section> </section>
} }
</div>
</Stretch>
@code { @code {
[Parameter, EditorRequired] [Parameter, EditorRequired]

7
Shogi.UI/Shared/Stretch.razor Normal file
View File

@@ -0,0 +1,7 @@
<div>
@ChildContent
</div>
@code {
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
}

5
Shogi.UI/Shared/Stretch.razor.css Normal file
View File

@@ -0,0 +1,5 @@
div {
display: grid;
place-content: stretch;
height: 100%;
}