Skip to content

Commit 6e2069a

Browse files
a5durclaude
a5dur
and
claude
committed
Add subtle type iconography to Recently Updated cards
Adds two small visual cues to each card without changing the overall design: - Inline SVG icon (20px, stroke-width 2, Lucide-style) at the top of the card, colored per type - Small type badge pill in the meta row Type mapping: Extension → grid icon, #d9534f (CKAN red) Site → globe icon, #337ab7 (blue) Tool → gear icon, #d4930a (amber) Showcase → star icon, #1d8fad (teal) Dataset → layers icon, #3d8b3d (green) Card layout, border, border-radius, and hover animation are unchanged. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 684b41e commit 6e2069a

File tree

1 file changed

+172
-89
lines changed

1 file changed

+172
-89
lines changed

‎ckanext/pose_theme/pose_custom_homepage/templates/home/snippets/package_item.html‎

Lines changed: 172 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{#
2-
Displays a single dataset card with type-based iconography and color coding.
2+
Displays a single of dataset.
33

44
package - A package to display.
55
item_class - The class name to use on the list item.
@@ -22,41 +22,61 @@
2222
{% set package_url = h.url_for(package.type ~ '.read', id=package.name) %}
2323
{% endif %}
2424

25-
{# --- Type iconography config --- #}
25+
{# --- Per-type icon and color --- #}
2626
{% if package.type == 'extension' %}
27-
{% set type_css = 'dataset-item--extension' %}
28-
{% set type_icon = 'fa-puzzle-piece' %}
2927
{% set type_label = _('Extension') %}
28+
{% set type_class = 'badge-type--extension' %}
29+
{% set type_color = '#d9534f' %}
3030
{% elif package.type == 'site' %}
31-
{% set type_css = 'dataset-item--site' %}
32-
{% set type_icon = 'fa-globe' %}
3331
{% set type_label = _('Site') %}
32+
{% set type_class = 'badge-type--site' %}
33+
{% set type_color = '#337ab7' %}
3434
{% elif package.type == 'tool' %}
35-
{% set type_css = 'dataset-item--tool' %}
36-
{% set type_icon = 'fa-wrench' %}
3735
{% set type_label = _('Tool') %}
36+
{% set type_class = 'badge-type--tool' %}
37+
{% set type_color = '#d4930a' %}
3838
{% elif package.type == 'showcase' %}
39-
{% set type_css = 'dataset-item--showcase' %}
40-
{% set type_icon = 'fa-star' %}
4139
{% set type_label = _('Showcase') %}
40+
{% set type_class = 'badge-type--showcase' %}
41+
{% set type_color = '#1d8fad' %}
4242
{% else %}
43-
{% set type_css = 'dataset-item--dataset' %}
44-
{% set type_icon = 'fa-database' %}
4543
{% set type_label = _('Dataset') %}
44+
{% set type_class = 'badge-type--dataset' %}
45+
{% set type_color = '#3d8b3d' %}
4646
{% endif %}
4747

4848
{% block package_item %}
49-
<li class="{{ item_class or 'dataset-item' }} {{ type_css }}">
49+
<li class="{{ item_class or "dataset-item" }}">
5050
{% block content %}
5151
<div class="dataset-content">
52-
53-
{# --- Type icon + badge row --- #}
54-
<div class="dataset-type-row">
55-
<div class="dataset-type-icon">
56-
<i class="fa {{ type_icon }}"></i>
57-
</div>
58-
<span class="dataset-type-badge">{{ type_label }}</span>
59-
</div>
52+
<span class="dataset-type-icon" style="color: {{ type_color }};">
53+
{% if package.type == 'extension' %}
54+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
55+
<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2v-4M9 21H5a2 2 0 0 1-2-2v-4m0 0h18"/>
56+
</svg>
57+
{% elif package.type == 'site' %}
58+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
59+
<circle cx="12" cy="12" r="10"/>
60+
<line x1="2" y1="12" x2="22" y2="12"/>
61+
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
62+
</svg>
63+
{% elif package.type == 'tool' %}
64+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
65+
<circle cx="12" cy="12" r="3"/>
66+
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
67+
</svg>
68+
{% elif package.type == 'showcase' %}
69+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
70+
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
71+
</svg>
72+
{% else %}
73+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
74+
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
75+
<polyline points="2 17 12 22 22 17"/>
76+
<polyline points="2 12 12 17 22 12"/>
77+
</svg>
78+
{% endif %}
79+
</span>
6080

6181
{% block heading %}
6282
<div class="dataset-heading-wrapper">
@@ -67,6 +87,7 @@ <h3 class="dataset-heading">
6787
</h3>
6888
{% block heading_meta %}
6989
<div class="dataset-meta-badges">
90+
<span class="badge badge-type {{ type_class }}">{{ type_label }}</span>
7091
{% if package.get('state', '').startswith('draft') %}
7192
<span class="badge badge-draft">{{ _('Draft') }}</span>
7293
{% elif package.get('state', '').startswith('deleted') %}
@@ -85,8 +106,8 @@ <h3 class="dataset-heading">
85106
{% if package.metadata_modified %}
86107
<div class="dataset-update">
87108
<svg class="update-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
88-
<path d="M8 1.5V8L11.5 11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
89-
<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
109+
<path d="M8 1.5V8L11.5 11.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
110+
<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="2"/>
90111
</svg>
91112
Updated {{ h.render_datetime(package.metadata_modified, with_hours=True) }}
92113
</div>
@@ -96,91 +117,61 @@ <h3 class="dataset-heading">
96117
{% if tracking_summary %}
97118
<div class="dataset-views">
98119
<svg class="views-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
99-
<path d="M1 8s2-5 7-5 7 5 7 5-2 5-7 5-7-5-7-5z" stroke="currentColor" stroke-width="1.5"/>
100-
<circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.5"/>
120+
<path d="M1 8s2-5 7-5 7 5 7 5-2 5-7 5-7-5-7-5z" stroke="currentColor" stroke-width="2"/>
121+
<circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="2"/>
101122
</svg>
102123
{{ tracking_summary.recent }} recent views
103124
</div>
104125
{% endif %}
105126
{% endif %}
106127
{% endblock %}
107128

129+
130+
108131
</div>
109132
{% endblock %}
110133
</li>
111134
{% endblock %}
112135

113136
<style>
114-
/* =====================================================
115-
Type color tokens
116-
===================================================== */
117-
.dataset-item--extension { --type-color: #e8503a; --type-rgb: 232, 80, 58; }
118-
.dataset-item--site { --type-color: #3b82f6; --type-rgb: 59, 130, 246; }
119-
.dataset-item--tool { --type-color: #f59e0b; --type-rgb: 245, 158, 11; }
120-
.dataset-item--showcase { --type-color: #10b981; --type-rgb: 16, 185, 129; }
121-
.dataset-item--dataset { --type-color: #6366f1; --type-rgb: 99, 102, 241; }
122-
123-
/* =====================================================
124-
Card base
125-
===================================================== */
137+
/* Dataset Item Styling */
126138
.dataset-item {
127139
background: #ffffff;
128-
border: 1px solid #f2f4f7;
129-
border-top: 4px solid var(--type-color, #6366f1);
130-
border-radius: 4px;
140+
border: 2px solid #f2f4f7;
141+
border-radius: 16px;
131142
padding: 24px;
132-
transition: box-shadow 0.2s ease, transform 0.2s ease;
143+
transition: all 0.3s ease;
133144
position: relative;
145+
overflow: hidden;
146+
}
147+
148+
.dataset-item::before {
149+
content: "";
150+
position: absolute;
151+
top: 0;
152+
left: 0;
153+
right: 0;
154+
height: 3px;
155+
background: #d9534f;
156+
transform: scaleX(0);
157+
transform-origin: left;
158+
transition: transform 0.3s ease;
134159
}
135160

136161
.dataset-item:hover {
162+
border-color: #e4e7ec;
137163
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
138164
transform: translateY(-2px);
139165
}
140166

141-
/* =====================================================
142-
Type icon + badge row
143-
===================================================== */
144-
.dataset-type-row {
145-
display: flex;
146-
align-items: center;
147-
justify-content: space-between;
148-
margin-bottom: 16px;
149-
}
150-
151-
.dataset-type-icon {
152-
width: 40px;
153-
height: 40px;
154-
border-radius: 4px;
155-
background: rgba(var(--type-rgb, 99, 102, 241), 0.10);
156-
display: flex;
157-
align-items: center;
158-
justify-content: center;
159-
}
160-
161-
.dataset-type-icon .fa {
162-
font-size: 17px;
163-
color: var(--type-color, #6366f1);
164-
}
165-
166-
.dataset-type-badge {
167-
display: inline-flex;
168-
align-items: center;
169-
padding: 4px 12px;
170-
border-radius: 12px;
171-
background: rgba(var(--type-rgb, 99, 102, 241), 0.08);
172-
color: var(--type-color, #6366f1);
173-
font-size: 10px;
174-
font-weight: 700;
175-
text-transform: uppercase;
176-
letter-spacing: 0.5px;
167+
.dataset-item:hover::before {
168+
transform: scaleX(1);
177169
}
178170

179-
/* =====================================================
180-
Card content (unchanged from before)
181-
===================================================== */
171+
/* Dataset Content */
182172
.dataset-content {
183173
position: relative;
174+
z-index: 1;
184175
}
185176

186177
.dataset-heading-wrapper {
@@ -196,19 +187,32 @@ <h3 class="dataset-heading">
196187
flex: 1;
197188
}
198189

190+
/* Type icon at top of card */
191+
.dataset-type-icon {
192+
display: block;
193+
margin-bottom: 14px;
194+
opacity: 0.85;
195+
line-height: 1;
196+
}
197+
198+
.dataset-type-icon svg {
199+
display: block;
200+
}
201+
199202
.dataset-heading a {
200203
font-size: 18px;
201204
font-weight: 600;
202-
color: #0f172a;
205+
color: #000;
203206
text-decoration: none;
204207
line-height: 1.4;
205208
transition: color 0.2s ease;
206209
}
207210

208211
.dataset-heading a:hover {
209-
color: var(--type-color, #6366f1);
212+
color: #d9534f;
210213
}
211214

215+
/* Meta Badges */
212216
.dataset-meta-badges {
213217
display: flex;
214218
gap: 8px;
@@ -237,32 +241,111 @@ <h3 class="dataset-heading">
237241
color: #d9534f;
238242
}
239243

244+
/* Type badges — per type */
245+
.badge-type { font-size: 11px; padding: 3px 10px; }
246+
247+
.badge-type--extension { background: rgba(217, 83, 79, 0.08); color: #d9534f; }
248+
.badge-type--tool { background: rgba(212, 147, 10, 0.10); color: #d4930a; }
249+
.badge-type--site { background: rgba(51, 122, 183, 0.08); color: #337ab7; }
250+
.badge-type--showcase { background: rgba(91, 192, 222, 0.10); color: #1d8fad; }
251+
.badge-type--dataset { background: rgba(92, 184, 92, 0.08); color: #3d8b3d; }
252+
253+
254+
/* Update/Views Info */
240255
.dataset-update,
241256
.dataset-views {
242257
display: flex;
243258
align-items: center;
244259
gap: 6px;
245-
font-size: 12px;
246-
color: #94a3b8;
247-
margin-top: 8px;
260+
font-size: 14px;
261+
color: #667085;
262+
margin-bottom: 16px;
248263
}
249264

250265
.update-icon,
251266
.views-icon {
252267
flex-shrink: 0;
253-
color: #94a3b8;
268+
color: #98a2b3;
254269
}
255270

256-
/* =====================================================
257-
Responsive
258-
===================================================== */
271+
/* Resources Section */
272+
.dataset-resources-wrapper {
273+
display: flex;
274+
align-items: center;
275+
gap: 12px;
276+
flex-wrap: wrap;
277+
}
278+
279+
.dataset-resources {
280+
display: flex;
281+
gap: 8px;
282+
flex-wrap: wrap;
283+
list-style: none;
284+
padding: 0;
285+
margin: 0;
286+
}
287+
288+
.dataset-resources li {
289+
margin: 0;
290+
}
291+
292+
.resource-badge {
293+
display: inline-flex;
294+
align-items: center;
295+
padding: 4px 10px;
296+
border-radius: 6px;
297+
font-size: 11px;
298+
font-weight: 600;
299+
text-transform: uppercase;
300+
letter-spacing: 0.5px;
301+
text-decoration: none;
302+
transition: all 0.2s ease;
303+
color: #ffffff !important;
304+
}
305+
306+
.resource-badge:hover {
307+
transform: translateY(-1px);
308+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
309+
}
310+
311+
/* Private Badge */
312+
.dataset-private {
313+
display: inline-flex;
314+
align-items: center;
315+
gap: 6px;
316+
padding: 4px 12px;
317+
border-radius: 12px;
318+
background: rgba(0, 0, 0, 0.05);
319+
color: #475467;
320+
font-size: 12px;
321+
font-weight: 600;
322+
text-transform: uppercase;
323+
letter-spacing: 0.5px;
324+
}
325+
326+
.lock-icon {
327+
flex-shrink: 0;
328+
color: #667085;
329+
}
330+
331+
/* Responsive */
259332
@media (max-width: 768px) {
260333
.dataset-item {
261334
padding: 20px;
262335
}
263336

337+
.dataset-heading-wrapper {
338+
flex-direction: column;
339+
gap: 12px;
340+
}
341+
264342
.dataset-heading a {
265343
font-size: 16px;
266344
}
345+
346+
.dataset-resources-wrapper {
347+
flex-direction: column;
348+
align-items: flex-start;
349+
}
267350
}
268351
</style>

0 commit comments

Comments
 (0)