#277 - Reorganize HTML of categories based on length of texts to matc…

…h all screens.
maraf · May 5, 2020 · 2e90e64 · 2e90e64
1 parent dbbae0c
commit 2e90e64
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 17 deletions.
diff --git a/src/Money.UI.Blazor/Pages/Categories.razor b/src/Money.UI.Blazor/Pages/Categories.razor
@@ -16,24 +16,28 @@
     {
         @foreach (var item in Models)
         {
-            <div class="alert d-flex flex-column flex-lg-row" style="background-color: @item.Color.ToHashCode()">
-                @if (item.Icon != null)
-                {
-                    <span class="mr-1">@item.Icon</span>
-                }
-                <strong class="mr-1">
-                    @item.Name
-                </strong>
-                <span class="gray">
-                    @item.Description
-                </span>
+            <div class="alert" style="background-color: @item.Color.ToHashCode()">
+                <div class="form-row">
+                    @if (item.Icon != null)
+                    {
+                        <div class="col-auto">@item.Icon</div>
+                    }
+                    <div class="col d-flex @GetItemFlexCssClass(item)">
+                        <strong class="mr-1">
+                            @item.Name
+                        </strong>
+                        <span class="gray">
+                            @item.Description
+                        </span>
 
-                <div class="nav ml-auto">
-                    <div class="mt-2 mt-lg-0">
-                        <IconButton Icon="pen" ToolTip="Rename" Click="@(() => OnActionClick(item, NameModal))" />
-                        <IconButton Icon="image" ToolTip="Icon" Click="@(() => OnActionClick(item, IconModal))" />
-                        <IconButton Icon="tint" ToolTip="Color" Click="@(() => OnActionClick(item, ColorModal))" />
-                        <IconButton Icon="trash-alt" ToolTip="Delete" Click="@(() => OnDeleteClick(item))" />
+                        <div class="nav ml-auto">
+                            <div class="@GetItemButtonsMarginCssClass(item)">
+                                <IconButton Icon="pen" ToolTip="Rename" Click="@(() => OnActionClick(item, NameModal))" />
+                                <IconButton Icon="image" ToolTip="Icon" Click="@(() => OnActionClick(item, IconModal))" />
+                                <IconButton Icon="tint" ToolTip="Color" Click="@(() => OnActionClick(item, ColorModal))" />
+                                <IconButton Icon="trash-alt" ToolTip="Delete" Click="@(() => OnDeleteClick(item))" />
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/src/Money.UI.Blazor/Pages/Categories.razor.cs b/src/Money.UI.Blazor/Pages/Categories.razor.cs
@@ -85,6 +85,29 @@ protected async void OnDeleteConfirmed()
             StateHasChanged();
         }
 
+        protected string GetItemCssClass(CategoryModel item, string length10, string length30, string length50, string length100, string lengthX)
+        {
+            int GetLength(string text) => text?.Length ?? 0;
+
+            int length = GetLength(item.Name) + GetLength(item.Description);
+            if (length < 10)
+                return length10;
+            else if (length < 30)
+                return length30;
+            else if (length < 50)
+                return length50;
+            else if (length < 100)
+                return length100;
+            else
+                return lengthX;
+        }
+
+        protected string GetItemFlexCssClass(CategoryModel item)
+            => GetItemCssClass(item, "flex-row", "flex-column flex-sm-row", "flex-column flex-md-row", "flex-column flex-lg-row", "flex-column");
+
+        protected string GetItemButtonsMarginCssClass(CategoryModel item)
+            => GetItemCssClass(item, "mt-0", "mt-2 mt-sm-0", "mt-2 mt-md-0", "mt-2 mt-lg-0", "mt-2");
+
         private CategoryModel FindModel(IEvent payload)
             => Models.FirstOrDefault(c => c.Key.Equals(payload.AggregateKey));