Responsive design for Donut #641

lazycipher · 2020-10-05T12:25:37Z

This PR will solve the responsiveness of Donut for mobile.

lazycipher · 2020-10-05T14:30:35Z

Homepage gif:

vaibhavdaren · 2020-10-07T14:50:07Z

Nice progress, Looking forward to the completed pages 👍

lazycipher · 2020-10-08T16:35:39Z

Responsive Navbar on the dashboard.
Backdrop yet to be added.

src/user/auth/login-form/login-form.scss

vaibhavdaren · 2020-10-10T13:20:11Z

src/user/auth/login/login.js

+        <div className="container-wrapper">
+          <div className="section-home">
+          <div className="welcome-text">
+            <div className="logo">


add all these classes into 1 div

vaibhavdaren · 2020-10-10T13:22:19Z

src/user/auth/login/login.js

+              <DonutTitle />
+            </div>
+            <div className="tagline">
+              <h1>One place for meeting everyone.</h1>
+            </div>
+            <div className="description">
+              <p>
+                An Open Source Social networking bridge between Developers,
+                Organisations and Open Source aspirants
+              </p>
+            </div>
+            <div class="login-btn">
+              <a href="#login">
+                Sign In


find the proper way to do the same cc @ksraj123

@ksraj123, Whenever you're free, please let me know about how to proceed with this.

using anchor tags for links which do not take you to a different website is not a good practice, for the use case here I think you want the user to be redirected to a different section of the page when he clicks on Sign In, for that you many use react-router-hash-link Also please make sure that the scrolling is smooth

Apart from this, Please try to avoid unnecessarily nesting of HTML elements verbose markup should be avoided, provide meaningful names to classes look into BEM naming convention, these suggestions are applicable for not just this piece of code but across the project.

Okay, Sure thing! I'll follow this up and push the updated code.
But, I'm having issues in understanding how would I replace all divs with a single one?

src/utils/breakpoints.js

src/user/proposals/UserProposalDashboard/UserProposalDashboard.js

vaibhavdaren

Please catchup with @Rupeshiya @ksraj123 @AuraOfDivinity

lazycipher · 2020-10-11T13:53:29Z

The dashboard looks like this on Mobile Device as of now.

aayushgupta05

I don't have Donut setup on local; so hadn't looked at how everything fits together and usability. Rather did a code review.

Also, on a sidenote: Why are we not following bootstrap grid system more religiously but rather with a combination of flexboxes? Why do the hardwork? :p

aayushgupta05 · 2020-10-21T05:59:35Z

src/user/Activity/activityTimeline.scss

