fix: standard group card height (#8002)

* fix: standard group card height
* show banner url, in case thumbnail is not their

Author: maze-runnar

app/components/promoted-group-card.js

@@ -78,9 +78,9 @@ get groupClass() {
 
 @computed('group')
 get about() {
-  if (this.group.about?.length > 100) {
-    return this.group.about.slice(0, 100) + '...';
+  if (this.group.about?.length > 50) {
+    return this.group.about.slice(0, 50) + '...';
   }
-  return this.group.about;
+  return this.group.about ? this.group.about : 'No information given about group.';
 }
 }

app/templates/components/group-card.hbs

@@ -2,7 +2,7 @@
   {{#unless this.device.isMobile}}
     <div class="ui card three wide computer six wide tablet column">
       <a class="image" href={{href-to 'group-public' @group.id}}>
-        <Widgets::SafeImage @src={{if @group.thumbnailImageUrl  @group.thumbnailImageUrl "/images/group.png"}} />
+        <Widgets::SafeImage @src={{if @group.thumbnailImageUrl  @group.thumbnailImageUrl (if @group.bannerUrl @group.bannerUrl "/images/group.png")}} />
       </a>
     </div>
   {{/unless}}

app/templates/components/orders/event-info.hbs

@@ -26,7 +26,7 @@
     <br>
     <strong>{{t 'From'}}:</strong> {{general-date this.data.event.startsAt 'date-time-long'}}
     <br>
-    <strong>{{t 'To'}}:</strong> {{general-date this.data.event.endsAt 'date-time-long'}}
+    <strong>{{t 'To'}}:</strong> {{general-date this.data.event.endsAt 'date-time-long'}} ({{this.data.event.timezone}})
     {{#if this.data.event.ownerName}}
       <br>
       <strong>{{t 'Organized By'}}:</strong> {{this.data.event.ownerName}}

app/templates/components/orders/ticket-holder.hbs

@@ -87,33 +87,33 @@
         {{/if}}
         {{#if (eq this.data.paymentMode 'cheque')}}
           <div class="ui divider"></div>
-          <h2 class="weight-300">
+          <h4 class="weight-300">
             {{t 'Cheque Details '}}
-          </h2>
+          </h4>
           <span>
             {{this.data.event.chequeDetails}}
           </span>
         {{else if (eq this.data.paymentMode 'onsite')}}
           <div class="ui divider"></div>
-          <h2 class="weight-300">
+          <h4 class="weight-300">
             {{t 'Onsite Instructions'}}
-          </h2>
+          </h4>
           <span>
             {{this.data.event.onsiteDetails}}
           </span>
         {{else if (eq this.data.paymentMode 'cheque')}}
           <div class="ui divider"></div>
-          <h2 class="weight-300">
+          <h4 class="weight-300">
             {{t 'Bank Details'}}
-          </h2>
+          </h4>
           <span>
             {{this.data.event.bankDetails}}
           </span>
         {{else if (eq this.data.paymentMode 'invoice')}}
           <div class="ui divider"></div>
-          <h2 class="weight-300">
+          <h4 class="weight-300">
             {{t 'Invoice Details'}}
-          </h2>
+          </h4>
           <span>
             {{this.data.event.invoiceDetails}}
           </span>

app/templates/components/promoted-group-card.hbs

@@ -1,7 +1,7 @@
-<div class="{{if this.isWide 'event wide ui grid row'}}" style="height: 100%;">
+<div class="{{if this.isWide 'event wide ui grid row'}}" style="height: 400px;">
   <div class="ui card {{this.groupClass}} {{if this.isWide 'h-auto' 'h-full'}}">
     <a class="image" href={{href-to 'group-public' @group.id}}>
-      <Widgets::SafeImage @src={{if @group.thumbnailImageUrl  @group.thumbnailImageUrl "/images/group.png"}} />
+      <Widgets::SafeImage @src={{if @group.thumbnailImageUrl  @group.thumbnailImageUrl (if @group.bannerUrl @group.bannerUrl "/images/group.png")}} />
     </a>
     <span class="main content">
       <SmartOverflow @class="header">

app/templates/orders/new.hbs

@@ -8,7 +8,7 @@
     <div class="row">
       <div class="column">
         <div class="ui small gray-text">
-          {{general-date this.model.order.event.startsAt 'date-time-long'}} - {{general-date this.model.order.event.endsAt 'date-time-long'}}
+          {{general-date this.model.order.event.startsAt 'date-time-long'}} - {{general-date this.model.order.event.endsAt 'date-time-long'}} ({{this.model.order.event.timezone}})
           <br>
           {{this.model.order.event.locationName}}
         </div>