Clean up diff header css and reduce global textarea min-height (#29232)

1. Tweak diff header and remove a numbe of unneeded CSS for it:

Before:
<img width="433" alt="Screenshot 2024-02-18 at 01 08 09"
src="https://github.com/go-gitea/gitea/assets/115237/d8b377c0-57bc-44d5-bb57-a582c7d4b3b4">

After:
<img width="463" alt="Screenshot 2024-02-18 at 01 07 56"
src="https://github.com/go-gitea/gitea/assets/115237/d08c17e7-5b86-4d07-81da-6371f4754325">

3. Reduce height of review textarea and also reduce fomantic's CSS from
12em to 8em. Now fits better on my screen:

<img width="1352" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/5c658d13-295e-4929-94da-13ade888020d">

---------

Co-authored-by: delvh <dev.lh@web.de>
This commit is contained in:
silverwind 2024-02-18 15:51:21 +01:00 committed by GitHub
parent 68e1d17a5f
commit 39f8ab591c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 11 additions and 22 deletions

View File

@ -184,7 +184,7 @@
</div> </div>
</div> </div>
{{if .Commit.Signature}} {{if .Commit.Signature}}
<div class="ui bottom attached message gt-text-left gt-df gt-ac gt-sb commit-header-row gt-fw {{$class}}"> <div class="ui bottom attached message gt-text-left gt-df gt-ac gt-sb commit-header-row gt-fw gt-mb-0 {{$class}}">
<div class="gt-df gt-ac"> <div class="gt-df gt-ac">
{{if .Verification.Verified}} {{if .Verification.Verified}}
{{if ne .Verification.SigningUser.ID 0}} {{if ne .Verification.SigningUser.ID 0}}

View File

@ -1,7 +1,7 @@
{{$showFileTree := (and (not .DiffNotAvailable) (gt .Diff.NumFiles 1))}} {{$showFileTree := (and (not .DiffNotAvailable) (gt .Diff.NumFiles 1))}}
<div> <div>
<div class="diff-detail-box diff-box"> <div class="diff-detail-box diff-box">
<div class="gt-df gt-ac gt-fw"> <div class="gt-df gt-ac gt-fw gt-gap-3 gt-ml-1">
{{if $showFileTree}} {{if $showFileTree}}
<button class="diff-toggle-file-tree-button not-mobile btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}"> <button class="diff-toggle-file-tree-button not-mobile btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}} {{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}

View File

@ -21,6 +21,7 @@
--border-radius-circle: 50%; --border-radius-circle: 50%;
--opacity-disabled: 0.55; --opacity-disabled: 0.55;
--height-loading: 16rem; --height-loading: 16rem;
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
--tab-size: 4; --tab-size: 4;
} }
@ -492,6 +493,11 @@ ol.ui.list li,
background: var(--color-active) !important; background: var(--color-active) !important;
} }
.ui.form textarea:not([rows]) {
height: var(--min-height-textarea); /* override fomantic default 12em */
min-height: var(--min-height-textarea); /* override fomantic default 8em */
}
/* styles from removed fomantic transition module */ /* styles from removed fomantic transition module */
.hidden.transition { .hidden.transition {
visibility: hidden; visibility: hidden;

View File

@ -37,13 +37,12 @@
.combo-markdown-editor textarea.markdown-text-editor { .combo-markdown-editor textarea.markdown-text-editor {
display: block; display: block;
width: 100%; width: 100%;
min-height: 200px; max-height: calc(100vh - var(--min-height-textarea));
max-height: calc(100vh - 200px);
resize: vertical; resize: vertical;
} }
.combo-markdown-editor .CodeMirror-scroll { .combo-markdown-editor .CodeMirror-scroll {
max-height: calc(100vh - 200px); max-height: calc(100vh - var(--min-height-textarea));
} }
/* use the same styles as markup/content.css */ /* use the same styles as markup/content.css */

View File

@ -1498,12 +1498,6 @@
background: var(--color-body); background: var(--color-body);
} }
@media (max-width: 991.98px) {
.repository .diff-detail-box {
flex-direction: row;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.repository .diff-detail-box { .repository .diff-detail-box {
flex-wrap: wrap; flex-wrap: wrap;
@ -1528,7 +1522,7 @@
color: var(--color-red); color: var(--color-red);
} }
@media (max-width: 991.98px) { @media (max-width: 800px) {
.repository .diff-detail-box .diff-detail-stats { .repository .diff-detail-box .diff-detail-stats {
display: none !important; display: none !important;
} }
@ -1538,7 +1532,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25em; gap: 0.25em;
flex-wrap: wrap;
justify-content: end; justify-content: end;
} }
@ -1548,15 +1541,6 @@
margin-right: 0 !important; margin-right: 0 !important;
} }
@media (max-width: 480px) {
.repository .diff-detail-box .diff-detail-actions {
padding-top: 0.25rem;
}
.repository .diff-detail-box .diff-detail-actions .ui.button:not(.btn-submit) {
padding: 0 0.5rem;
}
}
.repository .diff-detail-box span.status { .repository .diff-detail-box span.status {
display: inline-block; display: inline-block;
width: 12px; width: 12px;