[UI] Implement the Use cases page about layer5 HOT 18 OPEN

Hey, @ritiksaxena124 as discussed in yesterday's meeting, I think I should be using an already existing card. Lee gave two for reference:

• https://layer5.io/learn/service-mesh-workshops
• https://layer5.io/community/events

Which one should we implement ( I find the workshop one to be better as we don't have any external link to follow up to) Just an idea; But I wanted to point out one major thing about the cards used in the workshops page, its "Read More" button is just annoying I think, It messes with the layout of the complete page and we already have individual pages for it so I think the open in window should be re-labeled as the new Read More and we should get rid of the "Read More" which opens it up in the same page.

So what's your say in this and how should we proceed with the issue further?

@Akshun-01, We can use the same card that we have on the workshops page and instead of relabelling the window icon keep it as it is, no need to change that and yes you are right we can hide the "Read More" which opens it up on the same page as the pages that we have are very long and will mess up the page layout (*only for the use cases page).

@Rexford74 this page is different from the Solutions page. How? This page is like a grid view you see on shopping sites where they show grids of cards for products, in our case we will be listing features and the solutions page is a dedicated page that talks about the pain points and their solution.

from layer5.

@Akshun-01 would you please make a discuss forum post about the help you need and the bug?

from layer5.

Hey @ritiksaxena124, what all content are you planning to include on this page? Can I get some ideas, to draft a prototype?

from layer5.

@ritiksaxena124 i would like to work on this.

from layer5.

i would like to work on this

from layer5.

Thank you @Akshun-01 @balagowda @saikiranpatil for your interest in this issue. We have a rule to assign issues on first come first serve basis but that doesn't stop you from contributing. We have many issues that need attention, you can grab anyone of those.
@Akshun-01 we already have a mockup for that page but we need a contributor to implement it so if you are up for implementation then let's get you assigned.

from layer5.

@ritiksaxena124, yeah sure! Would be my pleasure to help^^

from layer5.

Hey @ritiksaxena124, where can i access the mockup from?

from layer5.

Any update @Akshun-01?

from layer5.

Any update @Akshun-01?

I have started working on the page, I'll give an update by tomorrow!

from layer5.

Hey @ritiksaxena124, here is the update for the use case page

from layer5.

Hey, @ritiksaxena124 as discussed in yesterday's meeting, I think I should be using an already existing card.
Lee gave two for reference:

• https://layer5.io/learn/service-mesh-workshops
• https://layer5.io/community/events

Which one should we implement ( I find the workshop one to be better as we don't have any external link to follow up to)
Just an idea;
But I wanted to point out one major thing about the cards used in the workshops page, its "Read More" button is just annoying I think, It messes with the layout of the complete page and we already have individual pages for it so I think the open in window should be re-labeled as the new Read More and we should get rid of the "Read More" which opens it up in the same page.

So what's your say in this and how should we proceed with the issue further?

from layer5.

Hey @ritiksaxena124, please I'm curious. Is this not the same with the solutions page that was designed a while back? Do correct me if I'm wrong...

from layer5.

Hey @ritiksaxena124, the data in workshop's card is being fed as follows:

Could you please guide me, how should I implement this?

from layer5.

Hey @ritiksaxena124,
I reused the Workshop Card as was discussed earlier.
Actually, in its original implementation, it used GraphQL to retrieve data and its structure was pretty complicated.
So I made a local object matching the fields that were required.
But the publicURL field is not accepting either URL or local image location, so I am struggling to make that work.

Other than that, it is pretty much complete, but I had to remove most of the part( as it was related to the "learn more" button).
UseCases Page Implentation

This is how it is looking (already mentioned about the image bug). I'll make a draft pr for you to see the code too!^^

from layer5.

@ritiksaxena124 @vishalvivekm
Hey, can anyone help with the image bug please!

from layer5.

Hey @saurabh100ni, really sorry for the late reply.
I created a post regarding the same. Thanks for this!

here is the link to it : https://discuss.layer5.io/t/help-needed-integrating-data-using-graphql-for-use-cases-page/4574

from layer5.

@Akshun-01 take a look at the PR,#5235 I've added commit which dynamically fetches data using query.

from layer5.