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

css

Browse Source
This commit is contained in:
Lucas Morgan
2023-02-06 16:10:25 -06:00
parent 049465953c
commit c251770f58
6 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Shogi.UI/Pages/Home/GameBoard/GameBoardPresentation.razor
View File

@@ -27,7 +27,9 @@
data-position="@(position)" data-position="@(position)"
data-selected="@(isSelected)" data-selected="@(isSelected)"
style="grid-area: @position"> style="grid-area: @position">
<GamePiece Piece="piece" Perspective="Perspective" /> @if (piece != null){
<GamePiece Piece="piece" Perspective="Perspective" />
}
</div> </div>
} }
} }

13
Shogi.UI/Pages/Home/GameBoard/GameboardPresentation.razor.css
View File

@@ -1,7 +1,8 @@
.game-board { .game-board {
display: grid; display: grid;
grid-template-areas: "board side-board icons"; grid-template-areas: "board side-board icons";
grid-template-columns: max-content minmax(25rem, 1fr) 2fr; grid-template-columns: 1fr minmax(9rem, 15rem) 3rem;
place-content: center;
gap: 0.5rem; gap: 0.5rem;
background-color: #444; background-color: #444;
position: relative; /* For absolute positioned children. */ position: relative; /* For absolute positioned children. */
@@ -33,12 +34,11 @@
"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, minmax(0, 1fr)); grid-template-columns: auto repeat(9, 1fr);
grid-template-rows: repeat(9, minmax(0, 1fr)) auto; grid-template-rows: repeat(9, 1fr) auto;
max-height: calc(100vh - 3rem);
width: calc(100vmin * 0.9167);
aspect-ratio: 0.9167;
gap: 3px; gap: 3px;
aspect-ratio: 0.9167;
max-height: calc(100vh - 2rem);
} }
.board[data-perspective="Player2"] { .board[data-perspective="Player2"] {
@@ -61,6 +61,7 @@
display: grid; display: grid;
place-content: center; place-content: center;
transition: filter linear 0.25s; transition: filter linear 0.25s;
aspect-ratio: 0.9167;
} }
.board .tile { .board .tile {

6
Shogi.UI/Pages/Home/Home.razor
View File

@@ -13,8 +13,10 @@
{ {
<LoginModal /> <LoginModal />
} }
<PageHeader /> <aside class="sidebar">
<GameBrowser ActiveSessionChanged="OnChangeSession" /> <PageHeader />
<GameBrowser ActiveSessionChanged="OnChangeSession" />
</aside>
@if (Account.User == null || activeSessionName == null) @if (Account.User == null || activeSessionName == null)
{ {
<EmptyGameBoard /> <EmptyGameBoard />

34
Shogi.UI/Pages/Home/Home.razor.css
View File

@@ -1,30 +1,24 @@
.shogi { .shogi {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"pageHeader board" "sidebar board";
"browser board"; grid-template-columns: clamp(5rem, 20vw, 25rem) 1fr;
grid-template-columns: minmax(25rem, 25vw) 1fr; gap: 3px 1rem;
grid-template-rows: max-content 1fr;
place-items: stretch;
gap: 1rem;
padding: 0.5rem;
position: relative; /* For absolute positioned children. */ position: relative; /* For absolute positioned children. */
background-color: var(--primary-color); background-color: var(--primary-color);
} }
.shogi > .sidebar {
grid-area: sidebar;
display: grid;
grid-template-rows: auto 1fr;
gap: 3px;
}
.shogi > .sidebar.collapsed {
width: 5rem;
}
.shogi > ::deep .game-board { .shogi > ::deep .game-board {
grid-area: board; grid-area: board;
place-self: center start;
}
.shogi > ::deep .pageHeader {
grid-area: pageHeader;
}
.shogi > ::deep .game-browser {
grid-area: browser;
}
Modals {
display: none;
} }

9
Shogi.UI/Pages/Home/PageHeader.razor
View File

@@ -5,12 +5,11 @@
<h1>Shogi</h1> <h1>Shogi</h1>
@if (user != null) @if (user != null)
{ {
<div class="user"> <div class="user">
<div>@user.Value.DisplayName</div> <div>@user.Value.DisplayName</div>
<button type="button" class="logout" @onclick="AccountManager.LogoutAsync">Logout</button> <button type="button" class="logout" @onclick="AccountManager.LogoutAsync">Logout</button>
</div> </div>
} }
@*<LoginDisplay />*@
</div> </div>
@code { @code {

2
Shogi.UI/wwwroot/css/app.css
View File

@@ -1,7 +1,7 @@
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); @import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body, #app { html, body, #app {
height: 100%; height: 100vh;
} }
body { body {