Use nicer chiplike things for weight

LiamMorrow · Aug 8, 2024 · 8824be1 · 8824be1
1 parent 53abc44
commit 8824be1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 33 deletions.
diff --git a/LiftLog.Ui/Shared/Presentation/SessionSummary.razor b/LiftLog.Ui/Shared/Presentation/SessionSummary.razor
@@ -1,41 +1,48 @@
 
-<div class="grid @GridRows gap-x-4 gap-y-0.5 text-start" data-cy="session-summary">
+<div class="flex flex-col gap-y-1 text-start" data-cy="session-summary">
     @foreach (var exercise in Session.RecordedExercises)
     {
         var splitWeights = exercise.PerSetWeight && !exercise.PotentialSets.All(s => s.Weight == exercise.Weight);
+        <span class="flex flex-wrap items-center">
         <span>@exercise.Blueprint.Name</span>
-        @if (ShowSets && !splitWeights)
+        @if(ShowSets || ShowWeight)
         {
-            <span class="flex items-center justify-end">
-                <span class="@ChipClass">
-                    @(exercise.Blueprint.Sets)x@(exercise.Blueprint.RepsPerSet)
-                </span>
-            </span>
-        }
+            <span class="flex justify-around ml-auto items-center gap-0.5 bg-surface-container-highest text-on-surface-variant rounded-md py-1 px-2">
 
-        @if (ShowWeight && !splitWeights)
-        {
-            <span class="flex justify-end">
-                <span class="@ChipClass">
+                @if (ShowSets && !splitWeights)
+                {
+                    <span>
+                        @(exercise.Blueprint.Sets)x@(exercise.Blueprint.RepsPerSet)
+                    </span>
+                    @if(ShowWeight)
+                    {
+                        <span class="text-2xs">@@</span>
+                    }
+                }
+
+                @if (ShowWeight && !splitWeights)
+                {
                     <WeightFormat Weight="@exercise.Weight"/>
-                </span>
-            </span>
-        }
+                }
 
-        @if (ShowWeight && splitWeights)
-        {
-            <span class="flex justify-end gap-1  items-center col-span-2">
-                @foreach(var set in exercise.PotentialSets)
+                @if (ShowWeight && splitWeights)
                 {
-                    <span class="flex gap-0.5 @ChipClass">
-                        @if (ShowSets){
-                            <span>@(set.Set?.RepsCompleted ?? exercise.Blueprint.RepsPerSet)</span><span>x</span>
+                    <span class="flex flex-wrap gap-1 items-center ml-auto">
+                        @foreach(var set in exercise.PotentialSets)
+                        {
+                            <span class="flex gap-0.5 items-center">
+                                @if (ShowSets){
+                                    <span>@(set.Set?.RepsCompleted ?? exercise.Blueprint.RepsPerSet)</span><span class="text-2xs">@@</span>
+                                }
+                                <WeightFormat Weight="@set.Weight"/>
+                            </span>
+                            <span class="divider [&:last-child]:hidden bg-outline-variant self-stretch my-1 w-[1px]"></span>
                         }
-                        <WeightFormat Weight="@set.Weight"/>
                     </span>
                 }
             </span>
         }
+        </span>
     }
 </div>
 
@@ -46,14 +53,4 @@
     [Parameter] public bool ShowSets { get; set; }
 
     [Parameter] public bool ShowWeight { get; set; } = true;
-
-    private string ChipClass => "bg-surface-container-highest text-on-surface-variant rounded-md py-0.5 px-1";
-
-    private string GridRows => (ShowSets, ShowWeight) switch
-    {
-        (true, true) => "grid-cols-[1fr,max-content,max-content]",
-        (true, false) => "grid-cols-[1fr,max-content]",
-        (false, true) => "grid-cols-[1fr,max-content]",
-        (false, false) => "grid-cols-1",
-    };
 }
diff --git a/LiftLog.Ui/wwwroot/twconf.json b/LiftLog.Ui/wwwroot/twconf.json
@@ -23,6 +23,10 @@
       "2xl": "1320px"
     },
     "extend": {
+      "fontSize": {
+        "2xs": "0.625rem",
+        "3xs": "0.5rem"
+      },
       "transitionTimingFunction": {
         "out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)"
       },