ui fixes

TIAMSharedUI/Pages/Components/LoginStep1.razor

@@ -10,7 +10,7 @@
 
         <DxMaskedInput @bind-Value="@LoginModel.Email"
                        Id="Email"
-                       
+                       style="width: 100%;"
                        Mask="@EmailMask"
                        MaskMode="MaskMode.RegEx">
             <DxRegExMaskProperties MaskAutoCompleteMode="@((MaskAutoCompleteMode)AutoCompleteMode)"

TIAMSharedUI/Pages/User/SysAdmins/ToursFromTransferDestinations.razor

@@ -1,10 +1,13 @@
 @page "/sysadmin/manage-tours"
 @using System.ComponentModel.DataAnnotations
+@using DevExpress.Blazor.Internal
+@using DevExpress.Blazor.Office
 @using TIAM.Entities.Transfers
 @using TIAMWebApp.Shared.Application.Interfaces
 @using TIAMWebApp.Shared.Application.Models
 @using TIAMWebApp.Shared.Application.Services
 @using TIAMSharedUI.Shared
+@using DevExpress.Blazor
 @inject ITransferDataService TransferDataService
 @inject TourService TourService
 @inject NavigationManager Navigation
@@ -40,13 +43,25 @@
             </div>
 
             <div class="mb-3">
-                <label>ShortDescription</label>
+                <label>Short Description</label>
-                <InputTextArea @bind-Value="newTour.Bio" class="form-control" />
+                <DxHtmlEditor @bind-Markup="@newTour.Bio" 
+                             Height="200px"
+                              CustomizeToolbar="@OnCustomizeToolbar">
+                    <DxHtmlEditorToolbar>
+                        
+                    </DxHtmlEditorToolbar>
+                </DxHtmlEditor>
             </div>
 
             <div class="mb-3">
                 <label>Description</label>
-                <InputTextArea @bind-Value="newTour.Description" class="form-control" />
+                <DxHtmlEditor @bind-Markup="@newTour.Description" 
+                             Height="300px"
+                              CustomizeToolbar="@OnCustomizeToolbar">
+                    <DxHtmlEditorToolbar>
+                        
+                    </DxHtmlEditorToolbar>
+                </DxHtmlEditor>
             </div>
 
             <div class="mb-3">
