enhance(ux): put block tags below block content on mobile

This commit is contained in:
Tienson Qin
2025-05-23 23:06:22 +08:00
parent fcdc76016c
commit 7a021bcb8d
2 changed files with 44 additions and 15 deletions

View File

@@ -69,14 +69,8 @@
.block-content-or-editor-wrap {
@apply flex flex-1 flex-row flex-wrap gap-1;
container-type: inline-size;
}
@container (max-width: 600px) {
.time-spent, .positioned-properties.block-right {
display: none;
}
}
.block-content-or-editor-inner {
@apply flex flex-1 flex-col w-full pr-1;
}
@@ -546,12 +540,40 @@
.ls-block {
@apply flex-1 relative py-0.5 transition-[background-color] mx-auto;
container-type: inline-size;
&.selected {
@apply rounded;
}
}
#main-content-container, #right-sidebar {
container-type: inline-size;
}
@container (max-width: 600px) {
.time-spent, .positioned-properties.block-right, .view-actions, .ls-page-title .block-tags {
display: none;
}
.block-row {
@apply flex-col gap-0;
}
.ls-block-right {
@apply gap-0 -ml-1;
}
.ls-page-title .ls-block-right {
@apply ml-0;
}
}
@container (max-width: 370) {
.ls-properties-area {
display: none;
}
}
.ls-block h1,
.editor-inner .h1.uniline-block {
font-size: 2rem;
@@ -998,7 +1020,15 @@ html.is-mac {
}
.block-tag {
@apply flex flex-row items-center;
@apply flex relative pl-2 pr-1;
}
.block-tag.private-tag {
@apply pl-1;
}
.block-tag:hover {
@apply bg-gray-03 rounded;
}
.block-tag a.tag {