- fixed UI for clothing page

-css is so annoying bro
m-GDEV · Oct 5, 2024 · d5dbf63 · d5dbf63
1 parent 87048cb
commit d5dbf63
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 22 deletions.
diff --git a/WardrobeManager.Presentation/Layout/MainLayout.razor b/WardrobeManager.Presentation/Layout/MainLayout.razor
@@ -10,7 +10,7 @@
 
     <ErrorBoundary @ref="errorBoundary">
         <ChildContent>
-            <main class="flex flex-grow h-full ">
+            <main class="flex grow h-full ">
                 @Body
             </main>
             <Footer />

diff --git a/WardrobeManager.Presentation/Pages/Authenticated/Clothing.razor b/WardrobeManager.Presentation/Pages/Authenticated/Clothing.razor
@@ -29,11 +29,11 @@
 
 
 
-    <div class="pb-4 px-8 gap-8 flex flex-row justify-center w-full overflow-scroll grow">
+    <div class="grow pb-4 px-8 gap-8 flex flex-row justify-center w-full">
         @* Left Column *@
-        <div class="w-1/4 flex flex-col items-center">
+        <div class="basis-1/4 flex flex-col items-center grow overflow-scroll">
             <h3 class="subheading-text">Filters</h3>
-            <div class="rounded-xl bg-primary-content grow w-full p-4 text-primary">
+            <div class="rounded-xl bg-primary-content  w-full p-4 text-primary flex flex-col grow overflow-scroll">
 
                 <EditForm Model="filterModel" class="flex flex-col justify-between h-full">
                     @* Toggles *@
@@ -87,18 +87,21 @@
             </div>
         </div>
         @* Centre Column *@
-        <div class="w-2/4 bg-primary rounded-xl flex flex-col items-center p-4 overflow-scroll">
-            <Search Width="1/6" />
-            <div class="flex flex-row gap-3 items-center self-end">
-                <p class="subtitle-text text-primary-content">Sort By</p>
-                <InputSelect @bind-Value="filterModel.Category" class="select rounded-md bg-primary text-primary-content">
-                    @foreach (var category in Enum.GetValues<ClothingCategory>())
-                    {
-                        <option value="@category">@ProjectConstants.GetNameWithSpacesAndEmoji(category)</option>
-                    }
-                </InputSelect>
+        <div class="basis-2/4 bg-primary rounded-xl flex flex-col items-center justify-between grow p-4 ">
+            <div class="flex flex-row items-center justify-between gap-5 py-4">
+                <Search Width="1/6" />
+                <div class="flex flex-row gap-3 items-center">
+                    <p class="subtitle-text text-primary-content">Sort By</p>
+                    <InputSelect @bind-Value="filterModel.Category" class="select rounded-md bg-primary-content text-primary">
+                        @foreach (var category in Enum.GetValues<ClothingCategory>())
+                        {
+                            <option value="@category">@ProjectConstants.GetNameWithSpacesAndEmoji(category)</option>
+                        }
+                    </InputSelect>
+                </div>
+
             </div>
-            <div class="overflow-scroll flex flex-col items-center gap-6 w-3/5">
+            <div class="overflow-scroll flex flex-col items-center gap-6 w-4/5 grow max-h-[32rem] ">
                 @if (clothing != null)
                 {
                     foreach (var item in clothing)
@@ -109,13 +112,15 @@
             </div>
         </div>
         @* Right Column *@
-        <div class="w-1/4 flex flex-col items-center">
+        <div class="basis-1/4 flex flex-col items-center grow">
             <h3 class="subheading-text">Preview</h3>
-            <div class="rounded-xl bg-primary-content grow w-full p-4 text-primary flex flex-col">
+            <div class="rounded-xl bg-primary-content grow w-full p-4 text-primary flex flex-col  grow">
                 @* Psuedo header *@
                 @if (selectedItem == null)
                 {
-                    <p class="subheading-text text-primary">Press 'view' to an item's details here!</p>
+                    @* https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties*@
+                    @* Using my-auto cus there is no justify-self-center like self-center exists for the cross axis*@
+                    <p class="subheading-text text-primary my-auto text-center">Press 'view' to an item's details here!</p>
                 }
                 else
                 {

diff --git a/WardrobeManager.Presentation/Pages/Test.razor b/WardrobeManager.Presentation/Pages/Test.razor
@@ -0,0 +1,41 @@
+@page "/test"
+
+<div class="grow p-4  bg-purple-500 overflow-hidden flex flex-col">
+    <h1 class=" heading-text h-2/5 " >
+            dool cool stufdff!
+        </h1>
+    <div class="grow flex  flex-row items-center justify-between border border-white ">
+        <div class="basis-1/2 border-green-500 border bg-red-500 h-full"></div>
+        <div class="basis-full border-green-500 border bg-green-900 h-full flex flex-row items-center ">
+            <ul class="basis-full max-h-[50%] overflow-scroll border">
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+                <li class="h-[4rem] border">list item</li>
+            </ul>
+        </div>
+        <div class="basis-1/2 border-green-500 border bg-blue-500 h-full">fasd</div>
+    </div>
+</div>
+@* <div class="grow bg-black m-24 text-red-500 border">
+    <p class="text-xl">lots of text</p>
+    <p class="text-xl">lots of text</p>
+    <p class="text-xl">lots of text</p>
+    <p class="text-xl">lots of text</p>
+    <p class="text-xl">lots of text</p>
+    <p class="text-xl">lots of text</p>
+    <p class="text-xl">lots of text</p>
+    <p class="text-xl">lots of text</p>
+</div>
+ *@
+
+@code {
+
+}
diff --git a/WardrobeManager.Presentation/wwwroot/index.html b/WardrobeManager.Presentation/wwwroot/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="emerald" class="h-full">
+<html lang="en" data-theme="emerald" class="">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -29,9 +29,9 @@
     <link href="./css/daisyUI.css" rel="stylesheet" type="text/css" />-->
 </head>
 
-<body class="h-full text-base-content">
+<body class="">
     <!-- Change the contents of this div to customize the webassembly loading screen -->
-    <div id="app" class="h-full">
+    <div id="app" class="h-dvh w-dvw">
         <div class="h-full flex flex-col justify-center items-center bg-base-100 gap-5">
             <h1 class="subtitle-text">Please wait while WardrobeManager loads...</h1>
             <span class="loading loading-dots loading-lg text-primary-content"></span>

diff --git a/WardrobeManager.Shared/Misc/Constants.cs b/WardrobeManager.Shared/Misc/Constants.cs
@@ -8,7 +8,7 @@ public static class ProjectConstants
 {
     public static string Name = "Wardrobe Manager";
     public static string ApiUrl = "https://localhost:7026"; // should probably change this, also it should not be in the Shared project
-    public static string ProfileImage = "https://upload.internal.connectwithmusa.com/file/eel-pug-tiger";
+    public static string ProfileImage = "https://upload.internal.connectwithmusa.com/upload/eel-falcon-pig";
     public static string DefaultItemImage = "https://image.hm.com/assets/hm/a3/f5/a3f56f6e47160e931b78296bb9e479bfbcab3554.jpg?imwidth=2160";
 
     public static string GetEmoji(ClothingCategory category)