fix: Less Table Space Consumption and Fixing Loose Tables on Small Screen (#3042)

* Fixing Irresponsive tables and Loose Headers

* Removing extra unstackable class

Author: kushthedude

app/templates/components/events/view/overview/event-tickets.hbs

@@ -3,7 +3,7 @@
 </div>
 <div class="content">
   <h4 class="ui header">{{t 'Summary'}}</h4>
-  <table class="ui very basic compact table">
+  <table class="ui very basic compact unstackable table">
     <tbody>
       <tr>
         <td>{{t 'Total tickets sold'}}</td>
@@ -20,7 +20,7 @@
     </tbody>
   </table>
   <h4 class="ui header">{{t 'Details'}}</h4>
-  <table class="ui very basic compact table">
+  <table class="ui very basic compact unstackable table">
     <thead>
       <tr>
         <th>{{t 'Type'}}</th>

app/templates/components/events/view/overview/manage-roles.hbs

@@ -6,8 +6,8 @@
   <button class="ui {{if (eq roleType 'accepted') 'active'}} button" {{action 'filter' 'accepted'}}>{{t 'Accepted'}}</button>
   <button class="ui {{if (eq roleType 'pending') 'active'}} button" {{action 'filter' 'pending'}}>{{t 'Invited'}}</button>
 </div>
-<div class="content">
-  <table class="ui very basic table">
+<div class="content x-scrollable">
+  <table class="ui very basic unstackable table">
     <thead>
       <tr>
         <th>{{t 'User(Email)'}}</th>

app/templates/events.hbs

@@ -18,7 +18,7 @@
       {{/tabbed-navigation}}
     </div>
   </div>
-  <div class="ui basic segment">
+  <div class="ui basic segment" style="padding-top: 0">
     {{outlet}}
   </div>
 {{else}}

app/templates/events/view/tickets/index.hbs

@@ -17,7 +17,7 @@
       {{t 'By order status'}}
     </span>
   </div>
-  <table class="ui stackable celled table">
+  <table class="ui stackable celled unstackable table">
     <thead>
       <tr>
         <th>{{t 'Order Status'}}</th>
@@ -120,38 +120,48 @@
   </table>
 </div>
 <br>
+
 <div class="row">
-  <table class="ui stackable structured celled table">
+  <table class="ui stackable celled unstackable table">
     <thead>
       <tr>
         <th rowspan="2" class="left aligned">{{t 'Ticket Type'}}</th>
         <th rowspan="2" class="left aligned">{{t 'Tickets Capacity Set'}}</th>
-        <th colspan="2" class="ui green inverted segment center aligned">{{t 'Completed Orders '}}</th>
-        <th colspan="2" class="ui blue inverted segment center aligned">{{t 'Placed Orders'}}</th>
-        <th colspan="2" class="ui yellow inverted segment center aligned">{{t 'Pending Orders '}}</th>
-      </tr>
-      <tr>
-        <th class="right aligned">{{t 'Tickets'}}</th>
-        <th class="right aligned">{{t 'Sales'}}</th>
-        <th class="right aligned">{{t 'Tickets'}}</th>
-        <th class="right aligned">{{t 'Sales'}}</th>
-        <th class="right aligned">{{t 'Tickets'}}</th>
-        <th class="right aligned">{{t 'Sales'}}</th>
+        <th colspan="{{if device.isMobile "1" "2"}}" class="ui green inverted segment center aligned">{{if device.isMobile 'Sales ' ''}}{{t 'Completed Orders '}}</th>
+        <th colspan="{{if device.isMobile "1" "2"}}" class="ui blue inverted segment center aligned">{{if device.isMobile 'Sales ' ''}}{{t 'Placed Orders'}}</th>
+        <th colspan="{{if device.isMobile "1" "2"}}" class="ui yellow inverted segment center aligned">{{if device.isMobile 'Sales ' ''}}{{t 'Pending Orders '}}</th>
       </tr>
+      {{#unless device.isMobile}}
+        <tr>
+          <th class="right aligned">{{t 'Tickets'}}</th>
+          <th class="right aligned">{{t 'Sales'}}</th>
+          <th class="right aligned">{{t 'Tickets'}}</th>
+          <th class="right aligned">{{t 'Sales'}}</th>
+          <th class="right aligned">{{t 'Tickets'}}</th>
+          <th class="right aligned">{{t 'Sales'}}</th>
+        </tr>
+      {{/unless}}
     </thead>
     <tbody>
       {{#each model.tickets as |ticket|}}
         <tr>
           <td>{{ticket.name}}</td>
           <td>{{ticket.quantity}}</td>
-          <td class="right aligned">{{ticket.orderStatistics.tickets.completed}}</td>
+          {{#unless device.isMobile}}
+            <td class="right aligned">{{ticket.orderStatistics.tickets.completed}}</td>
+          {{/unless}}
           <td class="right aligned">{{currency-symbol model.eventDetail.paymentCurrency}} {{format-number ticket.orderStatistics.sales.completed}}</td>
-          <td class="right aligned">{{ticket.orderStatistics.tickets.placed}}</td>
+          {{#unless device.isMobile}}
+            <td class="right aligned">{{ticket.orderStatistics.tickets.placed}}</td>
+          {{/unless}}
           <td class="right aligned">{{currency-symbol model.eventDetail.paymentCurrency}} {{format-number ticket.orderStatistics.sales.placed}}</td>
-          <td class="right aligned">{{ticket.orderStatistics.tickets.pending}}</td>
+          {{#unless device.isMobile}}
+            <td class="right aligned">{{ticket.orderStatistics.tickets.pending}}</td>
+          {{/unless}}
           <td class="right aligned">{{currency-symbol model.eventDetail.paymentCurrency}} {{format-number ticket.orderStatistics.sales.pending}}</td>
         </tr>
       {{/each}}
     </tbody>
   </table>
 </div>
+

app/themes/semantic.js

@@ -20,9 +20,9 @@ export default Default.extend({
   },
 
   classes: {
-    outerTableWrapper              : 'ui ui-table',
+    outerTableWrapper              : 'ui unstackable ui-table',
     innerTableWrapper              : 'ui segment column sixteen wide inner-table-wrapper',
-    table                          : 'ui very basic table',
+    table                          : 'ui very basic unstackable table',
     globalFilterWrapper            : 'ui row',
     columnsDropdownWrapper         : 'right floated columns-dropdown',
     columnsDropdownButtonWrapper   : 'buttons',