CatAClock/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-04-25 04:57:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

fix(ui): ensure consistent switch position in markdown editor (#7492)

Browse source 
Followup to https://codeberg.org/forgejo/forgejo/pulls/7481.

Fix a bug reported by @Gusted where the switch would jump ~1px up when switched to preview mode.

It was because the switch is always center-aligning to the largest element in the toolbar. With toolbar buttons disappearing, the largest element was the switch itself. By placing it in a box with same height as the buttons we can ensure it can always stay in the same position.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7492
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-04-09 17:37:46 +00:00 • committed by Gusted
parent eca57cc3e9
commit 282125e90f
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/shared/combomarkdowneditor.tmpl
View file

@ -16,9 +16,11 @@ Template Attributes:
<markdown-toolbar>
{{if .MarkdownPreviewUrl}}
<div class="switch">
<a href="#" class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</a>
<a href="#" class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</a>
<div class="markdown-toolbar-switch">
<div class="switch">
<a href="#" class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</a>
<a href="#" class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</a>
</div>
</div>
{{end}}
<div class="markdown-toolbar-group">

6
web_src/css/editor/combomarkdowneditor.css
View file

@ -11,7 +11,11 @@
flex-wrap: wrap;
}
markdown-toolbar .switch .item {
.markdown-toolbar-switch {
display: flex;
height: 30px;
}
.markdown-toolbar-switch .switch .item {
padding: 0.25em 1em;
}