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: Ticket dashboard table css overflow on small screens #3593

Merged
merged 3 commits into from
Nov 8, 2019

Conversation

snitin315
Copy link
Member

@snitin315 snitin315 commented Nov 3, 2019

Fixes #3589 #3605

Short description of what this resolves:

fixes the ticket dashboard Table CSS Overflow on Small Device Screens.
issuebug

Also fixes the manage events dashboard search-box overflow on small screen devices :
Screenshot from 2019-11-05 20-11-08

Changes proposed in this pull request:

I have fixed it by setting the css overflow property to scroll.

Screenshot from 2019-11-03 22-07-53

Screenshot from 2019-11-03 22-07-59

Screenshot from 2019-11-07 21-23-37

Checklist

  • I have read the Contribution & Best practices Guide.
  • My branch is up-to-date with the Upstream development branch.
  • The acceptance, integration, unit tests and linter pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)

@auto-label auto-label bot added the fix label Nov 3, 2019
@kushthedude
Copy link
Member

Can you provide a GIF for the same, Its difficult to understand this change from the SS ?

@snitin315
Copy link
Member Author

@kushthedude here is the gif :
overflow

@kushthedude
Copy link
Member

@kushthedude here is the gif :
overflow

Use properties x-scrollable, defined in utils.

@snitin315
Copy link
Member Author

Use properties x-scrollable, defined in utils.
@kushthedude Done . please review

<div class="ui header">
{{t 'Order Summary'}}
<span class="sub header">
{{t 'By order status'}}
</span>
</div>

Copy link
Member

Choose a reason for hiding this comment

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

Remove it

Copy link
Member Author

@snitin315 snitin315 Nov 5, 2019

Choose a reason for hiding this comment

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

the whole div ?

Copy link
Member

Choose a reason for hiding this comment

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

the extra line

<div class="row">
<table class="ui stackable celled unstackable table">
<div class="row x-scrollable">
<table class="ui stackable celled unstackable table" >
Copy link
Member

Choose a reason for hiding this comment

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

no need for extra space in here

@snitin315
Copy link
Member Author

@kushthedude fixed #3605 in this PR as well. below is the corresponding screenshot.Please review

Screenshot from 2019-11-07 21-23-37

@snitin315 snitin315 requested a review from kushthedude November 7, 2019 16:05
@iamareebjamal iamareebjamal merged commit c0f6132 into fossasia:development Nov 8, 2019
@mariobehling
Copy link
Member

Thanks a lot for this PR. Please help to get some important issues out of the way in this project. We have labeled these issues here: https://github.com/fossasia/open-event-frontend/issues?q=is%3Aissue+is%3Aopen+label%3A%22Priority%3A+High%22 Our goal is to focus on these issues.

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

Successfully merging this pull request may close these issues.

Ticket Dashboard: Table CSS Overflow on Small Device Screens
4 participants