Skip to content

Commit 3725fa2

Browse files
author
Gusted
authored
Improve UI on mobile (#19546)
Start making the mobile experience not painful and be actually usable. This contains a few smaller changes to enhance this experience. - Submit buttons on the review forms aren't columns anymore and are now allowed to be displayed on one row. - The label/milestone & New Issue buttons were given each own row even tough, there's enough place to do it one the same row. This commit fixes that. - The issues+Pull tab on repo's has a third item besides the label/milestone & New Issue buttons, the search bar. On desktop there's enough place to do this on one row, for mobile it isn't, currently it was using for each item a new row. This commits fixes that by only giving the searchbar a new row and have the other two buttons on the same row. - The notification table will now be show a scrollbar instead of overflow. - The repo buttons(Watch, Star, Fork) on mobile were showing quite big and the SVG wasn't even displayed on the same line, if the count of those numbers were too high it would even overflow. This commit removes the SVG, as there isn't any place to show them on the same row and allows them to have a new row if the counts of those buttons are high. - The admin page can show you a lot of interesting information, on mobile the System Status + Configuration weren't properly displayed as the margin's were too high. This commit fixes that by reducing the margin to a number that makes sense on mobile. - Fixes to not overflow the tables but instead force them to be scrollable. - When viewing a issue or pull request, the comments aren't full-width but instead 80% and aligned to right, on mobile this is a annoyance as there isn't much width to begin with. This commits fixes that by forcing full-width and removing the avatars on the left side and instead including them inline in the comment header.
1 parent ac6c338 commit 3725fa2

File tree

16 files changed

+105
-16
lines changed

16 files changed

+105
-16
lines changed

‎templates/admin/auth/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</div>
1111
</h4>
1212
<div class="ui attached table segment">
13-
<table class="ui very basic striped table">
13+
<table class="ui very basic striped table unstackable">
1414
<thead>
1515
<tr>
1616
<th>ID</th>

‎templates/admin/cron.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</h4>
44
<div class="ui attached table segment">
55
<form method="post" action="{{AppSubUrl}}/admin">
6-
<table class="ui very basic striped table">
6+
<table class="ui very basic striped table unstackable">
77
<thead>
88
<tr>
99
<th></th>

‎templates/admin/emails/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</form>
3131
</div>
3232
<div class="ui attached table segment">
33-
<table class="ui very basic striped table">
33+
<table class="ui very basic striped table unstackable">
3434
<thead>
3535
<tr>
3636
<th data-sortt-asc="username" data-sortt-desc="reverseusername">

‎templates/admin/monitor.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{{.i18n.Tr "admin.monitor.queues"}}
99
</h4>
1010
<div class="ui attached table segment">
11-
<table class="ui very basic striped table">
11+
<table class="ui very basic striped table unstackable">
1212
<thead>
1313
<tr>
1414
<th>{{.i18n.Tr "admin.monitor.queue.name"}}</th>

‎templates/admin/notice.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{.i18n.Tr "admin.notices.system_notice_list"}} ({{.i18n.Tr "admin.total" .Total}})
88
</h4>
99
<div class="ui attached table segment">
10-
<table id="notice-table" class="ui very basic select selectable table">
10+
<table id="notice-table" class="ui very basic select selectable table unstackable">
1111
<thead>
1212
<tr>
1313
<th></th>

‎templates/admin/org/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{{template "admin/base/search" .}}
1414
</div>
1515
<div class="ui attached table segment">
16-
<table class="ui very basic striped table">
16+
<table class="ui very basic striped table unstackable">
1717
<thead>
1818
<tr>
1919
<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>

‎templates/admin/packages/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
</form>
3030
</div>
3131
<div class="ui attached table segment">
32-
<table class="ui very basic striped table">
32+
<table class="ui very basic striped table unstackable">
3333
<thead>
3434
<tr>
3535
<th>ID</th>

‎templates/admin/repo/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{{template "admin/repo/search" .}}
1414
</div>
1515
<div class="ui attached table segment">
16-
<table class="ui very basic striped table">
16+
<table class="ui very basic striped table unstackable">
1717
<thead>
1818
<tr>
1919
<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>

‎templates/admin/user/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
</form>
6262
</div>
6363
<div class="ui attached table segment">
64-
<table class="ui very basic striped table">
64+
<table class="ui very basic striped table unstackable">
6565
<thead>
6666
<tr>
6767
<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" .SortType false}}</th>

‎templates/repo/issue/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="page-content repository">
33
{{template "repo/header" .}}
44
<div class="ui container">
5-
<div class="ui three column stackable grid">
5+
<div class="ui three column grid issue-list-headers">
66
<div class="column">
77
{{template "repo/issue/navbar" .}}
88
</div>

‎templates/repo/issue/view.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="page-content repository view issue pull">
33
{{template "repo/header" .}}
44
<div class="ui container">
5-
<div class="ui two column stackable grid">
5+
<div class="ui two column grid">
66
<div class="column">
77
{{template "repo/issue/navbar" .}}
88
</div>

