Skip to content

Commit b904460

Browse files
ychung-motychung-mot
authored
Merge pull request #534 from bcgov/oleks
DSS-668: Add flags visuals to legend
2 parents 4998633 + 1a076bf commit b904460

File tree

4 files changed

+112
-65
lines changed

4 files changed

+112
-65
lines changed

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

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,38 +28,38 @@ <h2>Detailed Listing Information for</h2>
2828
<div class="status-container" [ngSwitch]="listing.listingStatusType">
2929
<strong>Listing Status: </strong>
3030
<span class="status-item" *ngSwitchCase="'N'">New
31-
<span class="status-circle status-new" pTooltip="New">
31+
<span class="status-circle status-new">
3232
N
3333
</span>
3434
</span>
3535
<span class="status-item" *ngSwitchCase="'A'">
3636
<span>
3737
Active
3838
</span>
39-
<span class="status-circle status-active" pTooltip="Active">
39+
<span class="status-circle status-active">
4040
A
4141
</span>
4242
</span>
4343
<span class="status-item" *ngSwitchCase="'I'">
4444
<span>
4545
Inactive
4646
</span>
47-
<span class="status-circle status-inactive" pTooltip="Inactive">
47+
<span class="status-circle status-inactive">
4848
I
4949
</span>
5050
</span>
5151
<span class="status-item" *ngIf="listing.isLgTransferred">
5252
<span>
5353
Reassigned
5454
</span>
55-
<span class="status-flag status-reassigned" pTooltip="Reassigned">
55+
<span class="status-flag status-reassigned">
5656
</span>
5757
</span>
5858
<span class="status-item" *ngIf="listing.isTakenDown">
5959
<span>
6060
Takedown Complete
6161
</span>
62-
<span class="status-flag status-takedown-complete" pTooltip="Takedown Complete">
62+
<span class="status-flag status-takedown-complete">
6363
</span>
6464
</span>
6565
</div>
@@ -245,12 +245,17 @@ <h2>Detailed Listing Information for</h2>
245245
<p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" [style]="{width: '50vw'}">
246246
<span>
247247
<strong>Status:</strong> Status of the listing using the following categories:
248-
<ul>
249-
<li>New (N): Listing reported for the first time in current monthly data</li>
250-
<li>Active (A): Listing appeared in previous and current monthly data</li>
251-
<li>Inactive (I): Listing appeared in previous but not current monthly data </li>
252-
<li>Takedown Complete (T): Platform confirmed takedown of the listing</li>
253-
<li>Reassigned (R): Address (best match) was updated to a new jurisdiction</li>
248+
<ul class="statuses">
249+
<li><span class="status-circle status-new">N</span>&nbsp;New: Listing reported for the first time in
250+
current monthly data</li>
251+
<li><span class="status-circle status-active">A</span>&nbsp;Active: Listing appeared in previous and
252+
current monthly data</li>
253+
<li><span class="status-circle status-inactive">I</span>&nbsp;Inactive: Listing appeared in previous
254+
but not current monthly data </li>
255+
<li><span class="status-flag status-reassigned"></span>&nbsp;Takedown Complete: Platform confirmed
256+
takedown of the listing</li>
257+
<li><span class="status-flag status-takedown-complete"></span>&nbsp;Reassigned: Address (best
258+
match) was updated to a new jurisdiction</li>
254259
</ul>
255260
</span>
256261
<p>

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@
168168
background-color: #FFFFFF;
169169
width: 20px;
170170
height: 20px;
171-
display: flex;
171+
display: inline-flex;
172172
justify-content: center;
173173
align-items: center;
174174
border-radius: 50%;
@@ -200,13 +200,19 @@
200200
}
201201

202202
.status-flag {
203-
display: flex;
203+
display: inline-flex;
204+
justify-content: center;
205+
align-items: center;
204206
width: 20px;
205207
height: 20px;
206208
background-position: center center;
207209
background-size: contain;
208210
background-repeat: no-repeat;
209211

212+
&span {
213+
margin-right: 12px;
214+
}
215+
210216
&.status-takedown-complete {
211217
background-image: url(../../../../../assets/images/flag-black.svg);
212218
}
@@ -216,6 +222,18 @@
216222
}
217223
}
218224

