github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-04 14:52:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 fix https://github.com/siyuan-note/siyuan/issues/3005

Browse Source
This commit is contained in:
Vanessa 2022-12-28 21:17:11 +08:00
parent e09114c518
commit 28b79219e3
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/asset/pdf/pdf_sidebar_resizer.js
View File

@ -53,7 +53,8 @@ class PDFSidebarResizer {
* @type {number} * @type {number}
*/ */
get outerContainerWidth() { get outerContainerWidth() {
return (this._outerContainerWidth ||= this.outerContainer.clientWidth); // NOTE
return this.outerContainer.clientWidth;
} }
/** /**
@ -63,7 +64,8 @@ class PDFSidebarResizer {
_updateWidth(width = 0) { _updateWidth(width = 0) {
// Prevent the sidebar from becoming too narrow, or from occupying more // Prevent the sidebar from becoming too narrow, or from occupying more
// than half of the available viewer width. // than half of the available viewer width.
const maxWidth = Math.floor(this.outerContainerWidth / 2); // NOTE
const maxWidth = Math.floor(this.outerContainerWidth / 3 * 2);
if (width > maxWidth) { if (width > maxWidth) {
width = maxWidth; width = maxWidth;
} }
@ -84,6 +86,7 @@ class PDFSidebarResizer {
* @private * @private
*/ */
_mouseMove(evt) { _mouseMove(evt) {
// NOTE
let width = evt.clientX - this.outerContainer.getBoundingClientRect().left; let width = evt.clientX - this.outerContainer.getBoundingClientRect().left;
// For sidebar resizing to work correctly in RTL mode, invert the width. // For sidebar resizing to work correctly in RTL mode, invert the width.
if (this.isRTL) { if (this.isRTL) {

15
app/src/assets/scss/pdf/_pdf.scss
View File

@ -224,13 +224,22 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 1px; width: 6px;
z-index: 200; z-index: 200;
cursor: ew-resize; cursor: ew-resize;
right: -6px; right: -6px;
background-color: var(--b3-border-color);
&:hover { &:after {
content: "";
width: 1px;
height: 100%;
background-color: var(--b3-border-color);
position: absolute;
top: 0;
left: 3px;
}
&:hover:after {
background-color: var(--b3-scroll-color); background-color: var(--b3-scroll-color);
} }
} }