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

Merged
merged 14 commits into from
Jan 2, 2020
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
793865f
fix : making table responsive with ticket details
maze-runnar Oct 30, 2019
4975b46
making segment compact for mobile
maze-runnar Oct 30, 2019
5b537d1
Merge branch 'development' into patch-5
maze-runnar Nov 3, 2019
6e7543b
Merge branch 'development' into patch-5
maze-runnar Nov 18, 2019
fa31baf
adding x-scrollable to ticket table segment
maze-runnar Nov 24, 2019
8f87ef2
Merge branch 'development' into patch-5
maze-runnar Nov 24, 2019
c714902
removing "if device.isMobile" .
maze-runnar Nov 24, 2019
e4171e2
removing price icon from the price table heading
maze-runnar Nov 24, 2019
805bf74
Update index.hbs
maze-runnar Dec 22, 2019
7110afa
Update index.hbs
maze-runnar Dec 22, 2019
a0ac3c2
Merge branch 'development' into patch-5
maze-runnar Dec 22, 2019
3bda14d
fix build
maze-runnar Dec 22, 2019
c6c59dc
Merge branch 'development' into patch-5
maze-runnar Dec 28, 2019
85f6b6b
Merge branch 'development' into patch-5
abhinavk96 Jan 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/templates/components/public/ticket-list.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

@kushthedude kushthedude Oct 30, 2019

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

@maze-runnar maze-runnar Oct 30, 2019

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

@kushthedude kushthedude Nov 3, 2019

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

@maze-runnar maze-runnar Nov 3, 2019

Choose a reason for hiding this comment

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

ok

<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

@kushthedude kushthedude Oct 30, 2019

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

@maze-runnar maze-runnar Oct 30, 2019

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

@kushthedude kushthedude Oct 30, 2019

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

@kushthedude kushthedude Oct 30, 2019

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

@maze-runnar maze-runnar Oct 30, 2019

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.

<th class="one wide">{{t 'Quantity'}}</th>
<th class="ui right aligned two wide">{{t 'Subtotal'}}</th>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion app/templates/public/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{{/if}}
{{#if (or model.event.ticketUrl model.tickets)}}
<div class="tickets" id="tickets">
<div class="ui segments ticket-list">
<div class="ui {{if device.isMobile 'compact'}} segments ticket-list">
<div class="ui segment">
<h3 class="ui header">{{t 'Tickets'}}</h3>
</div>
Expand Down