Skip to content

Commit 675c78a

Browse files
ychung-motychung-mot
authored
Merge pull request #576 from bcgov/oleks
Fixed text overflow in `Listing table` and `Listing details`
2 parents f4f0f6d + 8d95d84 commit 675c78a

File tree

4 files changed

+73
-29
lines changed

4 files changed

+73
-29
lines changed

‎frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -284,20 +284,21 @@ <h2>Detailed Listing Information for</h2>
284284
" class="spacer-hr"></div>
285285

286286
<div *ngIf="blInfo?.businessLicenceNo" class="row">
287-
<strong>Business Licence Number:</strong> <span>{{blInfo.businessLicenceNo ||'-'}}</span>
287+
<strong>Business Licence Number:</strong>
288+
<span class="value">{{blInfo.businessLicenceNo ||'-'}}</span>
288289
</div>
289290
<div *ngIf="blInfo?.licenceTypeTxt" class="row">
290-
<strong>Licence Type:</strong> <span>{{blInfo.licenceTypeTxt ||'-'}}</span>
291+
<strong>Licence Type:</strong> <span class="value">{{blInfo.licenceTypeTxt ||'-'}}</span>
291292
</div>
292293
<div *ngIf="blInfo?.expiryDt" class="row">
293-
<strong>Expiry Date: </strong> <span>{{blInfo.expiryDt |date:'YYYY-MM-dd'}}</span>
294+
<strong>Expiry Date: </strong> <span class="value">{{blInfo.expiryDt |date:'YYYY-MM-dd'}}</span>
294295
</div>
295296
<div *ngIf="blInfo?.licenceStatusType" class="row">
296-
<strong>Status:</strong> <span class="status-name"
297+
<strong>Status:</strong> <span class="status-name value"
297298
[class.status-red]="blInfo.licenceStatusType!=='ISSUED'">{{blInfo.licenceStatus.licenceStatusTypeNm}}</span>
298299
</div>
299300
<div *ngIf="blInfo?.restrictionTxt" class="row">
300-
<strong>Restriction Note:</strong> <span>{{blInfo.restrictionTxt || 'N/A'}}</span>
301+
<strong>Restriction Note:</strong> <span class="value">{{blInfo.restrictionTxt || 'N/A'}}</span>
301302
</div>
302303

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

308309
<div *ngIf="blInfo?.businessOwnerNm" class="row">
309-
<strong>Owner / Licencee Name:</strong> <span>{{blInfo.businessOwnerNm ||'-'}}</span>
310+
<strong>Owner / Licencee Name:</strong> <span class="value">{{blInfo.businessOwnerNm ||'-'}}</span>
310311
</div>
311312
<div *ngIf="blInfo?.mailingStreetAddressTxt" class="row">
312313
<strong>Mailing Address: </strong>
313-
<span>{{blInfo.mailingStreetAddressTxt}} {{blInfo.mailingCityNm}} {{blInfo.mailingProvinceCd}}
314+
<span class="value">{{blInfo.mailingStreetAddressTxt}} {{blInfo.mailingCityNm}}
315+
{{blInfo.mailingProvinceCd}}
314316
{{blInfo.mailingPostalCd}}</span>
315317
</div>
316318
<div *ngIf="blInfo?.businessOwnerEmailAddressDsc" class="row">
317-
<strong>Email: </strong> <span>{{blInfo.businessOwnerEmailAddressDsc ||'-'}}</span>
319+
<strong>Email: </strong> <span class="value">{{blInfo.businessOwnerEmailAddressDsc ||'-'}}</span>
318320
</div>
319321
<div *ngIf="blInfo?.businessOwnerPhoneNo" class="row">
320-
<strong>Phone: </strong> <span>{{blInfo.businessOwnerPhoneNo ||'-'}}</span>
322+
<strong>Phone: </strong> <span class="value">{{blInfo.businessOwnerPhoneNo ||'-'}}</span>
321323
</div>
322324

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

