Skip to content

Commit

Permalink
Merge pull request #576 from bcgov/oleks
Browse files Browse the repository at this point in the history 
Fixed text overflow in `Listing table` and `Listing details`
  • Loading branch information
@ychung-mot
ychung-mot committed Aug 29, 2024
2 parents f4f0f6d + 8d95d84 commit 675c78a
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 29 deletions.
55 changes: 32 additions & 23 deletions ...src/app/features/components/listings-table/listing-details/listing-details.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,20 +284,21 @@ <h2>Detailed Listing Information for</h2>
" class="spacer-hr"></div>

<div *ngIf="blInfo?.businessLicenceNo" class="row">
<strong>Business Licence Number:</strong> <span>{{blInfo.businessLicenceNo ||'-'}}</span>
<strong>Business Licence Number:</strong>
<span class="value">{{blInfo.businessLicenceNo ||'-'}}</span>
</div>
<div *ngIf="blInfo?.licenceTypeTxt" class="row">
<strong>Licence Type:</strong> <span>{{blInfo.licenceTypeTxt ||'-'}}</span>
<strong>Licence Type:</strong> <span class="value">{{blInfo.licenceTypeTxt ||'-'}}</span>
</div>
<div *ngIf="blInfo?.expiryDt" class="row">
<strong>Expiry Date: </strong> <span>{{blInfo.expiryDt |date:'YYYY-MM-dd'}}</span>
<strong>Expiry Date: </strong> <span class="value">{{blInfo.expiryDt |date:'YYYY-MM-dd'}}</span>
</div>
<div *ngIf="blInfo?.licenceStatusType" class="row">
<strong>Status:</strong> <span class="status-name"
<strong>Status:</strong> <span class="status-name value"
[class.status-red]="blInfo.licenceStatusType!=='ISSUED'">{{blInfo.licenceStatus.licenceStatusTypeNm}}</span>
</div>
<div *ngIf="blInfo?.restrictionTxt" class="row">
<strong>Restriction Note:</strong> <span>{{blInfo.restrictionTxt || 'N/A'}}</span>
<strong>Restriction Note:</strong> <span class="value">{{blInfo.restrictionTxt || 'N/A'}}</span>
</div>

<div *ngIf="blInfo?.businessOwnerNm ||
Expand All @@ -306,32 +307,33 @@ <h2>Detailed Listing Information for</h2>
blInfo?.businessOwnerPhoneNo" class="spacer-hr"></div>

<div *ngIf="blInfo?.businessOwnerNm" class="row">
<strong>Owner / Licencee Name:</strong> <span>{{blInfo.businessOwnerNm ||'-'}}</span>
<strong>Owner / Licencee Name:</strong> <span class="value">{{blInfo.businessOwnerNm ||'-'}}</span>
</div>
<div *ngIf="blInfo?.mailingStreetAddressTxt" class="row">
<strong>Mailing Address: </strong>
<span>{{blInfo.mailingStreetAddressTxt}} {{blInfo.mailingCityNm}} {{blInfo.mailingProvinceCd}}
<span class="value">{{blInfo.mailingStreetAddressTxt}} {{blInfo.mailingCityNm}}
{{blInfo.mailingProvinceCd}}
{{blInfo.mailingPostalCd}}</span>
</div>
<div *ngIf="blInfo?.businessOwnerEmailAddressDsc" class="row">
<strong>Email: </strong> <span>{{blInfo.businessOwnerEmailAddressDsc ||'-'}}</span>
<strong>Email: </strong> <span class="value">{{blInfo.businessOwnerEmailAddressDsc ||'-'}}</span>
</div>
<div *ngIf="blInfo?.businessOwnerPhoneNo" class="row">
<strong>Phone: </strong> <span>{{blInfo.businessOwnerPhoneNo ||'-'}}</span>
<strong>Phone: </strong> <span class="value">{{blInfo.businessOwnerPhoneNo ||'-'}}</span>
</div>

<div *ngIf="blInfo?.businessOperatorNm ||
blInfo?.businessOperatorEmailAddressDsc ||
blInfo?.businessOperatorPhoneNo" class="spacer-hr"></div>

<div *ngIf="blInfo?.businessOperatorNm" class="row">
<strong>Operator Name:</strong> <span>{{blInfo.businessOperatorNm ||'-'}}</span>
<strong>Operator Name:</strong> <span class="value">{{blInfo.businessOperatorNm ||'-'}}</span>
</div>
<div *ngIf="blInfo?.businessOperatorEmailAddressDsc" class="row">
<strong>Email: </strong> <span>{{blInfo.businessOperatorEmailAddressDsc ||'-'}}</span>
<strong>Email: </strong> <span class="value">{{blInfo.businessOperatorEmailAddressDsc ||'-'}}</span>
</div>
<div *ngIf="blInfo?.businessOperatorPhoneNo" class="row">
<strong>Phone: </strong> <span>{{blInfo.businessOperatorPhoneNo ||'-'}}</span>
<strong>Phone: </strong> <span class="value">{{blInfo.businessOperatorPhoneNo ||'-'}}</span>
</div>

<div *ngIf="blInfo?.propertyZoneTxt ||
Expand All @@ -344,43 +346,50 @@ <h2>Detailed Listing Information for</h2>
blInfo?.infractionDt " class="spacer-hr"></div>