+}
+
+@media (min-width: 320px) and (max-width: 1024px){


Maybe we can extract these breakpoints too into variables

Alright! Sounds good actually! Will have to use mixins!

src/user/Activity/activityTimeline.scss

src/user/Activity/Activity.js

src/user/Activity/activityTimeline.scss

src/user/auth/login-form/login-form.scss

src/user/organization/organization.js

src/user/projects/projects.scss

src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss

src/user/proposals/UserProposalDashboard/UserProposalDashboard.scss

Rupeshiya · 2020-10-22T10:11:00Z

@jaskiratsingh2000 Did you suggested for round buttons again? Because we already converted the whole platform buttons to rectangular shape earlier?
#inconsistencies

lazycipher · 2020-10-22T10:12:55Z

@Rupeshiya, The design on Figma had this round buttons so I did that!
I'll rectify if that's the case!

jaskiratsingh2000 · 2020-10-22T10:13:13Z

Hi! I haven't suggested for the round button. Thanks

…

On Thu, 22 Oct 2020, 3:41 pm Rupesh Krishna Jha, ***@***.***> wrote: @jaskiratsingh2000 <https://github.com/jaskiratsingh2000> Did you suggested for round buttons again? Because we already converted the whole platform buttons to rectangular shape earlier? #inconsistencies — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#641 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACOBHK4SFEUMSJLYE2UA3IDSMAAMTANCNFSM4SETZJNA> .

Rupeshiya

Nice work @lazycipher !
Please have a look at the comments

src/user/Activity/Activity.js

src/user/Activity/Users.js

Rupeshiya

@lazycipher Looks good, but once discuss that implementation of responsiveness for different views using third-party.
If possible I would suggest using a media query for that. (Check Navigation component)
Thanks

lazycipher · 2020-10-23T13:19:28Z

@lazycipher Looks good, but once discuss that implementation of responsiveness for different views using third-party.
If possible I would suggest using a media query for that. (Check Navigation component)
Thanks

@Rupeshiya Thanks for reviewing. I'll use media queries in Navigation and will push code.

Rupeshiya

Nice work lazyCipher!!
Looks fine to me now.
Also, please try to reduce space in between tabs in mobile view

Make modals responsive too:

@ksraj123 If any improvement you want, please mention.

Rupeshiya · 2020-10-28T09:10:25Z

@jaskiratsingh2000 You can have a look the changes he made in the deploy version.
Here is the link: https://deploy-preview-641--friendly-sinoussi-3b191b.netlify.app/
Email: test3@gmail.com
Pass: abc123

cc @vaibhavdaren @AuraOfDivinity

lazycipher · 2020-10-28T09:52:13Z

@Rupeshiya, Modals are responsive already!
The thing is that when toggling between multiple resolutions on the browser, it shows such anomaly sometimes.
Else everything's fine.

lazycipher · 2020-10-29T06:21:38Z

@Rupeshiya, may we move ahead and merge this?

lazycipher added 2 commits October 5, 2020 17:44

responsive login/signup homepage for phones

85f3b8e

changed login/signup button styling

d383170

lazycipher marked this pull request as ready for review October 5, 2020 16:03

lazycipher mentioned this pull request Oct 7, 2020

[ENHANCEMENT] Dashboard navigation is not responsive. #642

Closed

navigation menu responsive

f36d90b

lazycipher added 2 commits October 10, 2020 15:17

added backdrop for navigation on mobile devices

57a8f43

Navigation is now a standalone component

e12d6e8

vaibhavdaren reviewed Oct 10, 2020

View reviewed changes

src/user/auth/login-form/login-form.scss Outdated Show resolved Hide resolved

vaibhavdaren reviewed Oct 10, 2020

View reviewed changes

src/utils/breakpoints.js Outdated Show resolved Hide resolved

vaibhavdaren reviewed Oct 10, 2020

View reviewed changes

src/user/proposals/UserProposalDashboard/UserProposalDashboard.js Outdated Show resolved Hide resolved

vaibhavdaren requested changes Oct 10, 2020

View reviewed changes

lazycipher added 3 commits October 10, 2020 19:41

made changes as per review on PR#641

f7cfb2d

used const in breakpoints and _ in css class naming convention

1b7ebb1

Mobile Responsive Dashboard

405dde6

lazycipher added 7 commits October 12, 2020 13:28

removed unnecessary container causing issues

62759be

remove extra padding from tabs

220d0fd

post remove extra padding for visible buttons

da6814c

Fix for Tablet version

f98e2ee

organization page responsive

5b8ced3

used HashLink for id navigation to login and make it smooth

d83bb06

login page UI fix for Tablet

f06f814

This was referenced Oct 15, 2020

[ENHANCEMENT] Organization Profile not responsive #646

Closed

[ENHANCEMENT] Events Page Not Responsive #647

Closed

Responsiveness Fix Events Page

0ae8491

aayushgupta05 suggested changes Oct 21, 2020

View reviewed changes

lazycipher added 2 commits October 21, 2020 17:09

Changes as peer per review

a117602

navigation unnecessary div removed

d363e93

Rupeshiya requested changes Oct 22, 2020

View reviewed changes

src/user/Activity/Activity.js Outdated Show resolved Hide resolved

src/user/Activity/Users.js Outdated Show resolved Hide resolved

lazycipher added 2 commits October 22, 2020 16:40

changed circular buttons to rect ones

79bd26d

added default value 0 to pagination item length

a8ee953

lazycipher requested a review from Rupeshiya October 22, 2020 12:48

Rupeshiya reviewed Oct 23, 2020

View reviewed changes

lazycipher added 4 commits October 26, 2020 16:03

navigation using media queries

f8401e2

activity using media queries

50f63a1

community setting using media queries

161d2ab

user account settings using media queries

ca3b9fe

vaibhavdaren requested a review from Rupeshiya October 27, 2020 17:04

removed dependency from 'react-responsive'.

e0a7417

lazycipher mentioned this pull request Oct 28, 2020

Remove dependency from 'react-responsive' #654

Closed

Rupeshiya approved these changes Oct 28, 2020

View reviewed changes

filter and ticket action responsive

9f1b33c

vaibhavdaren merged commit d5407e4 into codeuino:development Oct 29, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive design for Donut #641

Responsive design for Donut #641

lazycipher commented Oct 5, 2020 •

edited

lazycipher commented Oct 5, 2020

vaibhavdaren commented Oct 7, 2020

lazycipher commented Oct 8, 2020

vaibhavdaren Oct 10, 2020

vaibhavdaren Oct 10, 2020

lazycipher Oct 11, 2020

ksraj123 Oct 12, 2020 •

edited

lazycipher Oct 12, 2020

vaibhavdaren left a comment

lazycipher commented Oct 11, 2020 •

edited

aayushgupta05 left a comment

aayushgupta05 Oct 21, 2020

lazycipher Oct 21, 2020

Rupeshiya commented Oct 22, 2020

lazycipher commented Oct 22, 2020 •

edited

jaskiratsingh2000 commented Oct 22, 2020 via email

Rupeshiya left a comment

Rupeshiya left a comment

lazycipher commented Oct 23, 2020

Rupeshiya left a comment •

edited

Rupeshiya commented Oct 28, 2020 •

edited

lazycipher commented Oct 28, 2020

lazycipher commented Oct 29, 2020

Responsive design for Donut #641

Responsive design for Donut #641

Conversation

lazycipher commented Oct 5, 2020 • edited

lazycipher commented Oct 5, 2020

vaibhavdaren commented Oct 7, 2020

lazycipher commented Oct 8, 2020

vaibhavdaren Oct 10, 2020

Choose a reason for hiding this comment

vaibhavdaren Oct 10, 2020

Choose a reason for hiding this comment

lazycipher Oct 11, 2020

Choose a reason for hiding this comment

ksraj123 Oct 12, 2020 • edited

Choose a reason for hiding this comment

lazycipher Oct 12, 2020

Choose a reason for hiding this comment

vaibhavdaren left a comment

Choose a reason for hiding this comment

lazycipher commented Oct 11, 2020 • edited

aayushgupta05 left a comment

Choose a reason for hiding this comment

aayushgupta05 Oct 21, 2020

Choose a reason for hiding this comment

lazycipher Oct 21, 2020

Choose a reason for hiding this comment

Rupeshiya commented Oct 22, 2020

lazycipher commented Oct 22, 2020 • edited

jaskiratsingh2000 commented Oct 22, 2020 via email

Rupeshiya left a comment

Choose a reason for hiding this comment

Rupeshiya left a comment

Choose a reason for hiding this comment

lazycipher commented Oct 23, 2020

Rupeshiya left a comment • edited

Choose a reason for hiding this comment

Rupeshiya commented Oct 28, 2020 • edited

lazycipher commented Oct 28, 2020

lazycipher commented Oct 29, 2020

lazycipher commented Oct 5, 2020 •

edited

ksraj123 Oct 12, 2020 •

edited

lazycipher commented Oct 11, 2020 •

edited

lazycipher commented Oct 22, 2020 •

edited

Rupeshiya left a comment •

edited

Rupeshiya commented Oct 28, 2020 •

edited