responsiveness done beast-details

bz-hashtag-0780 · bz-hashtag-0780 · commit 02ffdd87888e · 2023-01-24T15:47:05.000+01:00
diff --git a/components/ui/ProductBeastView/InfoMobile.tsx b/components/ui/ProductBeastView/InfoMobile.tsx
@@ -21,7 +21,7 @@ const InfoMobileWrapper = styled.div`
   display: none;
   width: 32%;
   // padding: 0 10rem;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -31,7 +31,7 @@ const InfoMobileWrapper = styled.div`
 
 const BeastDetailsMobile = styled.div`
   display: none;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     display: block;
   }
 `
diff --git a/components/ui/ProductBeastView/ProductBeastView.tsx b/components/ui/ProductBeastView/ProductBeastView.tsx
@@ -51,7 +51,7 @@ const Panel = styled.div`
 
   outline: none;
   transition: 0.4s;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     border: 1px solid #5c5e6c;
     border-radius: 1.2rem;
   }
@@ -65,7 +65,7 @@ const AccordionTitle = styled.div`
   margin-bottom: 20px;
   /* border-bottom: 1px solid rgba(220, 220, 220, 0.25); */
   line-height: 1;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     margin-bottom: 0.5rem;
     justify-content: space-between;
     margin-right: 10px;
@@ -77,7 +77,7 @@ const AccordionContent = styled.div`
   border: 1px solid #5c5e6c;
   border-radius: 1rem;
   width: 100%;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     border: 0;
     padding: 0.5rem;
   }
@@ -116,7 +116,7 @@ const ImgDiv = styled.div`
 
   overflow: hidden;
   margin: 0 auto 50px;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     margin-bottom: 20px;
   }
 `
@@ -136,7 +136,7 @@ export const OwnerImg = styled.img`
   border-radius: 8px;
   height: max-content;
   object-fit: contain;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     max-width: 3rem;
   }
 `
@@ -153,7 +153,7 @@ const Trait = styled.p`
   line-height: 0;
   text-transform: uppercase;
   margin: 1rem 0;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     font-size: 1.2rem;
     margin: 0.5rem 0;
   }
@@ -176,7 +176,7 @@ export const H3 = styled.h3`
   width: 100%;
   font-size: 2rem;
   color: white;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     font-size: 1.2rem;
   }
 `
@@ -239,7 +239,7 @@ const AttributeBlock = styled.div`
     color: white;
   }
 
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     padding: 5px 15px 5px 15px;
     gap: 0px;
   }
@@ -250,7 +250,7 @@ const Info = styled.div`
   align-items: center;
   width: 32%;
   // padding: 0 10rem;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     display: none;
   }
 `
@@ -286,15 +286,15 @@ const OfferDetails = styled.div`
   align-items: center;
   border-bottom: 2px solid #2e3340;
   padding-bottom: 20px;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     flex-direction: row;
   }
 `
 
 const Offeror = styled.div`
   display: flex;
   align-items: center;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     flex-direction: row;
   }
 `
@@ -318,7 +318,7 @@ export const Clickable = styled.span`
   &:active {
     transform: scale(0.95);
   }
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     font-size: 1.2rem;
   }
 `
@@ -328,48 +328,48 @@ const BeastDescription = styled.section`
   display: flex;
   justify-content: space-between;
   color: white;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     flex-direction: column;
     padding-left: 0;
     padding-right: 0;
   }
 `
 
 const BeastDescriptionWrapper = styled.div`
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     width: 100%;
   }
 `
 
 const BeastDetails = styled.div`
   display: block;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     display: none;
   }
 `
 
 const BeastDetailsMobile = styled.div`
   display: none;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     display: block;
   }
 `
 
 const OfferorId = styled.span`
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     display: none;
   }
 `
 const OfferorIdMobile = styled.span`
   display: none;
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     display: block;
     font-size: 1.2rem;
   }
 `
 
 const OfferorPrice = styled.span`
