improve responsive styles

PotLock · Nov 6, 2023 · c9af2d7 · c9af2d7
1 parent 7a92796
commit c9af2d7
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 24 deletions.
diff --git a/apps/potlock/widget/Project/About.jsx b/apps/potlock/widget/Project/About.jsx
@@ -7,6 +7,7 @@ const Container = styled.div`
   flex-direction: column;
   gap: 48px;
   // width: 100%;
+  // background: yellow;
 `;
 
 const Header = styled.div`

diff --git a/apps/potlock/widget/Project/BannerHeader.jsx b/apps/potlock/widget/Project/BannerHeader.jsx
@@ -43,7 +43,7 @@ const ImageContainer = styled.div`
 
   @media screen and (max-width: 768px) {
     // transform: translateY(248px);
-    transform: ${(props) => `translateY(${props.profileImageTranslateYPx || 248}px);`}
+    transform: ${(props) => `translateY(${props.profileImageTranslateYPxMobile || 248}px);`}
 
     width: 64px;
     height: 64px;
@@ -68,6 +68,7 @@ return (
     <ImageContainer
       className="profile-picture d-inline-block"
       profileImageTranslateYPx={props.profileImageTranslateYPx}
+      profileImageTranslateYPxMobile={props.profileImageTranslateYPxMobile}
     >
       <Widget
         src="mob.near/widget/ProfileImage"

diff --git a/apps/potlock/widget/Project/Body.jsx b/apps/potlock/widget/Project/Body.jsx
@@ -15,6 +15,7 @@ const BodyContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
+  // background: red;
 
   // @media screen and (max-width: 768px) {
   //   width: 100%;

diff --git a/apps/potlock/widget/Project/Card.jsx b/apps/potlock/widget/Project/Card.jsx
@@ -21,7 +21,7 @@ const Card = styled.a`
 const Info = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top: 160px;
+  margin-top: 110px;
   padding: 16px 24px;
   gap: 16px;
   flex: 1;
@@ -115,6 +115,7 @@ return (
           projectId: id,
           profile,
           profileImageTranslateYPx: 106,
+          profileImageTranslateYPxMobile: 122,
           containerStyle: {
             paddingLeft: "16px",
           },

diff --git a/apps/potlock/widget/Project/Detail.jsx b/apps/potlock/widget/Project/Detail.jsx
@@ -53,6 +53,7 @@ const Container = styled.div`
 const BodyContainer = styled.div`
   // display: flex;
   // flex: 1;
+  // background: pink;
 
   // @media screen and (min-width: 768px) {
   //   // display: flex;

diff --git a/apps/potlock/widget/Project/Team.jsx b/apps/potlock/widget/Project/Team.jsx
@@ -88,16 +88,16 @@ const Col2 = styled.div`
   }
 `;
 
-props.team = [
-  "plugrel.near",
-  "kurodenjiro.near",
-  "lachlan.near",
-  "root.near",
-  "plugrel.near",
-  "kurodenjiro.near",
-  "lachlan.near",
-  "root.near",
-];
+// props.team = [
+//   "plugrel.near",
+//   "kurodenjiro.near",
+//   "lachlan.near",
+//   "root.near",
+//   "plugrel.near",
+//   "kurodenjiro.near",
+//   "lachlan.near",
+//   "root.near",
+// ];
 
 return (
   <Container>

diff --git a/build/potlock/src/Project/About.jsx b/build/potlock/src/Project/About.jsx
@@ -7,6 +7,7 @@ const Container = styled.div`
   flex-direction: column;
   gap: 48px;
   // width: 100%;
+  // background: yellow;
 `;
 
 const Header = styled.div`

diff --git a/build/potlock/src/Project/BannerHeader.jsx b/build/potlock/src/Project/BannerHeader.jsx
@@ -43,7 +43,7 @@ const ImageContainer = styled.div`
 
   @media screen and (max-width: 768px) {
     // transform: translateY(248px);
-    transform: ${(props) => `translateY(${props.profileImageTranslateYPx || 248}px);`}
+    transform: ${(props) => `translateY(${props.profileImageTranslateYPxMobile || 248}px);`}
 
     width: 64px;
     height: 64px;
@@ -68,6 +68,7 @@ return (
     <ImageContainer
       className="profile-picture d-inline-block"
       profileImageTranslateYPx={props.profileImageTranslateYPx}
+      profileImageTranslateYPxMobile={props.profileImageTranslateYPxMobile}
     >
       <Widget
         src="mob.near/widget/ProfileImage"

diff --git a/build/potlock/src/Project/Body.jsx b/build/potlock/src/Project/Body.jsx
@@ -15,6 +15,7 @@ const BodyContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
+  // background: red;
 
   // @media screen and (max-width: 768px) {
   //   width: 100%;

diff --git a/build/potlock/src/Project/Card.jsx b/build/potlock/src/Project/Card.jsx
@@ -21,7 +21,7 @@ const Card = styled.a`
 const Info = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top: 160px;
+  margin-top: 110px;
   padding: 16px 24px;
   gap: 16px;
   flex: 1;
@@ -115,6 +115,7 @@ return (
           projectId: id,
           profile,
           profileImageTranslateYPx: 106,
+          profileImageTranslateYPxMobile: 122,
           containerStyle: {
             paddingLeft: "16px",
           },

diff --git a/build/potlock/src/Project/Detail.jsx b/build/potlock/src/Project/Detail.jsx
@@ -53,6 +53,7 @@ const Container = styled.div`
 const BodyContainer = styled.div`
   // display: flex;
   // flex: 1;
+  // background: pink;
 
   // @media screen and (min-width: 768px) {
   //   // display: flex;

diff --git a/build/potlock/src/Project/Team.jsx b/build/potlock/src/Project/Team.jsx
@@ -88,16 +88,16 @@ const Col2 = styled.div`
   }
 `;
 
-props.team = [
-  "plugrel.near",
-  "kurodenjiro.near",
-  "lachlan.near",
-  "root.near",
-  "plugrel.near",
-  "kurodenjiro.near",
-  "lachlan.near",
-  "root.near",
-];
+// props.team = [
+//   "plugrel.near",
+//   "kurodenjiro.near",
+//   "lachlan.near",
+//   "root.near",
+//   "plugrel.near",
+//   "kurodenjiro.near",
+//   "lachlan.near",
+//   "root.near",
+// ];
 
 return (
   <Container>