responsiveness of calendar component

[atherdon]

Check how this calendar adapt to a different screen sizes and tell what do you think we should do.

[sanchit94]

@atherdon Okay so it is just shrinking in size as screen size becomes smaller, so no responsive behavior there. What we can do here is as screen size becomes less than 576px, we can change the calender into a list, like a uland add days like li

[sanchit94]

@atherdon How do you suggest we do make this responsive.

[sanchit94]

I have two ways in mind, either I can use media queries and change display property of each block, or we can use states. The idea is to change the state when screen size is smaller than 576px using an eventListener. Which one should I use? Or do you have some better style of doing this?

[atherdon]

I was thinking about this

• we have 1 component that related to designed calendar. and it's works fine. and i want to keep it.
• we'll create a separated component-clone where we'll try to apply our changes. without worries that we'll broke a component1. And i was thinking about trying to update some blocks to bootstrap4 elements. as bootstrap have a lot of stuff in-box - we'll be able to less worry about different ways and just focus on coding.

tell me what do you think

[sanchit94]

Yes, we can surely use bootstrap component, it will help us concentrate on core coding, so I'm with that option.

[sanchit94]

But still we need some way to write media queries to change the view from whole calender to a list type as screen size changes.

[atherdon]

sure, but with basic logic from bootstrap it'll be less painful ;)

[sanchit94]

Okay check this out can we implement this here: http://www.davidboyne.co.uk/2016/11/07/building-a-media-query-component-in-react.html

[atherdon]

there some reasons why React didn't implement media queries...

[sanchit94]

Okay can you explain?

[sanchit94]

Hello @atherdon I have been working on this one, and I am kinda confused. I tried making it look the way it looks in the template(for mobile view), but then I realized that it was just a horrible way to make it responsive. It is just not customer centric, so I decided to explore more possibilities. I searched around the internet for such templates, but I did not find anything much different. Then this idea struck me, I think what we can do here is make something like a round clock, where each activity can be scaled and shown according to the time. I know we will need two of those circles for 24 hours as a circle(or a clock you may say) will cover only 12 hours. What do you say? (P.S. This idea just popped out of my head so I wanted to share this with you and have another person's perspective over it.)

[atherdon]

not sure if people will get idea with a clock from start. Keep in mind that our main idea of having calendar related to meal planning. So maybe(not sure right now) - we'll have only one cell, related to each days, like at calendar that you did. but again, this is not clear. You can see, how google calendar implemented at material design approach

[sanchit94]

Okay then I should try and make it something similar to this!

[atherdon]

let's pause this a bit, ok? we have a lot of small tasks, that can be easy done, maybe le'ts close them first, huh?

On 13-Jul-2018 at 04:56 PM, Sanchit Sharma wrote:

Okay then I should try and make it something similar to this!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GroceriStar/react-only-intern-23/issues/18#issuecomment-404891580, or mute the thread https://github.com/notifications/unsubscribe-auth/ABZrDpqRTMO4DYedDShueQlvNNZDBUHxks5uGNEqgaJpZM4U06io .