JagratiWebApp icon indicating copy to clipboard operation
JagratiWebApp copied to clipboard

Removed br tags

Open tanishq-arya opened this issue 3 years ago • 15 comments

Related Issue

Fixes: #231

Prosposed Changes

-Removed
tags

  • Added margin and padding to the section element.
  • Added a section around initiatives

Additional Info

  • any additional information or context

Screenshots

Original Updated
** original screenshot ** ** updated screenshot **

tanishq-arya avatar Apr 13 '21 07:04 tanishq-arya

Working on the changes. But I think this CSS is more useful than bootstrap as some classes might cause the view to change like the extra spaces.

tanishq-arya avatar Apr 15 '21 08:04 tanishq-arya

Working on the changes. But I think this CSS is more useful than bootstrap as some classes might cause the view to change like the extra spaces.

You can always achieve the required spacing by using some combination of margins and paddings. Anyways, there's no hard and fast rule of keeping the spacing at the current values only (which are quite inconsistent), instead using some consistent margins for all the sections will be better.

Also, the main motive of using CSS frameworks like bootstrap is that we need to write as less custom CSS as possible, so if it can be done using Bootstrap, it should be done using Bootstrap.

garg3133 avatar Apr 15 '21 11:04 garg3133

I removed the excess css and added 2 classes to donate us section for margin and padding. If there are any other changes required please let me know.

tanishq-arya avatar Apr 16 '21 05:04 tanishq-arya

Will push requested changes soon.

tanishq-arya avatar Apr 17 '21 12:04 tanishq-arya

@tanishq-arya You've removed most of the br tags, but haven't replaced them with appropriate margins due to which the structure of some sections is breaking. Kindly add appropriate margins (using bootstrap's margin classes) to these sections.

One more thing to take care is that the links in the navbar (About and Contact) should take the user at the appropriate position. Currently, the heading of the section gets covered by navbar on clicking those links.

I found a solution for the overlapping it was implemented already using the ::before for about us and contact us I increased the size and margin to 65px which is more than nav 63px.

tanishq-arya avatar Apr 19 '21 17:04 tanishq-arya

Also I was thinking in mobile view the contact us forms should have some spacing between them should I make a new issue for that ?

tanishq-arya avatar Apr 20 '21 13:04 tanishq-arya

I have my end-sem examinations coming up in a few days and the due dates for all my assignments and projects are also approaching, so I may not be active in reviewing PRs for a few days.

No issues. All the best

tanishq-arya avatar Apr 20 '21 14:04 tanishq-arya

The spacing of different sections is very inconsistent. Like About Us section has too much space above but very less space (padding) at the bottom of the section. Initiative section hardly has any space at the bottom and then the Donate Us section has too much space at the top.

Also the animations are not working properly on small screen (see animation of Welcome to Jagrati part for instance on a mobile phone, it does not appear in the first frame).

I think there were changes after this too. I'll update the PR.

tanishq-arya avatar May 24 '21 12:05 tanishq-arya

@garg3133 I found what happened. Earlier the nav was fixed on top so everything was hidden below it. Now the nav collapses so space is left. I'll fix and update the PR.

tanishq-arya avatar May 24 '21 16:05 tanishq-arya

@garg3133 Can you check now? And I didn't understand about the animation. I didn't change anything related to the animations.

tanishq-arya avatar May 24 '21 17:05 tanishq-arya

I did that because there was different content in each.

So now I should make all the sections my-3 py-4 ?

I'll remove the donate section
's too.

tanishq-arya avatar May 25 '21 17:05 tanishq-arya

I did that because there was different content in each.

So now I should make all the sections my-3 py-4 ?

I'll remove the donate section 's too.

@garg3133 any update on this ? What should I do ?

tanishq-arya avatar May 31 '21 16:05 tanishq-arya

So now I should make all the sections my-3 py-4 ?

I think just the padding should be fine in most cases. You can add the margins if required.

garg3133 avatar May 31 '21 19:05 garg3133

@garg3133 I have added my-3, py-4 to all sections. Also I have added mx-auto to keep every section aligned in center.

tanishq-arya avatar Jun 01 '21 06:06 tanishq-arya

Can you take a look at PR #277 it was a small padding fix, and the forms look much better. I have added the screenshots too.

tanishq-arya avatar Jun 01 '21 06:06 tanishq-arya