Skip to content

Commit 0c858e9

Browse files
bcgov-brwangbcgov-brwang
committed
DBC22-6778: followed events list highlighted items styling
DBC22-6778: updated styling DBC22-6778: fixed left styling issue
1 parent 4fef176 commit 0c858e9

6 files changed

Lines changed: 69 additions & 37 deletions

File tree

‎src/frontend/src/Components/advisories/AdvisoriesList.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@ export default function AdvisoriesList(props) {
7070
onKeyDown={(keyEvent) => handleClick(advisory, keyEvent)}>
7171

7272
{showLoader ? <Skeleton width={320} height={40} /> : advisory.title}
73+
{trackedAdvisories[advisory.id]?.highlight &&
74+
<div className="updated-pill">Updated</div>
75+
}
7376
</div>
7477

7578
{showLoader ?
@@ -78,9 +81,6 @@ export default function AdvisoriesList(props) {
7881
<div className="timestamp-container">
7982
<span className="advisory-li-state">{advisory.last_notified_at != advisory.first_published_at ? "Updated" : "Published" }</span>
8083
<FriendlyTime date={advisory.last_notified_at ?? advisory.last_published_at} />
81-
{trackedAdvisories[advisory.id]?.highlight &&
82-
<div className="updated-pill">Updated</div>
83-
}
8484
</div>
8585
}
8686
</div>
@@ -111,9 +111,6 @@ export default function AdvisoriesList(props) {
111111
<div className="advisory-li__content__partition timestamp-container timestamp-container--mobile">
112112
<span className="advisory-li-state">{advisory.last_notified_at != advisory.first_published_at ? "Updated" : "Published"}</span>
113113
<FriendlyTime date={advisory.last_notified_at ?? advisory.last_published_at} />
114-
{trackedAdvisories[advisory.id]?.highlight &&
115-
<div className="updated-pill">Updated</div>
116-
}
117114
</div>
118115
}
119116

@@ -148,6 +145,9 @@ export default function AdvisoriesList(props) {
148145
<div className="advisory-li__content">
149146
<div className="advisory-li-title-container">
150147
<p className='advisory-li-title'>{advisory.title}</p>
148+
{trackedAdvisories[advisory.id]?.highlight &&
149+
<div className="updated-pill">Updated</div>
150+
}
151151

152152
{!showDescription &&
153153
<p className="advisory-li-teaser">{advisory.teaser ? advisory.teaser : stripRichText(advisory.body).substring(0, 250)}</p>
@@ -158,9 +158,6 @@ export default function AdvisoriesList(props) {
158158
{!cmsContext.readAdvisories.includes(advisory.id.toString() + '-' + advisory.live_revision.toString()) && <div className="unread-display"></div>}
159159
<span className="advisory-li-state">{advisory.last_notified_at != advisory.first_published_at ? "Updated" : "Published" }</span>
160160
<FriendlyTime date={advisory.last_notified_at ?? advisory.last_published_at} />
161-
{trackedAdvisories[advisory.id]?.highlight &&
162-
<div className="updated-pill">Updated</div>
163-
}
164161
</div>
165162
}
166163

‎src/frontend/src/Components/advisories/AdvisoriesList.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
display: flex;
1111
align-items: center;
1212
padding: 12px;
13-
border-radius: 4px;
1413
background: white;
1514
box-shadow: 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);
1615
text-decoration: none;

‎src/frontend/src/Components/bulletins/BulletinsList.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,24 @@ export default function BulletinsList(props) {
4949
}}>
5050

5151
<div className='bulletin-li-title-container' tabIndex={0}>
52+
<div className="bulletin-li-title-row">
53+
{showLoader ?
54+
<p><Skeleton height={30} /></p> :
55+
<h2 className='bulletin-li-title'>{bulletin.title}</h2>
56+
}
57+
{trackedBulletins[bulletin.id]?.highlight &&
58+
<div className="updated-pill">Updated</div>
59+
}
60+
</div>
61+
5262
{showLoader ?
53-
<p><Skeleton height={30} /></p> :
54-
<h2 className='bulletin-li-title'>{bulletin.title}</h2>
63+
<p><Skeleton width={150} height={10} /></p> :
64+
<div className='timestamp-container'>
65+
<span className='bulletin-li-state'>
66+
{bulletin.first_published_at != bulletin.last_notified_at ? 'Updated' : 'Published'}
67+
</span>
68+
<FriendlyTime date={bulletin.last_notified_at ?? bulletin.last_published_at} />
69+
</div>
5570
}
5671

5772
{showLoader ?
@@ -63,19 +78,6 @@ export default function BulletinsList(props) {
6378
<div className="bulletin-li-body">{bulletin.teaser}</div>
6479
)
6580
}
66-
67-
{showLoader ?
68-
<p><Skeleton width={150} height={10} /></p> :
69-
<div className='timestamp-container'>
70-
<span className='bulletin-li-state'>
71-
{bulletin.first_published_at != bulletin.last_notified_at ? 'Updated' : 'Published'}
72-
</span>
73-
<FriendlyTime date={bulletin.last_notified_at ?? bulletin.last_published_at} />
74-
{trackedBulletins[bulletin.id]?.highlight &&
75-
<div className="updated-pill">Updated</div>
76-
}
77-
</div>
78-
}
7981
</div>
8082

8183
<div className='bulletin-li-thumbnail-container'>

‎src/frontend/src/Components/bulletins/BulletinsList.scss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
ul.bulletins-list {
44
li.bulletin-li {
55
padding: 12px;
6-
border-radius: 4px;
76
text-decoration: none;
87

98

@@ -22,4 +21,23 @@ ul.bulletins-list {
2221
margin-bottom: 2rem;
2322
color: $BC-Blue;
2423
}
24+
}
25+
26+
.bulletin-li-title-row {
27+
display: flex;
28+
align-items: center;
29+
gap: 8px;
30+
}
31+
32+
.bulletin-li-title {
33+
margin: 0;
34+
}
35+
36+
.updated-pill {
37+
flex-shrink: 0;
38+
white-space: nowrap;
39+
}
40+
41+
.bulletin-li-body {
42+
margin-top: 20px;
2543
}

‎src/frontend/src/pages/AdvisoriesListPage.scss‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
}
1919

2020
.advisories-list {
21+
gap: 0;
2122

2223
.advisory-li {
2324
margin-bottom: 54px;
@@ -205,9 +206,12 @@
205206

206207
// Highlighted row
207208
.advisory-li.highlighted {
208-
background-color: var(--highlighted-row-bg, #fff8e1);
209-
border-left: 3px solid var(--colour-primary, #003366);
209+
background-color: var(--highlighted-row-bg, $Blue20);
210210
transition: background-color 0.3s ease;
211+
border-bottom: 1px solid var(--border-divider, $Grey30); // the gray line
212+
&:last-child {
213+
border-bottom: none;
214+
}
211215
}
212216

213217
// "Updated" pill — reuse same class as EventsTable
@@ -216,19 +220,21 @@
216220
align-items: center;
217221
padding: 2px 8px;
218222
border-radius: 12px;
219-
background-color: var(--colour-primary, #003366);
223+
background-color: var(--colour-primary, $Blue80);
220224
color: #fff;
221225
font-size: 0.75rem;
222226
font-weight: 600;
223227
margin-left: 8px;
228+
top: -4px;
229+
position: relative;
224230
}
225231

226232
// Floating scroll pills — reuse same class as EventsListPage
227233
.update-count-pill {
228234
position: fixed;
229235
left: 50%;
230236
transform: translateX(-50%);
231-
background-color: var(--colour-primary, #003366);
237+
background-color: var(--colour-primary, $Blue80);
232238
color: #fff;
233239
border: none;
234240
border-radius: 20px;
@@ -242,4 +248,13 @@
242248

243249
&.top { top: 80px; }
244250
&.bottom { bottom: 24px; }
251+
}
252+
253+
.advisories-page .advisories-list .advisory-li.highlighted {
254+
padding-top: 20px;
255+
padding-bottom: 54px;
256+
}
257+
258+
.advisories-page .advisories-list .advisory-li.highlighted:has(+ .advisory-li.highlighted) {
259+
margin-bottom: 0;
245260
}

‎src/frontend/src/pages/BulletinsListPage.scss‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
}
2828

2929
& + li.bulletin-li {
30-
margin-top: 24px;
30+
margin-top: 0;
3131
}
3232

3333
.timestamp-container, .friendly-time-text {
@@ -51,10 +51,9 @@
5151

5252
.timestamp-container {
5353
display: flex;
54-
margin-top: 16px;
5554

5655
@media (min-width: 992px) {
57-
margin-top: 24px;
56+
margin-top: 2px;
5857
}
5958

6059
.friendly-time, .formatted-date {
@@ -126,8 +125,8 @@
126125

127126
// Highlighted row
128127
li.highlighted {
129-
background-color: var(--highlighted-row-bg, #fff8e1);
130-
border-left: 3px solid var(--colour-primary, #003366);
128+
background-color: var(--highlighted-row-bg, $Blue20);
129+
// border-left: 3px solid var(--colour-primary, $Blue80);
131130
transition: background-color 0.3s ease;
132131
}
133132

@@ -137,19 +136,21 @@ li.highlighted {
137136
align-items: center;
138137
padding: 2px 8px;
139138
border-radius: 12px;
140-
background-color: var(--colour-primary, #003366);
139+
background-color: var(--colour-primary, $Blue80);
141140
color: #fff;
142141
font-size: 0.75rem;
143142
font-weight: 600;
144143
margin-left: 8px;
144+
top: -4px;
145+
position: relative;
145146
}
146147

147148
// Floating scroll pills — reuse same class as EventsListPage
148149
.update-count-pill {
149150
position: fixed;
150151
left: 50%;
151152
transform: translateX(-50%);
152-
background-color: var(--colour-primary, #003366);
153+
background-color: var(--colour-primary, $Blue80);
153154
color: #fff;
154155
border: none;
155156
border-radius: 20px;

0 commit comments

Comments
 (0)