225+
ul {
226+
&.statuses {
227+
list-style-type: none;
228+
padding: 0 14px;
229+
230+
.status-circle,
231+
.status-flag {
232+
margin-right: 12px;
233+
}
234+
}
235+
}
236+
219237
.change-address-button-container {
220238
button {
221239
width: 22px;

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -217,12 +217,17 @@ <h2 class="title">Listings</h2>
217217
<p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" [style]="{width: '50vw'}">
218218
<span>
219219
<strong>Status:</strong> Status of the listing using the following categories:
220-
<ul>
221-
<li>New (N): Listing reported for the first time in current monthly data</li>
222-
<li>Active (A): Listing appeared in previous and current monthly data</li>
223-
<li>Inactive (I): Listing appeared in previous but not current monthly data </li>
224-
<li>Takedown Complete (T): Platform confirmed takedown of the listing</li>
225-
<li>Reassigned (R): Address (best match) was updated to a new jurisdiction</li>
220+
<ul class="statuses">
221+
<li><span class="status-circle status-new">N</span>&nbsp;New: Listing reported for the first time in
222+
current monthly data</li>
223+
<li><span class="status-circle status-active">A</span>&nbsp;Active: Listing appeared in previous and
224+
current monthly data</li>
225+
<li><span class="status-circle status-inactive">I</span>&nbsp;Inactive: Listing appeared in previous
226+
but not current monthly data </li>
227+
<li><span class="status-flag status-reassigned"></span>&nbsp;Takedown Complete: Platform confirmed
228+
takedown of the listing</li>
229+
<li><span class="status-flag status-takedown-complete"></span>&nbsp;Reassigned: Address (best
230+
match) was updated to a new jurisdiction</li>
226231
</ul>
227232
</span>
228233
<p>

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

Lines changed: 65 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -211,63 +211,82 @@
211211
font-weight: 600;
212212
}
213213
}
214+
}
215+
}
214216

215-
.status-circle {
216-
background-color: #FFFFFF;
217-
width: 20px;
218-
height: 20px;
219-
display: flex;
220-
justify-content: center;
221-
align-items: center;
222-
border-radius: 50%;
223-
line-height: 20px;
224-
color: #FFFFFF;
225-
font-family: 'BcSans-bold';
226-
font-size: 14px;
217+
p-paginator {
218+
display: flex;
219+
justify-content: end;
220+
}
221+
}
227222

228-
&.status-new {
229-
background-color: #F8BA47;
230-
color: #2D2D2D;
231-
}
223+
.status-circle {
224+
background-color: #FFFFFF;
225+
width: 20px;
226+
height: 20px;
227+
display: inline-flex;
228+
justify-content: center;
229+
align-items: center;
230+
border-radius: 50%;
231+
line-height: 20px;
232+
color: #FFFFFF;
233+
font-family: 'BcSans-bold';
234+
font-size: 14px;
235+
236+
&.status-new {
237+
background-color: #F8BA47;
238+
color: #2D2D2D;
239+
}
232240

233-
&.status-active {
234-
background-color: #42814A;
235-
}
241+
&.status-active {
242+
background-color: #42814A;
243+
}
236244

237-
&.status-inactive {
238-
background-color: #605E5C;
239-
}
245+
&.status-inactive {
246+
background-color: #605E5C;
247+
}
240248

241-
&.status-takedown-complete {
242-
background-color: #2D2D2D;
243-
}
249+
&.status-takedown-complete {
250+
background-color: #2D2D2D;
251+
}
244252

245-
&.status-reassigned {
246-
background-color: #255A90;
247-
}
248-
}
253+
&.status-reassigned {
254+
background-color: #255A90;
255+
}
256+
}
249257

250-
.status-flag {
251-
width: 20px;
252-
height: 20px;
253-
background-position: center center;
254-
background-size: contain;
255-
background-repeat: no-repeat;
258+
.status-flag {
259+
display: inline-flex;
260+
justify-content: center;
261+
align-items: center;
262+
width: 20px;
263+
height: 20px;
264+
background-position: center center;
265+
background-size: contain;
266+
background-repeat: no-repeat;
267+
268+
&span {
269+
margin-right: 12px;
270+
}
256271

257-
&.status-takedown-complete {
258-
background-image: url(../../../../assets/images/flag-black.svg);
259-
}
272+
&.status-takedown-complete {
273+
background-image: url(../../../../assets/images/flag-black.svg);
274+
}
260275

261-
&.status-reassigned {
262-
background-image: url(../../../../assets/images/flag-blue.svg);
263-
}
264-
}
265-
}
276+
&.status-reassigned {
277+
background-image: url(../../../../assets/images/flag-blue.svg);
266278
}
279+
}
267280

268-
p-paginator {
269-
display: flex;
270-
justify-content: end;
281+
ul {
282+
&.statuses {
283+
list-style-type: none;
284+
padding: 0 14px;
285+
286+
.status-circle,
287+
.status-flag {
288+
margin-right: 12px;
289+
}
271290
}
272291
}
273292

0 commit comments

Comments
 (0)