From 3725fa28ccc01ab08060f591f894ea6443a348e8 Mon Sep 17 00:00:00 2001 From: Gusted Date: Sun, 1 May 2022 16:11:21 +0000 Subject: [PATCH] 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. --- templates/admin/auth/list.tmpl | 2 +- templates/admin/cron.tmpl | 2 +- templates/admin/emails/list.tmpl | 2 +- templates/admin/monitor.tmpl | 2 +- templates/admin/notice.tmpl | 2 +- templates/admin/org/list.tmpl | 2 +- templates/admin/packages/list.tmpl | 2 +- templates/admin/repo/list.tmpl | 2 +- templates/admin/user/list.tmpl | 2 +- templates/repo/issue/list.tmpl | 2 +- templates/repo/issue/view.tmpl | 2 +- templates/repo/issue/view_content.tmpl | 7 +- .../repo/issue/view_content/comments.tmpl | 5 ++ web_src/less/_admin.less | 9 +++ web_src/less/_repository.less | 74 ++++++++++++++++++- web_src/less/_user.less | 4 + 16 files changed, 105 insertions(+), 16 deletions(-) diff --git a/templates/admin/auth/list.tmpl b/templates/admin/auth/list.tmpl index 71e5bfbda8d7..b4a703e4139f 100644 --- a/templates/admin/auth/list.tmpl +++ b/templates/admin/auth/list.tmpl @@ -10,7 +10,7 @@
- +
diff --git a/templates/admin/cron.tmpl b/templates/admin/cron.tmpl index 30277177ed0c..a73813ef8804 100644 --- a/templates/admin/cron.tmpl +++ b/templates/admin/cron.tmpl @@ -3,7 +3,7 @@
-
ID
+
diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl index e73213c1dfa7..277c777a89c0 100644 --- a/templates/admin/emails/list.tmpl +++ b/templates/admin/emails/list.tmpl @@ -30,7 +30,7 @@
-
+
diff --git a/templates/admin/monitor.tmpl b/templates/admin/monitor.tmpl index 443159f8ceaa..86686101acf5 100644 --- a/templates/admin/monitor.tmpl +++ b/templates/admin/monitor.tmpl @@ -8,7 +8,7 @@ {{.i18n.Tr "admin.monitor.queues"}}
- +
diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl index 9fec53b3156f..8d0e1c2206d1 100644 --- a/templates/admin/notice.tmpl +++ b/templates/admin/notice.tmpl @@ -7,7 +7,7 @@ {{.i18n.Tr "admin.notices.system_notice_list"}} ({{.i18n.Tr "admin.total" .Total}})
-
{{.i18n.Tr "admin.monitor.queue.name"}}
+
diff --git a/templates/admin/org/list.tmpl b/templates/admin/org/list.tmpl index 75c4d39196cf..0782ef64e97a 100644 --- a/templates/admin/org/list.tmpl +++ b/templates/admin/org/list.tmpl @@ -13,7 +13,7 @@ {{template "admin/base/search" .}}
-
+
diff --git a/templates/admin/packages/list.tmpl b/templates/admin/packages/list.tmpl index 373a97407b5e..df89d8bed236 100644 --- a/templates/admin/packages/list.tmpl +++ b/templates/admin/packages/list.tmpl @@ -29,7 +29,7 @@
-
ID{{SortArrow "oldest" "newest" $.SortType false}}
+
diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl index d7561dde7d2b..da05bfab962e 100644 --- a/templates/admin/repo/list.tmpl +++ b/templates/admin/repo/list.tmpl @@ -13,7 +13,7 @@ {{template "admin/repo/search" .}}
-
ID
+
diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl index 93e6f38c2701..755e4436f89d 100644 --- a/templates/admin/user/list.tmpl +++ b/templates/admin/user/list.tmpl @@ -61,7 +61,7 @@
-
ID{{SortArrow "oldest" "newest" $.SortType false}}
+
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl index 63d746f570a1..ba7f1c1480b1 100644 --- a/templates/repo/issue/list.tmpl +++ b/templates/repo/issue/list.tmpl @@ -2,7 +2,7 @@
{{template "repo/header" .}}
-
+
{{template "repo/issue/navbar" .}}
diff --git a/templates/repo/issue/view.tmpl b/templates/repo/issue/view.tmpl index acfd25e7e024..c1fedac04ce9 100644 --- a/templates/repo/issue/view.tmpl +++ b/templates/repo/issue/view.tmpl @@ -2,7 +2,7 @@
{{template "repo/header" .}}
-
+
{{template "repo/issue/navbar" .}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index 46a2a3969bd6..b5f838e9d0aa 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -41,6 +41,9 @@ {{if .Repository.OriginalURL}} ({{$.i18n.Tr "repo.migrated_from" (.Repository.OriginalURL|Escape) (.Repository.GetOriginalURLHostname|Escape) | Safe }}){{end}} {{else}} + + {{avatar .Issue.Poster}} + {{.Issue.Poster.GetDisplayName}} {{.i18n.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}} @@ -50,12 +53,12 @@
{{if gt .Issue.ShowRole 0}} {{if (.Issue.ShowRole.HasRole "Writer")}} -
+
{{$.i18n.Tr "repo.issues.collaborator"}}
{{end}} {{if (.Issue.ShowRole.HasRole "Owner")}} -
+
{{$.i18n.Tr "repo.issues.owner"}}
{{end}} diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 7c4e63314d83..7ff7f247fca6 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -35,6 +35,11 @@ ({{$.i18n.Tr "repo.migrated_from" ($.Repository.OriginalURL|Escape) ($.Repository.GetOriginalURLHostname|Escape) | Safe }}){{end}} {{else}} + {{if gt .Poster.ID 0}} + + {{avatar .Poster}} + + {{end}} {{.Poster.GetDisplayName}} diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index 97c8e0d5c896..3af0c57d110d 100644 --- a/web_src/less/_admin.less +++ b/web_src/less/_admin.less @@ -12,6 +12,7 @@ .table.segment { padding: 0; font-size: 13px; + overflow-x: scroll; &:not(.striped) { thead { @@ -62,6 +63,9 @@ dd { margin-left: 275px; + @media @mediaSm { + margin-left: 5%; + } } dt { @@ -72,6 +76,11 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + @media @mediaSm { + width: auto; + margin-right: .5em; + } } } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index ffbea14b99fd..13f9384ba063 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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; + } + .avatar.image, .avatar.image img { width: 20px; @@ -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; @@ -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); @@ -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; @@ -3011,6 +3019,11 @@ tbody.commit-list { pointer-events: none !important; } } + @media @mediaSm { + .svg { + display: none; + } + } } .tag-code { @@ -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; + } + } + } } diff --git a/web_src/less/_user.less b/web_src/less/_user.less index 828402211562..e19298681985 100644 --- a/web_src/less/_user.less +++ b/web_src/less/_user.less @@ -175,3 +175,7 @@ max-width: 60px; } } + +#notification_div .tab.segment { + overflow-x: scroll; +}
ID{{SortArrow "oldest" "newest" .SortType false}}