Skip to content

Commit f4c7620

Browse files
willingcwillingc
committed
add more styling to plugins list
1 parent 3629373 commit f4c7620

File tree

6 files changed

+278
-506
lines changed

6 files changed

+278
-506
lines changed

‎create_static_html_files.py‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -124,24 +124,26 @@ def compose_plugins_list_html_file(df_plugins, build_dir) -> None:
124124
plugin_type.append("sample_data")
125125
plugin_type = ", ".join(plugin_type) if plugin_type else "N/A"
126126

127-
html_content += ' <article class="search-result" data-testid="searchResult">\n'
128-
html_content += f' <a class="plugin-search-result" data-testid="pluginSearchResult" href="./plugins/{normalized_name}.html" data-plugin-id="{index}">\n'
129-
html_content += ' <div class="result-item-lists">\n'
130-
html_content += ' <div class="result-text-list">\n'
131-
html_content += f' <h3 class="result-item" data-testid="searchResultDisplayName">{display_name}</h3>\n'
132-
html_content += f' <span class="result-item" data-testid="searchResultName">{name}</span>\n'
133-
html_content += f' <p class="search-result-summary" data-testid="searchResultSummary">{summary}</p>\n'
127+
html_content += (
128+
' <article class="plugin-metadata-section" data-testid="searchResult">\n'
129+
)
130+
html_content += f' <a data-testid="pluginSearchResult" href="./plugins/{normalized_name}.html" data-plugin-id="{index}">\n'
131+
html_content += ' <div class="plugin-metadata-grid">\n'
132+
html_content += ' <div class="plugin-metadata-group">\n'
133+
html_content += f' <h3 class="plugin-metadata-item" data-testid="searchResultDisplayName">{display_name}</h3>\n'
134+
html_content += f' <span class="plugin-metadata-item" data-testid="searchResultName">{name}</span>\n'
135+
html_content += f' <p class="plugin-metadata-item" data-testid="searchResultSummary">{summary}</p>\n'
134136
html_content += " </div>\n"
135-
html_content += ' <div class="result-text-list"><ul>\n'
137+
html_content += ' <div class="plugin-metadata-group"><ul>\n'
136138
for author in authors:
137-
html_content += f' <li class="result-text-item" data-testid="searchResultAuthor">{author}</li>\n'
139+
html_content += f' <li class="plugin-metadata-item" data-testid="searchResultAuthor">{author}</li>\n'
138140
html_content += " </ul>\n</div>\n"
139-
html_content += ' <div class="result-text-list"><ul>\n'
140-
html_content += f' <li class="result-text-item" data-label="First released" data-testid="searchResultMetadata" data-value="{release_date}">\n'
141+
html_content += ' <div class="plugin-metadata-group"><ul>\n'
142+
html_content += f' <li class="plugin-metadata-item" data-label="First released" data-testid="searchResultMetadata" data-value="{release_date}">\n'
141143
html_content += f' <h4 class="inline whitespace-nowrap">First released<!-- -->: </h4>\n <span class="ml-sds-xxs font-bold">{release_date}</span>\n </li>\n'
142-
html_content += f' <li class="result-text-item" data-label="Last updated" data-testid="searchResultMetadata" data-value="{last_updated}">\n'
144+
html_content += f' <li class="plugin-metadata-item" data-label="Last updated" data-testid="searchResultMetadata" data-value="{last_updated}">\n'
143145
html_content += f' <h4 class="inline whitespace-nowrap">Last updated<!-- -->: </h4>\n <span class="ml-sds-xxs font-bold">{last_updated}</span>\n </li>\n'
144-
html_content += f' <li class="result-text-item" data-label="Plugin type" data-testid="searchResultMetadata" data-value="{plugin_type}">\n'
146+
html_content += f' <li class="plugin-metadata-item" data-label="Plugin type" data-testid="searchResultMetadata" data-value="{plugin_type}">\n'
145147
html_content += f' <h4 class="inline whitespace-nowrap">Plugin type<!-- -->: </h4><span class="ml-sds-xxs font-bold">{plugin_type}</span>\n </li>\n'
146148
html_content += " </ul>\n</div>\n"
147149
html_content += " </div></a>\n</article>\n"

