Sarah/Lieb-Website
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

added status icons (signed up, not signed up, full)

Browse source
This commit is contained in:
t.ruspekhofer 2022-03-17 23:36:21 +01:00
parent 853dd6eec7
commit 89ac7278e1
2 changed files with 63 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

26
Lieb/Pages/Raids/RaidDetails.razor
View file

@ -10,9 +10,31 @@
<body> <body>
<label>@_errorMessage</label> <label class="errormessage">@_errorMessage</label>
<h5>@_raid.Title
@if (_user != null && _isRaidSignUpAllowed)
{
<div class="signUpStatusTooltip">
@if(_raid.SignUps.Where(s => s.LiebUserId == _user.LiebUserId).Any())
{
<span class="oi oi-badge" style="color:green"></span>
<span class="tooltiptext">You are signed up</span>
}
else if(_raid.SignUps.Where(s => s.SignUpType == SignUpType.SignedUp).Count() < _raid.Roles.Sum(r => r.Spots))
{
<span class="oi oi-aperture nametooltip"></span>
<span class="tooltiptext">You can sign up</span>
}
else
{
<span class="oi oi-ban nametooltip" style="color:red"></span>
<span class="tooltiptext">The raid is full</span>
}
</div>
}
</h5>
<h5>@_raid.Title</h5>
<label style="white-space: pre-line">@_raid.Description</label> <label style="white-space: pre-line">@_raid.Description</label>

39
Lieb/Pages/Raids/RaidDetails.razor.css
View file

@ -39,3 +39,42 @@ table {
column-width: auto; column-width: auto;
color: lightgray; color: lightgray;
} }
.errormessage{
color:red;
}
.signUpStatusTooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.signUpStatusTooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.signUpStatusTooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.signUpStatusTooltip:hover .tooltiptext {
visibility: visible;
}