okooooooo/supervision
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feat/cookbooks

Browse Source
This commit is contained in:
Nick Herrig authored and GitHub committed 2024-02-08 23:37:45 -05:00
2 parents aacdbe76f0 fb7dd6aefd
commit 607d94dad9
2 files changed
+67 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/javascripts/cookbooks-card.js
+30 -24
View File
@@ -3,16 +3,20 @@ document.addEventListener("DOMContentLoaded", function () {
async function setCard(el, url, name, desc, labels, version, theme, authors) {
const colorList = [
"A351FB", "FF4040", "FFA1A0", "FF7633", "FFB633", "D1D435", "4CFB12",
"94CF1A", "40DE8A", "1B9640", "00D6C1", "2E9CAA", "00C4FF", "364797",
"6675FF", "0019EF", "863AFF", "530087", "CD3AFF", "FF97CA", "FF39C9"
"#22c55e",
"#14b8a6",
"#ef4444",
"#eab308",
"#8b5cf6",
"#f97316",
"#3b82f6",
]
let labelHTML = ''
if (labels) {
const labelArray = labels.split(',').map((label, index) => {
const color = colorList[index % colorList.length]
return `<span style="background-color: #${color}; color: #fff; padding: 2px 6px; border-radius: 12px; margin-right: 4px;">${label}</span>`
return `<span class="non-selectable-text" style="background-color: ${color}; color: #fff; padding: 2px 4px; border-radius: 4px; margin-right: 4px;">${label}</span>`
})
labelHTML = labelArray.join(' ')
@@ -54,30 +58,32 @@ document.addEventListener("DOMContentLoaded", function () {
el.innerText = `
<div style="flex-direction: column; height: 100%; display: flex;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; background: ${theme.background}; font-size: 14px; line-height: 1.5; color: ${theme.color}">
<div style="display: flex; align-items: center;">
<i class="fa-solid:book-open" style="color: ${theme.color}; margin-right: 8px;"></i>
<span style="font-weight: 600; color: ${theme.linkColor};">
<a style="text-decoration: none; color: inherit;" href="${url}">${name}</a>
</span>
</div>
<div style="font-size: 12px; margin-bottom: 10px; margin-top: 8px; color: ${theme.color}; flex: 1;">${desc}</div>
<div style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 8px;">
${authorHTML}
</div>
<div style="font-size: 12px; color: ${theme.color}; display: flex; flex: 0;">
<div style="display: 'flex'; align-items: center; margin-right: 16px;">
<a style="text-decoration: none; color: inherit;" href="${url}">
<div style="flex-direction: column; height: 100%; display: flex;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; background: ${theme.background}; font-size: 14px; line-height: 1.5; color: ${theme.color}">
<div style="display: flex; align-items: center;">
<span style="font-weight: 700; font-size: 1rem; color: ${theme.linkColor};">
${name}
</span>
</div>
<div style="display: 'flex'; align-items: center; margin-right: 16px;">
<img src="/assets/supervision-lenny.png" aria-label="stars" width="16" height="16" role="img" />
&nbsp; <span>${version}</span>
<div style="font-size: 12px; margin-top: 0.5rem; color: ${theme.color}; flex: 1;">
${desc}
</div>
<div style="display: 'flex'}; align-items: center;">
&nbsp; <span>${labelHTML}</span>
<div style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 1rem; margin-top: 1rem">
${authorHTML}
</div>
<div style="font-size: 12px; color: ${theme.color}; display: flex; flex: 0; justify-content: space-between">
<div style="display: flex; align-items: center;">
<img src="/assets/supervision-lenny.png" aria-label="stars" width="20" height="20" role="img" />
&nbsp;
<span style="margin-left: 4px">${version}</span>
</div>
<div style="display: flex; align-items: center;">
${labelHTML}
</div>
</div>
</div>
</div>
</a>
`
let sanitizedHTML = DOMPurify.sanitize(el.innerText);
docs/stylesheets/cookbooks-card.css
+37 -1
View File
@@ -1,5 +1,34 @@
.custom-grid {
display: grid;
grid-gap: 1rem;
/* Start with a single column layout */
grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* Medium screens (640px and up) */
@media (min-width: 640px) {
.custom-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Large screens (1024px and up) */
@media (min-width: 1024px) {
.custom-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.repo-card {
min-height: 130px;
background: radial-gradient(at right top, #A351FB25, #A5F9EA25);
border-radius: 0.5rem;
padding: 1rem;
transition: transform 0.2s ease-in-out; /* Smooth transition for the transform */
cursor: pointer;
}
.repo-card:hover {
transform: translateY(-0.125rem); /* Move up by -0.125rem on hover */
}
.portfolio-section {
@@ -17,3 +46,10 @@
div:hover .author-name {
opacity: 1;
}
.non-selectable-text {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera, and Edge */
}