Skip to content

Commit

Permalink
style: change some class name, enhance lay-grid
Browse files Browse the repository at this point in the history
  • Loading branch information
LincZero committed Jan 30, 2025
1 parent 270e578 commit 368d626
Show file tree
Hide file tree
Showing 7 changed files with 35 additions and 31 deletions.
4 changes: 2 additions & 2 deletions docs/docs/api/Alias别名系统.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ABAlias_json_title: ABAlias_json_item[] = [
{regex: /\|heading 140lne\|2?(timeline|时间线)\|/, replacement: "|title2timeline|"},
{regex: /\|heading 140lne\|2?(tabs?|标签页?)\||\|title2tabs?\|/, replacement: "|title2c2listdata|c2listdata2tab|"},
{regex: /\|heading 140lne\|2?(col|分栏)\||\|title2col\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-col)|"},
{regex: /\|heading 140lne\|2?(card|卡片)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-vfall)|"},
{regex: /\|heading 140lne\|2?(card|卡片)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-lay-vfall)|"},
{regex: /\|heading 140lne\|2?(nodes?|节点)\||\|(title2node|title2abMindmap)\|/, replacement: "|title2listdata|listdata2strict|listdata2nodes|"},

// list - 多叉多层树
Expand All @@ -58,7 +58,7 @@ const ABAlias_json_list: ABAlias_json_item[] = [
{regex: /\|list 140lne\|2?(timeline|时间线)\|/, replacement: "|list2timeline|"},
{regex: /\|list 140lne\|2?(tabs?|标签页?)\||\|list2tabs?\|/, replacement: "|list2c2listdata|c2listdata2tab|"},
{regex: /\|list 140lne\|2?(col|分栏)\||\|list2col\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-col)|"},
{regex: /\|list 140lne\|2?(card|卡片)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-vfall)|"},
{regex: /\|list 140lne\|2?(card|卡片)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-lay-vfall)|"},
{regex: /\|list 140lne\|2?(nodes?|节点)\||\|(list2node|list2abMindmap)\|/, replacement: "|list2listdata|listdata2strict|listdata2nodes|"},

// list - 多叉多层树
Expand Down
4 changes: 2 additions & 2 deletions src/ABConverter/ABAlias.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const ABAlias_json_title: ABAlias_json_item[] = [
{regex: /\|heading 140lne\|2?(timeline|线)\|/, replacement: "|title2timeline|"},
{regex: /\|heading 140lne\|2?(tabs?|?)\||\|title2tabs?\|/, replacement: "|title2c2listdata|c2listdata2tab|"},
{regex: /\|heading 140lne\|2?(col|)\||\|title2col\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-col)|"},
{regex: /\|heading 140lne\|2?(card|)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-vfall)|"},
{regex: /\|heading 140lne\|2?(card|)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-lay-vfall)|"},
{regex: /\|heading 140lne\|2?(nodes?|)\||\|(title2node|title2abMindmap)\|/, replacement: "|title2listdata|listdata2strict|listdata2nodes|"},

// list - 多叉多层树
Expand All @@ -145,7 +145,7 @@ const ABAlias_json_list: ABAlias_json_item[] = [
{regex: /\|list 140lne\|2?(timeline|线)\|/, replacement: "|list2timeline|"},
{regex: /\|list 140lne\|2?(tabs?|?)\||\|list2tabs?\|/, replacement: "|list2c2listdata|c2listdata2tab|"},
{regex: /\|list 140lne\|2?(col|)\||\|list2col\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-col)|"},
{regex: /\|list 140lne\|2?(card|)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-vfall)|"},
{regex: /\|list 140lne\|2?(card|)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-lay-vfall)|"},
{regex: /\|list 140lne\|2?(nodes?|)\||\|(list2node|list2abMindmap)\|/, replacement: "|list2listdata|listdata2strict|listdata2nodes|"},

// list - 多叉多层树
Expand Down
4 changes: 2 additions & 2 deletions src/ABConverter/ABConvertEvent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -171,8 +171,8 @@ export function abConvertEvent(d: Element|Document) {
// 横向瀑布流: 纯css、高精度横向瀑布流: 未实现js

// list2card,纵向瀑布流 (等宽瀑布流) 顺序重调事件
if (d.querySelector('.ab-items.ab-vfall:not(.js-waterfall):not(.ab-hfall)')) {
const root_el_list = d.querySelectorAll(".ab-items.ab-vfall:not(.js-waterfall):not(.ab-hfall)")
if (d.querySelector('.ab-items.ab-lay-vfall:not(.js-waterfall):not(.ab-hfall)')) {
const root_el_list = d.querySelectorAll(".ab-items.ab-lay-vfall:not(.js-waterfall):not(.ab-hfall)")
for (const root_el of root_el_list) {
// 1. 准备原元素
root_el.classList.add("js-waterfall") // 避免:触发两次时,第二次触发会以第一次触发的顺序为基准,再进行调整
Expand Down
2 changes: 1 addition & 1 deletion src/ABConverter/converter/abc_mdit_container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const abc_midt_card = ABConvert.factory({
const c2listdata: List_C2ListItem = mditTabs2listdata(content, /^@card(.*)$/) // /^@[a-zA-Z]* (.*)$/
C2ListProcess.c2data2items(c2listdata, el)
el.querySelector("div")?.classList.add("ab-card")
el.querySelector("div")?.classList.add("ab-vfall")
el.querySelector("div")?.classList.add("ab-lay-vfall")
return el
}
})
36 changes: 19 additions & 17 deletions src/ABConverter/style/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -723,15 +723,15 @@ html[data-theme="dark"] #app {
}

.ab-note .ab-items.ab-card .ab-items-item > div {
padding-top: 5px;
padding-bottom: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

.ab-note .ab-items.ab-card .ab-items-item .ab-items-title {
border-bottom: 1px solid var(--ab-bright-color);
}

.ab-note .ab-items.ab-card.ab-vfall:not(.ab-hfall) {
.ab-note .ab-items.ab-card.ab-lay-vfall:not(.ab-hfall) {
/*display: flex; // Flexbox 布局
flex-wrap: wrap; // 元素换行显示
gap: 1rem; // 间隙
Expand Down Expand Up @@ -764,35 +764,35 @@ html[data-theme="dark"] #app {
}*/
}

.ab-note .ab-items.ab-card.ab-vfall:not(.ab-hfall) .ab-items-item {
.ab-note .ab-items.ab-card.ab-lay-vfall:not(.ab-hfall) .ab-items-item {
break-inside: avoid-column;
}

.ab-note .ab-items.ab-card.ab-hfall {
.ab-note .ab-items.ab-card.ab-lay-hfall {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}

.ab-note .ab-items.ab-card.ab-hfall .ab-items-item .ab-items-title {
.ab-note .ab-items.ab-card.ab-lay-hfall .ab-items-item .ab-items-title {
color: currentColor;
border-bottom: none;
}

.ab-note .ab-items.ab-card.ab-hfall::after {
.ab-note .ab-items.ab-card.ab-lay-hfall::after {
content: "";
flex-grow: 99999;
}

.ab-note .ab-items.ab-card.ab-hfall > .ab-items-item {
.ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item {
flex-grow: 1;
margin: 5px;
padding: 0 10px;
position: relative;
overflow: hidden;
}

.ab-note .ab-items.ab-card.ab-hfall > .ab-items-item img {
.ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item img {
max-width: 100%;
min-width: 100%;
height: 200px;
Expand All @@ -801,29 +801,29 @@ html[data-theme="dark"] #app {
vertical-align: bottom;
}

.ab-note .ab-items.ab-card.ab-hfall > .ab-items-item p {
.ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item p {
max-width: 300px;
margin: 0;
}

.ab-note .ab-items.ab-card.ab-hfall > .ab-items-item > .ab-items-content {
.ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item > .ab-items-content {
height: 100%;
min-width: 100%;
}

.ab-note .ab-items.ab-card.ab-deco-grid {
.ab-note .ab-items.ab-card.ab-lay-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
gap: 0px !important;
margin: 0 auto;
}

.ab-note .ab-items.ab-card.ab-deco-grid::after {
.ab-note .ab-items.ab-card.ab-lay-grid::after {
content: "";
flex-grow: 99999;
}

.ab-note .ab-items.ab-card.ab-deco-grid > .ab-items-item {
.ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item {
position: relative;
overflow: hidden;
margin: 5px;
Expand All @@ -834,16 +834,18 @@ html[data-theme="dark"] #app {
/* 确保文字居中 */
}

.ab-note .ab-items.ab-card.ab-deco-grid > .ab-items-item img {
.ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item img {
max-width: 200px;
max-height: 200px;
width: 100%;
/* 确保图片宽度为100%,适应网格布局 */
height: auto;
margin: 0;
}

.ab-note .ab-items.ab-card.ab-deco-grid > .ab-items-item > .ab-items-content {
.ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item > .ab-items-content {
width: 100%;
padding: 0;
}

.ab-note .ab-items.ab-card.ab-deco-scroll-x {
Expand Down
2 changes: 1 addition & 1 deletion src/ABConverter/style/styles.min.css

Large diffs are not rendered by default.

14 changes: 8 additions & 6 deletions src/ABConverter/style/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -724,8 +724,8 @@ html[data-theme="dark"] #app {
padding: 5px 10px;

&>div {
padding-top: 5px;
padding-bottom: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

.ab-items-title {
Expand All @@ -738,7 +738,7 @@ html[data-theme="dark"] #app {
}

// 布局1,纵向瀑布流 (有js)
&.ab-vfall:not(.ab-hfall) {
&.ab-lay-vfall:not(.ab-hfall) {
// 方式一,对齐, flex布局
/*display: flex; // Flexbox 布局
flex-wrap: wrap; // 元素换行显示
Expand Down Expand Up @@ -789,7 +789,7 @@ html[data-theme="dark"] #app {
}

// 布局2,横向瀑布流
&.ab-hfall {
&.ab-lay-hfall {
// 布局无关
.ab-items-item .ab-items-title {
color: currentColor;
Expand Down Expand Up @@ -832,10 +832,10 @@ html[data-theme="dark"] #app {
}

// 布局3,网格整齐排列 (内容特别整齐时可用) (此处代码有点乱)
&.ab-deco-grid {
&.ab-lay-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
gap: 0px !important;
margin: 0 auto;
&::after {
content: "";
Expand All @@ -855,9 +855,11 @@ html[data-theme="dark"] #app {
max-height: 200px;
width: 100%; /* 确保图片宽度为100%,适应网格布局 */
height: auto;
margin: 0;
}
&>.ab-items-content {
width: 100%;
padding: 0;
}
}
}
Expand Down

0 comments on commit 368d626

Please sign in to comment.