mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-20 12:15:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(redesign): better display on grouped by namespaces

Browse source
This commit is contained in:
darkweak 2023-10-14 18:39:18 +02:00 • committed by Francis Lavoie
parent 982393ff91
commit e6c6310277
No known key found for this signature in database
GPG key ID: C5204D4F28147FC8
2 changed files with 16 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

7
new/download.html
View file

@ -39,12 +39,13 @@
function renderList(list) { function renderList(list) {
if (groupBy === 'type') { if (groupBy === 'type') {
const groupedData = packageManager.group(groupBy) const groupedData = Object.entries(packageManager.group(groupBy)).filter(([_, items]) => !!items.length)
document.getElementById('side-panel-packages').innerHTML = ` document.getElementById('side-panel-packages').innerHTML = `
<div> <div>
${Object.keys(groupedData).map(k => `<a href="#${k}"> ${ k }</a>`).join('')} <h2 class="blue">Namespaces</h2>
${groupedData.map(([k]) => `<a href="#${k}"> ${ k }</a>`).join('')}
</div>`; </div>`;
document.getElementById('packages').innerHTML = Object.entries(groupedData).filter(([_, items]) => !!items.length).map(([category, items]) => ` document.getElementById('packages').innerHTML = groupedData.map(([category, items]) => `
<section id="${category}"> <section id="${category}">
<h2 class="blue">${category}</h2> <h2 class="blue">${category}</h2>
<div class="card-list">${items.map(getCardTemplate).join('')}</div> <div class="card-list">${items.map(getCardTemplate).join('')}</div>

16
new/resources/css/download.css
View file

@ -23,14 +23,13 @@ html {
} }
#side-panel-packages { #side-panel-packages {
padding-top: 32px;
padding-bottom: 32px; padding-bottom: 32px;
} }
#side-panel-packages>div { #side-panel-packages>div {
padding: 1rem 1rem 1rem 0; padding: 32px 1rem 1rem 0;
overflow-y: scroll; overflow-y: scroll;
width: 300px; width: 250px;
max-height: 100vh; max-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -46,7 +45,7 @@ html {
gap: 48px; gap: 48px;
} }
#packages>section>h2 { h2 {
padding-bottom: 16px; padding-bottom: 16px;
color: rgb(14, 110, 189); color: rgb(14, 110, 189);
border-color: rgb(14, 110, 189); border-color: rgb(14, 110, 189);
@ -149,6 +148,15 @@ article {
.filters { .filters {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.wrapper.list {
flex-direction: column;
}
#side-panel-packages>div {
overflow: unset;
width: 100%;
}
} }
input, input,