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

Jump to bottom

323 Applying solid colors to the cards #333

Merged
merged 11 commits into from
May 26, 2023
Merged

323 Applying solid colors to the cards #333

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
164e819
323 Applying solid colrs to the cards
May 17, 2023
f6f61ed
323 - Implement solid colors to crds with config li remove
May 19, 2023
30c7bdc
#323: moved solid colours to normal cards block
nc-andreashaller May 22, 2023
f8e8ebe
Merge branch '323-implement-solid-colors' of github.com:Netcentric/cn…
nc-andreashaller May 22, 2023
4267c13
Delete cards-solidcolors.css
sonaldhekale May 23, 2023
3ea3095
Delete cards-solidcolors.js
sonaldhekale May 23, 2023
20fc1b4
323 - checking cards
May 24, 2023
0d4251c
323 - After cleaning PR
May 24, 2023
d011268
323 - resolving conflicts and clean the PR
May 24, 2023
a9b5a9b
323 - updating color varient according to color decisions
May 25, 2023
b6bd08b
323 - resolve comment removed variable defination
May 25, 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
62 changes: 62 additions & 0 deletions blocks/cards/cards.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,8 @@
padding: 0;
position: relative;
list-style: none;
height: 500px;
display: block;
}

.cards.icon-with-text > ul > li {
Expand Down Expand Up @@ -268,6 +270,13 @@
}
}

@media (max-width: 600px) {
.cards.side-by-side > ul > li {
height: 380px;
}
}


@media (min-width: 750px) {
.cards.icon-with-text > ul {
grid-template-columns: 1fr 1fr;
Expand Down Expand Up @@ -421,3 +430,56 @@
background-color: var(--bg-text-light-plum);
color: var(--c-dark-plum);
}

:root {
--c-midnight-blue: #000048;
Copy link
Collaborator

Choose a reason for hiding this comment

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

as far as I can see we have this already defined: https://github.com/Netcentric/cn-website/blob/main/styles/styles.css#L43

}

/* background colors */
.cards-card-bg-dark-teal {
background-color: var(--c-dark-teal);
}

.cards-card-bg-mid-teal {
background-color: var(--c-mid-teal);
}

.cards-card-bg-light-teal {
background-color: var(--c-light-teal);
}

.cards-card-bg-dark-blue {
background-color: var(--c-dark-blue);
}

.cards-card-bg-light-blue {
background-color: var(--c-light-blue);
}

.cards-card-bg-midnight-blue {
background-color: var(--c-midnight-blue);
}

.cards-card-bg-dark-plum {
background-color: var(--c-dark-plum);
}

.cards-card-bg-light-plum {
background-color: var(--c-light-plum);
}

.cards-card-bg-mid-plum {
background-color: var(--c-mid-plum);
}

.cards-card-bg-light-grey{
background-color: var(--c-light-gray);
}

.cards-card-bg-mid-grey{
background-color: var(--c-mid-gray);
}

.cards-card-bg-dark-grey{
background-color: var(--c-dark-gray);
}
28 changes: 24 additions & 4 deletions blocks/cards/cards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
import { createOptimizedPicture } from '../../scripts/lib-franklin.js';

const supportedBackgroundColors = [
'dark-teal',
'mid-teal',
'light-teal',
'dark-blue',
'light-blue',
'midnight-blue',
'dark-plum',
'light-plum',
'mid-plum',
'light-gray',
'mid-gray',
'dark-gray',
];

function getImageWidth(block) {
if (block.matches('.icon-with-text')) {
// scaling the images down to the actual size makes them blury
// scaling all the images down to the actual size makes them blury
return 150;
}

return 750;
}

Expand All @@ -16,8 +30,14 @@ export default function decorate(block) {
const li = document.createElement('li');
li.innerHTML = row.innerHTML;
[...li.children].forEach((div) => {
if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
else div.className = 'cards-card-body';
if (supportedBackgroundColors.indexOf(div.textContent) >= 0) {
li.removeChild(div);
li.classList.add(`cards-card-bg-${div.textContent}`);
} else if (div.children.length === 1 && div.querySelector('picture')) {
div.className = 'cards-card-image';
} else {
div.className = 'cards-card-body';
}
});
ul.append(li);
});
Expand Down