-  @media (max-width: 420px) {
+  @media (max-width: 1024px) {
     font-size: 1rem;
   }
 `

Original file line number	Diff line number	Diff line change
@@ -51,7 +51,7 @@ const Panel = styled.div`
`51`	`51`
`52`	`52`	`outline: none;`
`53`	`53`	`transition: 0.4s;`
`54`		`- @media (max-width: 420px) {`
	`54`	`+ @media (max-width: 1024px) {`
`55`	`55`	`border: 1px solid #5c5e6c;`
`56`	`56`	`border-radius: 1.2rem;`
`57`	`57`	`}`
@@ -65,7 +65,7 @@ const AccordionTitle = styled.div`
`65`	`65`	`margin-bottom: 20px;`
`66`	`66`	`/* border-bottom: 1px solid rgba(220, 220, 220, 0.25); */`
`67`	`67`	`line-height: 1;`
`68`		`- @media (max-width: 420px) {`
	`68`	`+ @media (max-width: 1024px) {`
`69`	`69`	`margin-bottom: 0.5rem;`
`70`	`70`	`justify-content: space-between;`
`71`	`71`	`margin-right: 10px;`
@@ -77,7 +77,7 @@ const AccordionContent = styled.div`
`77`	`77`	`border: 1px solid #5c5e6c;`
`78`	`78`	`border-radius: 1rem;`
`79`	`79`	`width: 100%;`
`80`		`- @media (max-width: 420px) {`
	`80`	`+ @media (max-width: 1024px) {`
`81`	`81`	`border: 0;`
`82`	`82`	`padding: 0.5rem;`
`83`	`83`	`}`
@@ -116,7 +116,7 @@ const ImgDiv = styled.div`
`116`	`116`
`117`	`117`	`overflow: hidden;`
`118`	`118`	`margin: 0 auto 50px;`
`119`		`- @media (max-width: 420px) {`
	`119`	`+ @media (max-width: 1024px) {`
`120`	`120`	`margin-bottom: 20px;`
`121`	`121`	`}`
`122`	`122`	`
@@ -136,7 +136,7 @@ export const OwnerImg = styled.img`
`136`	`136`	`border-radius: 8px;`
`137`	`137`	`height: max-content;`
`138`	`138`	`object-fit: contain;`
`139`		`- @media (max-width: 420px) {`
	`139`	`+ @media (max-width: 1024px) {`
`140`	`140`	`max-width: 3rem;`
`141`	`141`	`}`
`142`	`142`	`
@@ -153,7 +153,7 @@ const Trait = styled.p`
`153`	`153`	`line-height: 0;`
`154`	`154`	`text-transform: uppercase;`
`155`	`155`	`margin: 1rem 0;`
`156`		`- @media (max-width: 420px) {`
	`156`	`+ @media (max-width: 1024px) {`
`157`	`157`	`font-size: 1.2rem;`
`158`	`158`	`margin: 0.5rem 0;`
`159`	`159`	`}`
@@ -176,7 +176,7 @@ export const H3 = styled.h3`
`176`	`176`	`width: 100%;`
`177`	`177`	`font-size: 2rem;`
`178`	`178`	`color: white;`
`179`		`- @media (max-width: 420px) {`
	`179`	`+ @media (max-width: 1024px) {`
`180`	`180`	`font-size: 1.2rem;`
`181`	`181`	`}`
`182`	`182`	`
@@ -239,7 +239,7 @@ const AttributeBlock = styled.div`
`239`	`239`	`color: white;`
`240`	`240`	`}`
`241`	`241`
`242`		`- @media (max-width: 420px) {`
	`242`	`+ @media (max-width: 1024px) {`
`243`	`243`	`padding: 5px 15px 5px 15px;`
`244`	`244`	`gap: 0px;`
`245`	`245`	`}`
@@ -250,7 +250,7 @@ const Info = styled.div`
`250`	`250`	`align-items: center;`
`251`	`251`	`width: 32%;`
`252`	`252`	`// padding: 0 10rem;`
`253`		`- @media (max-width: 420px) {`
	`253`	`+ @media (max-width: 1024px) {`
`254`	`254`	`display: none;`
`255`	`255`	`}`
`256`	`256`	`
@@ -286,15 +286,15 @@ const OfferDetails = styled.div`
`286`	`286`	`align-items: center;`
`287`	`287`	`border-bottom: 2px solid #2e3340;`
`288`	`288`	`padding-bottom: 20px;`
`289`		`- @media (max-width: 420px) {`
	`289`	`+ @media (max-width: 1024px) {`
`290`	`290`	`flex-direction: row;`
`291`	`291`	`}`
`292`	`292`	`
`293`	`293`
`294`	`294`	const Offeror = styled.div`
`295`	`295`	`display: flex;`
`296`	`296`	`align-items: center;`
`297`		`- @media (max-width: 420px) {`
	`297`	`+ @media (max-width: 1024px) {`
`298`	`298`	`flex-direction: row;`
`299`	`299`	`}`
`300`	`300`	`
@@ -318,7 +318,7 @@ export const Clickable = styled.span`
`318`	`318`	`&:active {`
`319`	`319`	`transform: scale(0.95);`
`320`	`320`	`}`
`321`		`- @media (max-width: 420px) {`
	`321`	`+ @media (max-width: 1024px) {`
`322`	`322`	`font-size: 1.2rem;`
`323`	`323`	`}`
`324`	`324`	`
@@ -328,48 +328,48 @@ const BeastDescription = styled.section`
`328`	`328`	`display: flex;`
`329`	`329`	`justify-content: space-between;`
`330`	`330`	`color: white;`
`331`		`- @media (max-width: 420px) {`
	`331`	`+ @media (max-width: 1024px) {`
`332`	`332`	`flex-direction: column;`
`333`	`333`	`padding-left: 0;`
`334`	`334`	`padding-right: 0;`
`335`	`335`	`}`
`336`	`336`	`
`337`	`337`
`338`	`338`	const BeastDescriptionWrapper = styled.div`
`339`		`- @media (max-width: 420px) {`
	`339`	`+ @media (max-width: 1024px) {`
`340`	`340`	`width: 100%;`
`341`	`341`	`}`
`342`	`342`	`
`343`	`343`
`344`	`344`	const BeastDetails = styled.div`
`345`	`345`	`display: block;`
`346`		`- @media (max-width: 420px) {`
	`346`	`+ @media (max-width: 1024px) {`
`347`	`347`	`display: none;`
`348`	`348`	`}`
`349`	`349`	`
`350`	`350`
`351`	`351`	const BeastDetailsMobile = styled.div`
`352`	`352`	`display: none;`
`353`		`- @media (max-width: 420px) {`
	`353`	`+ @media (max-width: 1024px) {`
`354`	`354`	`display: block;`
`355`	`355`	`}`
`356`	`356`	`
`357`	`357`
`358`	`358`	const OfferorId = styled.span`
`359`		`- @media (max-width: 420px) {`
	`359`	`+ @media (max-width: 1024px) {`
`360`	`360`	`display: none;`
`361`	`361`	`}`
`362`	`362`	`
`363`	`363`	const OfferorIdMobile = styled.span`
`364`	`364`	`display: none;`
`365`		`- @media (max-width: 420px) {`
	`365`	`+ @media (max-width: 1024px) {`
`366`	`366`	`display: block;`
`367`	`367`	`font-size: 1.2rem;`
`368`	`368`	`}`
`369`	`369`	`
`370`	`370`
`371`	`371`	const OfferorPrice = styled.span`
`372`		`- @media (max-width: 420px) {`
	`372`	`+ @media (max-width: 1024px) {`
`373`	`373`	`font-size: 1rem;`
`374`	`374`	`}`
`375`	`375`	`