diff options
| -rw-r--r-- | templates/repo/diff/box.tmpl | 32 | ||||
| -rw-r--r-- | web_src/css/base.css | 36 | ||||
| -rw-r--r-- | web_src/css/modules/button.css | 6 | ||||
| -rw-r--r-- | web_src/css/repo.css | 42 |
4 files changed, 61 insertions, 55 deletions
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 490465ea12..1aac4acc2b 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -15,7 +15,7 @@ <div> <div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac gt-fw"> <div class="gt-df gt-ac gt-fw"> - <button class="diff-toggle-file-tree-button gt-df gt-ac" data-show-text="{{.locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{.locale.Tr "repo.diff.hide_file_tree"}}"> + <button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{.locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{.locale.Tr "repo.diff.hide_file_tree"}}"> {{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}} {{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}} {{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}} @@ -27,14 +27,14 @@ diffTreeBtn.querySelector(diffTreeIcon).classList.remove('gt-hidden'); diffTreeBtn.setAttribute('data-tooltip-content', diffTreeBtn.getAttribute(diffTreeVisible ? 'data-hide-text' : 'data-show-text')); </script> - <div class="diff-detail-stats gt-df gt-ac gt-ml-3"> + <div class="diff-detail-stats gt-df gt-ac gt-fw"> {{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} </div> </div> - <div class="diff-detail-actions gt-df gt-ac"> + <div class="diff-detail-actions gt-df gt-ac gt-gap-2 gt-fw"> {{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}} - <progress id="viewed-files-summary" class="gt-mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress> - <label for="viewed-files-summary" id="viewed-files-summary-label" class="gt-mr-3 gt-f1" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}"> + <progress id="viewed-files-summary" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress> + <label for="viewed-files-summary" id="viewed-files-summary-label" class="gt-f1 gt-whitespace-nowrap not-mobile" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}"> {{.locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}} </label> {{end}} @@ -85,9 +85,10 @@ {{$isCsv := (call $.IsCsvFile $file)}} {{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}} {{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}} + {{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}} <div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}> - <h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb"> - <div class="diff-file-name gt-df gt-ac gt-mr-3"> + <h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw"> + <div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw"> <button class="fold-file ui button button-ghost gt-p-0 gt-mr-3{{if not $isExpandable}} gt-invisible{{end}}"> {{if $file.ShouldBeHidden}} {{svg "octicon-chevron-right" 18}} @@ -105,11 +106,12 @@ {{end}} </div> <span class="file gt-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span> + <button class="ui button button-link gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button> {{if $file.IsGenerated}} - <span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.generated"}}</span> + <span class="ui label">{{$.locale.Tr "repo.diff.generated"}}</span> {{end}} {{if $file.IsVendored}} - <span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.vendored"}}</span> + <span class="ui label">{{$.locale.Tr "repo.diff.vendored"}}</span> {{end}} {{if and $file.Mode $file.OldMode}} <span class="gt-ml-4 gt-mono">{{$file.OldMode}} → {{$file.Mode}}</span> @@ -117,7 +119,7 @@ <span class="gt-ml-4 gt-mono">{{$file.Mode}}</span> {{end}} </div> - <div class="diff-file-header-actions gt-df gt-ac"> + <div class="diff-file-header-actions gt-df gt-ac gt-gap-2 gt-fw"> {{if $showFileViewToggle}} <div class="ui compact icon buttons"> <button class="ui tiny basic button file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-tooltip-content="{{$.locale.Tr "repo.file_view_source"}}">{{svg "octicon-code"}}</button> @@ -127,8 +129,11 @@ {{if $file.IsProtected}} <span class="ui basic label">{{$.locale.Tr "repo.diff.protected"}}</span> {{end}} + {{if and $isReviewFile $file.HasChangedSinceLastReview}} + <span class="changed-since-last-review unselectable not-mobile">{{$.locale.Tr "repo.pulls.has_changed_since_last_review"}}</span> + {{end}} {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} - <button class="ui basic tiny button unescape-button">{{$.locale.Tr "repo.unescape_control_characters"}}</button> + <button class="ui basic tiny button unescape-button not-mobile">{{$.locale.Tr "repo.unescape_control_characters"}}</button> <button class="ui basic tiny button escape-button gt-hidden">{{$.locale.Tr "repo.escape_control_characters"}}</button> {{end}} {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} @@ -138,10 +143,7 @@ <a class="ui basic tiny button" rel="nofollow" href="{{$.SourcePath}}/{{PathEscapeSegments .Name}}">{{$.locale.Tr "repo.diff.view_file"}}</a> {{end}} {{end}} - {{if and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}} - {{if $file.HasChangedSinceLastReview}} - <span class="changed-since-last-review unselectable">{{$.locale.Tr "repo.pulls.has_changed_since_last_review"}}</span> - {{end}} + {{if $isReviewFile}} <label data-link="{{$.Issue.Link}}/viewed-files" data-headcommit="{{$.PullHeadCommitID}}" class="viewed-file-form unselectable{{if $file.IsViewed}} viewed-file-checked-form{{end}}"> <input type="checkbox" name="{{$file.GetDiffFileName}}" autocomplete="off"{{if $file.IsViewed}} checked{{end}}> {{$.locale.Tr "repo.pulls.has_viewed_file"}} </label> diff --git a/web_src/css/base.css b/web_src/css/base.css index 3c32eb6045..d143b20f81 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -893,19 +893,32 @@ img.ui.avatar, .page-content .ui.ui.ui.container:not(.fluid) { width: 1280px; max-width: calc(100vw - 64px); + margin-left: auto; + margin-right: auto; +} + +.ui.container.fluid.padded { + padding: 0 32px; } /* enable fluid page widths for medium size viewports */ @media (min-width: 768px) and (max-width: 1200px) { - .ui.ui.ui.container:not(.fluid) { - width: calc(100vw - 64px); + .page-content .ui.ui.ui.container:not(.fluid) { + width: calc(100vw - 32px); + max-width: calc(100vw - 32px); + } + .ui.container.fluid.padded { + padding: 0 16px; } } -@media only screen and (max-width: 767px) { +@media (max-width: 767px) { .page-content .ui.ui.ui.container:not(.fluid) { - width: auto; /* copied from semantic css */ - max-width: 100%; + width: calc(100vw - 16px); + max-width: calc(100vw - 16px); + } + .ui.container.fluid.padded { + padding: 0 8px; } } @@ -1165,10 +1178,6 @@ img.ui.avatar, float: right; } -.ui.container.fluid.padded { - padding: 0 32px; -} - .ui.form .ui.button { font-weight: var(--font-weight-normal); } @@ -1525,7 +1534,8 @@ img.ui.avatar, } @media (max-width: 767px) { - .not-mobile { + /* double selector so it wins over .gt-df etc */ + .not-mobile.not-mobile { display: none !important; } } @@ -1552,12 +1562,6 @@ img.ui.avatar, clip: auto; } -@media (min-width: 768px) and (max-width: 991px) { - .ui.container { - width: 95%; - } -} - .ui.menu.new-menu { margin-bottom: 15px; background: var(--color-navbar); diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 1f2d2a4494..d9bc69043d 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -55,7 +55,11 @@ border-left: 1px solid var(--color-light-border); } -.ui.buttons .button + .button { +.ui.buttons .button:first-child:has(+ .button.active) { + border-right: none !important; +} + +.ui.buttons .button + .button:not(.active) { border-left: none; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 1f870658d5..71cd7a2846 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1616,12 +1616,6 @@ margin-right: -4px; } -.repository .diff-detail-box > div::after { - clear: both; - content: ""; - display: block; -} - .repository .diff-detail-box .diff-detail-stats strong { margin-left: 0.25rem; margin-right: 0.25rem; @@ -1658,12 +1652,10 @@ height: 33px; } -.repository .diff-detail-box .diff-detail-actions > * { - margin-right: 0; -} - -.repository .diff-detail-box .diff-detail-actions > * + * { - margin-left: 0.25rem; +.diff-detail-actions > *, +.diff-detail-actions .button { + margin-left: 0 !important; + margin-right: 0 !important; } @media (max-width: 480px) { @@ -1728,11 +1720,14 @@ .repository .diff-box .header:not(.resolved-placeholder) .button { padding: 8px 12px; flex: 0 0 auto; - margin-top: -8px; - margin-bottom: -8px; margin-right: 0; } +.repository .diff-box .header:not(.resolved-placeholder) .button:has(svg) { + padding-top: 6px; + padding-bottom: 6px; +} + .repository .diff-box .resolved-placeholder { display: flex; align-items: center; @@ -3089,6 +3084,11 @@ tbody.commit-list { word-break: break-all; } +.diff-file-header { + padding-top: 5px !important; + padding-bottom: 5px !important; +} + .diff-file-box[data-folded="true"] .diff-file-body { display: none; } @@ -3097,10 +3097,6 @@ tbody.commit-list { border-radius: var(--border-radius) !important; } -.diff-file-header-actions > * + * { - margin-left: 0.5rem !important; -} - .ui.attached.header.diff-file-header.sticky-2nd-row { position: sticky; top: 47px; /* match .repository .diff-detail-box */ @@ -3119,15 +3115,15 @@ tbody.commit-list { } } -.ui.attached.header.diff-file-header .diff-file-header-actions { - flex-shrink: 0; -} - -.ui.attached.header.diff-file-header .diff-file-name { +.diff-file-name { flex: auto; min-width: 100px; } +.diff-file-name .ui.label { + margin-left: 0 !important; +} + .diff-stats-bar { display: inline-block; background-color: var(--color-red); |