diff --git a/app/lib/frontend/templates/report.dart b/app/lib/frontend/templates/report.dart index da27197ae9..5470f459d8 100644 --- a/app/lib/frontend/templates/report.dart +++ b/app/lib/frontend/templates/report.dart @@ -93,16 +93,16 @@ Iterable _report( d.p(text: ''), // illegal content if (subject.isPackage) - _block( - title: 'I believe the package contains illegal content.', + _foldableSection( + title: d.text('I believe the package contains illegal content.'), children: [ d.markdown('Please report illegal content through the ' '[illegal content reporting form here]($lcpsDeepLink).') ], ) else if (subject.isPublisher) - _block( - title: 'I believe the publisher contains illegal content.', + _foldableSection( + title: d.text('I believe the publisher contains illegal content.'), children: [ d.markdown('Please report illegal content through the ' '[illegal content reporting form here]($lcpsDeepLink).') @@ -111,9 +111,9 @@ Iterable _report( // contact if (subject.isPackage) - _block( - title: - 'I have found a bug in the package / I need help using the package.', + _foldableSection( + title: d.text( + 'I have found a bug in the package / I need help using the package.'), children: [ d.markdown('Please consult the package page: ' '[`pub.dev/packages/${subject.package}`](https://pub.dev/packages/${subject.package})'), @@ -131,8 +131,8 @@ Iterable _report( ], ) else if (subject.isPublisher) - _block( - title: 'I want to contact the publisher.', + _foldableSection( + title: d.text('I want to contact the publisher.'), children: [ d.markdown('Please consult the publisher page: ' '[`pub.dev/publishers/${subject.publisherId}`](https://pub.dev/publishers/${subject.publisherId})'), @@ -143,9 +143,9 @@ Iterable _report( ), // direct report - _block( - classes: ['report-page-direct-report'], - title: 'I believe the $kindLabel violates pub.dev/policy.', + _foldableSection( + buttonDivClasses: ['report-page-direct-report'], + title: d.text('I believe the $kindLabel violates pub.dev/policy.'), children: [ if (!(sessionData?.isAuthenticated ?? false)) d.fragment([ @@ -176,8 +176,8 @@ Iterable _report( ), // problem with pub.dev - _block( - title: 'I have a problem with the pub.dev website.', + _foldableSection( + title: d.text('I have a problem with the pub.dev website.'), children: [ d.markdown('Security vulnerabilities may be reported through ' '[goo.gl/vulnz](https://goo.gl/vulnz)'), @@ -235,34 +235,34 @@ Iterable _appeal( ]; } -d.Node _block({ - required String title, +d.Node _foldableSection({ + required d.Node title, required Iterable children, - List? classes, + Iterable? buttonDivClasses, }) { return d.div( - classes: ['report-page-section', 'foldable', ...?classes], + classes: ['foldable-section', 'foldable'], children: [ d.div( - classes: ['report-page-section-title', 'foldable-button'], + classes: ['foldable-button', ...?buttonDivClasses], children: [ d.img( classes: ['foldable-icon'], image: d.Image( src: staticUrls - .getAssetUrl('/static/img/report-foldable-icon.svg'), + .getAssetUrl('/static/img/foldable-section-icon.svg'), alt: 'trigger folding of the section', width: 13, height: 6, ), ), - d.text(title), + title, ], ), d.div( - classes: ['report-page-section-body', 'foldable-content'], + classes: ['foldable-content'], children: children, - ) + ), ], ); } diff --git a/app/lib/frontend/templates/views/pkg/score_tab.dart b/app/lib/frontend/templates/views/pkg/score_tab.dart index 5249cf5fb0..e2e411e096 100644 --- a/app/lib/frontend/templates/views/pkg/score_tab.dart +++ b/app/lib/frontend/templates/views/pkg/score_tab.dart @@ -141,7 +141,7 @@ d.Node _section(ReportSection section) { classes: ['foldable-icon'], image: d.Image( src: staticUrls - .getAssetUrl('/static/img/report-foldable-icon.svg'), + .getAssetUrl('/static/img/foldable-section-icon.svg'), alt: 'trigger folding of the section', width: 13, height: 6, diff --git a/app/test/frontend/golden/pkg_score_page.html b/app/test/frontend/golden/pkg_score_page.html index 9bdffb0898..f14945828c 100644 --- a/app/test/frontend/golden/pkg_score_page.html +++ b/app/test/frontend/golden/pkg_score_page.html @@ -248,7 +248,7 @@

Metadata

18 / 30 - trigger folding of the section + trigger folding of the section
@@ -275,7 +275,7 @@

36 / 40 - trigger folding of the section + trigger folding of the section

diff --git a/app/test/frontend/golden/report_page.html b/app/test/frontend/golden/report_page.html index 4030cb31e9..7ae90b76d3 100644 --- a/app/test/frontend/golden/report_page.html +++ b/app/test/frontend/golden/report_page.html @@ -117,12 +117,12 @@

Report a problem

?

-
-
- trigger folding of the section +
+
+ trigger folding of the section I believe the package contains illegal content.
-
+

Please report illegal content through the illegal content reporting form here @@ -130,12 +130,12 @@

Report a problem

-
-
diff --git a/pkg/web_css/lib/src/_report.scss b/pkg/web_css/lib/src/_report.scss index bf86c0bdf8..2a2e7d7f02 100644 --- a/pkg/web_css/lib/src/_report.scss +++ b/pkg/web_css/lib/src/_report.scss @@ -10,13 +10,13 @@ width: 100%; margin-bottom: 12px; } +} - .report-page-section { - border-top: 1px solid #eee; - margin: 12px 0px; - } +.foldable-section { + border-top: 1px solid #eee; + margin: 12px 0px; - .report-page-section-title { + >.foldable-button { font-size: 18px; font-weight: 500; padding: 8px 0px; @@ -27,10 +27,6 @@ } } - .report-page-section-body { - padding-left: 16px; - } - .foldable-icon { margin: 0px 8px 3px 8px; width: 12px; @@ -39,9 +35,13 @@ transition: transform .3s linear; } - .foldable.-active { + &.-active { .foldable-icon { transform: rotate(180deg); } } + + >.foldable-content { + margin-left: 28px; // foldable icon's margins + width + } } diff --git a/static/img/report-foldable-icon.svg b/static/img/foldable-section-icon.svg similarity index 100% rename from static/img/report-foldable-icon.svg rename to static/img/foldable-section-icon.svg