Skip to content

Commit a8e4bfb

Browse files
asthabh23asthabh23
authored
Merge pull request #12 from adobe/bpo
Report Presentation
2 parents 035ef73 + 47fb6ad commit a8e4bfb

File tree

14 files changed

+979
-3
lines changed

14 files changed

+979
-3
lines changed

‎blocks/banner/banner.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.hackathon .banner.bpo > div:first-child {
2+
display: flex;
3+
width: 100%;
4+
justify-content: space-between;
5+
background-color: #5A5C6D;
6+
}
7+
8+
.hackathon .banner.bpo > div:first-child > div:first-child {
9+
flex-grow: 1; /* Allow the first div to take up the remaining space */
10+
border-right: 2px solid white; /* Add a border to the right of the first div */
11+
}
12+
13+
.hackathon .banner.bpo > div:first-child > div:last-child {
14+
margin-left: auto; /* Push the second div to the right */
15+
}
16+
17+
.hackathon .banner.bpo h1 {
18+
font-size: 30px;
19+
color: white;
20+
margin-bottom: 0;
21+
margin-top: 5px;
22+
padding: 10px;
23+
}
24+
25+
.hackathon .banner.bpo p em {
26+
font-size: 20px;
27+
color: white;
28+
padding: 10px;
29+
}
30+
31+
.hackathon .banner.bpo p {
32+
margin-top: 0;
33+
margin-bottom: 0;
34+
}
35+
36+
.hackathon .banner.bpo p:last-child{
37+
border-top: 2px solid white;
38+
background-color: lightgrey;
39+
width: 100%;
40+
display: flex; /* Use Flexbox */
41+
align-items: center; /* Vertically center align */
42+
}
43+
44+
.hackathon .banner.bpo p:last-child em {
45+
color: black;
46+
font-size: 20px;
47+
}
48+
49+
50+
51+

‎blocks/banner/banner.js‎

Whitespace-only changes.

