From 89a8b3e1634e37e7ab6f1a4f919827de8fcdd89f Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Sun, 5 Jun 2022 10:09:50 +0200 Subject: [PATCH] Limit max-height of CodeMirror editors for issue comment and wiki (#18271) * Make the wiki editor bar sticky for longer wiki edits On codeberg community it was requested to make the wiki editor toolbar sticky for longer wiki posts, so one wouldn't have to scroll to the top to use it. (Reference; https://codeberg.org/Codeberg/Community/issues/533). In order to make this happen, the .editor-toolbar class needs to become position: sticky, and we need to fix it's transparent background and border-bottom. Because the bottom disappears, we add it. This makes the border become a double border, because the CodeMirror area defines borders for all. As such I've added a border-top: none, on the wiki write tab for the CodeMirror class. * Make the issue bar in the issue view sticky for issue #10675 In issue #10675 it's requested to make the issue bar sticky upon scrolling in the issue view. The proposed change changes inline html, which is not desirable. As such I've added the position sticky option to it's container, and fix the background upon scrolling. * Make linter happy on _repository.less Fix 0px -> 0 to make the linter happy. * Make linter happy on _editor.less Fix 0px -> 0 to make the linter happy. * Change z-index to the lowest boundary of 1 As per review of @silverwind change the z-index to it's lowest requirement of 1. * Change z-index to the lowest boundary of 1 As per review of @silverwind change the z-index to it's lowest requirement of 1. * Revert changes made to wiki editor (unsticky) and add max-height Fixes the max-height to 85vh, on the proposed 90vh it just came out just slightly too large. Unstickies the changes from the sticky commits. * Revert changes for the sticky title editor Removes the changes as done by the sticky title editor. * Add max-height definition to CodeMirror-scroll Add the max-height definition for the CodeMirror-scroll class in order to generalize the changes spoken about in PR #18271 * Remove CodeMirror-scroll definition Remove the max-height in CodeMirror-scroll definition, in order to generalize it in the CodeMirror less file. As per discussion in #18271. * fine tune CodeMirror min-height/max-height Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: wxiaoguang Co-authored-by: Lunny Xiao --- web_src/less/_base.less | 9 --------- web_src/less/_repository.less | 8 ++++++++ 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 461195df0..62119fbb9 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -2008,15 +2008,6 @@ table th[data-sortt-desc] { text-overflow: ellipsis; } -.dropdown:not(.selection) > .menu.review-box > * { - @media (max-height: 700px) { - .CodeMirror, - .CodeMirror-scroll { - min-height: 100px; - } - } -} - .ui.dropdown .menu .item { border-radius: 0; } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 37c8b9cc2..0cae04d11 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1226,6 +1226,10 @@ height: 200px; font-family: var(--fonts-monospace); } + + .CodeMirror-scroll { + max-height: 85vh; + } } } @@ -2107,6 +2111,10 @@ } } + .form .CodeMirror-scroll { + max-height: 85vh; + } + @media @mediaSm { .dividing.header .stackable.grid .button { margin-top: 2px;