From cf8983fd0b63cfc2835e0c651593175f39445c4f Mon Sep 17 00:00:00 2001
From: Sarah Faey <s.ruspekhofer@gmail.com>
Date: Wed, 7 Dec 2022 18:27:21 +0100
Subject: [PATCH] templates are now colapsable

---
 .../RaidOverview/RaidTemplateDetails.razor    | 113 ++++++++++--------
 .../RaidTemplateDetails.razor.css             |  20 ++--
 2 files changed, 73 insertions(+), 60 deletions(-)
diff --git a/Lieb/Pages/Raids/RaidOverview/RaidTemplateDetails.razor b/Lieb/Pages/Raids/RaidOverview/RaidTemplateDetails.razor
index 1110cf7..65575b4 100644
--- a/Lieb/Pages/Raids/RaidOverview/RaidTemplateDetails.razor
+++ b/Lieb/Pages/Raids/RaidOverview/RaidTemplateDetails.razor
@@ -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>
-    </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>
+@if (!_isCollapsed)
+{
 
-<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>
+    <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>
 
         
-<AuthorizeView>
-    @if (_template.RaidOwnerId == _user.Id || _user.RoleAssignments.Max(a => a.LiebRole.Level) >= Constants.RaidEditPowerLevel)
-    {
-        <button class="controlButton raidButton" @onclick="() => EditClicked()">Edit</button>
-    }
-</AuthorizeView>
+    <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>
+}
 </body>
 
 @code {
@@ -78,6 +83,8 @@
     
     [Parameter]
     public LiebUser? _user { get; set; }
+    
+    bool _isCollapsed = true;
 
     protected override async Task OnParametersSetAsync()
     {
diff --git a/Lieb/Pages/Raids/RaidOverview/RaidTemplateDetails.razor.css b/Lieb/Pages/Raids/RaidOverview/RaidTemplateDetails.razor.css
index d0bdbbd..9f4d178 100644
--- a/Lieb/Pages/Raids/RaidOverview/RaidTemplateDetails.razor.css
+++ b/Lieb/Pages/Raids/RaidOverview/RaidTemplateDetails.razor.css
@@ -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;
 }
 