‎templates/repo/issue/view_content.tmpl

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@
4141
{{if .Repository.OriginalURL}} ({{$.i18n.Tr "repo.migrated_from" (.Repository.OriginalURL|Escape) (.Repository.GetOriginalURLHostname|Escape) | Safe }}){{end}}
4242
</span>
4343
{{else}}
44+
<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
45+
{{avatar .Issue.Poster}}
46+
</a>
4447
<span class="text grey">
4548
<a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
4649
{{.i18n.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
@@ -50,12 +53,12 @@
5053
<div class="comment-header-right actions df ac">
5154
{{if gt .Issue.ShowRole 0}}
5255
{{if (.Issue.ShowRole.HasRole "Writer")}}
53-
<div class="ui basic label">
56+
<div class="ui basic label role-label">
5457
{{$.i18n.Tr "repo.issues.collaborator"}}
5558
</div>
5659
{{end}}
5760
{{if (.Issue.ShowRole.HasRole "Owner")}}
58-
<div class="ui basic label">
61+
<div class="ui basic label role-label">
5962
{{$.i18n.Tr "repo.issues.owner"}}
6063
</div>
6164
{{end}}

‎templates/repo/issue/view_content/comments.tmpl

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@
3535
({{$.i18n.Tr "repo.migrated_from" ($.Repository.OriginalURL|Escape) ($.Repository.GetOriginalURLHostname|Escape) | Safe }}){{end}}
3636
</span>
3737
{{else}}
38+
{{if gt .Poster.ID 0}}
39+
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
40+
{{avatar .Poster}}
41+
</a>
42+
{{end}}
3843
<span class="text grey">
3944
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
4045
{{.Poster.GetDisplayName}}

‎web_src/less/_admin.less

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
.table.segment {
1313
padding: 0;
1414
font-size: 13px;
15+
overflow-x: scroll;
1516

1617
&:not(.striped) {
1718
thead {
@@ -62,6 +63,9 @@
6263

6364
dd {
6465
margin-left: 275px;
66+
@media @mediaSm {
67+
margin-left: 5%;
68+
}
6569
}
6670

6771
dt {
@@ -72,6 +76,11 @@
7276
overflow: hidden;
7377
text-overflow: ellipsis;
7478
white-space: nowrap;
79+
80+
@media @mediaSm {
81+
width: auto;
82+
margin-right: .5em;
83+
}
7584
}
7685
}
7786

‎web_src/less/_repository.less

Lines changed: 71 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -861,6 +861,11 @@
861861
}
862862
}
863863

864+
/* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */
865+
.inline-timeline-avatar {
866+
display: none;
867+
}
868+
864869
.avatar.image,
865870
.avatar.image img {
866871
width: 20px;
@@ -1655,7 +1660,7 @@
16551660
@media (max-width: 480px) {
16561661
padding-top: .25rem;
16571662

1658-
.ui.button {
1663+
.ui.button:not(.btn-submit) {
16591664
padding-left: .5rem;
16601665
padding-right: .5rem;
16611666
display: flex;
@@ -2662,7 +2667,7 @@
26622667
background: var(--color-box-header);
26632668
border-bottom: 1px solid var(--color-secondary) !important;
26642669
font-weight: normal !important;
2665-
padding: .5rem 1rem !important;
2670+
padding: .5rem 1rem;
26662671
margin: 0 !important;
26672672
position: relative;
26682673
color: var(--color-text-light-2);
@@ -2965,8 +2970,11 @@ tbody.commit-list {
29652970
}
29662971

29672972
.repo-buttons {
2968-
display: flex;
29692973
align-items: center;
2974+
display: flex;
2975+
flex-direction: row;
2976+
flex-wrap: wrap;
2977+
word-break: keep-all;
29702978

29712979
@media @mediaSm {
29722980
margin-top: 1em;
@@ -3011,6 +3019,11 @@ tbody.commit-list {
30113019
pointer-events: none !important;
30123020
}
30133021
}
3022+
@media @mediaSm {
3023+
.svg {
3024+
display: none;
3025+
}
3026+
}
30143027
}
30153028

30163029
.tag-code {
@@ -3260,4 +3273,59 @@ td.blob-excerpt {
32603273
}
32613274
}
32623275
}
3276+
.issue-list-headers.ui[class].grid {
3277+
> div:nth-child(1) {
3278+
order: 1;
3279+
width: 50%;
3280+
}
3281+
3282+
> div:nth-child(2) {
3283+
order: 3;
3284+
width: 100%;
3285+
}
3286+
3287+
> div.column:not(.row):nth-child(3) {
3288+
order: 2;
3289+
width: 50%;
3290+
}
3291+
}
3292+
3293+
.repository.view.issue .comment-list {
3294+
.timeline,
3295+
.timeline-item {
3296+
margin-left: 0;
3297+
}
3298+
3299+
.timeline {
3300+
&::before {
3301+
left: 14px;
3302+
}
3303+
3304+
.inline-timeline-avatar {
3305+
display: flex;
3306+
margin-bottom: auto;
3307+
3308+
img.avatar.image {
3309+
height: 24px;
3310+
width: 24px;
3311+
}
3312+
}
3313+
3314+
.comment-header {
3315+
&::before,
3316+
&::after {
3317+
content: unset;
3318+
}
3319+
3320+
padding-left: 4px;
3321+
}
3322+
3323+
/* Don't show the general avatar, we show the inline avatar on mobile.
3324+
* And don't show the role labels, there's no place for that. */
3325+
.timeline-avatar,
3326+
.comment-header-right .role-label {
3327+
display: none;
3328+
}
3329+
}
3330+
}
32633331
}

‎web_src/less/_user.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,3 +175,7 @@
175175
max-width: 60px;
176176
}
177177
}
178+
179+
#notification_div .tab.segment {
180+
overflow-x: scroll;
181+
}

0 commit comments

Comments
 (0)