Skip to content

fix: making table with ticket details compatible with phone #3583

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 14 commits into from
Jan 2, 2020
Merged

fix: making table with ticket details compatible with phone #3583

merged 14 commits into from
Jan 2, 2020

Conversation

maze-runnar
Copy link
Contributor

@maze-runnar maze-runnar commented Oct 30, 2019 •
edited
Loading

Fixes #3511

issue it resolves

ticket detail table was not showing properly .

Changes proposed in this pull request:

  • making table with ticket details responsive with phone.
  • donation ticket is showing properly in mobile also .
  • making segment compact and table small for mobile to view properly .
    Screenshot from 2019-10-30 17-14-01
    Screenshot from 2019-10-30 17-14-06

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)

kushthedude
kushthedude reviewed Oct 30, 2019
View reviewed changes
app/templates/components/public/ticket-list.hbs Outdated
<thead class="full-width">
<tr>
<th>{{t 'Type'}}</th>
<th class="four wide">{{t 'Sales Ends'}}</th>
<th class="ui three wide">{{t 'Price'}}</th>
<th class="ui three wide single line">{{#if device.isMobile}}<i class="money bill alternate outline icon"></i>{{/if}}{{t 'Price'}}</th>
Copy link
Member

Choose a reason for hiding this comment

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

icon is not requires

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I added icon only in mobile view to give price column some more width to show donation ticket price input box correctly .

Copy link
Member

Choose a reason for hiding this comment

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

It looks odd

Copy link
Member

Choose a reason for hiding this comment

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

You can increase width if thats the issue

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I tried many ways but the table is under a segment so nothing is working for giving more width to that price column . that icon remove the requirement of an extra div may be. 🙂

Copy link
Contributor Author

@maze-runnar maze-runnar Oct 30, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

It looks odd

please suggest me any other way to fix it sir.

kushthedude
kushthedude reviewed Oct 30, 2019
View reviewed changes
app/templates/components/public/ticket-list.hbs Outdated
@@ -1,11 +1,11 @@
{{!-- Removed `Currency Symbol` helper from the `paymentCurrency` since some currency are not getting rendered. Hotfix until a permanent solution found --}}
<form class="ui form" {{action on='submit' preventDefault=true}}>
<table class="ui unstackable very basic compact table" style="margin-bottom: 0">
<table class="ui unstackable {{if device.isMobile 'small'}} very basic compact table" style="margin-bottom: 0">
Copy link
Member

Choose a reason for hiding this comment

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

Screenshot 2019-10-30 at 7 25 53 PM

Solve CSS Overflow

Copy link
Contributor Author

@maze-runnar maze-runnar Oct 30, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

sir it due to "ui segment" class and it is also exist before my implementation, in actual website.
Screenshot from 2019-10-30 20-16-02
It is visible fine in galaxy5, and pixel2 devices, but showing this overflow in very small devices .

Copy link
Contributor Author

Choose a reason for hiding this comment

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

please help me with this issue if there is any thing else

Copy link
Member

Choose a reason for hiding this comment

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

I will pull and check on local tonight.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ok

@kushthedude kushthedude requested review from kushthedude and removed request for kushthedude November 3, 2019 11:08
@snitin315 snitin315 mentioned this pull request Nov 12, 2019
Closed
snitin315
snitin315 reviewed Nov 18, 2019
View reviewed changes
Copy link
Member

@snitin315 snitin315 left a comment

Choose a reason for hiding this comment

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

how about making the table x-scrollable ?

@snitin315
Copy link
Member

change fix : fix: and update your branch as well.

@maze-runnar maze-runnar changed the title fix : making table with ticket details compatible with phone fix: making table with ticket details compatible with phone Nov 18, 2019
@auto-label auto-label bot added the fix label Nov 18, 2019
@maze-runnar
Copy link
Contributor Author

maze-runnar commented Nov 18, 2019 •
edited
Loading

@snitin315 x-scrollable is not making any difference -
Screenshot from 2019-11-18 20-45-40
"Donation ticket" price is not visible correctly .

@kushthedude
Copy link
Member

Please try to improve the responsiveness avoding device.* property, DOM Modifications are way costlier then CSS queries

@maze-runnar
Copy link
Contributor Author

working fine now with iphone5 too .:
Screenshot from 2019-11-24 14-29-55
Screenshot from 2019-11-24 14-29-58

@maze-runnar
Copy link
Contributor Author

proper space for donation tickets , and also remove {{if device.isMobile}} and icon .
Screenshot from 2019-11-24 15-12-53
Screenshot from 2019-11-24 15-17-47

@maze-runnar
Copy link
Contributor Author

Please try to improve the responsiveness avoding device.* property, DOM Modifications are way costlier then CSS queries

Done 😄 and thanks

@kushthedude
Copy link
Member

CSS

@maze-runnar Can you please update the screenshots and resolve the conflicts for the PR ?

@abhinavk96 abhinavk96 merged commit e8cb96b into fossasia:development Jan 2, 2020
@maze-runnar maze-runnar deleted the patch-5 branch January 12, 2020 11:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@snitin315 snitin315 snitin315 left review comments

@abhinavk96 abhinavk96 abhinavk96 approved these changes

@kushthedude kushthedude Awaiting requested review from kushthedude

Assignees
No one assigned
Labels
fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The table with ticket details is not responsive in phone.
4 participants
@maze-runnar @snitin315 @kushthedude @abhinavk96