Skip to content

Commit 1e03ad9

Browse files
timwleetimwlee
committed
Update templates listing block
1 parent 4ed3a3a commit 1e03ad9

File tree

4 files changed

+208
-11
lines changed

4 files changed

+208
-11
lines changed

‎blocks/cards/cards.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,9 @@
3434

3535
@media (width >= 900px) {
3636
.cards > ul {
37-
grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
38-
grid-auto-rows: 1fr;
37+
/* grid-template-columns: repeat(auto-fit, minmax(23%, 1fr)); */
38+
grid-template-columns: repeat(3, 1fr);
39+
/* grid-auto-rows: 1fr; */
3940
}
4041
}
4142

@@ -79,28 +80,27 @@
7980
transform: translate(-50%, -50%);
8081
color: #fff;
8182
text-align: center;
82-
width: max-content;
83+
width: 100%;
8384
max-width: 400px;
8485
margin: 0;
8586
padding: 16px;
8687
}
8788

88-
.cards.links .cards-card-body h2 {
89+
.cards.links .cards-card-body h3 {
8990
margin: 0;
90-
line-height: 1;
9191
}
9292

9393
.cards.links .cards-card-body p {
94-
margin-top: 10px;
95-
line-height: 1;
94+
margin-top: 0;
9695
}
9796

9897
@media (width <= 900px) {
9998
.cards.links .cards-card-body {
10099
max-width: fit-content;
101100
}
102101

103-
.cards.links .cards-card-body h2 {
102+
.cards.links .cards-card-body h3 {
104103
font-size: var(--heading-font-size-xl);
104+
line-height: 1;
105105
}
106106
}

‎blocks/templates-listing/templates-listing.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/* default cards css */
2+
.templates-listing > ul {
3+
display: grid;
4+
grid-template-columns: 1fr;
5+
grid-auto-rows: auto;
6+
grid-gap: 12px;
7+
list-style: none;
8+
margin: 0;
9+
padding: 0;
10+
width: 100%;
11+
}
12+
.templates-listing > ul > li {
13+
background-color: var(--background-color);
14+
}
15+
16+
.templates-listing .cards-card-body {
17+
margin: 5px 10px;
18+
display: flex;
19+
flex-direction: row;
20+
justify-content: flex-start;
21+
align-items: center;
22+
flex-wrap: wrap;
23+
gap: 5px;
24+
}
25+
26+
.templates-listing .cards-card-body > p {
27+
font-weight: 700;
28+
margin: 0;
29+
}
30+
31+
.templates-listing .cards-card-body .tags {
32+
line-height: normal;
33+
font-size: 12px;
34+
}
35+
36+
.templates-listing .cards-card-body .tags .tag {
37+
padding: 2px 4px;
38+
border-radius: 4px;
39+
}
40+
41+
.templates-listing .cards-card-body .tags .tag-email {
42+
background-color: #e0f0ff;
43+
color: #005a9e;
44+
}
45+
46+
.templates-listing .cards-card-body .tags .tag-display {
47+
background-color: #e6ffe0;
48+
color: #2e7d32;
49+
}
50+
51+
.templates-listing .cards-card-body .tags .tag-meta {
52+
background-color: #ffeaea;
53+
color: #c62828;
54+
}
55+
56+
.templates-listing .cards-card-image {
57+
border: 1px solid #dadada;
58+
line-height: 0;
59+
border-radius: 10px;
60+
overflow: hidden;
61+
box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 16px, rgba(0, 0, 0, 0.12) 0px 3px 6px;
62+
position: relative;
63+
}
64+
65+
/* Image + picture setup */
66+
.templates-listing .cards-card-image picture,
67+
.templates-listing .cards-card-image img {
68+
width: 100%;
69+
height: 300px;
70+
object-fit: contain;
71+
transition: opacity 0.3s ease;
72+
display: block;
73+
position: relative;
74+
z-index: 1;
75+
}
76+
77+
/* Hide picture smoothly */
78+
.templates-listing > ul > li:hover .cards-card-image picture {
79+
opacity: 0;
80+
pointer-events: none;
81+
}
82+
83+
/* .resources overlay styles */
84+
.templates-listing .cards-card-image .resources {
85+
position: absolute;
86+
top: 0;
87+
left: 0;
88+
width: 100%;
89+
height: 100%;
90+
padding: 1rem;
91+
box-sizing: border-box;
92+
93+
display: flex;
94+
justify-content: center;
95+
align-items: center;
96+
97+
opacity: 0;
98+
transition: opacity 0.3s ease;
99+
pointer-events: none;
100+
background-color: #333333;
101+
102+
z-index: 2;
103+
}
104+
105+
/* Fade in .resources */
106+
.templates-listing > ul > li:hover .cards-card-image .resources {
107+
opacity: 1;
108+
pointer-events: auto;
109+
}
110+
111+
.templates-listing-container .default-content-wrapper p {
112+
margin: 0;
113+
}
114+
115+
@media (width >= 900px) {
116+
.templates-listing > ul {
117+
grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
118+
grid-auto-rows: 1fr;
119+
}
120+
121+
.templates-listing .cards-card-image picture,
122+
.templates-listing .cards-card-image img {
123+
height: 475px;
124+
}
125+
}

‎blocks/templates-listing/templates-listing.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { createOptimizedPicture } from '../../scripts/aem.js';
2+
3+
export default async function decorate(block) {
4+
const spreadsheetLink = block.querySelector('a')?.href;
5+
block.textContent = '';
6+
7+
async function fetchJson(link) {
8+
const response = await fetch(link);
9+
10+
if (response.ok) {
11+
const jsonData = await response.json();
12+
const data = jsonData?.data;
13+
return data;
14+
}
15+
return 'an error occurred';
16+
}
17+
18+
function createCards(data) {
19+
const ul = document.createElement('ul');
20+
data.forEach((item) => {
21+
const hasDisplayAd = item.DisplayAd === 'true';
22+
const hasEmail = item.Email === 'true';
23+
const hasMetaAd = item.MetaAd === 'true';
24+
25+
const optimizedMainImage = createOptimizedPicture(item.MainImage, item.Opportunity, true, [{ width: '350' }]);
26+
const li = document.createElement('li');
27+
li.innerHTML = `
28+
<div class="cards-card-image">
29+
<div class="resources">
30+
<div><a href="${item.GitHub}" title="GitHub"><img src="/icons/github-logo.svg"></img></a></div>
31+
</div>
32+
${optimizedMainImage.outerHTML}
33+
</div>
34+
<div class="cards-card-body">
35+
<p>${item.Opportunity}</p>
36+
<div class="tags">
37+
${hasEmail ? '<span class="tag tag-email">Email</span>' : ''}
38+
${hasDisplayAd ? '<span class="tag tag-display">Display Ad</span>' : ''}
39+
${hasMetaAd ? '<span class="tag tag-meta">Meta Ad</span>' : ''}
40+
</div>
41+
</div>
42+
</div>
43+
`;
44+
ul.append(li);
45+
});
46+
47+
block.append(ul);
48+
}
49+
50+
if (spreadsheetLink) {
51+
const payload = await fetchJson(spreadsheetLink);
52+
createCards(payload);
53+
}
54+
}

‎styles/styles.css‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,15 +237,21 @@ main .section.highlight {
237237
background: linear-gradient(90deg, rgb(113, 37, 182) 0%, rgb(183, 34, 133) 26%, rgb(235, 16, 0) 63%, rgb(255, 98, 87)) 100% center;
238238
}
239239

240-
main .section.highlight > div {
240+
main .section.highlight > .default-content-wrapper {
241241
color: #fff;
242242
}
243243

244-
main .section.highlight > div > h1,
245-
main .section.highlight > div > p {
244+
main .section.highlight > .default-content-wrapper > h1,
245+
main .section.highlight > .default-content-wrapper > p {
246246
margin: 0;
247247
}
248248

249+
main .section.highlight > .default-content-wrapper a {
250+
color: inherit;
251+
text-decoration: underline;
252+
font-style: italic;
253+
}
254+
249255
main .section.full-width {
250256
padding: 0;
251257
}
@@ -254,6 +260,18 @@ main .section.full-width > div {
254260
max-width: 100%;
255261
}
256262

263+
main .section.sm-padding {
264+
padding: 1rem;
265+
}
266+
267+
main .section.md-padding {
268+
padding: 2.5rem 1rem;
269+
}
270+
271+
main .section.lg-padding {
272+
padding: 5rem 1rem;
273+
}
274+
257275
/* other */
258276

259277
/* Modal Container */

0 commit comments

Comments
 (0)