Skip to content

Commit 75ae7eb

Browse files
berkesberkes
committed
feat: Show images and other data in list of examples
1 parent 6707785 commit 75ae7eb

File tree

2 files changed

+166
-88
lines changed

2 files changed

+166
-88
lines changed

‎assets/css/style.scss‎

Lines changed: 144 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,108 +5,202 @@
55

66
/* Widen main content area from default 640px */
77
.inner {
8-
max-width: 1000px;
8+
max-width: 1000px;
99
}
1010

1111
/* Make images responsive within wider layout */
1212
img {
13-
max-width: 100%;
13+
max-width: 100%;
1414
}
1515

1616
/* Ensure credential pages work well with wider layout */
1717
.credential-main {
18-
max-width: 1100px;
18+
max-width: 1100px;
1919
}
2020

2121
/* Adjust TOC positioning for examples.md */
2222
#tocwrapper {
23-
right: calc(-260px - 4rem);
23+
right: calc(-260px - 4rem);
2424
}
2525

2626
/* Responsive adjustments */
2727
@media screen and (max-width: 1200px) {
28-
.inner {
29-
max-width: 90%;
30-
padding-left: 20px;
31-
padding-right: 20px;
32-
}
33-
34-
#tocwrapper {
35-
position: static;
36-
width: 100%;
37-
margin-top: 2rem;
38-
}
28+
.inner {
29+
max-width: 90%;
30+
padding-left: 20px;
31+
padding-right: 20px;
32+
}
33+
34+
#tocwrapper {
35+
position: static;
36+
width: 100%;
37+
margin-top: 2rem;
38+
}
3939
}
4040

4141
@media screen and (max-width: 992px) {
42-
.credential-page {
43-
grid-template-columns: 1fr;
44-
}
42+
.credential-page {
43+
grid-template-columns: 1fr;
44+
}
4545
}
4646

4747
/* Offer display styles */
4848
.offer-block {
49-
margin-top: 1rem;
50-
padding: 1rem;
51-
background: #fff;
52-
border: 1px solid #ddd;
53-
border-radius: 4px;
49+
margin-top: 1rem;
50+
padding: 1rem;
51+
background: #fff;
52+
border: 1px solid #ddd;
53+
border-radius: 4px;
5454
}
5555

5656
.offer-block strong {
57-
display: block;
58-
margin-bottom: 0.5rem;
57+
display: block;
58+
margin-bottom: 0.5rem;
5959
}
6060

6161
.offer-text-container {
62-
display: flex;
63-
align-items: center;
64-
gap: 0.5rem;
65-
margin-bottom: 1rem;
62+
display: flex;
63+
align-items: center;
64+
gap: 0.5rem;
65+
margin-bottom: 1rem;
6666
}
6767

6868
.offer-text {
69-
flex: 1;
70-
padding: 0.5rem;
71-
background: #f5f5f5;
72-
border: 1px solid #ddd;
73-
border-radius: 4px;
74-
font-size: 0.85rem;
75-
word-break: break-all;
76-
display: block;
69+
flex: 1;
70+
padding: 0.5rem;
71+
background: #f5f5f5;
72+
border: 1px solid #ddd;
73+
border-radius: 4px;
74+
font-size: 0.85rem;
75+
word-break: break-all;
76+
display: block;
7777
}
7878

7979
.offer-copy-button {
80-
padding: 0.5rem;
81-
background: #fff;
82-
border: 1px solid #ddd;
83-
border-radius: 4px;
84-
cursor: pointer;
85-
font-size: 1.2rem;
80+
padding: 0.5rem;
81+
background: #fff;
82+
border: 1px solid #ddd;
83+
border-radius: 4px;
84+
cursor: pointer;
85+
font-size: 1.2rem;
8686
}
8787

8888
.offer-copy-button:hover {
89-
background: #f5f5f5;
89+
background: #f5f5f5;
9090
}
9191

9292
#qr-code-container {
93-
text-align: center;
94-
margin-top: 1rem;
93+
text-align: center;
94+
margin-top: 1rem;
9595
}
9696

9797
/* Loading placeholder styles */
9898
.offer-loading {
99-
text-align: center;
100-
padding: 2rem;
99+
text-align: center;
100+
padding: 2rem;
101101
}
102102

103103
.offer-loading p {
104-
margin: 0;
105-
color: #666;
104+
margin: 0;
105+
color: #666;
106106
}
107107

