search

siyuan-note / siyuan

A privacy-first, self-hosted, fully open source personal knowledge management software, written in typescript and golang.
https://b3log.org/siyuan
GNU Affero General Public License v3.0
19.06k stars 1.42k forks source link

开启自适应宽度的两种状态下设置不同的选择器 #5468

Closed UserZYF closed 2 years ago

UserZYF commented 2 years ago

在什么情况下你需要该特性？In what scenarios do you need this feature?

我做了一个chrome-A4主题，宽度是21CM，和A4纸的宽度一致，主题力图做到所见即所得。思源最近版本的升级，加入了自适应宽度的功能，但是我找不到如何控制宽度的办法，所以想着能够设置不同的选择器，可以控制编辑区域宽度

描述可能的最优解决方案 Describe the optimal solution

和思源笔记折叠前后的状态一样，加入一个[fold="1"]之类的选择器

描述候选的解决方案 Describe the candidate solution

或者直接设置两个不同的选择器

其他信息 Other information

无

Vanessa219 commented 2 years ago

使用 important 强制重置一下 width，padding-left 和 padding-right

UserZYF commented 2 years ago

这样开启自适应宽度前后就没有任何区别了，会固定编辑区域宽度。而且通过!important强调页面宽度，之前设置的一个文档的自定义属性，设置横版A4纸页面宽度的属性也失效

Vanessa219 commented 2 years ago

哦，理解错了。

Vanessa219 commented 2 years ago

[data-fullwidth="true"]

Zuoqiu-Yingyi commented 2 years ago

[data-fullwidth="true"]

除了 .protyle-wysiwyg.protyle-wysiwyg--attr 元素, .protyle-title.protyle-wysiwyg--attr 与 .protyle-background > .protyle-background__iconw 元素也需要设置该属性选择器, 或者在 .protyle-content 元素中设置该属性选择器, 因为宽度自适应时文档标题与文档图标的位置也会随之更改

Vanessa219 commented 2 years ago

好的，下个版本加到 .protyle-content 上

Zuoqiu-Yingyi commented 2 years ago

好的，下个版本加到 .protyle-content 上

目前(v2.1.5)还是有点问题: 当打开自适应宽度开关时, 新打开的文档的 DOM 中 .protyle-content 未默认添加 data-fullwidth="true" 属性

Vanessa219 commented 2 years ago

抱歉，再等下一个版本吧，初始化的时候加漏了。