Activities bar - added carousel #287

ioay · 2024-03-03T20:51:52Z

Closes: #225

Implement a carousel component

What was done:

Creating a responsive carousel component for the activities card
Added packages: react-slick, ver. ^0.30.2 | @types/react-slick: "^0.23.13"
React-slick is a carousel component built with React. It is a react port of a slick carousel: https://kenwheeler.github.io/slick/.
The first release was in 2015, the last release - 2 weeks ago.
Based on MIT license.
Weekly downloads: 1,071,550
Unpacked Size only: 815 kB
Stars on GitHub: 11.5k
Docs: https://react-slick.neostack.com/
More details: https://www.npmjs.com/package/react-slick
Repository: https://github.com/akiran/react-slick
Changed file structure of ActivityBar
Added SimpleGrid area to OverviewPage
Separating DocsButton in OverviewPage.

Preview:

Additional info:

If there are fewer cards, the carousel arrows are hidden.
If the user removes a card, the carousel component is refreshed in the background for correct width conversion.
If the last element is removed, the carousel is moved to the previous element to improve user experience.
The activity details page will be changed in another story, according to the design we are waiting for.

netlify · 2024-03-03T20:51:56Z

✅ Deploy Preview for acre-dapp-testnet ready!

Name	Link
🔨 Latest commit	`a6ba5d6`
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp-testnet/deploys/6615449c905b6b0008a95e79
😎 Deploy Preview	https://deploy-preview-287--acre-dapp-testnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

dapp/src/components/GlobalStyles/index.tsx

dapp/src/components/shared/Activities/ActivityBar.tsx

r-czajkowski · 2024-03-13T09:05:15Z

dapp/src/components/shared/Activities/ActivityCard/ActivityCardLinkWrapper.tsx

+export function ActivityCardLinkWrapper({
+  activity,
+  children,
+  ...props
+}: ActivityCardLinkWrapperProps) {
+  return (
+    <ChakraLink
+      as={ReactRouterLink}
+      to="/activity-details"
+      state={{ activity }}
+      key={activity.txHash}
+      {...props}
+    >
+      {children}
+    </ChakraLink>
+  )
+}


I believe we should use special compnent for that case from chakra - LinkOverlay, because:

According to the specification](https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element), an <a> element’s content model specifically states that an cannot contain any interactive descendants (button, anchors, input, etc.).

I'm not entirely convinced about this solution, since we end up using it anyway prop as={ReactRouterLink} which generates <a> element (no matter if we use LinkOverlay/LinkBox). I'm wondering how we can get around this to meet the semantic assumptions 🤔

UPDATE:
Added click handler instead of using ChakraLink.: ba6d8ee

dapp/src/components/shared/Activities/ActivityCard/ActivityCardLinkWrapper.tsx

dapp/src/pages/OverviewPage/index.tsx

dapp/src/components/shared/Activities/ActivityCarousel/ActivityCarousel.tsx

r-czajkowski · 2024-03-13T10:26:59Z

dapp/src/pages/ActivityPage/index.tsx

