Skip to content

Commit 3052932

Browse files
isoosisoos
authored
Fix topics text/title and separate CSS styles. (#7706)
1 parent 593f5f7 commit 3052932

File tree

7 files changed

+81
-67
lines changed

7 files changed

+81
-67
lines changed

‎app/lib/frontend/templates/views/page/topics_list.dart

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,45 +6,39 @@ import '../../../../service/topics/models.dart';
66
import '../../../../shared/urls.dart' as urls;
77
import '../../../dom/dom.dart' as d;
88

9+
/// Renders the topics list node of /topics page.
910
d.Node renderTopicsList(Map<String, int> topics) {
10-
return d.div(children: [
11-
d.h1(text: 'Topics '),
12-
topicsListNode(topics),
13-
]);
14-
}
15-
16-
/// Renders the package list node of /topics page.
17-
d.Node topicsListNode(Map<String, int> topics) {
1811
final sortedTopics = topics.entries.toList()
1912
..sort((a, b) => b.value.compareTo(a.value));
20-
21-
return d.div(
22-
classes: ['packages', '-compact'],
23-
children: sortedTopics.map((e) => _topic(e.key, e.value)),
24-
);
13+
return d.div(classes: [
14+
'topics-page'
15+
], children: [
16+
d.h1(text: 'Topics '),
17+
...sortedTopics.map((e) => _topic(e.key, e.value)),
18+
]);
2519
}
2620

2721
d.Node _topic(String name, int count) {
2822
final ct = canonicalTopics.asMap[name];
2923
final description = ct?.description;
3024
return d.div(
31-
classes: ['packages-item'],
25+
classes: ['topic-item'],
3226
children: [
3327
d.h3(
34-
classes: ['packages-title'],
28+
classes: ['topic-title'],
3529
children: [
3630
d.a(
3731
text: '#$name',
3832
href: urls.searchUrl(q: 'topic:$name'),
3933
rel: 'nofollow',
4034
),
4135
d.span(
42-
classes: ['topics-metadata'],
36+
classes: ['topic-metadata'],
4337
text: '$count ${count == 1 ? 'package' : 'packages'}')
4438
],
4539
),
4640
if (description != null)
47-
d.p(classes: ['topics-description'], text: description),
41+
d.p(classes: ['topic-description'], text: description),
4842
],
4943
);
5044
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -193,9 +193,11 @@ d.Node? _topicstNode(List<String>? topics) {
193193
final ct = canonicalTopics.asMap[topic];
194194
final description = ct?.description;
195195
final node = d.a(
196-
href: urls.searchUrl(q: 'topic:$topic'),
197-
text: description ?? '#$topic',
198-
rel: 'nofollow');
196+
href: urls.searchUrl(q: 'topic:$topic'),
197+
text: '#$topic',
198+
title: description,
199+
rel: 'nofollow',
200+
);
199201
nodes.add(node);
200202
}
201203
return d.fragment(nodes);

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -162,10 +162,12 @@ d.Node _packageItem(
162162
final ct = canonicalTopics.asMap[topic];
163163
final description = ct?.description;
164164
return d.a(
165-
classes: ['topics-tag'],
166-
href: urls.searchUrl(q: 'topic:$topic'),
167-
text: description ?? '#$topic',
168-
rel: 'nofollow');
165+
classes: ['topics-tag'],
166+
href: urls.searchUrl(q: 'topic:$topic'),
167+
text: '#$topic',
168+
title: description,
169+
rel: 'nofollow',
170+
);
169171
},
170172
).toList();
171173
}

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

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -111,34 +111,32 @@ <h3 class="foldable-button">
111111
<img class="standalone-side-image" src="/static/hash-%%etag%%/img/packages-side.webp" alt="" width="400" height="400" role="presentation"/>
112112
</div>
113113
<div class="standalone-content">
114-
<div>
114+
<div class="topics-page">
115115
<h1>Topics</h1>
116-
<div class="packages -compact">
117-
<div class="packages-item">
118-
<h3 class="packages-title">
119-
<a href="/packages?q=topic%3Anetwork" rel="nofollow">#network</a>
120-
<span class="topics-metadata">7 packages</span>
121-
</h3>
122-
</div>
123-
<div class="packages-item">
124-
<h3 class="packages-title">
125-
<a href="/packages?q=topic%3Aui" rel="nofollow">#ui</a>
126-
<span class="topics-metadata">5 packages</span>
127-
</h3>
128-
</div>
129-
<div class="packages-item">
130-
<h3 class="packages-title">
131-
<a href="/packages?q=topic%3Ahttp" rel="nofollow">#http</a>
132-
<span class="topics-metadata">4 packages</span>
133-
</h3>
134-
</div>
135-
<div class="packages-item">
136-
<h3 class="packages-title">
137-
<a href="/packages?q=topic%3Awidget" rel="nofollow">#widget</a>
138-
<span class="topics-metadata">1 package</span>
139-
</h3>
140-
<p class="topics-description">Packages that contain Flutter widgets.</p>
141-
</div>
116+
<div class="topic-item">
117+
<h3 class="topic-title">
118+
<a href="/packages?q=topic%3Anetwork" rel="nofollow">#network</a>
119+
<span class="topic-metadata">7 packages</span>
120+
</h3>
121+
</div>
122+
<div class="topic-item">
123+
<h3 class="topic-title">
124+
<a href="/packages?q=topic%3Aui" rel="nofollow">#ui</a>
125+
<span class="topic-metadata">5 packages</span>
126+
</h3>
127+
</div>
128+
<div class="topic-item">
129+
<h3 class="topic-title">
130+
<a href="/packages?q=topic%3Ahttp" rel="nofollow">#http</a>
131+
<span class="topic-metadata">4 packages</span>
132+
</h3>
133+
</div>
134+
<div class="topic-item">
135+
<h3 class="topic-title">
136+
<a href="/packages?q=topic%3Awidget" rel="nofollow">#widget</a>
137+
<span class="topic-metadata">1 package</span>
138+
</h3>
139+
<p class="topic-description">Packages that contain Flutter widgets.</p>
142140
</div>
143141
</div>
144142
</div>

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -252,22 +252,6 @@
252252
}
253253
}
254254

