fix icon column width by using calc() #96

alfio-event · Aug 13, 2022 · dbbc2fd · dbbc2fd
1 parent 8aa7dd4
commit dbbc2fd
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/src/app/subscription-display/subscription-display.component.ts b/src/app/subscription-display/subscription-display.component.ts
@@ -3,13 +3,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { SubscriptionInfo } from '../model/subscription';
 import { AnalyticsService } from '../shared/analytics.service';
 import { InfoService } from '../shared/info.service';
-import { getLocalizedContent, SubscriptionService } from '../shared/subscription.service';
+import { SubscriptionService } from '../shared/subscription.service';
 import { zip } from 'rxjs';
 import {TranslateService} from '@ngx-translate/core';
-import {isDifferentTimeZone} from '../shared/event.service';
 import {I18nService} from '../shared/i18n.service';
-import {getErrorObject, handleServerSideValidationError} from '../shared/validation-helper';
-import {ErrorDescriptor, ValidatedResponse} from '../model/validated-response';
+import {getErrorObject} from '../shared/validation-helper';
+import {ErrorDescriptor} from '../model/validated-response';
 import {FeedbackService} from '../shared/feedback/feedback.service';
 
 @Component({

diff --git a/src/app/subscription-summary/subscription-summary.component.html b/src/app/subscription-summary/subscription-summary.component.html
@@ -1,26 +1,26 @@
 <dl class="row">
   <ng-container *ngIf="subscription.organizationName">
-    <dt class="col-2 col-lg-1 text-muted"><fa-icon [icon]="['far', 'building']" a11yRole="presentation"></fa-icon></dt>
-    <dd class="col-10 col-lg-11">{{'show-event.by'|translate}} <strong><a [href]="'mailto:'+ subscription.organizationEmail">{{subscription.organizationName}}</a></strong></dd>
+    <dt class="col-icon text-muted"><fa-icon [icon]="['far', 'building']" a11yRole="presentation"></fa-icon></dt>
+    <dd class="col-text">{{'show-event.by'|translate}} <strong><a [href]="'mailto:'+ subscription.organizationEmail">{{subscription.organizationName}}</a></strong></dd>
   </ng-container>
   <ng-container [ngSwitch]="subscription.validityType">
     <ng-container *ngSwitchCase="'NOT_SET'">
-      <dt class="col-2 col-lg-1 text-muted" *ngIf="subscription.validityType === 'NOT_SET'"><fa-icon [icon]="['fas', 'ticket-alt']" [classes]="['rotate-45']" [title]="'ticket.date-time' | translate"></fa-icon></dt>
-      <dd class="col-10 col-lg-11" *ngIf="subscription.validityType === 'NOT_SET'">
+      <dt class="col-icon text-muted" *ngIf="subscription.validityType === 'NOT_SET'"><fa-icon [icon]="['fas', 'ticket-alt']" [classes]="['rotate-45']" [title]="'ticket.date-time' | translate"></fa-icon></dt>
+      <dd class="col-text" *ngIf="subscription.validityType === 'NOT_SET'">
         {{ 'subscription.detail.validity.NOT_SET.description' | translate : { '0': subscription.maxEntries, '1': ('subscription.usage-type.'+subscription.usageType) | translate } }}
       </dd>
     </ng-container>
     <ng-container *ngSwitchCase="'STANDARD'">
       <!-- STANDARD -->
-      <dt class="col-2 col-lg-1 text-muted" *ngIf="subscription.validityType === 'STANDARD'"><fa-icon [icon]="['fas', 'ticket-alt']" [classes]="['rotate-45']" [title]="'ticket.date-time' | translate"></fa-icon></dt>
-      <dd class="col-10 col-lg-11" *ngIf="subscription.validityType === 'STANDARD'">
+      <dt class="col-icon text-muted" *ngIf="subscription.validityType === 'STANDARD'"><fa-icon [icon]="['fas', 'ticket-alt']" [classes]="['rotate-45']" [title]="'ticket.date-time' | translate"></fa-icon></dt>
+      <dd class="col-text" *ngIf="subscription.validityType === 'STANDARD'">
         {{ 'subscription.detail.validity.STANDARD.description' | translate : { '0': subscription.validityUnits, '1': ('subscription.time-unit.'+subscription.validityTimeUnit | translate), '2': ('subscription.usage-type.'+subscription.usageType) | translate } }}
       </dd>
     </ng-container>
     <ng-container *ngSwitchCase="'CUSTOM'">
       <!-- CUSTOM -->
-      <dt class="col-2 col-lg-1 text-muted" *ngIf="subscription.validityType === 'CUSTOM'"><fa-icon [icon]="['fas', 'ticket-alt']" [classes]="['rotate-45']" [title]="'ticket.date-time' | translate"></fa-icon></dt>
-      <dd class="col-10 col-lg-11" *ngIf="subscription.validityType === 'CUSTOM'">
+      <dt class="col-icon text-muted" *ngIf="subscription.validityType === 'CUSTOM'"><fa-icon [icon]="['fas', 'ticket-alt']" [classes]="['rotate-45']" [title]="'ticket.date-time' | translate"></fa-icon></dt>
+      <dd class="col-text" *ngIf="subscription.validityType === 'CUSTOM'">
         <div class="row">
           <div class="col-12">
             <div>
@@ -39,11 +39,11 @@
       </dd>
     </ng-container>
   </ng-container>
-  <dt class="col-2 col-lg-1 text-muted"><fa-icon [icon]="['fas', 'money-bill']" [title]="'reservation-page.price' | translate"></fa-icon></dt>
-  <dd class="col-10 col-lg-11 font-weight-bold"><app-price-tag [formattedPrice]="subscription.formattedPrice" [purchaseContext]="subscription" [showTaxDetails]="true" [singleLineLayout]="true"></app-price-tag></dd>
+  <dt class="col-icon text-muted"><fa-icon [icon]="['fas', 'money-bill']" [title]="'reservation-page.price' | translate"></fa-icon></dt>
+  <dd class="col-text font-weight-bold"><app-price-tag [formattedPrice]="subscription.formattedPrice" [purchaseContext]="subscription" [showTaxDetails]="true" [singleLineLayout]="true"></app-price-tag></dd>
 
   <ng-container *ngIf="owner">
-    <dt class="col-2 col-lg-1 text-muted"><fa-icon [icon]="['fas', 'address-card']" [title]="'reservation-page-complete.subscription.owner' | translate"></fa-icon></dt>
-    <dd class="col-10 col-lg-11">{{owner.firstName}} {{owner.lastName}} ({{owner.email}})</dd>
+    <dt class="col-icon text-muted"><fa-icon [icon]="['fas', 'address-card']" [title]="'reservation-page-complete.subscription.owner' | translate"></fa-icon></dt>
+    <dd class="col-text">{{owner.firstName}} {{owner.lastName}} ({{owner.email}})</dd>
   </ng-container>
 </dl>
diff --git a/src/app/subscription-summary/subscription-summary.component.scss b/src/app/subscription-summary/subscription-summary.component.scss
@@ -0,0 +1,7 @@
+.col-icon {
+  width: 40px;
+}
+
+.col-text {
+  width: calc(100% - 40px);
+}
diff --git a/src/app/subscription-summary/subscription-summary.component.ts b/src/app/subscription-summary/subscription-summary.component.ts
@@ -1,13 +1,14 @@
 import {Component, Input} from '@angular/core';
-import {SubscriptionInfo, SubscriptionSummaryData} from '../model/subscription';
+import {SubscriptionSummaryData} from '../model/subscription';
 import {getLocalizedContent} from '../shared/subscription.service';
 import {isDifferentTimeZone} from '../shared/event.service';
 import {TranslateService} from '@ngx-translate/core';
 import {SubscriptionOwner} from '../model/reservation-info';
 
 @Component({
   selector: 'app-subscription-summary',
-  templateUrl: './subscription-summary.component.html'
+  templateUrl: './subscription-summary.component.html',
+  styleUrls: ['./subscription-summary.component.scss']
 })
 export class SubscriptionSummaryComponent {