mirror of https://github.com/halo-dev/halo
refactor: improve the content area width of the editor for low-resolution screens (#6175)
#### What type of PR is this? /area ui /area editor /kind improvement /milestone 2.17.x #### What this PR does / why we need it: 优化文章编辑器内容区域在低分屏下的表现。 默认: <img width="1898" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/bfca69e5-29cf-45d9-8757-0952fd2a129c"> 小屏幕: <img width="1043" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/88efbeed-fe0c-4b78-b435-f6352dbd8d27"> #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/6172 #### Special notes for your reviewer: 建议测试在各个屏幕下的表现。 #### Does this PR introduce a user-facing change? ```release-note 优化文章编辑器内容区域在低分屏下的表现。 ```pull/6185/head
parent
ab14157def
commit
4d22bc3bbb
|
@ -1,6 +1,6 @@
|
|||
.halo-rich-text-editor {
|
||||
$editorVerticalPadding: 15px;
|
||||
$editorHorizontalPadding: 20%;
|
||||
$editorContentMaxWidth: 64rem;
|
||||
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 48px);
|
||||
|
@ -11,8 +11,9 @@
|
|||
}
|
||||
|
||||
.editor-header-extra {
|
||||
width: 100%;
|
||||
padding: $editorVerticalPadding 20px;
|
||||
padding: $editorVerticalPadding 1rem;
|
||||
max-width: $editorContentMaxWidth;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.editor-content {
|
||||
|
@ -21,7 +22,9 @@
|
|||
|
||||
.ProseMirror {
|
||||
outline: none !important;
|
||||
padding: $editorVerticalPadding 20px;
|
||||
padding: $editorVerticalPadding 1rem;
|
||||
max-width: $editorContentMaxWidth;
|
||||
margin: 0 auto;
|
||||
|
||||
p {
|
||||
margin-top: 0.75em;
|
||||
|
@ -82,19 +85,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.ProseMirror,
|
||||
.editor-header-extra {
|
||||
@media (min-width: 640px) {
|
||||
padding: $editorVerticalPadding min($editorHorizontalPadding, 10%) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
padding: $editorVerticalPadding $editorHorizontalPadding !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-popper--theme-tooltip {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue