templates are now colapsable

This commit is contained in:
Sarah Faey 2022-12-07 18:27:21 +01:00
parent 7318ae24a2
commit cf8983fd0b
2 changed files with 73 additions and 60 deletions

View file

@ -10,66 +10,71 @@
<body>
<h5>@_template.Title</h5>
<div @onclick="() => _isCollapsed = !_isCollapsed">
<h5>@_template.Title</h5>
<label style="white-space: pre-line">@_template.Description</label>
<label style="white-space: pre-line">@_template.Description</label>
<div >
<div class="times">
<h5>Date</h5>
<p>@_template.StartTime.ToLongDateString()</p>
</div>
<div class="times">
<h5>Time</h5>
<p>from: @_template.StartTime.ToShortTimeString() to: @_template.EndTime.ToShortTimeString()</p>
</div>
<div class="times">
<h5>TimeZone</h5>
<p>@_template.TimeZone</p>
</div>
<span class="timesblock">
<div class="times">
<h5>Date</h5>
<p>@_template.StartTime.ToLongDateString()</p>
</div>
<div class="times">
<h5>Time</h5>
<p>from: @_template.StartTime.ToShortTimeString() to: @_template.EndTime.ToShortTimeString()</p>
</div>
<div class="times">
<h5>TimeZone</h5>
<p>@_template.TimeZone</p>
</div>
<div class="times">
<h5>Type</h5>
<p>@_template.EventType</p>
</div>
</span>
</div>
<div>
<div class="details">
<h5>Organizer</h5>
<p>@_template.Organizer</p>
@if (!_isCollapsed)
{
<div>
<div class="details">
<h5>Organizer</h5>
<p>@_template.Organizer</p>
</div>
<div class="details">
<h5>Guild</h5>
<p>@_template.Guild</p>
</div>
<div class="details">
<h5>Voice chat</h5>
<p>@_template.VoiceChat</p>
</div>
</div>
<div class="details">
<h5>Guild</h5>
<p>@_template.Guild</p>
<div>
<table class="table">
<tbody>
@foreach (var role in _template.Roles.OrderBy(r => r.RaidRoleId))
{
<tr>
<td><Label> <b>@role.Name</b> (@role.Spots) <br> @role.Description </Label></td>
</tr>
}
</tbody>
</table>
</div>
<div class="details">
<h5>Voice chat</h5>
<p>@_template.VoiceChat</p>
</div>
</div>
<div class="times">
<h5>Type</h5>
<p>@_template.EventType</p>
</div>
<div>
<table class="table">
<tbody>
@foreach (var role in _template.Roles.OrderBy(r => r.RaidRoleId))
{
<tr>
<td><Label> <b>@role.Name</b> (@role.Spots) <br> @role.Description </Label></td>
</tr>
}
</tbody>
</table>
</div>
<AuthorizeView>
@if (_template.RaidOwnerId == _user.Id || _user.RoleAssignments.Max(a => a.LiebRole.Level) >= Constants.RaidEditPowerLevel)
{
<button class="controlButton raidButton" @onclick="() => EditClicked()">Edit</button>
}
</AuthorizeView>
<AuthorizeView>
@if (_template.RaidOwnerId == _user.Id || _user.RoleAssignments.Max(a => a.LiebRole.Level) >= Constants.RaidEditPowerLevel)
{
<button class="controlButton raidButton" @onclick="() => EditClicked()">Edit</button>
}
</AuthorizeView>
}
</body>
@code {
@ -79,6 +84,8 @@
[Parameter]
public LiebUser? _user { get; set; }
bool _isCollapsed = true;
protected override async Task OnParametersSetAsync()
{
}

View file

@ -2,8 +2,9 @@
background-color: rgb(38 38 38);
border-radius: 25px;
padding: 25px;
width: 700px;
/*width: 700px;*/
/*width: fit-content;*/
width: stretch;
color: lightgray;
}
@ -11,18 +12,23 @@ h5 {
color: lightgrey;
}
.timesblock {
display: block;
}
.times {
float: left;
display: inline;
width: 33%;
display: inline-block;
width: 250px;
padding-top: 15px;
}
.detailsblock {
display: block;
}
.details {
float: left;
display: inline;
width: 33%;
display: inline-block;
width: 250px;
padding-top: 15px;
}