255-
.topics-tag {
256-
display: inline-block;
257-
padding: 4px 4px;
258-
}
259-
260-
.topics-metadata {
261-
font-size: 12px;
262-
padding-left: 10px;
263-
}
264-
265-
.topics-description {
266-
margin: 0px;
267-
font-size: 14px;
268-
}
269-
270-
271255
.packages-description {
272256
margin: 4px 0px;
273257
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* Copyright (c) 2024, the Dart project authors. Please see the AUTHORS file
2+
for details. All rights reserved. Use of this source code is governed by a
3+
BSD-style license that can be found in the LICENSE file. */
4+
5+
.topics-page {
6+
.topic-item {
7+
padding: 0;
8+
margin-bottom: 16px;
9+
10+
.topic-title {
11+
flex-grow: 1;
12+
font-size: 22px;
13+
font-weight: 500;
14+
margin: 0;
15+
overflow-wrap: anywhere;
16+
}
17+
18+
.topic-metadata {
19+
font-size: 12px;
20+
padding-left: 10px;
21+
}
22+
23+
.topic-description {
24+
margin: 0px;
25+
font-size: 14px;
26+
}
27+
}
28+
}
29+
30+
.topics-tag {
31+
display: inline-block;
32+
padding: 4px 4px;
33+
}

‎pkg/web_css/lib/style.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,4 @@
2020
@import 'src/_scores';
2121
@import 'src/_search';
2222
@import 'src/_tags';
23+
@import 'src/topics';

0 commit comments

Comments
 (0)