fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cart: styles enhancements on different screen sizes

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-30 10:50:41 +03:00
parent 961164f842
commit d4332542d1
6 changed files with 51 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/OrderSummary/OrderSummary.module.css
View File

@@ -66,12 +66,11 @@
/* Tablet styles (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.summaryRow {
padding: 6px 0;
font-size: 16px;
}
.summaryDivider {
margin: 20px 0 !important;
margin: 10px 0 !important;
}
.totalRow {
@@ -82,12 +81,11 @@
/* Desktop styles (1025px+) */
@media (min-width: 1025px) {
.summaryRow {
padding: 4px 0;
font-size: 18px;
}
.summaryDivider {
margin: 0 !important;
margin: 10px 0 !important;
}
.totalRow {
@@ -101,29 +99,3 @@
outline-offset: 4px;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: no-preference) {
.orderSummary {
animation: fadeInUp 0.8s ease-out;
}
}
/* Hover effects for devices that support hover */
@media (hover: hover) {
.orderSummary:hover {
transform: translateY(-2px);
}
.menuItemImage:hover {
transform: scale(1.05);
}
}
/* Print styles */
@media print {
.orderSummary {
box-shadow: none !important;
border: 1px solid #ccc !important;
}
}

6
src/pages/cart/components/CartMobileTabletLayout.tsx
View File

@@ -137,7 +137,7 @@ export default function CartMobileTabletLayout({
<Space
direction="vertical"
size="small"
style={{ flex: 1, gap: isMobile ? "50px" : "60px" }}
style={{ flex: 1, gap: isMobile ? 32 : isTablet ? 24 : 32 }}
>
<div>
<ProText
@@ -176,8 +176,8 @@ export default function CartMobileTabletLayout({
wordWrap: "break-word",
overflowWrap: "break-word",
lineHeight: "1.4",
maxHeight: "2.8em",
fontWeight: "500",
maxHeight: isMobile ? "2.8em" : isTablet ? "4.8em" : "6.8em",
fontWeight: 500,
letterSpacing: "0.01em",
}}
>

35
src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
View File

@@ -56,14 +56,38 @@
outline-offset: 4px;
}
.youMightAlsoLikeContainer {
height: 150px !important;
height: 160px !important;
}
.itemDescriptionIconsContainer {
display: flex;
flex-direction: row;
justify-content: start;
margin-top: 10px;
margin-left: -10px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.youMightAlsoLikeContainer {
height: 200px !important;
height: 210px !important;
}
.itemDescriptionIconsContainer {
display: flex;
flex-direction: row;
justify-content: start;
margin-top: 10px;
margin-right: 0;
margin-left: -15px;
}
:global(.ant-app-rtl) .itemDescriptionIconsContainer {
margin-right: -30px;
margin-left: 0;
}
}
@media (min-width: 1024px) {
@@ -75,13 +99,6 @@
}
}
/* Hover effects for devices that support hover */
@media (hover: hover) {
.popularMenuItemImage:hover {
transform: scale(1.05);
}
}
/* Focus states for accessibility */
.popularMenuItemImage:focus {
outline: 2px solid var(--primary);

16
src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
View File

@@ -201,9 +201,9 @@ export default function YouMightAlsoLike() {
width: isMobile ? 18 : 24,
height: isMobile ? 18 : 24,
borderRadius: "50%",
top: isMobile ? 50 : 80,
top: isMobile ? 50 : isTablet ? 60 : 80,
position: "absolute",
[isRTL ? "left" : "right"]: isMobile ? 15 : 20,
[isRTL ? "right" : "left"]: isMobile ? 15 : 20,
display: "flex",
flexDirection: "row",
justifyContent: "center",
@@ -240,13 +240,7 @@ export default function YouMightAlsoLike() {
/>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "start",
marginTop: 5,
...(isRTL ? { marginRight: -20 } : { marginLeft: -10 }),
}}
className={styles.itemDescriptionIconsContainer}
>
<ItemDescriptionIcons
className={styles.itemDescriptionIcons}
@@ -267,7 +261,7 @@ export default function YouMightAlsoLike() {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
padding: 3,
padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
fontSize: isMobile ? 12 : isTablet ? 14 : 16,
width: isMobile ? 80 : isTablet ? 100 : 120,
display: "inline-block",
@@ -286,7 +280,7 @@ export default function YouMightAlsoLike() {
WebkitBoxOrient: "vertical",
overflow: "hidden",
textOverflow: "ellipsis",
padding: 3,
padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
fontSize: isMobile ? 12 : isTablet ? 14 : 16,
fontWeight: 500,
}}

4
src/pages/product/page.tsx
View File

@@ -29,7 +29,7 @@ export default function ProductDetailPage({
const { isRTL } = useAppSelector((state) => state.locale);
const { restaurant } = useAppSelector((state) => state.order);
const { isDesktop } = useBreakPoint();
const { isDesktop, isTablet } = useBreakPoint();
const [quantity, setQuantity] = useState(1);
// Get menu data
@@ -205,7 +205,7 @@ export default function ProductDetailPage({
key={`product-${product?.id}-${product?.image}`}
src={product?.image}
fallbackSrc={default_image}
height={isDesktop ? 300 : 240}
height={isDesktop || isTablet ? 300 : 240}
width={"100%"}
style={{
width: "100%",

14
src/pages/product/product.module.css
View File

@@ -219,8 +219,8 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
gap: 0px;
margin: 16px 0 24px 0;
}
.productDetails {
@@ -295,6 +295,16 @@
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.productHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin: 24px 0;
}
}
.backButtonContainer {
position: absolute;
z-index: 999;