Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve UI on mobile #19546

Merged
merged 34 commits into from
May 1, 2022
Merged

Improve UI on mobile #19546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
8ef16c7
Don't apply wrap around submit buttons on review form
Apr 26, 2022
a8306a3
Don't allow the issue view headers to stack.
Apr 26, 2022
5689d9f
Have nice issue/pulls list headers
Apr 26, 2022
bed6577
Don't overflow on notification table
Apr 26, 2022
0ead559
Fix repo buttons overflowing
Apr 27, 2022
e7876e2
Properly show tables on mobile
Apr 27, 2022
e78db22
Properly show table on user accounts
Apr 27, 2022
a4ed98b
Properly show all tables on admin for mobile
Apr 27, 2022
330afac
Fix cron/notice tables on admin
Apr 27, 2022
cf4137c
Merge branch 'main' into fix-review-form
Apr 28, 2022
81f6687
Merge branch 'main' into fix-review-form
Apr 28, 2022
b9e8fa5
More width on viewing comments
Apr 29, 2022
f617514
Fix linting
Apr 29, 2022
00839b2
Fix other avatars
Apr 29, 2022
bd530af
Merge branch 'main' into fix-review-form
Apr 29, 2022
920b683
Don't error when branch's commit doesn't exist (#19547)
Apr 29, 2022
7834260
Fix Pull Request comment filename word breaks (#19535)
parnic Apr 29, 2022
6d0240b
Permalink files In PR diff (#19534)
KN4CK3R Apr 29, 2022
7bcee58
Add API to query collaborators permission for a repository (#18761)
flozzone Apr 29, 2022
a0c79fb
Mute link in diff header (#19556)
silverwind Apr 29, 2022
0f9f73d
Respect DefaultUserIsRestricted system default when creating new user…
jpraet Apr 29, 2022
a257cd4
[skip ci] Updated translations via Crowdin
GiteaBot Apr 30, 2022
9a4deff
fix #19545 (#19563)
6543 Apr 30, 2022
577710c
Added X-Mailer header to outgoing emails (#19562)
TitaniumHocker Apr 30, 2022
9da61e3
Use middleware to open gitRepo (#19559)
6543 Apr 30, 2022
9d0048f
Add comments for display: none
Apr 30, 2022
e413709
Revert broken commits
Apr 30, 2022
fd7ffb4
Merge branch 'main' into fix-review-form
Apr 30, 2022
24d4f36
Add Poster check
Apr 30, 2022
71fa53e
Fix idents
Apr 30, 2022
59183d3
Merge branch 'main' into fix-review-form
Apr 30, 2022
8e4fc27
Update comment
May 1, 2022
b7afee9
Merge branch 'main' into fix-review-form
May 1, 2022
d3d0cab
Merge branch 'main' into fix-review-form
6543 May 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/admin/auth/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</div>
</h4>
<div class="ui attached table segment">
<table class="ui very basic striped table">
<table class="ui very basic striped table unstackable">
<thead>
<tr>
<th>ID</th>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/cron.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</h4>
<div class="ui attached table segment">
<form method="post" action="{{AppSubUrl}}/admin">
<table class="ui very basic striped table">
<table class="ui very basic striped table unstackable">
<thead>
<tr>
<th></th>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/emails/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</form>
</div>
<div class="ui attached table segment">
<table class="ui very basic striped table">
<table class="ui very basic striped table unstackable">
<thead>
<tr>
<th data-sortt-asc="username" data-sortt-desc="reverseusername">
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/monitor.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{{.i18n.Tr "admin.monitor.queues"}}
</h4>
<div class="ui attached table segment">
<table class="ui very basic striped table">
<table class="ui very basic striped table unstackable">
<thead>
<tr>
<th>{{.i18n.Tr "admin.monitor.queue.name"}}</th>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/notice.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{{.i18n.Tr "admin.notices.system_notice_list"}} ({{.i18n.Tr "admin.total" .Total}})
</h4>
<div class="ui attached table segment">
<table id="notice-table" class="ui very basic select selectable table">
<table id="notice-table" class="ui very basic select selectable table unstackable">
<thead>
<tr>
<th></th>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/org/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{{template "admin/base/search" .}}
</div>
<div class="ui attached table segment">
<table class="ui very basic striped table">
<table class="ui very basic striped table unstackable">
<thead>
<tr>
<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/packages/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</form>
</div>
<div class="ui attached table segment">
<table class="ui very basic striped table">
<table class="ui very basic striped table unstackable">
<thead>
<tr>
<th>ID</th>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/repo/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{{template "admin/repo/search" .}}
</div>
<div class="ui attached table segment">
<table class="ui very basic striped table">
<table class="ui very basic striped table unstackable">
<thead>
<tr>
<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/user/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
</form>
</div>
<div class="ui attached table segment">
<table class="ui very basic striped table">
<table class="ui very basic striped table unstackable">
<thead>
<tr>
<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" .SortType false}}</th>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="page-content repository">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui three column stackable grid">
<div class="ui three column grid issue-list-headers">
<div class="column">
{{template "repo/issue/navbar" .}}
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="page-content repository view issue pull">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui two column stackable grid">
<div class="ui two column grid">
<div class="column">
{{template "repo/issue/navbar" .}}
</div>
Expand Down
7 changes: 5 additions & 2 deletions templates/repo/issue/view_content.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@
{{if .Repository.OriginalURL}} ({{$.i18n.Tr "repo.migrated_from" (.Repository.OriginalURL|Escape) (.Repository.GetOriginalURLHostname|Escape) | Safe }}){{end}}
</span>
{{else}}
<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
{{avatar .Issue.Poster}}
</a>
<span class="text grey">
<a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
{{.i18n.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
Expand All @@ -50,12 +53,12 @@
<div class="comment-header-right actions df ac">
{{if gt .Issue.ShowRole 0}}
{{if (.Issue.ShowRole.HasRole "Writer")}}
<div class="ui basic label">
<div class="ui basic label role-label">
{{$.i18n.Tr "repo.issues.collaborator"}}
</div>
{{end}}
{{if (.Issue.ShowRole.HasRole "Owner")}}
<div class="ui basic label">
<div class="ui basic label role-label">
{{$.i18n.Tr "repo.issues.owner"}}
</div>
{{end}}
Expand Down
5 changes: 5 additions & 0 deletions templates/repo/issue/view_content/comments.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@
({{$.i18n.Tr "repo.migrated_from" ($.Repository.OriginalURL|Escape) ($.Repository.GetOriginalURLHostname|Escape) | Safe }}){{end}}
</span>
{{else}}
{{if gt .Poster.ID 0}}
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
{{avatar .Poster}}
</a>
{{end}}
<span class="text grey">
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
{{.Poster.GetDisplayName}}
Expand Down
9 changes: 9 additions & 0 deletions web_src/less/_admin.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
.table.segment {
padding: 0;
font-size: 13px;
overflow-x: scroll;

&:not(.striped) {
thead {
Expand Down Expand Up @@ -62,6 +63,9 @@

dd {
margin-left: 275px;
@media @mediaSm {
margin-left: 5%;
}
}

dt {
Expand All @@ -72,6 +76,11 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

@media @mediaSm {
width: auto;
margin-right: .5em;
}
}
}

Expand Down
74 changes: 71 additions & 3 deletions web_src/less/_repository.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -861,6 +861,11 @@
}
}

/* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */
.inline-timeline-avatar {
display: none;
Gusted marked this conversation as resolved.
Show resolved Hide resolved
}

.avatar.image,
.avatar.image img {
width: 20px;
Expand Down Expand Up @@ -1655,7 +1660,7 @@
@media (max-width: 480px) {
padding-top: .25rem;

.ui.button {
.ui.button:not(.btn-submit) {
padding-left: .5rem;
padding-right: .5rem;
display: flex;
Expand Down Expand Up @@ -2662,7 +2667,7 @@
background: var(--color-box-header);
border-bottom: 1px solid var(--color-secondary) !important;
font-weight: normal !important;
padding: .5rem 1rem !important;
padding: .5rem 1rem;
margin: 0 !important;
position: relative;
color: var(--color-text-light-2);
Expand Down Expand Up @@ -2965,8 +2970,11 @@ tbody.commit-list {
}

.repo-buttons {
display: flex;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
word-break: keep-all;

@media @mediaSm {
margin-top: 1em;
Expand Down Expand Up @@ -3011,6 +3019,11 @@ tbody.commit-list {
pointer-events: none !important;
}
}
@media @mediaSm {
.svg {
display: none;
}
Gusted marked this conversation as resolved.
Show resolved Hide resolved
}
}

.tag-code {
Expand Down Expand Up @@ -3260,4 +3273,59 @@ td.blob-excerpt {
}
}
}
.issue-list-headers.ui[class].grid {
> div:nth-child(1) {
order: 1;
width: 50%;
}

> div:nth-child(2) {
order: 3;
width: 100%;
}

> div.column:not(.row):nth-child(3) {
order: 2;
width: 50%;
}
}

.repository.view.issue .comment-list {
.timeline,
.timeline-item {
margin-left: 0;
}

.timeline {
&::before {
left: 14px;
}

.inline-timeline-avatar {
display: flex;
margin-bottom: auto;

img.avatar.image {
height: 24px;
width: 24px;
}
}

.comment-header {
&::before,
&::after {
content: unset;
}

padding-left: 4px;
}

/* Don't show the general avatar, we show the inline avatar on mobile.
* And don't show the role labels, there's no place for that. */
.timeline-avatar,
.comment-header-right .role-label {
display: none;
}
}
}
}
4 changes: 4 additions & 0 deletions web_src/less/_user.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,7 @@
max-width: 60px;
}
}

#notification_div .tab.segment {
overflow-x: scroll;
}