mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

[UI] Fix misalligned icons 

- On the pull request page, two icons were misaligned vertically with
their text part.
- This patch adds the simple flexbox trick with `align-items: center` to
vertically center the children elements and adds `gt-ml-2` to the text,
to add space between icon and text that would otherwise be removed
because of `display: flex`.

(cherry picked from commit 5c991c1043)
(cherry picked from commit dced28df0a)
This commit is contained in:
Gusted 2023-06-08 14:22:52 +02:00 committed by Earl Warren
parent c3c21e3b6b
commit 0dc631fa9d
No known key found for this signature in database
GPG Key ID: 0579CB2928A78A00
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
templates/repo/issue/view_content/update_branch_by_merge.tmpl
View File

@ -1,9 +1,9 @@
{{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}} {{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
<div class="ui divider"></div> <div class="ui divider"></div>
<div class="item item-section"> <div class="item item-section">
<div class="item-section-left"> <div class="item-section-left gt-df gt-ac">
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i> <i class="icon icon-octicon gt-df gt-ac">{{svg "octicon-alert"}}</i>
{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}} <span class="gt-ml-2">{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}</span>
</div> </div>
<div class="item-section-right"> <div class="item-section-right">
{{if and $.UpdateAllowed $.UpdateByRebaseAllowed}} {{if and $.UpdateAllowed $.UpdateByRebaseAllowed}}

4
web_src/js/components/PullRequestMergeForm.vue
View File

@ -63,9 +63,9 @@
<div v-if="!showActionForm" class="gt-df"> <div v-if="!showActionForm" class="gt-df">
<!-- the merge button --> <!-- the merge button -->
<div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'green' : 'red']" @click="toggleActionForm(true)"> <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'green' : 'red']" @click="toggleActionForm(true)">
<button class="ui button"> <button class="ui button gt-df gt-ac">
<svg-icon name="octicon-git-merge"/> <svg-icon name="octicon-git-merge"/>
<span class="button-text"> <span class="button-text gt-ml-2">
{{ mergeStyleDetail.textDoMerge }} {{ mergeStyleDetail.textDoMerge }}
<template v-if="autoMergeWhenSucceed"> <template v-if="autoMergeWhenSucceed">
{{ mergeForm.textAutoMergeButtonWhenSucceed }} {{ mergeForm.textAutoMergeButtonWhenSucceed }}