From d7ca6cab78a7199666b7885911778b9b6bf254d3 Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Fri, 14 Jan 2022 16:42:34 +0100 Subject: [PATCH 01/11] 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. --- web_src/less/_editor.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less index 73e5bda0a2aa3..2ffd677d2c4ae 100644 --- a/web_src/less/_editor.less +++ b/web_src/less/_editor.less @@ -12,9 +12,18 @@ border-bottom: 0; } +.repository.wiki .tab[data-tab="write"] .CodeMirror { + border-top: 0; +} + .editor-toolbar { opacity: 1 !important; border-color: var(--color-secondary); + position: sticky; + top: 0px; + z-index: 10; + background: var(--color-body); + border-bottom: 1px solid var(--color-secondary); } .editor-toolbar.fullscreen { From cd15a24172d631cc44f2cd98575c6a088420bd5a Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Fri, 14 Jan 2022 16:44:50 +0100 Subject: [PATCH 02/11] 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. --- web_src/less/_repository.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 4894a0a2c92b3..7ed8f5e916174 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -635,6 +635,10 @@ .title { padding-bottom: 0 !important; + position: sticky; + top: 0px; + background-color: var(--color-body); + z-index: 10; .issue-title { margin-bottom: .5rem; From 7a4079f58bf69d22ec57818d27d6eb325814bc0f Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Fri, 14 Jan 2022 16:59:16 +0100 Subject: [PATCH 03/11] Make linter happy on _repository.less Fix 0px -> 0 to make the linter happy. --- web_src/less/_repository.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 7ed8f5e916174..061b0e0ead47e 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -636,7 +636,7 @@ .title { padding-bottom: 0 !important; position: sticky; - top: 0px; + top: 0; background-color: var(--color-body); z-index: 10; From 52c9f6529d3a87b1c9cc234dbf6aac483e76fd25 Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Fri, 14 Jan 2022 16:59:52 +0100 Subject: [PATCH 04/11] Make linter happy on _editor.less Fix 0px -> 0 to make the linter happy. --- web_src/less/_editor.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less index 2ffd677d2c4ae..77c81e3684140 100644 --- a/web_src/less/_editor.less +++ b/web_src/less/_editor.less @@ -20,7 +20,7 @@ opacity: 1 !important; border-color: var(--color-secondary); position: sticky; - top: 0px; + top: 0; z-index: 10; background: var(--color-body); border-bottom: 1px solid var(--color-secondary); From 01a1dd4f8dea3763e750c47b301ec0f77cbd6fbf Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Sat, 15 Jan 2022 19:14:57 +0100 Subject: [PATCH 05/11] 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. --- web_src/less/_editor.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less index 77c81e3684140..a732818044a8b 100644 --- a/web_src/less/_editor.less +++ b/web_src/less/_editor.less @@ -21,7 +21,7 @@ border-color: var(--color-secondary); position: sticky; top: 0; - z-index: 10; + z-index: 1; background: var(--color-body); border-bottom: 1px solid var(--color-secondary); } From 4c949f92a5033a3c507a6f76cdbee4af1aceaa5b Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Sat, 15 Jan 2022 19:15:39 +0100 Subject: [PATCH 06/11] 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. --- web_src/less/_repository.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 061b0e0ead47e..d08e50b3e4f7f 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -638,7 +638,7 @@ position: sticky; top: 0; background-color: var(--color-body); - z-index: 10; + z-index: 1; .issue-title { margin-bottom: .5rem; From 52632d9c1c5be945eae56c34a011ce938579ed39 Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Fri, 4 Feb 2022 18:01:37 +0100 Subject: [PATCH 07/11] 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. --- web_src/less/_editor.less | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less index a732818044a8b..75961199f005c 100644 --- a/web_src/less/_editor.less +++ b/web_src/less/_editor.less @@ -12,18 +12,13 @@ border-bottom: 0; } -.repository.wiki .tab[data-tab="write"] .CodeMirror { - border-top: 0; +.repository.wiki .tab[data-tab="write"] .CodeMirror .CodeMirror-scroll { + max-height: 85vh; } .editor-toolbar { opacity: 1 !important; border-color: var(--color-secondary); - position: sticky; - top: 0; - z-index: 1; - background: var(--color-body); - border-bottom: 1px solid var(--color-secondary); } .editor-toolbar.fullscreen { From fd31c52560b61f121026fd104345336eb5e0d665 Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Fri, 4 Feb 2022 18:02:30 +0100 Subject: [PATCH 08/11] Revert changes for the sticky title editor Removes the changes as done by the sticky title editor. --- web_src/less/_repository.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index e45ffd0bfa151..6cf70abdf7723 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -642,10 +642,6 @@ .title { padding-bottom: 0 !important; - position: sticky; - top: 0; - background-color: var(--color-body); - z-index: 1; .issue-title { margin-bottom: .5rem; From 3e168798d483333b5bb79ea32215ed0bb4236227 Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Mon, 14 Feb 2022 09:58:12 +0100 Subject: [PATCH 09/11] 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 --- web_src/less/codemirror/base.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web_src/less/codemirror/base.less b/web_src/less/codemirror/base.less index 87344574634fd..87afbc0f04fed 100644 --- a/web_src/less/codemirror/base.less +++ b/web_src/less/codemirror/base.less @@ -39,3 +39,7 @@ .CodeMirror-focused { border-color: var(--color-primary) !important; } + +.CodeMirror .CodeMirror-scroll { + max-height: 85vh; +} From 9246d84663ef5eb02d5bb4a4a898f42b0ac48dfa Mon Sep 17 00:00:00 2001 From: Martijn de Boer Date: Mon, 14 Feb 2022 09:59:14 +0100 Subject: [PATCH 10/11] 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. --- web_src/less/_editor.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less index 75961199f005c..73e5bda0a2aa3 100644 --- a/web_src/less/_editor.less +++ b/web_src/less/_editor.less @@ -12,10 +12,6 @@ border-bottom: 0; } -.repository.wiki .tab[data-tab="write"] .CodeMirror .CodeMirror-scroll { - max-height: 85vh; -} - .editor-toolbar { opacity: 1 !important; border-color: var(--color-secondary); From 0fb6b70e79ac048b057a8129245300aea64ee12a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 24 May 2022 15:27:37 +0800 Subject: [PATCH 11/11] fine tune CodeMirror min-height/max-height --- web_src/less/_base.less | 9 --------- web_src/less/_repository.less | 8 ++++++++ web_src/less/codemirror/base.less | 4 ---- 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 461195df01804..62119fbb99187 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 37c8b9cc21696..0cae04d1154e6 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; diff --git a/web_src/less/codemirror/base.less b/web_src/less/codemirror/base.less index 87afbc0f04fed..87344574634fd 100644 --- a/web_src/less/codemirror/base.less +++ b/web_src/less/codemirror/base.less @@ -39,7 +39,3 @@ .CodeMirror-focused { border-color: var(--color-primary) !important; } - -.CodeMirror .CodeMirror-scroll { - max-height: 85vh; -}