From dae7fb9221c3976595305de6d5b480a2f3be076d Mon Sep 17 00:00:00 2001 From: karyamanswasta Date: Wed, 27 Aug 2025 07:12:39 +0700 Subject: [PATCH] ok --- src/App.css | 6 +++--- src/components/Header.js | 12 +++++++----- src/components/ItemConfig.js | 6 ++++-- src/components/ItemTypeLister.css | 4 ++-- src/components/Modal.js | 6 ++++-- src/components/MusicPlayer.css | 9 ++++----- src/components/Watermark.module.css | 6 +++--- src/pages/CafePage.js | 2 ++ 8 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/App.css b/src/App.css index 1952907..fd59631 100644 --- a/src/App.css +++ b/src/App.css @@ -36,7 +36,7 @@ body { height: 100%; width: 100%; background-image: url(https://i.ibb.co.com/F4FMw1jz/testuseonly.png); - z-index: 1000; + z-index: 0; /* align with item lister */ filter: opacity(0.04); pointer-events: none; } @@ -67,7 +67,7 @@ body { /* Ensure sticky cart bar stays above item overlays */ .StickyCartBar { - z-index: 100 !important; /* Menurunkan z-index agar tidak menutupi material list */ + z-index: 0 !important; /* align with item lister */ position: fixed; bottom: 0; left: 0; @@ -100,4 +100,4 @@ body { to { transform: rotate(360deg); } -} \ No newline at end of file +} diff --git a/src/components/Header.js b/src/components/Header.js index f2c3cf3..ee2daed 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -23,7 +23,7 @@ const HeaderBar = styled.div` padding: 12px 14px; color: black; background-color: #ffffff; - z-index: 200; + z-index: ${(props) => (props.zIndexLevel !== undefined ? props.zIndexLevel : 200)}; border: 1px solid #00000000; margin: 20px 12px; border-radius: 13px; @@ -148,7 +148,7 @@ const Rectangle = styled.div` width: 240px; max-height: 75vh; background-color: white; - z-index: 198; + z-index: ${(props) => (props.baseZIndex !== undefined ? props.baseZIndex : 198)}; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border: 1px solid #f0f0f0; border-radius: 12px; @@ -276,7 +276,9 @@ const Header = ({ removeConnectedGuestSides, setIsEditMode, isEditMode, - HeaderMargin = '25px' + HeaderMargin = '25px', + zIndexLevel, + rectZIndex }) => { const { goToLogin, goToGuestSideLogin, goToAdminCafes } = useNavigationHelpers(shopId, tableCode); @@ -354,7 +356,7 @@ const Header = ({ }; return ( - + {showRectangle && ( - + {guestSideOfClerk && guestSideOfClerk.clerkUsername && ( diff --git a/src/components/ItemConfig.js b/src/components/ItemConfig.js index 3254c84..4f428b4 100644 --- a/src/components/ItemConfig.js +++ b/src/components/ItemConfig.js @@ -1,4 +1,5 @@ import React, { useState, useEffect, useRef } from "react"; +import { createPortal } from "react-dom"; import styles from "./Modal.module.css"; import { getImageUrl } from "../helpers/itemHelper.js"; @@ -106,7 +107,7 @@ const ItemConfig = ({ } }; - return ( + return createPortal(
@@ -208,7 +209,8 @@ const ItemConfig = ({
- + , + document.body ); }; diff --git a/src/components/ItemTypeLister.css b/src/components/ItemTypeLister.css index 408db88..edff468 100644 --- a/src/components/ItemTypeLister.css +++ b/src/components/ItemTypeLister.css @@ -97,7 +97,7 @@ top: 0; right: 0; background-color: white; - z-index: 300; + z-index: 0; /* align with item lister */ display: flex; flex-direction: column; } @@ -246,4 +246,4 @@ font-size: 12px; margin: 0 2px; } -} \ No newline at end of file +} diff --git a/src/components/Modal.js b/src/components/Modal.js index 1316c00..b297f5a 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -1,4 +1,5 @@ import React, {useState, useEffect} from "react"; +import { createPortal } from "react-dom"; import styles from "./Modal.module.css"; import AccountUpdatePage from "../components/AccountUpdatePage.js"; @@ -75,7 +76,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal event.stopPropagation(); }; if(modalContent == '') handleOverlayClick(); - return ( + return createPortal(
@@ -132,7 +133,8 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal {modalContent === "message" && } {modalContent === "player-prompt" && }
-
+ , + document.body ); }; diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css index 6719d0a..55e1e68 100644 --- a/src/components/MusicPlayer.css +++ b/src/components/MusicPlayer.css @@ -31,14 +31,14 @@ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); border-radius: 0 0 15px 15px; - z-index: 1; + z-index: 0; /* align with item lister */ } .current-name { white-space: nowrap; pointer-events: none; position: relative; - z-index: 2; + z-index: 1; text-align: left; margin: 35px 30px; font-size: 16px; @@ -70,7 +70,7 @@ .current-artist { pointer-events: none; position: relative; - z-index: 2; + z-index: 1; text-align: left; margin: -32px 30px; font-size: 18px; @@ -83,7 +83,7 @@ .progress-container { pointer-events: none; position: relative; - z-index: 2; + z-index: 1; text-align: left; margin: 12px 30px; } @@ -318,4 +318,3 @@ .search-button.clicked { background-color: #d0c7b3; /* The color when clicked */ } - diff --git a/src/components/Watermark.module.css b/src/components/Watermark.module.css index a7d6f8e..6616b8d 100644 --- a/src/components/Watermark.module.css +++ b/src/components/Watermark.module.css @@ -1,5 +1,5 @@ .watermark { - z-index: 5; + z-index: 0; /* align with item lister */ margin-top: 30px; background-color: rgb(222, 237, 100); font-weight: 700; @@ -28,7 +28,7 @@ /* Media query for desktop */ @media (min-width: 768px) { /* Adjust the min-width as needed */ .watermark { - z-index: 5; + z-index: 0; /* align with item lister */ margin-top: 30px; background-color: rgb(222, 237, 100); font-weight: 700; @@ -52,4 +52,4 @@ .watermarkFooter { margin-top: 8px; - } \ No newline at end of file + } diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js index 3f501e3..4e80c72 100644 --- a/src/pages/CafePage.js +++ b/src/pages/CafePage.js @@ -246,6 +246,8 @@ function CafePage({ removeConnectedGuestSides={removeConnectedGuestSides} setIsEditMode={(e) => setIsEditMode(e)} isEditMode={isEditMode} + zIndexLevel={9000} + rectZIndex={9000} />