Skip to content

Commit 684b41e

Browse files
a5durclaude
a5dur
and
claude
committed
Add type-based iconography and color coding to Recently Updated cards
Each dataset type now has a distinct visual identity on the homepage cards: Type Color Icon ───────────────────────────────────── Extension #e8503a fa-puzzle-piece Site #3b82f6 fa-globe Tool #f59e0b fa-wrench Showcase #10b981 fa-star Dataset #6366f1 fa-database Per-card changes (matching Figma design): - 4px colored top border (always visible, replaces the hover-only red bar) - 40×40 icon container with 10% tinted background, top-left of card - Type badge pill (10px bold uppercase) with 8% tinted background, top-right - Hover title color inherits the type color instead of a fixed red - Colors are driven by CSS custom properties (--type-color, --type-rgb) set via per-type modifier classes, making future theme changes a one-line edit Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 1549cdd commit 684b41e

File tree

1 file changed

+102
-110
lines changed

1 file changed

+102
-110
lines changed

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

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

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

25+
{# --- Type iconography config --- #}
26+
{% if package.type == 'extension' %}
27+
{% set type_css = 'dataset-item--extension' %}
28+
{% set type_icon = 'fa-puzzle-piece' %}
29+
{% set type_label = _('Extension') %}
30+
{% elif package.type == 'site' %}
31+
{% set type_css = 'dataset-item--site' %}
32+
{% set type_icon = 'fa-globe' %}
33+
{% set type_label = _('Site') %}
34+
{% elif package.type == 'tool' %}
35+
{% set type_css = 'dataset-item--tool' %}
36+
{% set type_icon = 'fa-wrench' %}
37+
{% set type_label = _('Tool') %}
38+
{% elif package.type == 'showcase' %}
39+
{% set type_css = 'dataset-item--showcase' %}
40+
{% set type_icon = 'fa-star' %}
41+
{% set type_label = _('Showcase') %}
42+
{% else %}
43+
{% set type_css = 'dataset-item--dataset' %}
44+
{% set type_icon = 'fa-database' %}
45+
{% set type_label = _('Dataset') %}
46+
{% endif %}
47+
2548
{% block package_item %}
26-
<li class="{{ item_class or "dataset-item" }}">
49+
<li class="{{ item_class or 'dataset-item' }} {{ type_css }}">
2750
{% block content %}
2851
<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>
60+
2961
{% block heading %}
3062
<div class="dataset-heading-wrapper">
3163
<h3 class="dataset-heading">
@@ -47,7 +79,7 @@ <h3 class="dataset-heading">
4779
{% endblock %}
4880
</div>
4981
{% endblock %}
50-
82+
5183
{% block notes %}
5284
{% if note_type == 'updated' %}
5385
{% if package.metadata_modified %}
@@ -72,53 +104,83 @@ <h3 class="dataset-heading">
72104
{% endif %}
73105
{% endif %}
74106
{% endblock %}
75-
76-
77-
107+
78108
</div>
79109
{% endblock %}
80110
</li>
81111
{% endblock %}
82112

83113
<style>
84-
/* Dataset Item Styling */
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+
===================================================== */
85126
.dataset-item {
86127
background: #ffffff;
87-
border: 2px solid #f2f4f7;
88-
border-radius: 16px;
128+
border: 1px solid #f2f4f7;
129+
border-top: 4px solid var(--type-color, #6366f1);
130+
border-radius: 4px;
89131
padding: 24px;
90-
transition: all 0.3s ease;
132+
transition: box-shadow 0.2s ease, transform 0.2s ease;
91133
position: relative;
92-
overflow: hidden;
93-
}
94-
95-
.dataset-item::before {
96-
content: "";
97-
position: absolute;
98-
top: 0;
99-
left: 0;
100-
right: 0;
101-
height: 3px;
102-
background: #d9534f;
103-
transform: scaleX(0);
104-
transform-origin: left;
105-
transition: transform 0.3s ease;
106134
}
107135

108136
.dataset-item:hover {
109-
border-color: #e4e7ec;
110137
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
111138
transform: translateY(-2px);
112139
}
113140

114-
.dataset-item:hover::before {
115-
transform: scaleX(1);
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;
116159
}
117160

118-
/* Dataset Content */
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;
177+
}
178+
179+
/* =====================================================
180+
Card content (unchanged from before)
181+
===================================================== */
119182
.dataset-content {
120183
position: relative;
121-
z-index: 1;
122184
}
123185

124186
.dataset-heading-wrapper {
@@ -137,17 +199,16 @@ <h3 class="dataset-heading">
137199
.dataset-heading a {
138200
font-size: 18px;
139201
font-weight: 600;
140-
color: #000;
202+
color: #0f172a;
141203
text-decoration: none;
142204
line-height: 1.4;
143205
transition: color 0.2s ease;
144206
}
145207

146208
.dataset-heading a:hover {
147-
color: #d9534f;
209+
color: var(--type-color, #6366f1);
148210
}
149211

150-
/* Meta Badges */
151212
.dataset-meta-badges {
152213
display: flex;
153214
gap: 8px;
@@ -176,101 +237,32 @@ <h3 class="dataset-heading">
176237
color: #d9534f;
177238
}
178239

179-
/* Update/Views Info */
180240
.dataset-update,
181241
.dataset-views {
182242
display: flex;
183243
align-items: center;
184244
gap: 6px;
185-
font-size: 14px;
186-
color: #667085;
187-
margin-bottom: 16px;
245+
font-size: 12px;
246+
color: #94a3b8;
247+
margin-top: 8px;
188248
}
189249

190250
.update-icon,
191251
.views-icon {
192252
flex-shrink: 0;
193-
color: #98a2b3;
194-
}
195-
196-
/* Resources Section */
197-
.dataset-resources-wrapper {
198-
display: flex;
199-
align-items: center;
200-
gap: 12px;
201-
flex-wrap: wrap;
253+
color: #94a3b8;
202254
}
203255

204-
.dataset-resources {
205-
display: flex;
206-
gap: 8px;
207-
flex-wrap: wrap;
208-
list-style: none;
209-
padding: 0;
210-
margin: 0;
211-
}
212-
213-
.dataset-resources li {
214-
margin: 0;
215-
}
216-
217-
.resource-badge {
218-
display: inline-flex;
219-
align-items: center;
220-
padding: 4px 10px;
221-
border-radius: 6px;
222-
font-size: 11px;
223-
font-weight: 600;
224-
text-transform: uppercase;
225-
letter-spacing: 0.5px;
226-
text-decoration: none;
227-
transition: all 0.2s ease;
228-
color: #ffffff !important;
229-
}
230-
231-
.resource-badge:hover {
232-
transform: translateY(-1px);
233-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
234-
}
235-
236-
/* Private Badge */
237-
.dataset-private {
238-
display: inline-flex;
239-
align-items: center;
240-
gap: 6px;
241-
padding: 4px 12px;
242-
border-radius: 12px;
243-
background: rgba(0, 0, 0, 0.05);
244-
color: #475467;
245-
font-size: 12px;
246-
font-weight: 600;
247-
text-transform: uppercase;
248-
letter-spacing: 0.5px;
249-
}
250-
251-
.lock-icon {
252-
flex-shrink: 0;
253-
color: #667085;
254-
}
255-
256-
/* Responsive */
256+
/* =====================================================
257+
Responsive
258+
===================================================== */
257259
@media (max-width: 768px) {
258260
.dataset-item {
259261
padding: 20px;
260262
}
261-
262-
.dataset-heading-wrapper {
263-
flex-direction: column;
264-
gap: 12px;
265-
}
266-
263+
267264
.dataset-heading a {
268265
font-size: 16px;
269266
}
270-
271-
.dataset-resources-wrapper {
272-
flex-direction: column;
273-
align-items: flex-start;
274-
}
275267
}
276-
</style>
268+
</style>

0 commit comments

Comments
 (0)