<div *ngIf="blInfo?.propertyZoneTxt" class="row">
<strong>Property Zoning:</strong> <span>{{blInfo.propertyZoneTxt ||'-'}}</span>
<strong>Property Zoning:</strong> <span class="value">{{blInfo.propertyZoneTxt ||'-'}}</span>
</div>
<div *ngIf="blInfo?.availableBedroomsQty" class="row">
<strong>Bedrooms Available: </strong> <span>{{blInfo.availableBedroomsQty ||'-'}}</span>
<strong>Bedrooms Available: </strong> <span class="value">{{blInfo.availableBedroomsQty
||'-'}}</span>
</div>
<div *ngIf="blInfo?.maxGuestsAllowedQty" class="row">
<strong>Guest Capacity / Maximum Occupancy: </strong> <span>{{blInfo.maxGuestsAllowedQty
<strong>Guest Capacity / Maximum Occupancy: </strong> <span
class="value">{{blInfo.maxGuestsAllowedQty
||'-'}}</span>
</div>
<div *ngIf="isBoolDefined(blInfo?.isPrincipalResidence)" class="row">
<strong>Principal Residence: </strong> <span>{{blInfo.isPrincipalResidence?'Yes':'No'}}</span>
<strong>Principal Residence: </strong> <span
class="value">{{blInfo.isPrincipalResidence?'Yes':'No'}}</span>
</div>
<div *ngIf="isBoolDefined(blInfo?.isOwnerLivingOnsite)" class="row">
<strong>Onsite Owner:</strong> <span>{{blInfo.isOwnerLivingOnsite?'Yes':'No'}}</span>
<strong>Onsite Owner:</strong> <span class="value">{{blInfo.isOwnerLivingOnsite?'Yes':'No'}}</span>
</div>
<div *ngIf="isBoolDefined(blInfo?.isOwnerPropertyTenant)" class="row">
<strong>Building Rented: </strong> <span>{{blInfo.isOwnerPropertyTenant?'Yes':'No'}}</span>
<strong>Building Rented: </strong> <span
class="value">{{blInfo.isOwnerPropertyTenant?'Yes':'No'}}</span>
</div>
<div *ngIf="blInfo?.infractionTxt" class="row">
<strong>Infraction: </strong> <span>{{blInfo.infractionTxt ||'-'}}</span>
<strong>Infraction: </strong> <span class="value">{{blInfo.infractionTxt ||'-'}}</span>
</div>
<div *ngIf="blInfo?.infractionDt" class="row">
<strong>Infraction Date: </strong> <span>{{blInfo.infractionDt|date:'YYYY-MM-dd'}}</span>
<strong>Infraction Date: </strong> <span
class="value">{{blInfo.infractionDt|date:'YYYY-MM-dd'}}</span>
</div>

<div *ngIf="blInfo?.propertyFolioNo ||
blInfo?.propertyParcelIdentifierNo ||
blInfo?.propertyLegalDescriptionTxt" class="spacer-hr"></div>

<div *ngIf="blInfo?.propertyFolioNo" class="row">
<strong>Folio Number:</strong> <span>{{blInfo.propertyFolioNo ||'-'}}</span>
<strong>Folio Number:</strong> <span class="value">{{blInfo.propertyFolioNo ||'-'}}</span>
</div>
<div *ngIf="blInfo?.propertyParcelIdentifierNo" class="row">
<strong>Parcel Identifier (PID): </strong> <span>{{blInfo.propertyParcelIdentifierNo ||'-'}}</span>
<strong>Parcel Identifier (PID): </strong> <span class="value">{{blInfo.propertyParcelIdentifierNo
||'-'}}</span>
</div>
<div *ngIf="blInfo?.propertyLegalDescriptionTxt" class="row">
<strong>Legal Description: </strong> <span>{{blInfo.propertyLegalDescriptionTxt ||'-'}}</span>
<strong>Legal Description: </strong> <span class="value">{{blInfo.propertyLegalDescriptionTxt
||'-'}}</span>
</div>
</ng-template>
</p-panel>
Expand Down
13 changes: 12 additions & 1 deletion ...src/app/features/components/listings-table/listing-details/listing-details.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,12 @@
}

.row {
display: flex;

p-table {
width: 100%;
}

&.header-row {
font-size: large;
font-family: 'BcSans-bold';
Expand Down Expand Up @@ -214,12 +220,17 @@
}
}

.label {
.label,
strong {
white-space: nowrap;
font-family: 'BcSans-bold';
}

.value {
padding-left: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

&.warning {
color: #CE3E39;
Expand Down
24 changes: 19 additions & 5 deletions frontend/src/app/features/components/listings-table/listings-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,11 +194,25 @@ <h2 class="title">Listings</h2>
<p-tag *ngIf="row.isChangedAddress" value="Updated" class="updated-tag"></p-tag>
</div>
</td>
<td>{{ row.nightsBookedYtdQty }}</td>
<td>{{ row.businessLicenceNo }}</td>
<td>{{ row.businessLicenceNoMatched }}</td>
<td>{{ row.lastActionNm }}</td>
<td>{{ row.lastActionDtm |date }}</td>
<td>
{{ row.nightsBookedYtdQty }}
</td>
<td>
<span>
{{ row.businessLicenceNo }}
</span>
</td>
<td>
<span>
{{ row.businessLicenceNoMatched }}
</span>
</td>
<td>
{{ row.lastActionNm }}
</td>
<td>
{{ row.lastActionDtm |date }}
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
Expand Down
10 changes: 10 additions & 0 deletions frontend/src/app/features/components/listings-table/listings-table.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,16 @@

td {
font-size: 12px;
word-break: break-all;

span {
display: block;
white-space: nowrap;
overflow: hidden;
max-width: 180px;
max-height: 60px;
text-overflow: ellipsis;
}

.listing-id-link {
color: #053662;
Expand Down

0 comments on commit 675c78a

Please sign in to comment.