‎blocks/bpo-metric/bpo-metric.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
.bpo-metric {
2+
padding-top: 10px;
3+
}
4+
5+
.bpo-metric > div {
6+
display: flex;
7+
flex-direction: column;
8+
column-gap: 0;
9+
width: 100%;
10+
}
11+
12+
.bpo-metric img {
13+
width: 100%;
14+
}
15+
16+
.bpo-metric > div > div {
17+
order: 1;
18+
background-color: #5A5C6D;
19+
border: 2px solid black;
20+
}
21+
22+
.bpo-metric > div > div > p {
23+
margin-bottom: 0;
24+
}
25+
26+
.bpo-metric > div > div > p strong {
27+
font-weight: bold;
28+
}
29+
30+
/* .bpo-metric > div > div > div > p {
31+
display: flex;
32+
margin-bottom: 0;
33+
} */
34+
35+
.bpo-metric > div > div > p:last-child {
36+
color: white;
37+
margin-top: 0;
38+
}
39+
40+
.bpo-metric > div > div > div > p img{
41+
height: 100px;
42+
width: 150px;
43+
}
44+
45+
.bpo-metric .top > div {
46+
border-left: 2px solid white;
47+
padding-left: 30px;
48+
}
49+
50+
.bpo-metric > div > div:nth-child(2),
51+
.bpo-metric > div div:nth-child(3) {
52+
flex-basis: 50%;
53+
}
54+
55+
.bpo-metric > div > div:nth-child(1) {
56+
flex-basis: 20%; /* The first div takes 20% of the parent div's width */
57+
padding: 25px;
58+
padding-top: 40px;
59+
padding-right: 0;
60+
}
61+
62+
.bpo-metric > div > div > div:not(.vega-embed),
63+
.bpo-metric > div > div > p em {
64+
display: flex;
65+
color: black;
66+
padding: 10px;
67+
font-size: 15px;
68+
padding-top: 0;
69+
background-color: #EFEFEF
70+
}
71+
72+
.bpo-metric > div:nth-child(1) > div:nth-child(1),
73+
.bpo-metric > div:nth-child(2) > div:nth-child(1) {
74+
padding-top: 100px;
75+
}
76+
77+
.bpo-metric > div:nth-child(4) > div:nth-child(1) {
78+
padding-top: 80px;
79+
}
80+
81+
.bpo-metric .top > p img {
82+
width: 150px;
83+
height: auto;
84+
}
85+
86+
.bpo-metric > div > .bpo-img-col img {
87+
display: block;
88+
height: auto;
89+
}
90+
91+
.bpo-metric > div:nth-child(4) > div:nth-child(2) .flex,
92+
.bpo-metric > div:nth-child(4) > div:nth-child(2) .category,
93+
.bpo-metric > div:nth-child(4) > div:nth-child(3) .flex,
94+
.bpo-metric > div:nth-child(4) > div:nth-child(3) .category {
95+
display: block;
96+
}
97+
98+
.bpo-metric > div:nth-child(4) > div:nth-child(2) .category .flex,
99+
.bpo-metric > div:nth-child(4) > div:nth-child(3) .category .flex {
100+
height: auto;
101+
}
102+
103+
.bpo-metric > div:nth-child(4) > div:nth-child(2) .category,
104+
.bpo-metric > div:nth-child(4) > div:nth-child(3) .category {
105+
display: flex;
106+
border-bottom: 1px solid black;
107+
}
108+
109+
.bpo-metric > div:nth-child(4) > div:nth-child(2) .category > p > .icon,
110+
.bpo-metric > div:nth-child(4) > div:nth-child(3) .category > p > .icon {
111+
height: 100px;
112+
width: 100px;
113+
padding-right: 30px;
114+
}
115+
116+
.bpo-metric > div:nth-child(4) > div:nth-child(2) .category .flex .icon img,
117+
.bpo-metric > div:nth-child(4) > div:nth-child(3) .category .flex .icon img {
118+
height: 25px;
119+
width: 25px;
120+
}
121+
122+
.bpo-metric > div:nth-child(4) > div:nth-child(2) .category .flex .icon,
123+
.bpo-metric > div:nth-child(4) > div:nth-child(3) .category .flex .icon {
124+
padding-right: 5px;
125+
}
126+
127+
.bpo-metric > div > div > p:first-child {
128+
color: white;
129+
text-align: center;
130+
}
131+
132+
.bpo-metric > div > div:nth-child(1) > strong {
133+
text-align: center;
134+
justify-content: center;
135+
color: white;
136+
padding-left: 40px;
137+
}
138+
139+
.bpo-metric .top {
140+
background-color: #DFDFDF;
141+
padding-bottom: 0;
142+
}
143+
144+
.bpo-metric .top .align strong {
145+
align-items: center;
146+
display: flex
147+
}
148+
149+
.bpo-metric > div > div:nth-child(2) .usage-results,
150+
.bpo-metric > div:nth-child(2) > div:nth-child(2) .lighthouse-results,
151+
.bpo-metric > div:nth-child(3) > div:nth-child(2) > div,
152+
.bpo-metric > div:nth-child(3) > div:nth-child(3) > div,
153+
.bpo-metric > div:nth-child(3) > div:nth-child(2) > p:last-child {
154+
padding-top: 25px;
155+
background-color: #EFEFEF;
156+
}
157+
158+
@media (width >= 900px) {
159+
.bpo-metric > div {
160+
align-items: stretch;
161+
flex-direction: row;
162+
gap: 5px;
163+
display: flex;
164+
margin-top: 5px;
165+
}
166+
167+
.bpo-metric > div > div {
168+
flex: 1;
169+
order: unset;
170+
min-height: 100%;
171+
}
172+
}