@@ -74,23 +89,55 @@
         <h4>Existing Tours</h4>
         @if (Tours.Any())
         {
-            <ul class="list-group">
+            <div class="row">
                 @foreach (var tour in Tours)
                 {
                     var dest = TransferDestinations.FirstOrDefault(d => d.Id == tour.TransferDestinationId);
-                    <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <div class="col-lg-6 col-xl-4 mb-4">
-                        <img src="@tour.CoverImageUrl" style="max-height: 100px;"/>
+                        <div class="card h-100">
-                        <span>
+                            @if (!string.IsNullOrEmpty(tour.CoverImageUrl))
-                            <strong>@tour?.Title</strong> — @tour.FancyDescription
+                            {
-                        </span>
+                                <img src="@tour.CoverImageUrl" class="card-img-top" style="height: 200px; object-fit: cover;" alt="Tour cover image"/>
-                        <span>
+                            }
-                            @tour.Bio
+                            <div class="card-body d-flex flex-column">
-                        </span>
+                                <h5 class="card-title">@tour?.Title</h5>
-                        <button class="btn btn-sm btn-secondary me-2" @onclick="() => EditTour(tour)">Edit</button>
+                                
-                        <button class="btn btn-sm btn-danger" @onclick="() => DeleteTourAsync(tour.Id)">Delete</button>
+                                @if (!string.IsNullOrEmpty(tour.Bio))
-                    </li>
+                                {
+                                    <div class="card-text mb-3">
+                                        <strong>Short Description:</strong>
+                                        <div class="html-content">
+                                            @((MarkupString)tour.Bio)
+                                        </div>
+                                    </div>
+                                }
+                                
+                                @if (!string.IsNullOrEmpty(tour.FancyDescription))
+                                {
+                                    <div class="card-text mb-3">
+                                        <strong>Description:</strong>
+                                        <div class="html-content">
+                                            @((MarkupString)tour.FancyDescription)
+                                        </div>
+                                    </div>
+                                }
+                                
+                                @if (dest != null)
+                                {
+                                    <div class="card-text mb-3">
+                                        <strong>Destination:</strong> @dest.Name (@dest.AddressString)
+                                    </div>
+                                }
+                                
+                                <div class="mt-auto">
+                                    <button class="btn btn-sm btn-secondary me-2" @onclick="() => EditTour(tour)">Edit</button>
+                                    <button class="btn btn-sm btn-danger" @onclick="() => DeleteTourAsync(tour.Id)">Delete</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 }
-            </ul>
+            </div>
         }
         else
         {
@@ -99,6 +146,35 @@
     </div>
 </div>
 
+<style>
+    .html-content {
+        max-height: 150px;
+        overflow-y: auto;
+        border: 1px solid #dee2e6;
+        border-radius: 0.25rem;
+        padding: 0.5rem;
+        background-color: #f8f9fa;
+    }
+    
+    .html-content p {
+        margin-bottom: 0.5rem;
+    }
+    
+    .html-content p:last-child {
+        margin-bottom: 0;
+    }
+    
+    .html-content ul, .html-content ol {
+        margin-bottom: 0.5rem;
+        padding-left: 1.5rem;
+    }
+    
+    .html-content img {
+        max-width: 100%;
+        height: auto;
+    }
+</style>
+
 @code {
     private List<TransferDestination> TransferDestinations = [];
     private List<TourInfo> Tours = [];
@@ -110,6 +186,13 @@
     private bool IsEditing = false;
     private Guid? EditingTourId = null;
 
+    void OnCustomizeToolbar(IToolbar toolbar)
+    {
+        // Returns the first group
+        IBarGroup firstGroup = toolbar.Groups[0];
+        // Returns the "Table" group
+        IBarGroup tableGroup = toolbar.Groups[HtmlEditorToolbarGroupNames.Table];
+    }
 
     protected override async Task OnInitializedAsync()
     {
@@ -123,8 +206,8 @@
             {
                 TransferDestinationId = tour.TransferDestinationId,
                 Name = tour.Title,
-                Bio = tour.Bio,
+                Bio = tour.Bio ?? string.Empty,
-                Description = tour.FancyDescription,
+                Description = tour.FancyDescription ?? string.Empty,
                 ImageBytes = null,
                 ImageFileName = tour.CoverImageUrl
             };
@@ -143,34 +226,6 @@
         UploadStatus = string.Empty;
     }
     
-    // private async Task SaveTourAsync()
-    // {
-    //     if (uploadedFile is not null)
-    //     {
-    //         using var stream = uploadedFile.OpenReadStream(maxAllowedSize: 5 * 1024 * 1024);
-    //         using var ms = new MemoryStream();
-    //         await stream.CopyToAsync(ms);
-    //         newTour.ImageBytes = ms.ToArray();
-    //         newTour.ImageFileName = uploadedFile.Name;
-    //     }
-
-    //     TourInfo tourToCreate = new TourInfo();
-    //     tourToCreate.TransferDestinationId = newTour.TransferDestinationId;
-    //     tourToCreate.FancyDescription = newTour.Description;
-    //     tourToCreate.Title = newTour.Name;
-    //     tourToCreate.CoverImageUrl = "";        
-    //     if (tourToCreate.TransferDestinationId == Guid.Empty)
-    //     {
-    //         throw new InvalidOperationException("Transfer Destination must be selected.");
-    //     }
-
-    //     await TourService.CreateAsync(tourToCreate, uploadedFile);
-    //     newTour = new();
-    //     uploadedFile = null;
-    //     UploadStatus = string.Empty;
-    //     Tours = (await TourService.GetAllAsync()).ToList();
-    // }
-
     private async Task HandleSubmit()
     {
         if (uploadedFile is not null)
@@ -182,7 +237,6 @@
             newTour.ImageFileName = uploadedFile.Name;
         }
 
-
         if (IsEditing && EditingTourId.HasValue)
         {
             var updatedTour = new TourInfo
@@ -203,6 +257,7 @@
                 {
                     TransferDestinationId = newTour.TransferDestinationId,
                     Title = newTour.Name,
+                    Bio = newTour.Bio,
                     FancyDescription = newTour.Description,
                     CoverImageUrl = newTour.ImageFileName
                 };
@@ -241,12 +296,10 @@
         [StringLength(100, ErrorMessage = "Tour name cannot exceed 100 characters.")]
         public string Name { get; set; } = string.Empty;
 
-        public string? Bio { get; set; }
+        public string Bio { get; set; } = string.Empty;
-        public string? Description { get; set; }
+        public string Description { get; set; } = string.Empty;
 
         public byte[]? ImageBytes { get; set; }
         public string? ImageFileName { get; set; }
     }
-    
 }
-

TIAMSharedUI/Shared/Components/ToursComponent.razor

@@ -18,14 +18,14 @@
                 {
                     <div class="item" style="background-image: url(@item.CoverImageUrl); height: 600px !important">
 
-                        <div class="added" style="position: absolute; top: 100px; left:0px; text-align:center; padding:10px; width:100%">
+                        <div class="added" style="position: absolute; top: 0px; left:0px; text-align:center; padding:10px; width:100%;">
-                            <p>@item.Bio</p>
+                            @((MarkupString)item.Bio)
                         </div>
 
                         <div class="item-desc" style="height: 100%; background-color: rgba(0,0,0,0.3);">
                            @*  <p style="padding-top:70px">@item.Created</p> *@
                             <div style="margin-top:70px; position: relative; z-index: 10; height:450px; overflow-y: scroll;">
-                                <p style="">@item.FancyDescription</p>
+                                @((MarkupString)item.FancyDescription)
                             </div>
                             @* <p>@item.TransferDestinationId</p> *@
                             <div>

TIAMSharedUI/wwwroot/css/TourIAm.css

@@ -171,6 +171,27 @@ select {
     background: no-repeat 50% / cover;
 }
 
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+    scrollbar-width: auto;
+    scrollbar-color: #643172 rgba( 31, 38, 135, 0 );
+}
+
+    /* Chrome, Edge, and Safari */
+    *::-webkit-scrollbar {
+        width: 16px;
+    }
+
+    *::-webkit-scrollbar-track {
+        background: rgba( 31, 38, 135, 0 );
+    }
+
+    *::-webkit-scrollbar-thumb {
+        background-color: #643172;
+        border-radius: 10px;
+        border: 0px solid #ffffff;
+    }
 
 .inputwizardwrapper {
     /*max-width: 450px;*/