From a5aeba57472eeffaabb9c8fb417d5d22deffe37e Mon Sep 17 00:00:00 2001
From: Darin Alleman <darin.alleman@gmail.com>
Date: Sun, 10 Jan 2021 16:16:11 -0500
Subject: [PATCH] Pack view visual updates to condense data

Add hover color
Put quantity before the item name
Cut off trailing 0s from quantity
Put item description in its own column
Remove footer with redundant weight unit picker
---
 frontend/src/app/Pack/Items.tsx | 11 ++++++-----
 frontend/src/app/Pack/Pack.tsx  |  8 +-------
 frontend/src/app/Pack/styles.ts | 14 ++++++++++----
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/Pack/Items.tsx b/frontend/src/app/Pack/Items.tsx
index 2ff6fcc..0ab7618 100644
--- a/frontend/src/app/Pack/Items.tsx
+++ b/frontend/src/app/Pack/Items.tsx
@@ -57,19 +57,20 @@ const Items: React.FC<ItemsProps> = ({ items, unit }) => {
                                     {notes}
                                 </ItemNotes>
                             );
+                            let quantityString = parseFloat(quantity.toString());
                             return (
                                 <Row gutter={16} key={item.id} className="item-row">
-                                    <Col span={18}>
+                                    <Col span={6}>
                                         <ItemName>
+                                            <ItemQuantity>{quantityString} x </ItemQuantity>
                                             {name}
                                         </ItemName>
+                                        {NotesRow}
+                                    </Col>
+                                    <Col span={12}>
                                         <ItemDescription>
                                             {itemDesc(product_url, product_name)}
                                         </ItemDescription>
-                                        <ItemQuantity>
-                                            Quantity: {quantity}
-                                        </ItemQuantity>
-                                        {NotesRow}
                                     </Col>
                                     <Col span={2} className="align-right">
                                         {worn && (
diff --git a/frontend/src/app/Pack/Pack.tsx b/frontend/src/app/Pack/Pack.tsx
index 6d7202b..f8d2825 100644
--- a/frontend/src/app/Pack/Pack.tsx
+++ b/frontend/src/app/Pack/Pack.tsx
@@ -20,7 +20,7 @@ import Items from './Items';
 
 import { getWeightByCategory } from 'lib/utils/weight';
 
-import { Credit, PackWrapper, SectionHeader, SectionTitle, TripDescription, ItemsFooter } from "./styles";
+import { Credit, PackWrapper, SectionHeader, SectionTitle, TripDescription } from "./styles";
 
 const Pack: React.FC<PackSpecs.Props> = ({ getPack, weightUnit, packId }) => {
     const [loading, setLoading] = React.useState<boolean>(true);
@@ -113,12 +113,6 @@ const Pack: React.FC<PackSpecs.Props> = ({ getPack, weightUnit, packId }) => {
                     </div>
                 </SectionHeader>
                 <Items items={pack.items} unit={unit}/>
-                <ItemsFooter>
-                    <WeightSelector
-                        unit={unit}
-                        items={pack.items}
-                        selectUnit={unit => setUnit(unit)}/>
-                </ItemsFooter>
             </PackWrapper>
         </DocumentTitle>
     );
diff --git a/frontend/src/app/Pack/styles.ts b/frontend/src/app/Pack/styles.ts
index fdceea3..0580b1a 100644
--- a/frontend/src/app/Pack/styles.ts
+++ b/frontend/src/app/Pack/styles.ts
@@ -55,6 +55,7 @@ export const TripDescription = styled.p`
 `;
 
 export const ItemName = styled.h4`
+    display: inline;
     font-family: "Open Sans", sans-serif;
     font-weight: 700;
     font-size: 1em;
@@ -63,19 +64,21 @@ export const ItemName = styled.h4`
     
     span {
       color: #888;
-      font-size: .9rem;
+      font-size: 1rem;
       margin-left: 8px;
     }
 `;
 
 export const ItemDescription = styled.p`
-  font-size: .85em;
+  font-size: 1em;
   color: #888;
   margin-bottom: 0;
   line-height: 1rem;
 `;
 
-export const ItemQuantity = styled(ItemDescription)``;
+export const ItemQuantity = styled(ItemDescription)`
+  display:inline;
+`;
 
 export const ItemNotes = styled.p`
   line-height: 1.35rem;
@@ -96,8 +99,11 @@ export const ItemsFooter = styled.div`
 
 export const CategorySection = styled.div`
   .item-row {
-    padding: 8px;
+    padding: 5px;
     border-bottom: 1px dashed #EEE;
+    &:hover {
+      background-color: #F0F7FA;
+    }
   }
   
   .item-row:last-of-type {