domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Improve markdown editor: width, height, preferred (#23895)

Browse source 
Follow #23876


1. Fine tune the heights of the editors (like before)
    * Auto expand the editor (increase/decrease the height) when editing
2. Remember user's last used editor (textarea/easymde) in LocalStorage,
then next time the editor will be switched automatically
* No need to introduce extra config option, it satisfies all users,
including who prefer EasyMDE
3. Also fix the width problem of Review Panel

Screenshot:

<details>


![image](https://user-images.githubusercontent.com/2114189/229518585-2e05827e-8355-48f3-a20c-2c8b9e60ce74.png)


![image](https://user-images.githubusercontent.com/2114189/229518173-4caa6da7-6ad9-40e9-bf1a-ceddfcd4b37f.png)


![image](https://user-images.githubusercontent.com/2114189/229507886-148e9b84-9b58-46d1-ba3f-727e1396f476.png)


![image](https://user-images.githubusercontent.com/2114189/229518258-9f522294-1e64-4b06-91ab-ab43b0353aaa.png)


![image](https://user-images.githubusercontent.com/2114189/229507752-6d540ac7-7748-4bb6-bc09-28acab32d31b.png)


![image](https://user-images.githubusercontent.com/2114189/229510899-de322af5-57e8-4dc5-9a61-771a3b1bee79.png)


</details>

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2023-04-08 01:03:29 +08:00 • committed by GitHub
parent 97d5ec2aeb
commit 93eb914438
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 203 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web_src/css/editor-markdown.css
View file

@ -18,8 +18,15 @@
cursor: pointer;
}
.combo-markdown-editor .markdown-text-editor {
.ui.form .combo-markdown-editor textarea.markdown-text-editor,
.combo-markdown-editor textarea.markdown-text-editor {
display: block;
width: 100%;
height: 200px;
min-height: 200px;
max-height: calc(100vh - 200px);
resize: vertical;
}
.combo-markdown-editor .CodeMirror-scroll {
max-height: calc(100vh - 200px);
}

21
web_src/css/repository.css
View file

@ -544,10 +544,6 @@
margin: 0;
}
.repository .comment textarea {
max-height: none !important;
}
.repository.new.issue .comment.form .comment .avatar {
width: 3em;
}
@ -1068,11 +1064,6 @@
min-height: 5rem;
}
.repository.view.issue .comment-list .comment .ui.form textarea {
height: 200px;
font-family: var(--fonts-monospace);
}
.repository.view.issue .comment-list .comment .edit.buttons {
margin-top: 10px;
}
@ -1191,15 +1182,6 @@
margin-top: -8px;
}
.repository .comment.form .content textarea {
height: 200px;
font-family: var(--fonts-monospace);
}
.repository .comment.form .content .CodeMirror-scroll {
max-height: 85vh;
}
.repository .milestone.list {
list-style: none;
padding-top: 15px;
@ -2123,9 +2105,6 @@
margin-top: 0;
}
.repository.wiki .form .CodeMirror-scroll {
max-height: 85vh;
}
@media (max-width: 767px) {
.repository.wiki .dividing.header .stackable.grid .button {

17
web_src/css/review.css
View file

@ -154,8 +154,11 @@
margin: 0.5em;
}
.comment-code-cloud .editor-statusbar {
display: none;
}
.comment-code-cloud .footer {
border-top: 1px solid var(--color-secondary);
padding: 10px 0;
}
@ -218,15 +221,9 @@ a.blob-excerpt:hover {
max-height: calc(100vh - 360px);
}
.review-box-panel .editor-toolbar,
.review-box-panel .CodeMirror-scroll {
width: min(calc(100vw - 2em), 800px);
max-width: none;
}
.review-box-panel .combo-markdown-editor textarea {
width: 730px;
max-width: calc(100vw - 70px);
.review-box-panel .combo-markdown-editor {
width: 730px; /* this width matches current EasyMDE's toolbar's width */
max-width: calc(100vw - 70px); /* leave enough space on left, and align the page content */
}
#review-box {