MenuSkeleton: apply 3 fr for desktop size & clean code
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
/* Base Styles */
|
||||
.categoriesContainer {
|
||||
display: flex;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@@ -65,77 +66,7 @@
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
/* Enhanced responsive categories container */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.logo {
|
||||
left: 40px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.categoriesContainer {
|
||||
height: 160px;
|
||||
padding: 0 24px;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categoriesSticky {
|
||||
padding: 12px 16px !important;
|
||||
height: 70px !important;
|
||||
}
|
||||
|
||||
.leftShape {
|
||||
top: 150px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.rightShape {
|
||||
top: 150px;
|
||||
left: 116px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.logo {
|
||||
left: 33px;
|
||||
top: 141px;
|
||||
width: 150px !important;
|
||||
height: 150px !important;
|
||||
}
|
||||
.categoriesContainer {
|
||||
height: 180px;
|
||||
padding: 0 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categoriesSticky {
|
||||
padding: 16px 24px !important;
|
||||
height: 70px !important;
|
||||
max-width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.leftShape {
|
||||
top: 170px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.rightShape {
|
||||
top: 170px;
|
||||
left: 185px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu Section Styles */
|
||||
.menuSection:first-child h3 {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
@@ -145,25 +76,11 @@
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Enhanced responsive menu section headers */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.menuSection h3 {
|
||||
margin: 40px 0px 20px 0px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.menuSection h3 {
|
||||
margin: 50px 0px 25px 0px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu Items Grid Styles */
|
||||
.menuItemsGrid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -185,16 +102,6 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Enhanced responsive menu items grid */
|
||||
@media (min-width: 1280px) {
|
||||
.menuItemsGridDesktop {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Restaurant Header Skeleton */
|
||||
.restaurantHeader {
|
||||
position: relative;
|
||||
@@ -231,45 +138,6 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Enhanced responsive page container */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.pageContainer {
|
||||
/* padding: 0 24px; */
|
||||
}
|
||||
|
||||
.restaurantInfoSkeleton {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.loyaltySkeleton {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.restaurantHeader {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.pageContainer {
|
||||
/* padding: 32px; */
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.restaurantInfoSkeleton {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.loyaltySkeleton {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.restaurantHeader {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Skeleton Loading Styles */
|
||||
.skeletonContainer {
|
||||
animation: skeletonPulse 1.5s ease-in-out infinite;
|
||||
@@ -321,25 +189,6 @@
|
||||
animation: skeletonShimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Mobile-specific skeleton styles */
|
||||
@media (max-width: 768px) {
|
||||
.skeletonContainer .ant-skeleton {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-button {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme skeleton styles */
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-input,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-image,
|
||||
@@ -356,12 +205,93 @@
|
||||
border-color: #363636;
|
||||
}
|
||||
|
||||
/* Tablet-specific skeleton styles */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.skeletonContainer {
|
||||
/* padding: 0 24px; */
|
||||
/* ===== AGGREGATED MEDIA QUERIES ===== */
|
||||
|
||||
/* Mobile Styles (max-width: 768px) */
|
||||
@media (max-width: 768px) {
|
||||
.skeletonContainer .ant-skeleton {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-button {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.menuItemsGrid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Styles (769px - 1024px) */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.logo {
|
||||
left: 40px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.categoriesContainer {
|
||||
height: 160px;
|
||||
padding: 0 24px;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categoriesSticky {
|
||||
padding: 12px 16px !important;
|
||||
height: 70px !important;
|
||||
}
|
||||
|
||||
.leftShape {
|
||||
top: 150px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.rightShape {
|
||||
top: 150px;
|
||||
left: 116px;
|
||||
}
|
||||
|
||||
.menuSection h3 {
|
||||
margin: 40px 0px 20px 0px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.menuItemsGrid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.restaurantInfoSkeleton {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.loyaltySkeleton {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.restaurantHeader {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
|
||||
.skeletonContainer .ant-skeleton {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@@ -378,3 +308,75 @@
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Styles (min-width: 1025px) */
|
||||
@media (min-width: 1025px) {
|
||||
.logo {
|
||||
left: 33px;
|
||||
top: 141px;
|
||||
width: 150px !important;
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
.categoriesContainer {
|
||||
height: 180px;
|
||||
padding: 0 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categoriesSticky {
|
||||
padding: 16px 24px !important;
|
||||
height: 70px !important;
|
||||
max-width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.leftShape {
|
||||
top: 170px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.rightShape {
|
||||
top: 170px;
|
||||
left: 185px;
|
||||
}
|
||||
|
||||
.menuSection h3 {
|
||||
margin: 50px 0px 25px 0px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.pageContainer {
|
||||
/* padding: 32px; */
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.restaurantInfoSkeleton {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.loyaltySkeleton {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.restaurantHeader {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Desktop Styles (min-width: 1280px) */
|
||||
@media (min-width: 1280px) {
|
||||
.menuItemsGridDesktop {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -341,7 +341,7 @@ const MenuSkeleton = ({
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
className={`${styles.menuItemsGrid} ${styles.menuItemsGrid}`}
|
||||
className={`${styles.menuItemsGrid}`}
|
||||
>
|
||||
{Array.from({
|
||||
length:
|
||||
|
||||
Reference in New Issue
Block a user