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,11 +10,12 @@
<body>
<div @onclick="() => _isCollapsed = !_isCollapsed">
<h5>@_template.Title</h5>
<label style="white-space: pre-line">@_template.Description</label>
<div >
<span class="timesblock">
<div class="times">
<h5>Date</h5>
<p>@_template.StartTime.ToLongDateString()</p>
@ -27,7 +28,15 @@
<h5>TimeZone</h5>
<p>@_template.TimeZone</p>
</div>
<div class="times">
<h5>Type</h5>
<p>@_template.EventType</p>
</div>
</span>
</div>
@if (!_isCollapsed)
{
<div>
<div class="details">
@ -44,11 +53,6 @@
</div>
</div>
<div class="times">
<h5>Type</h5>
<p>@_template.EventType</p>
</div>
<div>
<table class="table">
@ -70,6 +74,7 @@
<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;
}