Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: login and register page responsive #201

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

pankajsahu221
Copy link

@pankajsahu221 pankajsahu221 commented May 7, 2022

Description

Login and Register page UI is made responsive for all devices. It used to get unresponsive for tablet and mobile devices, Made both pages fully responsive.

Fixes #105

Type of Change:

  • Code
  • User Interface

Code/Quality Assurance Only

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Resize the screen size to see the responsiveness of the pages.

anitab-mob
anitab-mob2

Checklist:

  • My PR follows the style guidelines of this project
  • I have performed a self-review of my own code or materials
  • I have commented my code or provided relevant documentation, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • Any dependent changes have been merged

Code/Quality Assurance Only

  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been published in downstream modules

Additional Context

I used React-bootstrap containers and their classes for the login and register page container and to make it responsive for all devices. Any suggestions are welcome.

login and register page is made responsive for all devices
@pankajsahu221
Copy link
Author

@codesankalp please have a look at this pull request.

Comment on lines +10 to +16
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pankajsahu221 Why are you adding bootstrap 5 css link here? If you want to use bootstrap 5 then install it using npm and import it in the component.
Also see my below comment related to semantic-ui, I think we don't need to use react-bootstrap here.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I'll fix that.

Button,
} from 'semantic-ui-react';
import { Form, Image, Divider, Icon, Message, Button } from 'semantic-ui-react';
import { Container } from 'react-bootstrap';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have imported here { Container } from 'react-bootstrap' but react-bootstrap is not in package.json. It is not compiling locally.
Also container is present in semantic-ui: https://react.semantic-ui.com/elements/container/

Copy link
Author

@pankajsahu221 pankajsahu221 May 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I haven't used semantic-ui, So let me see how responsive containers work in semantic-ui. @codesankalp can I use bootstrap classes to make containers responsive?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: Login and sign up page get compress in different resolution
2 participants