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> <body>
<div @onclick="() => _isCollapsed = !_isCollapsed">
<h5>@_template.Title</h5> <h5>@_template.Title</h5>
<label style="white-space: pre-line">@_template.Description</label> <label style="white-space: pre-line">@_template.Description</label>
<div > <span class="timesblock">
<div class="times"> <div class="times">
<h5>Date</h5> <h5>Date</h5>
<p>@_template.StartTime.ToLongDateString()</p> <p>@_template.StartTime.ToLongDateString()</p>
@ -27,7 +28,15 @@
<h5>TimeZone</h5> <h5>TimeZone</h5>
<p>@_template.TimeZone</p> <p>@_template.TimeZone</p>
</div> </div>
<div class="times">
<h5>Type</h5>
<p>@_template.EventType</p>
</div> </div>
</span>
</div>
@if (!_isCollapsed)
{
<div> <div>
<div class="details"> <div class="details">
@ -44,11 +53,6 @@
</div> </div>
</div> </div>
<div class="times">
<h5>Type</h5>
<p>@_template.EventType</p>
</div>
<div> <div>
<table class="table"> <table class="table">
@ -70,6 +74,7 @@
<button class="controlButton raidButton" @onclick="() => EditClicked()">Edit</button> <button class="controlButton raidButton" @onclick="() => EditClicked()">Edit</button>
} }
</AuthorizeView> </AuthorizeView>
}
</body> </body>
@code { @code {
@ -79,6 +84,8 @@
[Parameter] [Parameter]
public LiebUser? _user { get; set; } public LiebUser? _user { get; set; }
bool _isCollapsed = true;
protected override async Task OnParametersSetAsync() protected override async Task OnParametersSetAsync()
{ {
} }

View file

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