Skip to content

Commit 793c0e1

Browse files
Align sidebar gears to the right (#33721)
Currently, the issue/pr sidebar is hard to read visually. One of the reason is that the gear icons make reading difficult because they are "in the way" when reading, and not aligned together. This PR proposes to align them on the right. Actions are also better highlighted this way. ## Screenshots ### Issue | Before this PR | After this PR | | --- | --- | | <img width="322" alt="Capture d’écran 2025-02-25 à 19 59 39" src="https://github.com/user-attachments/assets/efdd13af-7b22-4f2b-8e65-dd17d6f3ffad" /> | <img width="322" alt="Capture d’écran 2025-02-25 à 19 58 56" src="https://github.com/user-attachments/assets/eeacc3f4-5e2c-4558-a4b3-0f1ab4742107" /> | ### Pull Request | Before this PR | After this PR | | --- | --- | | <img width="322" alt="Capture d’écran 2025-02-25 à 20 16 12" src="https://github.com/user-attachments/assets/c274b58b-ad50-4ad8-b3da-91dbabd1b120" /> | <img width="322" alt="Capture d’écran 2025-02-25 à 20 15 54" src="https://github.com/user-attachments/assets/ecfd6d60-a525-4767-872d-2ef84030d81e" /> | Signed-off-by: Quentin Guidée <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 6c5951d commit 793c0e1

File tree

7 files changed

+20
-8
lines changed

7 files changed

+20
-8
lines changed

templates/repo/issue/sidebar/assignee_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/assignee?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
77
>
88
<input class="combo-value" name="assignee_ids" type="hidden" value="{{$data.SelectedAssigneeIDs}}">
9-
<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
9+
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
1010
<a class="text muted">
1111
<strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
1212
</a>

templates/repo/issue/sidebar/label_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/labels?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
55
>
66
<input class="combo-value" name="label_ids" type="hidden" value="{{$data.SelectedLabelIDs}}">
7-
<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
7+
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
88
<a class="text muted">
99
<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
1010
</a>

templates/repo/issue/sidebar/milestone_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/milestone?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
77
>
88
<input class="combo-value" name="milestone_id" type="hidden" value="{{$data.SelectedMilestoneID}}">
9-
<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
9+
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
1010
<a class="text muted">
1111
<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
1212
</a>

templates/repo/issue/sidebar/project_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/projects?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
77
>
88
<input class="combo-value" name="project_id" type="hidden" value="{{$data.SelectedProjectID}}">
9-
<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
9+
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
1010
<a class="text muted">
1111
<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
1212
</a>

templates/repo/issue/sidebar/reviewer_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/request_review?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
77
>
88
<input type="hidden" class="combo-value" name="reviewer_ids">{{/* match CreateIssueForm */}}
9-
<div class="ui dropdown {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
9+
<div class="ui dropdown text-flex-grow {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
1010
<a class="text muted">
1111
<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
1212
</a>

templates/repo/issue/sidebar/stopwatch_timetracker.tmpl

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
33
<div class="divider"></div>
44
<div>
5-
<div class="ui dropdown jump">
5+
<div class="ui dropdown text-flex-grow jump">
66
<a class="text muted">
7-
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong> {{svg "octicon-gear"}}
8-
{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
7+
<div>
8+
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong> {{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
9+
</div>
10+
{{svg "octicon-gear"}}
911
</a>
1012
<div class="menu">
1113
<a class="item issue-set-time-estimate show-modal" data-modal="#issue-time-set-estimate-modal">

web_src/css/base.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1188,3 +1188,13 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
11881188
overflow: hidden !important;
11891189
text-overflow: ellipsis !important;
11901190
}
1191+
1192+
.ui.dropdown.text-flex-grow {
1193+
display: flex;
1194+
}
1195+
1196+
.ui.dropdown.text-flex-grow > .text {
1197+
display: flex;
1198+
flex-grow: 1;
1199+
justify-content: space-between;
1200+
}

0 commit comments

Comments
 (0)