dashboard eye candy

This commit is contained in:
Jottyfan 2022-10-15 12:51:53 +02:00
parent a3df68e4f7
commit f49fb7edab
3 changed files with 27 additions and 10 deletions

View File

@ -18,7 +18,7 @@ apply plugin: 'war'
apply plugin: 'application' apply plugin: 'application'
group = 'de.jottyfan.camporganizer' group = 'de.jottyfan.camporganizer'
version = '0.0.3' version = '0.0.4'
sourceCompatibility = 17 sourceCompatibility = 17
mainClassName = "de.jottyfan.camporganizer.Main" mainClassName = "de.jottyfan.camporganizer.Main"

View File

@ -4,7 +4,8 @@ html {
} }
body { body {
background-image: linear-gradient(to bottom right, rgb(255, 190, 111), rgb(198, 70, 0)); background-image: linear-gradient(to bottom right, rgb(255, 190, 111),
rgb(198, 70, 0));
} }
.mainpage { .mainpage {
@ -12,7 +13,8 @@ body {
padding: 8px; padding: 8px;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
height: calc(100vh - 60px); /* 60 px is the current height of the headline; TODO: calculate it */ height: calc(100vh - 60px);
/* 60 px is the current height of the headline; TODO: calculate it */
} }
.middlecenter { .middlecenter {
@ -87,12 +89,24 @@ body {
color: darkcyan; color: darkcyan;
} }
.btn-dropdown {
right: 2px;
top: 2px;
position: absolute;
border: 1px solid silver;
}
.btn-dropdown:hover {
background: rgba(0, 0, 0, 0.5);
}
.badgetodo { .badgetodo {
border-radius: 8px; border-radius: 8px;
border: 1px solid black; border: 1px solid black;
color: white; color: white;
font-weight: bolder; font-weight: bolder;
background-image: linear-gradient(to right bottom, rgb(153, 193, 241), rgb(26, 95, 180)); background-image: linear-gradient(to right bottom, rgb(153, 193, 241),
rgb(26, 95, 180));
padding: 2px 4px 2px 4px; padding: 2px 4px 2px 4px;
margin: 0px 2px 0px 2px; margin: 0px 2px 0px 2px;
} }
@ -112,7 +126,8 @@ body {
border: 1px solid black; border: 1px solid black;
color: white; color: white;
font-weight: bolder; font-weight: bolder;
background-image: linear-gradient(to right bottom, rgb(143, 240, 164), rgb(38, 162, 105)); background-image: linear-gradient(to right bottom, rgb(143, 240, 164),
rgb(38, 162, 105));
padding: 2px 4px 2px 4px; padding: 2px 4px 2px 4px;
margin: 0px 2px 0px 2px; margin: 0px 2px 0px 2px;
} }
@ -131,7 +146,7 @@ body {
} }
.usercard { .usercard {
width: 480px; width: 640px;
background-color: rgba(255, 255, 255, 0.8) !important; background-color: rgba(255, 255, 255, 0.8) !important;
} }
@ -145,4 +160,4 @@ body {
.mytoggle_btn:hover { .mytoggle_btn:hover {
background-color: #abcdef; background-color: #abcdef;
} }

View File

@ -16,7 +16,10 @@
<div class="mainpage"> <div class="mainpage">
<div class="card usercard" th:each="b : ${mybookings}"> <div class="card usercard" th:each="b : ${mybookings}">
<div class="card-header"> <div class="card-header">
<span th:text="${b.campName + ' ' + #numbers.formatInteger(b.year, 4)}" style="font-weight: bolder"></span>&nbsp;in&nbsp;<a th:href="${b.url}" target="_blank" th:text="${b.locationName}"></a> <span th:text="${b.forename + ' ' + b.surname + ' an ' + b.campName + ' ' + #numbers.formatInteger(b.year, 4)}" style="font-weight: bolder"></span>&nbsp;in&nbsp;<a th:href="${b.url}"
target="_blank" th:text="${b.locationName}"></a><button class="btn btn-dropdown" style="right: 2px; top: 2px; position: absolute" th:onclick="$('#body_' + [[${b.pk}]]).toggle()"><i class="fas fa-caret-down"></i></button>
</div>
<div th:id="${'body_' + b.pk}" class="card-body">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-4">Zeit:</div> <div class="col-sm-4">Zeit:</div>
@ -29,8 +32,7 @@
<div class="col-sm-8" th:text="${b.countries}"></div> <div class="col-sm-8" th:text="${b.countries}"></div>
</div> </div>
</div> </div>
</div> <hr />
<div class="card-body">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-4">Rolle:</div> <div class="col-sm-4">Rolle:</div>