327329
<div *ngIf="blInfo?.businessOperatorNm" class="row">
328-
<strong>Operator Name:</strong> <span>{{blInfo.businessOperatorNm ||'-'}}</span>
330+
<strong>Operator Name:</strong> <span class="value">{{blInfo.businessOperatorNm ||'-'}}</span>
329331
</div>
330332
<div *ngIf="blInfo?.businessOperatorEmailAddressDsc" class="row">
331-
<strong>Email: </strong> <span>{{blInfo.businessOperatorEmailAddressDsc ||'-'}}</span>
333+
<strong>Email: </strong> <span class="value">{{blInfo.businessOperatorEmailAddressDsc ||'-'}}</span>
332334
</div>
333335
<div *ngIf="blInfo?.businessOperatorPhoneNo" class="row">
334-
<strong>Phone: </strong> <span>{{blInfo.businessOperatorPhoneNo ||'-'}}</span>
336+
<strong>Phone: </strong> <span class="value">{{blInfo.businessOperatorPhoneNo ||'-'}}</span>
335337
</div>
336338

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

346348
<div *ngIf="blInfo?.propertyZoneTxt" class="row">
347-
<strong>Property Zoning:</strong> <span>{{blInfo.propertyZoneTxt ||'-'}}</span>
349+
<strong>Property Zoning:</strong> <span class="value">{{blInfo.propertyZoneTxt ||'-'}}</span>
348350
</div>
349351
<div *ngIf="blInfo?.availableBedroomsQty" class="row">
350-
<strong>Bedrooms Available: </strong> <span>{{blInfo.availableBedroomsQty ||'-'}}</span>
352+
<strong>Bedrooms Available: </strong> <span class="value">{{blInfo.availableBedroomsQty
353+
||'-'}}</span>
351354
</div>
352355
<div *ngIf="blInfo?.maxGuestsAllowedQty" class="row">
353-
<strong>Guest Capacity / Maximum Occupancy: </strong> <span>{{blInfo.maxGuestsAllowedQty
356+
<strong>Guest Capacity / Maximum Occupancy: </strong> <span
357+
class="value">{{blInfo.maxGuestsAllowedQty
354358
||'-'}}</span>
355359
</div>
356360
<div *ngIf="isBoolDefined(blInfo?.isPrincipalResidence)" class="row">
357-
<strong>Principal Residence: </strong> <span>{{blInfo.isPrincipalResidence?'Yes':'No'}}</span>
361+
<strong>Principal Residence: </strong> <span
362+
class="value">{{blInfo.isPrincipalResidence?'Yes':'No'}}</span>
358363
</div>
359364
<div *ngIf="isBoolDefined(blInfo?.isOwnerLivingOnsite)" class="row">
360-
<strong>Onsite Owner:</strong> <span>{{blInfo.isOwnerLivingOnsite?'Yes':'No'}}</span>
365+
<strong>Onsite Owner:</strong> <span class="value">{{blInfo.isOwnerLivingOnsite?'Yes':'No'}}</span>
361366
</div>
362367
<div *ngIf="isBoolDefined(blInfo?.isOwnerPropertyTenant)" class="row">
363-
<strong>Building Rented: </strong> <span>{{blInfo.isOwnerPropertyTenant?'Yes':'No'}}</span>
368+
<strong>Building Rented: </strong> <span
369+
class="value">{{blInfo.isOwnerPropertyTenant?'Yes':'No'}}</span>
364370
</div>
365371
<div *ngIf="blInfo?.infractionTxt" class="row">
366-
<strong>Infraction: </strong> <span>{{blInfo.infractionTxt ||'-'}}</span>
372+
<strong>Infraction: </strong> <span class="value">{{blInfo.infractionTxt ||'-'}}</span>
367373
</div>
368374
<div *ngIf="blInfo?.infractionDt" class="row">
369-
<strong>Infraction Date: </strong> <span>{{blInfo.infractionDt|date:'YYYY-MM-dd'}}</span>
375+
<strong>Infraction Date: </strong> <span
376+
class="value">{{blInfo.infractionDt|date:'YYYY-MM-dd'}}</span>
370377
</div>
371378

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

376383
<div *ngIf="blInfo?.propertyFolioNo" class="row">
377-
<strong>Folio Number:</strong> <span>{{blInfo.propertyFolioNo ||'-'}}</span>
384+
<strong>Folio Number:</strong> <span class="value">{{blInfo.propertyFolioNo ||'-'}}</span>
378385
</div>
379386
<div *ngIf="blInfo?.propertyParcelIdentifierNo" class="row">
380-
<strong>Parcel Identifier (PID): </strong> <span>{{blInfo.propertyParcelIdentifierNo ||'-'}}</span>
387+
<strong>Parcel Identifier (PID): </strong> <span class="value">{{blInfo.propertyParcelIdentifierNo
388+
||'-'}}</span>
381389
</div>
382390
<div *ngIf="blInfo?.propertyLegalDescriptionTxt" class="row">
383-
<strong>Legal Description: </strong> <span>{{blInfo.propertyLegalDescriptionTxt ||'-'}}</span>
391+
<strong>Legal Description: </strong> <span class="value">{{blInfo.propertyLegalDescriptionTxt
392+
||'-'}}</span>
384393
</div>
385394
</ng-template>
386395
</p-panel>

‎frontend/src/app/features/components/listings-table/listing-details/listing-details.component.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,12 @@
185185
}
186186

187187
.row {
188+
display: flex;
189+
190+
p-table {
191+
width: 100%;
192+
}
193+
188194
&.header-row {
189195
font-size: large;
190196
font-family: 'BcSans-bold';
@@ -214,12 +220,17 @@
214220
}
215221
}
216222

217-
.label {
223+
.label,
224+
strong {
225+
white-space: nowrap;
218226
font-family: 'BcSans-bold';
219227
}
220228

221229
.value {
222230
padding-left: 8px;
231+
white-space: nowrap;
232+
overflow: hidden;
233+
text-overflow: ellipsis;
223234

224235
&.warning {
225236
color: #CE3E39;

‎frontend/src/app/features/components/listings-table/listings-table.component.html‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -194,11 +194,25 @@ <h2 class="title">Listings</h2>
194194
<p-tag *ngIf="row.isChangedAddress" value="Updated" class="updated-tag"></p-tag>
195195
</div>
196196
</td>
197-
<td>{{ row.nightsBookedYtdQty }}</td>
198-
<td>{{ row.businessLicenceNo }}</td>
199-
<td>{{ row.businessLicenceNoMatched }}</td>
200-
<td>{{ row.lastActionNm }}</td>
201-
<td>{{ row.lastActionDtm |date }}</td>
197+
<td>
198+
{{ row.nightsBookedYtdQty }}
199+
</td>
200+
<td>
201+
<span>
202+
{{ row.businessLicenceNo }}
203+
</span>
204+
</td>
205+
<td>
206+
<span>
207+
{{ row.businessLicenceNoMatched }}
208+
</span>
209+
</td>
210+
<td>
211+
{{ row.lastActionNm }}
212+
</td>
213+
<td>
214+
{{ row.lastActionDtm |date }}
215+
</td>
202216
</tr>
203217
</ng-template>
204218
<ng-template pTemplate="emptymessage">

‎frontend/src/app/features/components/listings-table/listings-table.component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,16 @@
159159

160160
td {
161161
font-size: 12px;
162+
word-break: break-all;
163+
164+
span {
165+
display: block;
166+
white-space: nowrap;
167+
overflow: hidden;
168+
max-width: 180px;
169+
max-height: 60px;
170+
text-overflow: ellipsis;
171+
}
162172

163173
.listing-id-link {
164174
color: #053662;

0 commit comments

Comments
 (0)