Simon/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-06-27 22:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve the layout style of the market list cards (#17390)

Browse Source 
* 🎨 Improve the layout style of the market list cards https://github.com/siyuan-note/siyuan/issues/17358

* 🎨 Improve the layout style of the market list cards https://github.com/siyuan-note/siyuan/issues/17358
This commit is contained in:
Jeffrey Chen
2026-04-04 17:29:48 +08:00
committed by GitHub
parent 6b2b87895c
commit b12f0fdc86
4 changed files with 24 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/assets/scss/business/_config.scss
View File

@@ -249,6 +249,10 @@
&__panel {
height: 100%;
overflow: auto;
&[data-type="downloaded"] .config-bazaar__content {
margin: 16px;
}
}
&__title {
@@ -260,7 +264,8 @@
}
&__content {
margin-top: -15px;
display: grid;
gap: 16px;
}
&__readme {

27
app/src/assets/scss/component/_card.scss
View File

@@ -4,31 +4,25 @@
box-shadow: var(--b3-point-shadow);
background-color: var(--b3-theme-surface);
border-radius: var(--b3-border-radius);
margin: 16px;
overflow: hidden;
position: relative;
transition: var(--b3-transition);
cursor: pointer;
display: flex;
&--wrap {
flex: 1;
margin: 16px 0 0 16px;
min-width: 342px;
}
&:hover {
background-color: var(--b3-list-hover);
}
&s {
display: flex;
flex-wrap: wrap;
margin: 0 16px 16px 0;
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 342px), 1fr));
margin: 16px;
}
&--current {
background-color: var(--b3-theme-primary-lightest)
background-color: var(--b3-theme-primary-lightest);
}
&--disabled {
@@ -48,7 +42,7 @@
}
&__info {
padding: 16px 16px 4px;
padding: 16px 16px 0;
line-height: 18px;
&--left {
@@ -60,17 +54,22 @@
&__desc {
color: var(--b3-theme-on-surface);
font-size: 12px;
margin-top: 4px;
text-autospace: normal;
margin-top: 8px;
max-height: 54px;
@include mixin.text-clamp(3);
}
&__actions {
padding: 0 16px 14px 16px;
display: flex;
box-sizing: border-box;
font-size: 12px;
line-height: 14px;
padding: 3px 11px 11px;
&:not(.b3-card__actions--right) .block__icon {
color: var(--b3-theme-on-surface-light);
}
&--right {
padding-left: 0;

17
app/src/config/bazaar.ts
View File

@@ -266,13 +266,13 @@ export const bazaar = {
downloads: item.downloads,
downloaded: false,
};
return `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card b3-card--wrap${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}">
return `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}">
<div class="b3-card__img">
<img src="${item.iconURL}" loading="lazy" onerror="this.src='/stage/images/icon.png'"/>
</div>
<div class="fn__flex-1 fn__flex-column">
<div class="b3-card__info fn__flex-1">
${item.preferredName}${item.preferredName !== item.name ? ` <span class="ft__on-surface ft__smaller">${item.name}</span>` : ""}
${item.preferredName}
<div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">
${item.preferredDesc || ""}
</div>
@@ -287,9 +287,6 @@ export const bazaar = {
${bazaar._genFundingHTML(item.preferredFunding)}
<span class="fn__space"></span>
<div class="fn__flex-1"></div>
<span data-position="north" class="ariaLabel block__icon block__icon--show${item.installed ? "" : " fn__none"}" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
<svg><use xlink:href="#iconTrashcan"></use></svg>
</span>
<div class="fn__space${!item.current && item.installed && showSwitch ? "" : " fn__none"}"></div>
<span data-position="north" class="ariaLabel block__icon block__icon--show${!item.current && item.installed && showSwitch ? "" : " fn__none"}" data-type="switch" aria-label="${window.siyuan.languages.use}">
<svg><use xlink:href="#iconSelect"></use></svg>
@@ -316,7 +313,7 @@ export const bazaar = {
<div class="b3-card__img"><img src="${item.iconURL}" loading="lazy" onerror="this.src='/stage/images/icon.png'"/></div>
<div class="fn__flex-1 fn__flex-column">
<div class="b3-card__info b3-card__info--left fn__flex-1">
${item.preferredName}${item.preferredName !== item.name ? ` <span class="ft__on-surface ft__smaller">${item.name}</span>` : ""}
${item.preferredName}
<div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">${item.preferredDesc || ""}</div>
</div>
</div>
@@ -425,7 +422,7 @@ export const bazaar = {
<div class="b3-card__img"><img src="${item.iconURL}" loading="lazy" onerror="this.src='/stage/images/icon.png'"/></div>
<div class="fn__flex-1 fn__flex-column">
<div class="b3-card__info b3-card__info--left fn__flex-1">
${item.preferredName}${item.preferredName !== item.name ? ` <span class="ft__on-surface ft__smaller">${item.name}</span>` : ""}
${item.preferredName}
<div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">${item.preferredDesc || ""}</div>
</div>
</div>
@@ -1076,9 +1073,6 @@ type="checkbox">
}
localSort[selectElement.parentElement.parentElement.getAttribute("data-type")] = selectElement.value;
setStorageVal(Constants.LOCAL_BAZAAR, window.siyuan.storage[Constants.LOCAL_BAZAAR]);
if (cardElements.length > 1) {
html += '<div class="fn__flex-1" style="margin-left: 15px;min-width: 342px;"></div><div class="fn__flex-1" style="margin-left: 15px;min-width: 342px;"></div>';
}
panelElement.querySelector(".b3-cards").innerHTML = html;
}
});
@@ -1140,9 +1134,6 @@ type="checkbox">
html += item.outerHTML;
});
}
if (response.data.packages.length > 1) {
html += '<div class="fn__flex-1" style="margin-left: 15px;min-width: 342px;"></div><div class="fn__flex-1" style="margin-left: 15px;min-width: 342px;"></div>';
}
element.innerHTML = `<div class="b3-cards">${html}</div>`;
}
};

2
app/src/protyle/header/Background.ts
View File

@@ -262,7 +262,7 @@ export class Background {
} else if (type === "show-random" && !protyle.disabled) {
let html = "";
bgs.forEach((item: string, index: number) => {
html += `<div data-index="${index}" style="height: 128px;${item}" class="b3-card b3-card--wrap"></div>`;
html += `<div data-index="${index}" style="height: 128px;${item}" class="b3-card"></div>`;
});
const dialog = new Dialog({
title: window.siyuan.languages.builtIn,