feat(ui): changed Background color, centered Lobby #53
@@ -3,7 +3,7 @@
|
||||
--background-image: url('/assets/images/background.png') !important;
|
||||
--color: #f8f9fa !important; /* Light text on dark bg */
|
||||
--highlightscolor: rgba(131, 131, 131, 0.75) !important;
|
||||
|
||||
--background-color: #192734;
|
||||
/* Bootstrap variable overrides for dark mode */
|
||||
--bs-body-color: var(--color);
|
||||
--bs-link-color: #66b2ff;
|
||||
|
||||
@@ -2,4 +2,5 @@
|
||||
--background-image: url('/assets/images/img.png');
|
||||
--color: black;
|
||||
--highlightscolor: rgba(0, 0, 0, 0.75);
|
||||
--background-color: rgba(228, 232, 237, 1);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
--bs-border-color: rgba(0, 0, 0, 0.125) !important;
|
||||
--bs-heading-color: var(--color) !important;
|
||||
}
|
||||
|
||||
@background-color: var(--background-color);
|
||||
@highlightcolor: var(--highlightscolor);
|
||||
@background-image: var(--background-image);
|
||||
@color: var(--color);
|
||||
@@ -29,6 +29,10 @@
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.lobby-background {
|
||||
background-color: @background-color;
|
||||
|
||||
}
|
||||
|
||||
.navbar-header{
|
||||
text-align:center;
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
@(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="row ms-4 me-4">
|
||||
@@ -67,4 +68,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
|
||||
|
||||
@main("Lobby") {
|
||||
<div class="container">
|
||||
<main class="lobby-background vh-100">
|
||||
<div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 fs-1 d-flex align-items-center">
|
||||
@@ -19,11 +20,10 @@
|
||||
<div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="row justify-content-center align-items-center flex-grow-1">
|
||||
@if((gamelobby.getUserSession(user.get.id).host)) {
|
||||
@for(playersession <- gamelobby.getPlayers.values) {
|
||||
<div class="col-auto">
|
||||
<div class="col-auto my-auto">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
@@ -42,15 +42,12 @@
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="row">
|
||||
<div class="col text-center mt-3">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
|
||||
</div>
|
||||
</div>
|
||||
} else {
|
||||
@for(playersession <- gamelobby.getPlayers.values) {
|
||||
<div class="col-auto">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="col-auto my-auto"> <div class="card" style="width: 18rem;">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
@if(playersession.id == user.get.id) {
|
||||
@@ -62,21 +59,15 @@
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="row">
|
||||
<div class="col mt-3">
|
||||
<p class="text-center fs-4">Waiting for the host to start the game...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col mt-1">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
|
||||
<div class="col-12 text-center mt-3">
|
||||
<p class="fs-4">Waiting for the host to start the game...</p>
|
||||
<div class="spinner-border mt-1" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
@@ -18,15 +18,10 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 game-field-background">
|
||||
<main>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
@* And here's where we render the `Html` object containing
|
||||
* the page content. *@
|
||||
@content
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
</footer>
|
||||
|
||||
<script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
|
||||
@main("Create Game") {
|
||||
@navbar(user)
|
||||
<form action="@routes.MainMenuController.createGame()" method="post" class="game-field-background">
|
||||
<main class="lobby-background flex-grow-1">
|
||||
<form action="@routes.MainMenuController.createGame()" method="post">
|
||||
<div class="w-50 mx-auto">
|
||||
<div class="mt-3">
|
||||
<label for="lobbyname" class="form-label">Lobby-Name</label>
|
||||
@@ -29,4 +30,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
}
|
||||
Reference in New Issue
Block a user