diff --git a/addons/home_dashboard/static/src/css/pos_style.css b/addons/home_dashboard/static/src/css/pos_style.css index 588cd16..a9a0e1f 100644 --- a/addons/home_dashboard/static/src/css/pos_style.css +++ b/addons/home_dashboard/static/src/css/pos_style.css @@ -37,7 +37,6 @@ /* 4. Table/Seat Icons in Floor Map */ .pos .floor-map .table { border-radius: 12px !important; - transition: all 0.3s ease !important; } .pos .floor-map .table.selected { @@ -78,20 +77,106 @@ border-left: 4px solid var(--pos-primary) !important; } -/* 7. Product List */ +/* 7. Product List - Alignment & Grand Look Transformation */ +.pos .product-list-container { + background: linear-gradient(135deg, #8fe0d6 0%, #ffecb5 100%) !important; +} + +.pos .product-list { + display: flex !important; + flex-wrap: wrap !important; + gap: 30px !important; + /* Proper gap between cards */ + padding: 20px !important; + justify-content: flex-start !important; +} + .pos .product-list .product { - border-radius: 15px !important; - overflow: hidden !important; - border: 1px solid rgba(0, 0, 0, 0.05) !important; + background: #ffffff !important; + border: none !important; + border-radius: 20px !important; + /* Smoother rounded corners */ + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; + overflow: visible !important; + /* Allow image to overflow slightly if needed */ + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; + margin: 0 !important; + /* Margin replaced by parent gap */ + height: 230px !important; + /* Increased from 180px */ + width: 210px !important; + /* Increased from 140px */ + display: flex !important; + flex-direction: column !important; + align-items: center !important; + padding: 15px !important; + position: relative !important; + /* For price tag positioning */ } .pos .product-list .product:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; - border-color: var(--pos-primary) !important; + transform: translateY(-8px) !important; + box-shadow: 0 20px 40px rgba(43, 177, 165, 0.15) !important; } +/* Circular Food Images with Premium Border */ +.pos .product .product-img { + width: 130px !important; + /* Increased from 100px */ + height: 130px !important; + /* Increased from 100px */ + border-radius: 50% !important; + /* Perfectly circular */ + border: 5px solid #ffffff !important; + /* box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important; */ + margin-bottom: 8px !important; + transition: transform 0.3s ease; +} + +.pos .product:hover .product-img { + transform: scale(1.1); +} + +/* Product Name Styling */ +.pos .product .product-name { + font-size: 15px !important; + /* Increased from 13px */ + font-weight: 700 !important; + color: #2c3e50 !important; + text-align: center !important; + padding: 2px 10px !important; + line-height: 1.2 !important; + background: transparent !important; +} + +/* Premium Floating Price Tag */ .pos .product .price-tag { background: var(--pos-secondary) !important; + /* Teal */ + color: #ffffff !important; + border-radius: 20px !important; + padding: 6px 16px !important; + /* Padding increased */ + font-weight: 800 !important; + font-size: 14px !important; + /* Price font increased */ + bottom: -15px !important; + /* Float at the bottom */ + top: auto !important; + right: auto !important; + box-shadow: 0 4px 10px rgba(43, 177, 165, 0.3) !important; + border: 3px solid #ffffff !important; + text-align: center !important; +} + +/* Info Icon Styling */ +.pos .product .product-info-button { + background: rgba(254, 205, 79, 0.9) !important; + /* Golden Yellow */ + color: #000 !important; + border-radius: 50% !important; + top: 5px !important; + right: 5px !important; } /* 8. POS Buttons */ diff --git a/addons/home_dashboard/views/home_template.xml b/addons/home_dashboard/views/home_template.xml index 3e747ed..07d5a68 100644 --- a/addons/home_dashboard/views/home_template.xml +++ b/addons/home_dashboard/views/home_template.xml @@ -9,6 +9,15 @@