bjoernager/forgejo
bjoernager/forgejo
1
Fork 0
Code Issues Pull requests Activity

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
Download patch file Download diff file Expand all files Collapse all files

2
templates/shared/combomarkdowneditor.tmpl
View file

@ -16,10 +16,12 @@ Template Attributes:
<markdown-toolbar> <markdown-toolbar>
{{if .MarkdownPreviewUrl}} {{if .MarkdownPreviewUrl}}
<div class="markdown-toolbar-switch">
<div class="switch"> <div class="switch">
<a href="#" class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</a> <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> <a href="#" class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</a>
</div> </div>
</div>
{{end}} {{end}}
<div class="markdown-toolbar-group"> <div class="markdown-toolbar-group">
<md-header class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.heading.tooltip"}}">{{svg "octicon-heading"}}</md-header> <md-header class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.heading.tooltip"}}">{{svg "octicon-heading"}}</md-header>

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

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