feat: improved the UX on the feeds page and scroll behaviour (#1506)

open-sauced · Aug 8, 2023 · 31c1593 · 31c1593
1 parent 3daa5c0
commit 31c1593
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/components/molecules/AnnouncementCard/announcement-card.tsx b/components/molecules/AnnouncementCard/announcement-card.tsx
@@ -9,7 +9,7 @@ interface AnnouncementCardProps {
 }
 const AnnouncementCard = ({ title, description, bannerSrc, url }: AnnouncementCardProps) => {
   return (
-    <div className="overflow-hidden border rounded-lg bg-light-slate-1">
+    <div className="overflow-hidden border max-w-xs  rounded-lg bg-light-slate-1">
       <div className="w-full p-0.5 ">
         <AspectRatio.Root ratio={1.85 / 1}>
           <picture>

diff --git a/components/organisms/TopNav/top-nav.tsx b/components/organisms/TopNav/top-nav.tsx
@@ -18,7 +18,7 @@ const TopNav: React.FC = () => {
   const router = useRouter();
 
   return (
-    <header className="top-nav-container flex justify-between items-center z-50 py-0.5 bg-light-slate-3 border-b">
+    <header className="top-nav-container w-full fixed top-0 left-0 flex justify-between items-center z-50 py-0.5 bg-light-slate-3 border-b">
       <div className="flex justify-between items-start sm:items-center mx-auto container px-2 md:px-16">
         <div className="flex gap-3 md:gap-8 items-center flex-wrap">
           <HeaderLogo withBg={false} textIsBlack />

diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
@@ -166,30 +166,35 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
         image={ogImage}
         twitterCard="summary_large_image"
       />
-      <div className="w-full gap-[2rem] justify-center flex flex-col md:gap-6 xl:gap-16 pt-12 md:flex-row" ref={topRef}>
-        <div className="flex-col flex-1 xl:flex hidden gap-6 mt-12">
-          {user && (
-            <div className="md:w-1/2 lg:w-1/3">
-              <UserCard
-                loading={loggedInUserLoading}
-                username={loggedInUser?.login as string}
-                meta={userMetaArray as MetaObj[]}
-                name={loggedInUser?.name as string}
-              />
-            </div>
-          )}
-          <TopContributorsPanel loggedInUserLogin={loggedInUser?.login ?? ""} />
 
-          <AnnouncementCard
-            title="#100DaysOfOSS 🚀 "
-            description={
-              "Join us for 100 days of supporting, sharing knowledge, and exploring the open source ecosystem together."
-            }
-            bannerSrc={
-              "https://user-images.githubusercontent.com/5713670/254358937-8e9aa76d-4ed3-4616-a58a-2283796b10e1.png"
-            }
-            url={"https://dev.to/opensauced/100daysofoss-growing-skills-and-real-world-experience-3o5k"}
-          />
+      <div
+        className=" w-full gap-[2rem] flex flex-col justify-center md:gap-6 xl:gap-16 px-2 pt-12 md:items-start md:justify-between mx-auto md:px-16 lg:justify-end md:flex-row"
+        ref={topRef}
+      >
+        <div className="sticky top-8">
+          <div className="flex-col flex-1 xl:flex hidden gap-6 mt-12">
+            {user && (
+              <div className="md:w-1/2 lg:w-1/3">
+                <UserCard
+                  loading={loggedInUserLoading}
+                  username={loggedInUser?.login as string}
+                  meta={userMetaArray as MetaObj[]}
+                  name={loggedInUser?.name as string}
+                />
+              </div>
+            )}
+            <TopContributorsPanel loggedInUserLogin={loggedInUser?.login ?? ""} />
+            <AnnouncementCard
+              title="#100DaysOfOSS 🚀 "
+              description={
+                "Join us for 100 days of supporting, sharing knowledge, and exploring the open source ecosystem together."
+              }
+              bannerSrc={
+                "https://user-images.githubusercontent.com/5713670/254358937-8e9aa76d-4ed3-4616-a58a-2283796b10e1.png"
+              }
+              url={"https://dev.to/opensauced/100daysofoss-growing-skills-and-real-world-experience-3o5k"}
+            />
+          </div>
         </div>
         {singleHighlight && (
           <Dialog
@@ -321,7 +326,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
             <FollowingHighlightWrapper selectedFilter={selectedRepo} emojis={emojis} />
           </TabsContent>
         </Tabs>
-        <div className="md:hidden gap-6 mt-10 md:flex-1 lg:flex md:flex-col">
+        <div className="md:hidden gap-6 mt-10 md:flex-1 lg:flex md:flex-col sticky top-20">
           {repoList && repoList.length > 0 && (
             <HighlightsFilterCard
               selectedFilter={selectedRepo}