@@ -29,7 +29,7 @@ export default function ActivityPage() {
        />
      </ChakraLink>
      <Flex gap={10}>
-        <ActivityBar flexDirection="column" />
+        <ActivityBar />


Same as above. I think we can keep the ActivityBar under pages/AcrtivityPage. Unless we update the ActivityBar that can handle horizontal and vertical positions so we can use ActivityBar inside the ActivityCarousel but with horizontal position.

dapp/src/pages/OverviewPage/DocsCard.tsx

kkosiorowska

Some comments after the tests:

Not able to remove activity card when it is at the end of the carousel.

Screen.Recording.2024-03-22.at.14.06.01.mov

Currently, when we have a lot of activity it doesn't look good.

Screen.Recording.2024-03-22.at.14.08.50.mov

dapp/src/pages/ActivityPage/ActivityBar.tsx

dapp/src/pages/ActivityPage/index.tsx

dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx

dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx

kkosiorowska · 2024-03-22T14:17:26Z

dapp/src/components/GlobalStyles/index.tsx

+        // React-slick package: Chakra-ui with react-slick package doesn't 
+        // generate flex style for auto-generated slick-track wrapper.
+        .slick-track {
+          display: flex;
+        }


It seems to me that this is not a problem related to Chakra but to the fact that we have not imported styles.

I'm not sure if importing additional styles and then overriding the imported styles is needed. To add this kind of style with a lot of we have to install the additional package: slick-carousel or import them from cdn, another option is to add all these styles into the global styles file which leads to the same thing, only with more styles to remove/overwrite.

We just need to add display: flex to the slick-track class (this class is generated under the hood of react-slick, so we can't style it directly in the Carousel component). I'd leave it as it is if you don't mind.

Following this approach, let's add a right description of why we do this. Let's document this decision.

ioay · 2024-03-22T15:11:04Z

Some comments after the tests:

Not able to remove activity card when it is at the end of the carousel.

Screen.Recording.2024-03-22.at.14.06.01.mov

Currently, when we have a lot of activity it doesn't look good.

Screen.Recording.2024-03-22.at.14.08.50.mov

[ ] Not able to remove activity card when it is at the end of the carousel.

Could you add more details on that resolution are you record this video? Remove functionality works well, but on this video - the gradient below the Documentation Card covers Close button and that's why you can't click it.

@SorinQ what do you think? Should we move the close button icon to another place or maybe we should reduce width of this gradient?

[ ] Currently, when we have a lot of activity it doesn't look good.

I added information in the PR description that is not related to the scope of this PR, please take a look at AdditionalInfo section: #287 (comment):

The activity details page will be changed in another story, according to the design we are waiting for.

SorinQ · 2024-03-22T15:22:43Z

_> > Some comments after the tests:

Not able to remove activity card when it is at the end of the carousel.

Screen.Recording.2024-03-22.at.14.06.01.mov

Currently, when we have a lot of activity it doesn't look good.

Screen.Recording.2024-03-22.at.14.08.50.mov

[ ] Not able to remove activity card when it is at the end of the carousel.

Could you add more details on that resolution are you record this video? Remove functionality works well, but on this video - the gradient below the Documentation Card covers Close button and that's why you can't click it.

@SorinQ what do you think? Should we move the close button icon to another place or maybe we should reduce width of this gradient?

[ ] Currently, when we have a lot of activity it doesn't look good.

I added information in the PR description that is not related to the scope of this PR, please take a look at AdditionalInfo section: #287 (comment):

The activity details page will be changed in another story, according to the design we are waiting for._

We should definitely reduce the gradient.
For the cards, let's add pagination after every 4 or 5 of them.

ioay · 2024-03-22T19:41:36Z

_> > Some comments after the tests:

Not able to remove activity card when it is at the end of the carousel.

Screen.Recording.2024-03-22.at.14.06.01.mov

Currently, when we have a lot of activity it doesn't look good.

Screen.Recording.2024-03-22.at.14.08.50.mov

[ ] Not able to remove activity card when it is at the end of the carousel.

Could you add more details on that resolution are you record this video? Remove functionality works well, but on this video - the gradient below the Documentation Card covers Close button and that's why you can't click it.
@SorinQ what do you think? Should we move the close button icon to another place or maybe we should reduce width of this gradient?

[ ] Currently, when we have a lot of activity it doesn't look good.

I added information in the PR description that is not related to the scope of this PR, please take a look at AdditionalInfo section: #287 (comment):

The activity details page will be changed in another story, according to the design we are waiting for._

We should definitely reduce the gradient. For the cards, let's add pagination after every 4 or 5 of them.

I reduced the width of a gradient to 32px(but we will always find a resolution in which this close button will be unclickable). I implemented a responsively approach to showing cards, and depending on the resolution, we display the right amount of activity:

dapp/src/pages/OverviewPage/DocsCard.tsx

dapp/src/pages/ActivityPage/index.tsx

dapp/src/components/shared/Carousel.tsx

dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx

kkosiorowska · 2024-04-05T12:40:26Z

dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx

+        overflow="hidden"
+        ref={carouselRef}
+        pl={2}
+        ml={-2}
+        overflowX="hidden"
+        pb={6}


It seems to me that we don't need it.

overflowX="hidden" is already set in Carousel
pl={2} ml={-2} - it doesn't do anything
pb={6} - Instead of bottom padding, let's set the gap/pb in the higher component.

Suggested change

overflow="hidden"

ref={carouselRef}

pl={2}

ml={-2}

overflowX="hidden"

pb={6}

overflow- removed, remnants of changes during work on PR.

pl={2} ml={-2} - it doesn't do anything

It does - take a look at the shadow on the left side of the card(without these styles shadow is cut-off):

pb={6} - we can't do it as you propose, because, as I noticed, the carousel has overflow added by default and when we remove this padding shadow below activityCard is cut off. We need this padding-bottom to be consistent with UX.

I added a comment on why we need it to code.

Thanks for the explanation, now I understand. Regarding the bottom padding, I would consider simply setting the right height of the component. It seems more intuitive to me to fit the right height content into a component than to use padding. But I leave it up to you.

kkosiorowska · 2024-04-05T12:47:12Z

dapp/src/components/GlobalStyles/index.tsx

+        // React-slick package: Chakra-ui with react-slick package doesn't 
+        // generate flex style for auto-generated slick-track wrapper.
+        .slick-track {
+          display: flex;
+        }


Following this approach, let's add a right description of why we do this. Let's document this decision.

kkosiorowska · 2024-04-05T12:49:24Z

dapp/src/components/GlobalStyles/index.tsx

+        [data-id="slick-arrow-prev"]:disabled:has(~ [data-id="slick-arrow-next"]:disabled),
+        [data-id="slick-arrow-prev"]:disabled ~ [data-id="slick-arrow-next"]:disabled{
+          display: none;
+        }


I think we should not do it in global styles but in the code related to this carousel. But we can leave it that way now and move it in the future if needed.

We probably won't change it also for other carousel components if appears. I added a comment to this style when was created:

// React-slick package: Hiding arrows instead of disabling them in case // when carousel is not fully completed by slides.

dapp/src/hooks/useActivities.ts

kkosiorowska · 2024-04-05T13:07:04Z

dapp/src/pages/OverviewPage/index.tsx

+      <Grid
+        templateAreas={'"activity-carousel activity-carousel docs-card"'}
+        gridTemplateColumns="1fr 1fr auto"
+      >


As I mentioned in another commenter, we can move the spacing between elements to a higher component.

Suggested change

>

pb={6}

>

#287 (comment)

dapp/src/pages/OverviewPage/index.tsx

kkosiorowska · 2024-04-09T09:26:28Z

dapp/src/components/shared/Carousel.tsx

+    <Flex
+      as={Slider}
+      ref={ref}
+      // overflow="hidden" is required to hide the items outside the viewport.


Non-blocking comment

I suggested adding a comment but I meant more to point out that the addition of this line is the result of not including external styles.

kkosiorowska · 2024-04-09T09:32:59Z

dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarouselArrows.tsx

Non-blocking comment

I'm confused but it seems to me that we shouldn't call the file that. The file name indicates the name of the exported component. But there is no such component in reality.

kkosiorowska · 2024-04-09T09:57:27Z

dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx

+        overflow="hidden"
+        ref={carouselRef}
+        pl={2}
+        ml={-2}
+        overflowX="hidden"
+        pb={6}


Thanks for the explanation, now I understand. Regarding the bottom padding, I would consider simply setting the right height of the component. It seems more intuitive to me to fit the right height content into a component than to use padding. But I leave it up to you.

kkosiorowska

I left minor non-blocking comments.

Based on the fact that design will change a bit soon, let's not focus so much on the visual layer.

ioay force-pushed the carousel-component-activities branch 14 times, most recently from dda8a04 to e174e27 Compare March 4, 2024 10:45

ioay self-assigned this Mar 4, 2024

ioay force-pushed the carousel-component-activities branch 4 times, most recently from 50df52a to 5044090 Compare March 4, 2024 16:36

Activities bar - added carousel

389b9e2

ioay force-pushed the carousel-component-activities branch from 7a5df5f to 389b9e2 Compare March 4, 2024 16:50

ioay marked this pull request as ready for review March 4, 2024 17:08

ioay requested a review from kkosiorowska March 4, 2024 17:08

Merge branch 'main' into carousel-component-activities

c7e0dfc

ioay force-pushed the carousel-component-activities branch from f86bc1d to c7e0dfc Compare March 8, 2024 10:57

r-czajkowski reviewed Mar 13, 2024

View reviewed changes

ioay added 3 commits March 13, 2024 12:55

Added ArrowUpRightAnimatedIcon component

401f253

Added chakraSpacingUnit

f1218a7

Styles improvements

7344c8b

ioay force-pushed the carousel-component-activities branch from e0c9ce4 to 61c0943 Compare March 21, 2024 22:33

kkosiorowska reviewed Mar 22, 2024

View reviewed changes

ioay added 3 commits March 22, 2024 20:25

Moving logic related to activities to useActivities hook

cea8744

Carousel arrow rendering (mapping)

ae675fd

Reduce width of gradient under Documentation Card

ebb5f11

ioay requested a review from kkosiorowska March 25, 2024 08:30

kkosiorowska reviewed Apr 3, 2024

View reviewed changes

dapp/src/pages/OverviewPage/DocsCard.tsx Outdated Show resolved Hide resolved

dapp/src/pages/ActivityPage/index.tsx Outdated Show resolved Hide resolved

Docs card minor change, rename settings file

40e709a

ioay requested a review from kkosiorowska April 3, 2024 16:59

nkuba added the 🎨 dApp dApp label Apr 4, 2024

Merge branch 'main' into carousel-component-activities

e870660

kkosiorowska reviewed Apr 5, 2024

View reviewed changes

ioay added 2 commits April 8, 2024 09:29

Styles update & added useCallback to useActivity hook

eae0720

Moved carosuel settings directly to carousel component

3b5aea0

ioay force-pushed the carousel-component-activities branch from 125234e to 3b5aea0 Compare April 8, 2024 07:45

ioay requested a review from kkosiorowska April 8, 2024 07:48

kkosiorowska reviewed Apr 9, 2024

View reviewed changes

kkosiorowska previously approved these changes Apr 9, 2024

View reviewed changes

Merge branch 'main' into carousel-component-activities

a6ba5d6

ioay dismissed kkosiorowska’s stale review via a6ba5d6 April 9, 2024 13:37

ioay enabled auto-merge April 9, 2024 13:41

ioay requested a review from kkosiorowska April 9, 2024 13:41

kkosiorowska approved these changes Apr 9, 2024

View reviewed changes

ioay merged commit bd4f25f into main Apr 9, 2024
24 checks passed

ioay deleted the carousel-component-activities branch April 9, 2024 13:48

pdyraga unassigned ioay Apr 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Activities bar - added carousel #287

Activities bar - added carousel #287

ioay commented Mar 3, 2024 •

edited

Loading

netlify bot commented Mar 3, 2024 •

edited

Loading

r-czajkowski Mar 13, 2024

ioay Mar 14, 2024 •

edited

Loading

r-czajkowski Mar 13, 2024

kkosiorowska left a comment

kkosiorowska Mar 22, 2024

ioay Mar 25, 2024 •

edited

Loading

kkosiorowska Apr 5, 2024

ioay commented Mar 22, 2024 •

edited

Loading

SorinQ commented Mar 22, 2024

ioay commented Mar 22, 2024 •

edited

Loading

kkosiorowska Apr 5, 2024

ioay Apr 8, 2024 •

edited

Loading

kkosiorowska Apr 9, 2024

kkosiorowska Apr 5, 2024

kkosiorowska Apr 5, 2024

ioay Apr 8, 2024

kkosiorowska Apr 5, 2024

ioay Apr 8, 2024

kkosiorowska Apr 9, 2024

kkosiorowska Apr 9, 2024

kkosiorowska Apr 9, 2024

kkosiorowska left a comment

Activities bar - added carousel #287

Activities bar - added carousel #287

Conversation

ioay commented Mar 3, 2024 • edited Loading

Implement a carousel component

What was done:

Preview:

Additional info:

netlify bot commented Mar 3, 2024 • edited Loading

✅ Deploy Preview for acre-dapp-testnet ready!

Choose a reason for hiding this comment

ioay Mar 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kkosiorowska left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ioay Mar 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ioay commented Mar 22, 2024 • edited Loading

SorinQ commented Mar 22, 2024

ioay commented Mar 22, 2024 • edited Loading

Choose a reason for hiding this comment

ioay Apr 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kkosiorowska left a comment

Choose a reason for hiding this comment

ioay commented Mar 3, 2024 •

edited

Loading

netlify bot commented Mar 3, 2024 •

edited

Loading

ioay Mar 14, 2024 •

edited

Loading

ioay Mar 25, 2024 •

edited

Loading

ioay commented Mar 22, 2024 •

edited

Loading

ioay commented Mar 22, 2024 •

edited

Loading

ioay Apr 8, 2024 •

edited

Loading