108108
/* Error message styles */
109109
.offer-error {
110110
color: #900;
111111
padding: 1rem;
112112
}
113+
114+
.button {
115+
display: block;
116+
background-color: #0090ff;
117+
border: none;
118+
border-radius: 5px;
119+
color: white;
120+
padding: 1.4rem 2rem;
121+
text-align: center;
122+
text-decoration: none;
123+
font-size: 20px;
124+
margin: 2rem;
125+
cursor: pointer;
126+
transition: transform 0.2s;
127+
128+
&:hover {
129+
transform: scale(1.1);
130+
}
131+
}
132+
133+
#main_content_wrap {
134+
position: relative;
135+
}
136+
137+
#tocwrapper {
138+
position: absolute;
139+
top: 0;
140+
right: calc(-260px + -4rem);
141+
width: 240px;
142+
background-color: #fff;
143+
overflow: auto;
144+
padding: 2rem;
145+
z-index: 100;
146+
}
147+
148+
#examples-list {
149+
a {
150+
text-decoration: none;
151+
}
152+
ul {
153+
display: flex;
154+
flex-direction: column;
155+
gap: 0rem;
156+
padding-left: 0;
157+
border-radius: 8px;
158+
background-color: #fff;
159+
160+
li.list-item {
161+
list-style: none;
162+
a {
163+
display: flex;
164+
align-items: flex-start;
165+
gap: 1rem;
166+
padding: 0.5rem;
167+
}
168+
169+
&:hover {
170+
background-color: #f5f5f5;
171+
}
172+
173+
img {
174+
position: relative;
175+
width: 80px;
176+
height: 80px;
177+
object-fit: cover;
178+
padding: 5px;
179+
margin: 0;
180+
181+
border-radius: 8px;
182+
flex-shrink: 0;
183+
184+
border: none;
185+
box-shadow: none;
186+
}
187+
188+
.credential-info {
189+
display: flex;
190+
flex-direction: column;
191+
gap: 0.25rem;
192+
193+
.name {
194+
font-weight: bold;
195+
}
196+
.issuer,
197+
.criteria {
198+
display: block;
199+
font-weight: normal;
200+
font-size: 0.9em;
201+
color: #666;
202+
}
203+
}
204+
}
205+
}
206+
}

‎examples.md‎

Lines changed: 22 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,37 @@
11
---
22
title: "OB3 Credential Examples"
33
---
4-
<style>
5-
.button {
6-
display: block;
7-
background-color: #0090ff;
8-
border: none;
9-
border-radius: 5px;
10-
color: white;
11-
padding: 1.4rem 2rem;
12-
text-align: center;
13-
text-decoration: none;
14-
font-size: 20px;
15-
margin: 2rem;
16-
17-
cursor: pointer;
18-
19-
transition: transform 0.2s;
20-
}
21-
.button:hover {
22-
transform: scale(1.1);
23-
}
24-
25-
#main_content_wrap {
26-
position: relative;
27-
}
28-
#tocwrapper {
29-
position: absolute;
30-
top: 0;
31-
right: calc(-260px + -4rem);
32-
width: 240px;
33-
background-color: #fff;
34-
overflow: auto;
35-
padding: 2rem;
36-
z-index: 100;
37-
38-
overflow: scroll;
39-
}
40-
</style>
4+
415
<script src="./assets/outline.js"></script>
426

437
# OB3 Credential Examples
448

459
Examples of Open Badges V3 credentials based on the Educredentials metadata model.
4610
These examples can be used to test the capabilities of various wallets.
4711

12+
<div id="examples-list">
13+
<ul>
4814
{% for credential in site.credentials %}
49-
- [{{ credential.title }}]({{ credential.url | relative_url }})
15+
{% assign cred_json = site.data.credentials[credential.credential_data] %}
16+
{% assign image_url = cred_json.credentialSubject.achievement.image.id %}
17+
{% assign image_filename = image_url | split: "/" | last %}
18+
{% assign achievement_name = cred_json.credentialSubject.achievement.name %}
19+
{% assign issuer_name = cred_json.issuer.name %}
20+
{% assign criteria_narrative = cred_json.credentialSubject.achievement.criteria.narrative %}
21+
22+
<li class="list-item">
23+
<a href="{{ credential.url | relative_url }}">
24+
<img src="images/{{ image_filename }}" alt="{{ achievement_name }}">
25+
<div class="credential-info">
26+
<span class="name">{{ achievement_name }}</span>
27+
<span class="issuer">{{ issuer_name }}</span>
28+
<span class="criteria">{{ criteria_narrative }}</span>
29+
</div>
30+
</a>
31+
</li>
5032
{% endfor %}
33+
</ul>
34+
</div>
5135

5236
<div id="tocwrapper">
5337
<strong>Table of Contents</strong>

0 commit comments

Comments
 (0)