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

author styling improvements

This commit is contained in:
SkalskiP 2024-02-09 12:47:02 +01:00
parent 0950f90ddf
commit 36a825b7a0
3 changed files with 77 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
docs/javascripts/cookbooks-card.js
View File

@ -1,7 +1,7 @@
document.addEventListener("DOMContentLoaded", function () {
async function setCard(el, url, name, desc, labels, version, theme, authors) {
async function setCard(el, url, name, labels, version, theme, authors) {
const colorList = [
"#22c55e",
"#14b8a6",
@ -28,34 +28,32 @@ document.addEventListener("DOMContentLoaded", function () {
return await response.json();
}));
let authorHTML = '';
authorDataArray.forEach((authorData, index) => {
const marginLeft = index === 0 ? '0' : '-15px';
authorHTML += `
<div class="author-container" style="display: inline-block; margin-left: ${marginLeft}; position: relative;">
<a href="https://github.com/${authorData.login}" target="_blank">
<img src="${authorData.avatar_url}" width="32" height="32" style="border-radius: 50%;" />
</a>
<div class="tooltip" style="visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; width: 120px;">
${authorData.login}
</div>
</div>
let authorAvatarsHTML = authorDataArray.map((authorData, index) => {
const marginLeft = index === 0 ? '0' : '-10px';
const zIndex = 100 - index;
return `
<div class="author-container" style="margin-left: ${marginLeft}; z-index: ${zIndex};">
<a href="https://github.com/${authorData.login}" target="_blank" style="line-height: 0;">
<img class="author-avatar" src="${authorData.avatar_url}" alt="${authorData.login}'s avatar">
</a>
</div>
`;
});
document.querySelectorAll('.author-container').forEach((container) => {
const tooltip = container.querySelector('.tooltip');
container.addEventListener('mouseover', () => {
tooltip.style.visibility = 'visible';
tooltip.style.opacity = '1';
});
container.addEventListener('mouseout', () => {
tooltip.style.visibility = 'hidden';
tooltip.style.opacity = '0';
});
});
}).join('');
let authorNamesHTML = authorDataArray.map(
authorData => `<span class="author-name" style="color: ${theme.color}">
<a href="https://github.com/${authorData.login}" target="_blank">
${authorData.login}
</a>
</span>`
).join(',&nbsp;');
let authorsHTML = `
<div class="authors">
${authorAvatarsHTML}
<div class="author-names">${authorNamesHTML}</div>
</div>
`;
el.innerText = `
<a style="text-decoration: none; color: inherit;" href="${url}">
@ -66,12 +64,7 @@ document.addEventListener("DOMContentLoaded", function () {
${name}
</span>
</div>
<div style="font-size: 12px; margin-top: 0.5rem; color: ${theme.color}; flex: 1;">
${desc}
</div>
<div style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 1rem; margin-top: 1rem">
${authorHTML}
</div>
${authorsHTML}
<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" />
@ -92,7 +85,6 @@ document.addEventListener("DOMContentLoaded", function () {
for (const el of document.querySelectorAll('.repo-card')) {
const url = el.getAttribute('data-url');
const name = el.getAttribute('data-name');
const desc = el.getAttribute('data-desc');
const labels = el.getAttribute('data-labels');
const version = el.getAttribute('data-version');
const authors = el.getAttribute('data-author');
@ -103,6 +95,6 @@ document.addEventListener("DOMContentLoaded", function () {
var theme = "light-default"
}
setCard(el, url, name, desc, labels, version, theme, authors);
setCard(el, url, name, labels, version, theme, authors);
}
})

57
docs/stylesheets/cookbooks-card.css
View File

@ -31,20 +31,61 @@
transform: translateY(-0.125rem); /* Move up by -0.125rem on hover */
}
.portfolio-section {
padding-bottom: 1rem;
.authors {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 1rem;
margin-top: 1rem;
font-size: 0.75rem;
line-height: 1rem;
}
.md-typeset h1 {
margin: 0 0 0.75rem;
.author-names {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 1rem;
margin-top: 1rem;
margin-left: 0.5rem;
}
.author-name {
opacity: 0;
.author-container {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
margin: 0;
transition: transform 0.2s;
}
div:hover .author-name {
opacity: 1;
.author-container:hover {
transform: translateY(-0.125rem);
}
.author-container a {
padding: 0;
margin: 0;
display: block;
}
.author-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: block;
}
.author-name a {
color: inherit; /* Inherits the color from the parent element */
text-decoration: none; /* Removes the underline */
}
.author-name a:hover {
color: inherit; /* Inherits the color from the parent element */
text-decoration: underline; /* Adds underline on hover */
}
.non-selectable-text {

3
docs/theme/cookbooks.html vendored
View File

@ -11,7 +11,8 @@
<h1>Supervision Cookbooks</h1>
</div>
<div class="custom-grid">
<p class="card repo-card" data-url="/develop/notebooks/quickstart" data-name="Supervision Quickstart" data-desc="Quickstart to Supervision" data-labels="ANNOTATORS,DETECTIONS,SAM" data-version="v0.18.0" data-author="SkalskiP,onuralpszr"></p>
<p class="card repo-card" data-url="/develop/notebooks/quickstart" data-name="Supervision Quickstart" data-labels="ANNOTATORS,DETECTIONS,SAM" data-version="v0.18.0" data-author="SkalskiP,onuralpszr,roboflow"></p>
<p class="card repo-card" data-url="/develop/notebooks/quickstart" data-name="Supervision Quickstart" data-labels="ANNOTATORS,DETECTIONS,SAM" data-version="v0.18.0" data-author="SkalskiP,onuralpszr,roboflow"></p>
</div>
</div>
</section>