‎static/css/styles/components-detail.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/* Reusable UI component styles */
2+
3+
/* region Plugin detail page from each_plugin_template */
4+
5+
.plugins-detail-container {
6+
display: grid;
7+
grid-template-columns: 1fr;
8+
gap: var(--spacing-xl);
9+
max-width: 1200px;
10+
margin: 0 auto;
11+
}
12+
13+
.plugin-article {
14+
grid-column: 1;
15+
}
16+
17+
.plugin-header {
18+
margin-bottom: var(--spacing-lg);
19+
}
20+
21+
.plugin-title {
22+
font-size: 2.5rem;
23+
font-weight: bold;
24+
margin-bottom: var(--spacing-md);
25+
color: var(--primary-dark);
26+
}
27+
28+
.plugin-summary {
29+
font-size: 1.125rem;
30+
margin-bottom: var(--spacing-md);
31+
color: var(--text-light);
32+
}
33+
34+
.plugin-authors {
35+
list-style: none;
36+
margin-bottom: var(--spacing-lg);
37+
}
38+
39+
.plugin-authors li {
40+
display: inline-block;
41+
font-weight: 600;
42+
font-size: 0.875rem;
43+
}
44+
45+
.home-link {
46+
margin-bottom: var(--spacing-lg);
47+
}
48+
49+
.home-link a {
50+
color: black;
51+
text-decoration: none;
52+
font-weight: 500;
53+
}
54+
55+
.home-link a:hover {
56+
color: var(--primary-color);
57+
text-decoration: underline;
58+
}
59+
60+
/* endregion */
61+
62+
/* region Plugin Description */
63+
.plugin-description {
64+
margin-bottom: var(--spacing-xxl);
65+
line-height: 1.7;
66+
}
67+
68+
.plugin-description h1,
69+
.plugin-description h2,
70+
.plugin-description h3 {
71+
margin: var(--spacing-lg) 0 var(--spacing-md) 0;
72+
color: var(--primary-dark);
73+
}
74+
75+
.plugin-description p {
76+
margin-bottom: var(--spacing-md);
77+
}
78+
79+
.plugin-description ul,
80+
.plugin-description ol {
81+
margin-left: var(--spacing-lg);
82+
margin-bottom: var(--spacing-md);
83+
}
84+
85+
.plugin-description code {
86+
background-color: #f5f5f5;
87+
padding: var(--spacing-xs);
88+
border-radius: var(--border-radius);
89+
font-family: var(--font-family-mono), monospace;
90+
font-size: 0.875rem;
91+
}
92+
93+
.plugin-description pre {
94+
background-color: #f5f5f5;
95+
padding: var(--spacing-md);
96+
border-radius: var(--border-radius);
97+
overflow-x: auto;
98+
margin-bottom: var(--spacing-md);
99+
}
100+
101+
.plugin-description pre code {
102+
background: none;
103+
padding: 0;
104+
}
105+
106+
/* endregion */
107+
108+
/* region Metadata Sections */
109+
.metadata-section {
110+
background-color: #f9f9f9;
111+
padding: var(--spacing-lg);
112+
border-radius: var(--border-radius);
113+
margin-top: var(--spacing-xl);
114+
}
115+
116+
.metadata-section h2 {
117+
font-size: 1.5rem;
118+
margin-bottom: var(--spacing-lg);
119+
color: var(--primary-dark);
120+
border-bottom: 2px solid var(--border-color);
121+
padding-bottom: var(--spacing-sm);
122+
}
123+
124+
.metadata-grid {
125+
display: grid;
126+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
127+
gap: var(--spacing-lg);
128+
}
129+
130+
.metadata-group {
131+
display: flex;
132+
flex-direction: column;
133+
gap: var(--spacing-md);
134+
}
135+
136+
.metadata-item {
137+
display: flex;
138+
flex-direction: column;
139+
gap: var(--spacing-xs);
140+
}
141+
142+
.metadata-label {
143+
font-weight: bold;
144+
font-size: 0.875rem;
145+
color: var(--primary-dark);
146+
}
147+
148+
.metadata-value {
149+
font-size: 0.875rem;
150+
color: var(--text-color);
151+
}
152+
153+
.metadata-value a {
154+
color: var(--primary-color);
155+
text-decoration: underline;
156+
}
157+
158+
.metadata-value a:hover {
159+
color: var(--primary-dark);
160+
}
161+
162+
.metadata-list {
163+
list-style: none;
164+
display: flex;
165+
flex-wrap: wrap;
166+
gap: var(--spacing-xs);
167+
}
168+
169+
.metadata-list li {
170+
background-color: var(--background-color);
171+
padding: var(--spacing-xs) var(--spacing-sm);
172+
border-radius: var(--border-radius);
173+
border: 1px solid var(--border-color);
174+
font-size: 0.75rem;
175+
}
176+
177+
.info-not-submitted {
178+
color: var(--text-light);
179+
font-style: italic;
180+
font-size: 0.75rem;
181+
}
182+
183+
184+
/* Sidebar */
185+
.sidebar {
186+
grid-column: 1;
187+
order: 2;
188+
}
189+
190+
/* endregion */

0 commit comments

Comments
 (0)