KnockOutWhist/KnockOutWhist-Web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

feat(ui): changed Background color, centered Lobby #53

Merged
Janis merged 8 commits from Polling-#40 into main 2025-11-13 11:07:08 +01:00
Conversation 0 Commits 8 Files Changed 12 +180 -740
16 changed files with 180 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 33989efedc - Show all commits

19
knockoutwhistweb/app/assets/stylesheets/main.less
View File

@@ -24,14 +24,14 @@
}
.game-field-background {
background-image: @background-image;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
max-width: 1400px;
margin: 0 auto;
min-height: 100vh;
}
.lobby-background {
background-color: @background-color;
width: 100%;
height: 100vh;
}
.navbar-header{
@@ -49,8 +49,11 @@
.bottom-div {
position: fixed;
bottom: 0;
left: 0;
left: 50%;
transform: translateX(-50%);
max-width: 1400px;
width: 100%;
margin: 0;
text-align: center;
padding: 10px;
}
@@ -220,9 +223,9 @@ body {
}
.score-header {
font-weight: bold;
color: #ffffff;
color: #000000;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.score-row {
color: #ffffff;
color: #000000;
}

19
knockoutwhistweb/app/views/ingame/ingame.scala.html
View File

@@ -3,8 +3,9 @@
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
@main("Ingame") {
<main class="game-field-background vh-100">
<div class="py-5 ms-4 me-4">
<div class="lobby-background vh-100">
<main class="game-field-background vh-100">
<div class="py-5 container-xxl">
<div class="row ms-4 me-4">
<div class="col-4 mt-5 text-start">
@@ -21,7 +22,7 @@
<div class="col-4 text-center">
<div class="score-table mt-5">
<h4 class="fw-bold mb-3 text-white">Tricks Won</h4>
<h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
<div class="d-flex justify-content-between score-header pb-1">
<div style="width: 50%">PLAYER</div>
@@ -55,7 +56,7 @@
}
</div>
</div>
<div class="col-md-4 text-end">
<div class="col-4 mt-5 text-end">
<h4 class="fw-semibold mb-1">Trumpsuit</h4>
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
@@ -70,12 +71,7 @@
</div>
</div>
<div class="row">
</div>
<div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);">
<div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
<div class="row justify-content-center" id="card-slide">
@for(i <- player.currentHand().get.cards.indices) {
<div class="col-auto handcard" style="border-radius: 6px">
@@ -90,5 +86,6 @@
</div>
</div>
</div>
</main>
</main>
</div>
}