‎blocks/bpo-metric/bpo-metric.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/* eslint-disable no-console */
2+
function processChildDiv(selector, block) {
3+
const childDiv = block.querySelector(selector);
4+
childDiv.classList.add('icon-style');
5+
if (childDiv) {
6+
const iconPTags = childDiv.querySelectorAll('p');
7+
const strongIconPTags = [];
8+
let spanIconPTag = null;
9+
10+
iconPTags.forEach((pTag) => {
11+
if (pTag.querySelector('strong span.icon')) {
12+
strongIconPTags.push(pTag);
13+
}
14+
if (pTag.querySelector('span.icon') && !pTag.querySelector('strong span.icon')) {
15+
spanIconPTag = pTag;
16+
}
17+
});
18+
// Create the flex wrapper div
19+
const flexWrapperDiv = document.createElement('div');
20+
flexWrapperDiv.classList.add('flex');
21+
flexWrapperDiv.appendChild(strongIconPTags[0]);
22+
flexWrapperDiv.appendChild(strongIconPTags[1]);
23+
flexWrapperDiv.appendChild(spanIconPTag);
24+
childDiv.appendChild(flexWrapperDiv);
25+
26+
// Create the category div
27+
const categoryDiv = document.createElement('div');
28+
categoryDiv.classList.add('category');
29+
30+
// Append the span icon p tag and the flex div to the category div
31+
if (spanIconPTag) {
32+
categoryDiv.appendChild(spanIconPTag);
33+
}
34+
categoryDiv.appendChild(flexWrapperDiv);
35+
36+
const firstPTag = childDiv.querySelector('p');
37+
38+
// Insert the categoryDiv after the first p tag
39+
if (firstPTag) {
40+
firstPTag.insertAdjacentElement('afterend', categoryDiv);
41+
}
42+
}
43+
}
44+
45+
export default async function decorate(block) {
46+
const cols = [...block.firstElementChild.children];
47+
block.classList.add(`bpo-${cols.length}-cols`);
48+
49+
// setup image columns
50+
[...block.children].forEach((row) => {
51+
[...row.children].forEach((col) => {
52+
const pic = col.querySelector('picture');
53+
if (pic) {
54+
const picWrapper = pic.closest('div');
55+
if (picWrapper && picWrapper.children.length === 1) {
56+
// picture is only content in column
57+
picWrapper.classList.add('bpo-img-col');
58+
}
59+
}
60+
61+
// Check for p > em and wrap in a div
62+
const pWithEm = col.querySelector('p > em');
63+
if (pWithEm) {
64+
const pTag = pWithEm.closest('p');
65+
const wrapperDiv = document.createElement('div');
66+
pTag.parentNode.insertBefore(wrapperDiv, pTag);
67+
wrapperDiv.appendChild(pTag);
68+
}
69+
70+
// Check for p with picture and strong tags and apply flex
71+
const pTags = col.querySelectorAll('p');
72+
pTags.forEach((pTag) => {
73+
const hasPicture = pTag.querySelector('picture');
74+
const hasStrong = pTag.querySelector('strong');
75+
if (hasPicture && hasStrong) {
76+
pTag.style.display = 'flex';
77+
pTag.classList.add('align');
78+
}
79+
});
80+
81+
const alignPTags = col.querySelectorAll('p.align');
82+
if (alignPTags.length > 0) {
83+
const alignWrapperDiv = document.createElement('div');
84+
alignPTags.forEach((pTag) => {
85+
pTag.parentNode.insertBefore(alignWrapperDiv, pTag);
86+
alignWrapperDiv.appendChild(pTag);
87+
});
88+
89+
// Find the p tag with the picture tag
90+
const pWithPicture = col.querySelector('p picture').closest('p');
91+
if (pWithPicture) {
92+
const topWrapperDiv = document.createElement('div');
93+
pWithPicture.parentNode.insertBefore(topWrapperDiv, pWithPicture);
94+
topWrapperDiv.appendChild(pWithPicture);
95+
topWrapperDiv.appendChild(alignWrapperDiv);
96+
topWrapperDiv.classList.add('top');
97+
}
98+
}
99+
});
100+
});
101+
102+
processChildDiv('div:nth-child(4) > div:nth-child(2)', block);
103+
processChildDiv('div:nth-child(4) > div:nth-child(3)', block);
104+
}

‎blocks/header/header.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -356,4 +356,8 @@ header nav .nav-sections ul > li > ul {
356356
/* tools */
357357
header nav .nav-tools {
358358
grid-area: tools;
359+
}
360+
361+
.hackathon header .nav-brand {
362+
flex-basis: 158px;
359363
}

0 commit comments

Comments
 (0)