Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feed and Card Block Changes #101

Merged
merged 8 commits into from
Oct 6, 2023
Merged

Feed and Card Block Changes #101

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ddacd80
Feed and Card Block Changes
Oct 5, 2023
31e5d8b
Minor change
Oct 5, 2023
50c9e2d
Minor change wrt to feedback
Oct 5, 2023
fa86593
Merge branch 'main' into feed-changes
Oct 5, 2023
70fe6b4
Review Feedback changes
Oct 5, 2023
85d05bc
Changes wrt to Cards Block
Oct 5, 2023
c9c4f8c
Review Feedback
Oct 5, 2023
60be353
Review Comments incorporating
Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 33 additions & 10 deletions blocks/cards/cards.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ main .block.cards {

.cards > ul {
display: flex;
justify-content: center;
list-style: none;
flex-flow: column nowrap;
padding: 0;
Expand All @@ -30,22 +29,21 @@ main .block.cards {
box-shadow: 0 2px 12px 0 rgb(60 70 80 / 20%);
border: none;
transition: all 0.15s ease-in-out;
width: 16.875rem;
padding: 12px 1rem;
margin: 0 0 1rem;
align-items: center;
text-align: left;
flex: 1;
background-color: var(--white);
}

.cards > ul > li:hover {
box-shadow: 0 4px 1rem 0 rgb(60 70 80 / 40%);
}

.cards > ul > li .date {
font-size: var(--body-font-size-xs);
color: var(--transparent-grey-color);
font-weight: var(--font-weight-medium);
padding-bottom: 0.5rem;
font-size: var(--body-font-size-xs);
sdmcraft marked this conversation as resolved.
Show resolved Hide resolved
font-weight: var(--font-weight-medium);
padding-bottom: 0.5rem;
}

.cards > ul > li > a.button {
Expand Down Expand Up @@ -77,17 +75,25 @@ main .block.cards {
}

.cards .cards-card-body {
width: calc(100% - 1rem - 3.5rem);
margin: 0 auto;
padding: 0 0 0 16px;
text-align: left;
color: var(--light-black);
padding: 10px 10px 0;
}

.cards .cards-card-body .title {
margin-bottom: 1rem;
}

.cards.large-text .cards-card-body .date {
sdmcraft marked this conversation as resolved.
Show resolved Hide resolved
font-size: var(--body-font-size-xs);
}

.cards.large-text .cards-card-body .title {
sdmcraft marked this conversation as resolved.
Show resolved Hide resolved
font-size: var(--body-font-size-m);
margin-bottom: 3rem;
}

.cards .cards-card-image img {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -189,6 +195,16 @@ main .cards.machine-parts ul > li {
background: var(--transparent-blue-light-color);
}

@media screen and (min-width: 48rem) {
.cards > ul > li {
margin: 0 7px;
}

.cards > ul {
flex-flow: row nowrap;
}
}

@media screen and (min-width: 62rem) {
.section.cards-container {
margin: 5rem 0;
Expand All @@ -210,7 +226,6 @@ main .cards.machine-parts ul > li {
.cards > ul > li {
padding: 0;
text-align: center;
margin: 0 7px;
}

.cards > ul > li > a.button {
Expand Down Expand Up @@ -281,6 +296,14 @@ main .cards.machine-parts ul > li {
padding: 20px 0 0;
}

.cards.large-text .cards-card-body .date {
font-size: var(--body-font-size-s);
}

.cards.large-text .cards-card-body .title {
font-size: 20px;
jindaliiita marked this conversation as resolved.
Show resolved Hide resolved
}

.cards .cards-card-body {
font-size: 1rem;
}
Expand Down
7 changes: 7 additions & 0 deletions blocks/feed/feed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,13 @@ export default async function decorate(block) {
block.innerHTML = '';
const blockContents = resultParsers[blockType](results, blockCfg);
const builtBlock = buildBlock(blockType, blockContents);

[...block.classList].forEach((item) => {
if (item !== 'feed') {
builtBlock.classList.add(item);
}
});

if (block.parentNode) {
block.parentNode.replaceChild(builtBlock, block);
}
Expand Down
4 changes: 4 additions & 0 deletions styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -716,6 +716,10 @@ main .section.light-blue {
background-color: var(--transparent-blue-light-color);
}

main .section.no-padding .section-container {
padding: 0;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this needed? I think all section-containers must have same styling unless there's a special case to handle.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needed for tablet view (cards block)

}

/* END Section Styles END */

/* START Keyframes START */
Expand Down