Coding: Develop Ways to Contribute Section of Contribute Page

[Sonal240]

Description

As a user, I need the following section of the mockup to be developed, so that I can add it as Ways To Contribute Component here.

Mocks

(Only the section in the red box to be developed)

Font Size for headings: Header Medium(32pt) weight- Medium Font Size for the description below: body 18pt weight- Light Font Style- Avenir Font Color (heading): #103B81 Font Color (Body): #103B81

Margins given for Code section should be implemented for all other sections too,

Design Link For Development

Acceptance Criteria

Update [Required]

• [ ] Follows all the design guidelines as mentioned and is responsive enough on large screen devices.
• [ ] When a user clicks on #Lorem text field of a particular section(i.e code, design, etc) they should be redirected to respective zulip channels kindly go through this doc to see all channels.

Definition of Done

• [ ] All of the required items are completed.
• [ ] Approval by 1 mentor.

Estimation

3-5 hours

[sakshi1499]

Looks good to me @Sonal240

[sakshi1499]

You can go ahead and tag the coding team :)

[Sonal240]

@anitab-org/coding-team kindly take up this issue

[Sonal240]

This issue is open for all

[husainattar]

Hi @Sonal240 for developing the given section from contribute page do we require the knowledge of React native or Vanilla Js is enough?

[Sonal240]

react native @husainattar

[husainattar]

So I want to work on this section but I am beginner to React-Native. So can I take a little more time to develop than the required estimation time? @Sonal240

[Sonal240]

@husainattar I've updated the issue kindly have a look and make necessary changes in the code thanks

[Sonal240]

@husainattar how is it going? May you please submit a pr if you are done...thanks

[husainattar]

Hi @Sonal240 I have done the work just working on responsiveness and I will create a PR within 1-2days. I am grateful to you for providing me with plenty of time to complete and learn. Thank you.

[abha224]

@husainattar Hi! Can you pls give us an update on your progress?

[husainattar]

Hi @abha224 actually my code is complete but I am having a problem with responsiveness it's not working as wanted in the smaller screens so I am actually working on it and create a PR .

[nandini45]

@husainattar do you need any sort of help from us to help you on the issue?

[Sonal240]

@husainattar can you share a screenshot of the work that you have done so far..both responsive and for large screen sizes...if you are familiar with bootstrap grid system...this link might help... Consider image and description as 2 columns of a row...maybe similar to task 2 of this link

[husainattar]

yes @Sonal240 @nandini45 ma'am I would be sharing the screenshots of the work. Actually I am having a problem when I am viewing the page on a small screen. Sure I would try to use the above suggestion.

[nandini45]

@husainattar i am also a student like you.. so no maam please and take your time doing the work just keep us updated in case you need any help anything

[husainattar]

Hi @nandini45 ma'am I have done the design but now I am working on responsiveness and getting some difficulties in getting the accepted result.

[nandini45]

ok @husainattar any question which we can answer to help you out? feel free to ask

[nandini45]

@husainattar any updates?

[husainattar]

Hi @nandini45 sorry for late reply . Actually I still haven't figure out how to make images and content responsiveness. I tried Flex and grid and also applied the given measurements but its not working properly. Otherwise the designing and other logic is complete it's just the responsive part which is blocking .

[husainattar]

I am really very sorry for wasting so much time on this . I can give you final updates by end of this week if you want ?

[nandini45]

ok sure no issue. just try and update till the end of the week,

and i think you can do one thing that make a PR with whatever work you have done maybe the person reviewing can help you, upto you. just my suggestions thanks for the update @husainattar

[nandini45]

@husainattar will you update us with your work?

[nandini45]

@husainattar i am unassigning you now it has been over a month . thanks for the contribution.

[tichnas]

Hi, I would love to work on this. Can I please be assigned?

[tichnas]

@Sonal240 This is my progress so far: https://pasteboard.co/Js97yhN.png I made one assumption that there is a gap of 16pt between paragraphs.

I tried my best to replicate the design given, but please let me know if there can be improvements.

Now, where should I get the real data and images? What I understood so far from the doc given (https://docs.google.com/document/d/1bt1Dfi_LK8-IDOX-vxgc_PT-CGP4sWhSI5TT4amtLMY/edit#) is that the headings are like Project Managers/Product Managers, Coding (Developers), etc. and the description should be the Role Description. Am I assuming things correctly?

Also, the link gives edit access to everyone which I think should be changed :sweat_smile:

[Sonal240]

LGTM so far.. And don't worry about the content... Issue for it is under progress May you share the screenshot of responsive view as well

[tichnas]

Ok, Thanks :smiley:

The breakpoint of the design is 400pt (~778px in my case). Just before the breakpoint: https://pasteboard.co/Jse3Nbs.png Just after the breakpoint: https://pasteboard.co/Jse4ohP.png For even more smaller screens (~377px, design similar to last one): https://pasteboard.co/Jse5gEk.png After this, the design starts breaking because we have fixed sized image and it starts to overflow (though, this is unnoticeable in this image).

[Sonal240]

Replace the dummy image with the images mentioned in the issue and share the updated one here

[Sonal240]

See the design link for development