Skip to content

Commit e78fa9d

Browse files
isoosisoos
authored
Refactor report page styles: reusable foldable sections. (#8061)
1 parent bc22572 commit e78fa9d

File tree

8 files changed

+62
-62
lines changed

8 files changed

+62
-62
lines changed

‎app/lib/frontend/templates/report.dart‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -93,16 +93,16 @@ Iterable<d.Node> _report(
9393
d.p(text: ''),
9494
// illegal content
9595
if (subject.isPackage)
96-
_block(
97-
title: 'I believe the package contains illegal content.',
96+
_foldableSection(
97+
title: d.text('I believe the package contains illegal content.'),
9898
children: [
9999
d.markdown('Please report illegal content through the '
100100
'[illegal content reporting form here]($lcpsDeepLink).')
101101
],
102102
)
103103
else if (subject.isPublisher)
104-
_block(
105-
title: 'I believe the publisher contains illegal content.',
104+
_foldableSection(
105+
title: d.text('I believe the publisher contains illegal content.'),
106106
children: [
107107
d.markdown('Please report illegal content through the '
108108
'[illegal content reporting form here]($lcpsDeepLink).')
@@ -111,9 +111,9 @@ Iterable<d.Node> _report(
111111

112112
// contact
113113
if (subject.isPackage)
114-
_block(
115-
title:
116-
'I have found a bug in the package / I need help using the package.',
114+
_foldableSection(
115+
title: d.text(
116+
'I have found a bug in the package / I need help using the package.'),
117117
children: [
118118
d.markdown('Please consult the package page: '
119119
'[`pub.dev/packages/${subject.package}`](https://pub.dev/packages/${subject.package})'),
@@ -131,8 +131,8 @@ Iterable<d.Node> _report(
131131
],
132132
)
133133
else if (subject.isPublisher)
134-
_block(
135-
title: 'I want to contact the publisher.',
134+
_foldableSection(
135+
title: d.text('I want to contact the publisher.'),
136136
children: [
137137
d.markdown('Please consult the publisher page: '
138138
'[`pub.dev/publishers/${subject.publisherId}`](https://pub.dev/publishers/${subject.publisherId})'),
@@ -143,9 +143,9 @@ Iterable<d.Node> _report(
143143
),
144144

145145
// direct report
146-
_block(
147-
classes: ['report-page-direct-report'],
148-
title: 'I believe the $kindLabel violates pub.dev/policy.',
146+
_foldableSection(
147+
buttonDivClasses: ['report-page-direct-report'],
148+
title: d.text('I believe the $kindLabel violates pub.dev/policy.'),
149149
children: [
150150
if (!(sessionData?.isAuthenticated ?? false))
151151
d.fragment([
@@ -176,8 +176,8 @@ Iterable<d.Node> _report(
176176
),
177177

178178
// problem with pub.dev
179-
_block(
180-
title: 'I have a problem with the pub.dev website.',
179+
_foldableSection(
180+
title: d.text('I have a problem with the pub.dev website.'),
181181
children: [
182182
d.markdown('Security vulnerabilities may be reported through '
183183
'[goo.gl/vulnz](https://goo.gl/vulnz)'),
@@ -235,34 +235,34 @@ Iterable<d.Node> _appeal(
235235
];
236236
}
237237

238-
d.Node _block({
239-
required String title,
238+
d.Node _foldableSection({
239+
required d.Node title,
240240
required Iterable<d.Node> children,
241-
List<String>? classes,
241+
Iterable<String>? buttonDivClasses,
242242
}) {
243243
return d.div(
244-
classes: ['report-page-section', 'foldable', ...?classes],
244+
classes: ['foldable-section', 'foldable'],
245245
children: [
246246
d.div(
247-
classes: ['report-page-section-title', 'foldable-button'],
247+
classes: ['foldable-button', ...?buttonDivClasses],
248248
children: [
249249
d.img(
250250
classes: ['foldable-icon'],
251251
image: d.Image(
252252
src: staticUrls
253-
.getAssetUrl('/static/img/report-foldable-icon.svg'),
253+
.getAssetUrl('/static/img/foldable-section-icon.svg'),
254254
alt: 'trigger folding of the section',
255255
width: 13,
256256
height: 6,
257257
),
258258
),
259-
d.text(title),
259+
title,
260260
],
261261
),
262262
d.div(
263-
classes: ['report-page-section-body', 'foldable-content'],
263+
classes: ['foldable-content'],
264264
children: children,
265-
)
265+
),
266266
],
267267
);
268268
}

‎app/lib/frontend/templates/views/pkg/score_tab.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ d.Node _section(ReportSection section) {
141141
classes: ['foldable-icon'],
142142
image: d.Image(
143143
src: staticUrls
144-
.getAssetUrl('/static/img/report-foldable-icon.svg'),
144+
.getAssetUrl('/static/img/foldable-section-icon.svg'),
145145
alt: 'trigger folding of the section',
146146
width: 13,
147147
height: 6,

‎app/test/frontend/golden/pkg_score_page.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ <h3 class="detail-lead-title">Metadata</h3>
248248
<span class="pkg-report-header-score-granted">18</span>
249249
/
250250
<span class="pkg-report-header-score-max">30</span>
251-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
251+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
252252
</div>
253253
</div>
254254
<div class="foldable-content">
@@ -275,7 +275,7 @@ <h3>
275275
<span class="pkg-report-header-score-granted">36</span>
276276
/
277277
<span class="pkg-report-header-score-max">40</span>
278-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
278+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
279279
</div>
280280
</div>
281281
<div class="foldable-content">

‎app/test/frontend/golden/report_page.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -117,25 +117,25 @@ <h1>Report a problem</h1>
117117
?
118118
</p>
119119
<p></p>
120-
<div class="report-page-section foldable">
121-
<div class="report-page-section-title foldable-button">
122-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
120+
<div class="foldable-section foldable">
121+
<div class="foldable-button">
122+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
123123
I believe the package contains illegal content.
124124
</div>
125-
<div class="report-page-section-body foldable-content">
125+
<div class="foldable-content">
126126
<p>
127127
Please report illegal content through the
128128
<a href="https://reportcontent.google.com/troubleshooter?product=dart_pub&amp;content_id=https://pub.dev/packages/oxygen&amp;url=https://pub.dev/packages/oxygen/example" rel="ugc">illegal content reporting form here</a>
129129
.
130130
</p>
131131
</div>
132132
</div>
133-
<div class="report-page-section foldable">
134-
<div class="report-page-section-title foldable-button">
135-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
133+
<div class="foldable-section foldable">
134+
<div class="foldable-button">
135+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
136136
I have found a bug in the package / I need help using the package.
137137
</div>
138-
<div class="report-page-section-body foldable-content">
138+
<div class="foldable-content">
139139
<p>
140140
Please consult the package page:
141141
<a href="https://pub.dev/packages/oxygen">
@@ -151,12 +151,12 @@ <h1>Report a problem</h1>
151151
</p>
152152
</div>
153153
</div>
154-
<div class="report-page-section foldable report-page-direct-report">
155-
<div class="report-page-section-title foldable-button">
156-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
154+
<div class="foldable-section foldable">
155+
<div class="foldable-button report-page-direct-report">
156+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
157157
I believe the package violates pub.dev/policy.
158158
</div>
159-
<div class="report-page-section-body foldable-content">
159+
<div class="foldable-content">
160160
<p>Contact information:</p>
161161
<div class="mdc-form-field">
162162
<label for="report-email">Email</label>
@@ -181,12 +181,12 @@ <h1>Report a problem</h1>
181181
<button id="report-submit" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple" data-form-api-button="submit">Submit</button>
182182
</div>
183183
</div>
184-
<div class="report-page-section foldable">
185-
<div class="report-page-section-title foldable-button">
186-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
184+
<div class="foldable-section foldable">
185+
<div class="foldable-button">
186+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
187187
I have a problem with the pub.dev website.
188188
</div>
189-
<div class="report-page-section-body foldable-content">
189+
<div class="foldable-content">
190190
<p>
191191
Security vulnerabilities may be reported through
192192
<a href="https://goo.gl/vulnz" rel="ugc">goo.gl/vulnz</a>

‎app/test/task/testdata/goldens/packages/oxygen/score.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ <h3 class="detail-lead-title">Metadata</h3>
240240
<span class="pkg-report-header-score-granted">10</span>
241241
/
242242
<span class="pkg-report-header-score-max">30</span>
243-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
243+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
244244
</div>
245245
</div>
246246
<div class="foldable-content">
@@ -380,7 +380,7 @@ <h3>
380380
<span class="pkg-report-header-score-granted">20</span>
381381
/
382382
<span class="pkg-report-header-score-max">20</span>
383-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
383+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
384384
</div>
385385
</div>
386386
<div class="foldable-content">
@@ -422,7 +422,7 @@ <h3>
422422
<span class="pkg-report-header-score-granted">20</span>
423423
/
424424
<span class="pkg-report-header-score-max">20</span>
425-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
425+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
426426
</div>
427427
</div>
428428
<div class="foldable-content">
@@ -492,7 +492,7 @@ <h3>
492492
<span class="pkg-report-header-score-granted">50</span>
493493
/
494494
<span class="pkg-report-header-score-max">50</span>
495-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
495+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
496496
</div>
497497
</div>
498498
<div class="foldable-content">
@@ -516,7 +516,7 @@ <h3>
516516
<span class="pkg-report-header-score-granted">40</span>
517517
/
518518
<span class="pkg-report-header-score-max">40</span>
519-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
519+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
520520
</div>
521521
</div>
522522
<div class="foldable-content">

‎app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ <h3 class="detail-lead-title">Metadata</h3>
244244
<span class="pkg-report-header-score-granted">10</span>
245245
/
246246
<span class="pkg-report-header-score-max">30</span>
247-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
247+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
248248
</div>
249249
</div>
250250
<div class="foldable-content">
@@ -384,7 +384,7 @@ <h3>
384384
<span class="pkg-report-header-score-granted">20</span>
385385
/
386386
<span class="pkg-report-header-score-max">20</span>
387-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
387+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
388388
</div>
389389
</div>
390390
<div class="foldable-content">
@@ -426,7 +426,7 @@ <h3>
426426
<span class="pkg-report-header-score-granted">20</span>
427427
/
428428
<span class="pkg-report-header-score-max">20</span>
429-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
429+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
430430
</div>
431431
</div>
432432
<div class="foldable-content">
@@ -496,7 +496,7 @@ <h3>
496496
<span class="pkg-report-header-score-granted">50</span>
497497
/
498498
<span class="pkg-report-header-score-max">50</span>
499-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
499+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
500500
</div>
501501
</div>
502502
<div class="foldable-content">
@@ -520,7 +520,7 @@ <h3>
520520
<span class="pkg-report-header-score-granted">40</span>
521521
/
522522
<span class="pkg-report-header-score-max">40</span>
523-
<img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
523+
<img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
524524
</div>
525525
</div>
526526
<div class="foldable-content">

‎pkg/web_css/lib/src/_report.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
width: 100%;
1111
margin-bottom: 12px;
1212
}
13+
}
1314

14-
.report-page-section {
15-
border-top: 1px solid #eee;
16-
margin: 12px 0px;
17-
}
15+
.foldable-section {
16+
border-top: 1px solid #eee;
17+
margin: 12px 0px;
1818

19-
.report-page-section-title {
19+
>.foldable-button {
2020
font-size: 18px;
2121
font-weight: 500;
2222
padding: 8px 0px;
@@ -27,10 +27,6 @@
2727
}
2828
}
2929

30-
.report-page-section-body {
31-
padding-left: 16px;
32-
}
33-
3430
.foldable-icon {
3531
margin: 0px 8px 3px 8px;
3632
width: 12px;
@@ -39,9 +35,13 @@
3935
transition: transform .3s linear;
4036
}
4137

42-
.foldable.-active {
38+
&.-active {
4339
.foldable-icon {
4440
transform: rotate(180deg);
4541
}
4642
}
43+
44+
>.foldable-content {
45+
margin-left: 28px; // foldable icon's margins + width
46+
}
4747
}

‎static/img/report-foldable-icon.svg‎ renamed to ‎static/img/foldable-section-icon.svg‎

File renamed without changes.

0 commit comments

Comments
 (0)