refactor project nav options

PotLock · Nov 7, 2023 · 8555c6a · 8555c6a
1 parent 35fbfad
commit 8555c6a
Show file tree

Hide file tree

Showing 13 changed files with 128 additions and 131 deletions.
diff --git a/apps/potlock/bos.config.json b/apps/potlock/bos.config.json
@@ -1,6 +1,7 @@
 {
   "appAccount": "potlock.near",
   "aliases": {
-    "nui": "nearui.near"
+    "nui": "nearui.near",
+    "there": []
   }
 }
diff --git a/apps/potlock/widget/Project/Actions.jsx b/apps/potlock/widget/Project/Actions.jsx
@@ -5,9 +5,7 @@ const Container = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: space-between';
-  // background: green;
   width: 100%;
-  // flex: 1;
 
   @media screen and (max-width: 768px) {
     flex-direction: column;

diff --git a/apps/potlock/widget/Project/Body.jsx b/apps/potlock/widget/Project/Body.jsx
@@ -15,12 +15,6 @@ const BodyContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
-  // background: red;
-
-  // @media screen and (max-width: 768px) {
-  //   width: 100%;
-  // }
-  // width: 100%;
 `;
 
 const NameContainer = styled.div`
@@ -149,11 +143,13 @@ return (
       />
     </div>
     <Actions />
-    <Widget
-      src={`${ownerId}/widget/Project.About`}
-      props={{
-        ...props,
-      }}
-    />
+    <div style={{ width: "100%" }}>
+      <Widget
+        src={props.navOptions.find((option) => option.id == props.nav).source}
+        props={{
+          ...props,
+        }}
+      />
+    </div>
   </BodyContainer>
 );
diff --git a/apps/potlock/widget/Project/Detail.jsx b/apps/potlock/widget/Project/Detail.jsx
@@ -51,25 +51,41 @@ const Container = styled.div`
 `;
 
 const BodyContainer = styled.div`
-  // display: flex;
-  // flex: 1;
-  // background: pink;
-
-  // @media screen and (min-width: 768px) {
-  //   // display: flex;
-  //   // flex: 1;
-  // }
+  flex: 1;
 `;
 
-// const BodyContainerMobile = styled.div`
-//   padding: 240px 16px;
-//   display: none;
-
-//   @media screen and (max-width: 768px) {
-//     display: block;
-//     padding: ;
-//   }
-// `;
+// these will be passed down to child components
+props.navOptions = [
+  {
+    label: "Home",
+    id: "home",
+    disabled: false,
+    source: `${ownerId}/widget/Project.About`,
+  },
+  {
+    label: "Social Feed",
+    id: "feed",
+    disabled: false,
+    source: `${ownerId}/widget/Project.Feed`,
+  },
+  {
+    label: "Pots",
+    id: "pots",
+    disabled: true,
+  },
+  {
+    label: "Attestations",
+    id: "attestations",
+    disabled: true,
+  },
+  {
+    label: "Funding Raised",
+    id: "funding",
+    disabled: true,
+  },
+];
+
+if (!props.nav) props.nav = "home"; // default to home tab
 
 const imageHeightPx = 120;
 const profileImageTranslateYPx = 220;

diff --git a/apps/potlock/widget/Project/DonationsInfo.jsx b/apps/potlock/widget/Project/DonationsInfo.jsx
@@ -1,5 +1,7 @@
 const donationContractId = "donate.potlock.near";
 
+const loraCss = fetch("https://fonts.cdnfonts.com/css/lora").body;
+
 const Container = styled.div`
   display: flex;
   flex-direction: row;
@@ -36,11 +38,13 @@ const InfoCard = styled.div`
 
 const InfoTextPrimary = styled.div`
   color: #2e2e2e;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 32px;
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 40px;
   // word-wrap: break-word;
   text-align: flex-end;
+  font-family: "Lora";
+  ${loraCss}
 `;
 
 const InfoTextSecondary = styled.div`

diff --git a/apps/potlock/widget/Project/Feed.jsx b/apps/potlock/widget/Project/Feed.jsx
@@ -0,0 +1,7 @@
+return (
+  <Widget
+    key="feed"
+    src="mob.near/widget/MainPage.N.Feed"
+    props={{ accounts: [props.projectId] }}
+  />
+);
diff --git a/apps/potlock/widget/Project/NavOptions.jsx b/apps/potlock/widget/Project/NavOptions.jsx
@@ -1,28 +1,7 @@
-const navOptions = [
-  {
-    label: "Home",
-    disabled: false,
-  },
-  {
-    label: "Social Feed",
-    disabled: true,
-  },
-  {
-    label: "Pots",
-    disabled: true,
-  },
-  {
-    label: "Attestations",
-    disabled: true,
-  },
-  {
-    label: "Funding Raised",
-    disabled: true,
-  },
-];
+const { navOptions } = props;
 
 const getSelectedNavOption = () => {
-  const navOption = navOptions.find((option) => option.label == props.nav);
+  const navOption = navOptions.find((option) => option.id == props.nav);
   return navOption ?? navOptions[0];
 };
 
@@ -47,7 +26,7 @@ const NavOption = styled.a`
   padding: 8px 16px;
   font-weight: ${(props) => (props.selected ? 600 : 400)};
   color: ${(props) => (props.selected ? "#DD3345" : "#7B7B7B")};
-  cursor: ${(props) => (props.disabled ? "not-allowed" : props.selected ? "pointer" : "default")};
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
 
   &:hover {
     text-decoration: none;
@@ -57,22 +36,20 @@ const NavOption = styled.a`
 return (
   <NavOptionsContainer>
     {navOptions.map((option) => {
+      const selected = option.id == getSelectedNavOption().id;
       return option.disabled ? (
-        <NavOption
-          selected={option.label == getSelectedNavOption().label}
-          disabled={option.disabled}
-        >
+        <NavOption selected={selected} disabled={option.disabled}>
           {option.label}
         </NavOption>
       ) : (
         <NavOptionContainer>
-          {option.label == getSelectedNavOption().label && (
+          {selected && (
             <div style={{ width: 2, height: 16, background: "#DD3345", borderRadius: 2 }} />
           )}
           <NavOption
-            selected={option.label == getSelectedNavOption().label}
+            selected={selected}
             disabled={option.disabled}
-            href={`?tab=project&projectId=${props.projectId}&nav=${option.label}`}
+            href={`?tab=project&projectId=${props.projectId}&nav=${option.id}`}
           >
             {option.label}
           </NavOption>

diff --git a/build/potlock/src/Project/Actions.jsx b/build/potlock/src/Project/Actions.jsx
@@ -5,9 +5,7 @@ const Container = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: space-between';
-  // background: green;
   width: 100%;
-  // flex: 1;
 
   @media screen and (max-width: 768px) {
     flex-direction: column;

diff --git a/build/potlock/src/Project/Body.jsx b/build/potlock/src/Project/Body.jsx
@@ -15,12 +15,6 @@ const BodyContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
-  // background: red;
-
-  // @media screen and (max-width: 768px) {
-  //   width: 100%;
-  // }
-  // width: 100%;
 `;
 
 const NameContainer = styled.div`
@@ -149,11 +143,13 @@ return (
       />
     </div>
     <Actions />
-    <Widget
-      src={`${ownerId}/widget/Project.About`}
-      props={{
-        ...props,
-      }}
-    />
+    <div style={{ width: "100%" }}>
+      <Widget
+        src={props.navOptions.find((option) => option.id == props.nav).source}
+        props={{
+          ...props,
+        }}
+      />
+    </div>
   </BodyContainer>
 );
diff --git a/build/potlock/src/Project/Detail.jsx b/build/potlock/src/Project/Detail.jsx
@@ -51,25 +51,41 @@ const Container = styled.div`
 `;
 
 const BodyContainer = styled.div`
-  // display: flex;
-  // flex: 1;
-  // background: pink;
-
-  // @media screen and (min-width: 768px) {
-  //   // display: flex;
-  //   // flex: 1;
-  // }
+  flex: 1;
 `;
 
-// const BodyContainerMobile = styled.div`
-//   padding: 240px 16px;
-//   display: none;
-
-//   @media screen and (max-width: 768px) {
-//     display: block;
-//     padding: ;
-//   }
-// `;
+// these will be passed down to child components
+props.navOptions = [
+  {
+    label: "Home",
+    id: "home",
+    disabled: false,
+    source: `${ownerId}/widget/Project.About`,
+  },
+  {
+    label: "Social Feed",
+    id: "feed",
+    disabled: false,
+    source: `${ownerId}/widget/Project.Feed`,
+  },
+  {
+    label: "Pots",
+    id: "pots",
+    disabled: true,
+  },
+  {
+    label: "Attestations",
+    id: "attestations",
+    disabled: true,
+  },
+  {
+    label: "Funding Raised",
+    id: "funding",
+    disabled: true,
+  },
+];
+
+if (!props.nav) props.nav = "home"; // default to home tab
 
 const imageHeightPx = 120;
 const profileImageTranslateYPx = 220;

diff --git a/build/potlock/src/Project/DonationsInfo.jsx b/build/potlock/src/Project/DonationsInfo.jsx
@@ -1,5 +1,7 @@
 const donationContractId = "donate.potlock.near";
 
+const loraCss = fetch("https://fonts.cdnfonts.com/css/lora").body;
+
 const Container = styled.div`
   display: flex;
   flex-direction: row;
@@ -36,11 +38,13 @@ const InfoCard = styled.div`
 
 const InfoTextPrimary = styled.div`
   color: #2e2e2e;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 32px;
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 40px;
   // word-wrap: break-word;
   text-align: flex-end;
+  font-family: "Lora";
+  ${loraCss}
 `;
 
 const InfoTextSecondary = styled.div`

diff --git a/build/potlock/src/Project/Feed.jsx b/build/potlock/src/Project/Feed.jsx
@@ -0,0 +1,7 @@
+return (
+  <Widget
+    key="feed"
+    src="mob.near/widget/MainPage.N.Feed"
+    props={{ accounts: [props.projectId] }}
+  />
+);