Skip to content

Commit bcf13b6

Browse files
author
Gusted
authored
Improve commit list/view on mobile (#19712)
- This is a continuation on [the work](#19546) I've done for improving mobile experience on Gitea. - The current behavior of going trough the commits list is horrible, each individual item gets it's own row and thereby isn't quite compact as it should be on mobile. The commit view's header is in a bit better state, it's quite only that content is overlapping each other. - This patch fixes those problems. Each row in the commit list table will actually take a row in the UI. The commit view's header has now a better organized way of placing the information.
1 parent 71ca131 commit bcf13b6

File tree

3 files changed

+93
-15
lines changed

3 files changed

+93
-15
lines changed

‎templates/repo/commit_page.tmpl

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
{{$class = (printf "%s%s" $class " isWarning")}}
1818
{{end}}
1919
{{end}}
20-
<div class="ui top attached header clearing segment pr {{$class}}">
21-
<div class="df mb-4">
20+
<div class="ui top attached header clearing segment pr commit-header {{$class}}">
21+
<div class="df mb-4 fw">
2222
<h3 class="mb-0 f1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses "root" $}}</h3>
2323
{{if not $.PageIsWiki}}
2424
<div class="ui">
@@ -143,8 +143,8 @@
143143
<span class="text grey mr-3">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</span>
144144
{{end}}
145145
</div>
146-
<div class="ui attached segment df ac sb py-2 commit-header-row {{$class}}">
147-
<div class="df ac">
146+
<div class="ui attached segment df ac sb py-2 commit-header-row fw {{$class}}">
147+
<div class="df ac author">
148148
{{if .Author}}
149149
{{avatar .Author 28 "mr-3"}}
150150
{{if .Author.FullName}}
@@ -171,9 +171,7 @@
171171
<div class="ui horizontal list df ac">
172172
{{if .Parents}}
173173
<div class="item">
174-
{{.i18n.Tr "repo.diff.parent"}}
175-
</div>
176-
<div class="item">
174+
<span>{{.i18n.Tr "repo.diff.parent"}}</span>
177175
{{range .Parents}}
178176
{{if $.PageIsWiki}}
179177
<a class="ui blue sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">{{ShortSha .}}</a>
@@ -183,13 +181,14 @@
183181
{{end}}
184182
</div>
185183
{{end}}
186-
<div class="mobile-only"></div>
187-
<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
188-
<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
184+
<div class="item">
185+
<span>{{.i18n.Tr "repo.diff.commit"}}</span>
186+
<span class="ui blue sha label">{{ShortSha .CommitID}}</span>
187+
</div>
189188
</div>
190189
</div>
191190
{{if .Commit.Signature}}
192-
<div class="ui bottom attached message tl df ac sb commit-header-row {{$class}}">
191+
<div class="ui bottom attached message tl df ac sb commit-header-row fw {{$class}}">
193192
<div class="df ac">
194193
{{if .Verification.Verified}}
195194
{{if ne .Verification.SigningUser.ID 0}}
@@ -204,8 +203,8 @@
204203
{{avatar .Verification.SigningUser 28}}
205204
<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.GetDisplayName}}</strong></a>
206205
{{else}}
207-
<span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
208-
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
206+
<span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog" 16 "mr-3"}}</span>
207+
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
209208
{{avatarByEmail .Verification.SigningEmail "" 28}}
210209
<strong>{{.Verification.SigningUser.GetDisplayName}}</strong>
211210
{{end}}

‎templates/repo/commits_list.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="ui attached table segment">
2-
<table class="ui very basic striped fixed table single line" id="commits-table">
1+
<div class="ui attached table segment commit-table">
2+
<table class="ui very basic striped table unstackable fixed" id="commits-table">
33
<thead>
44
<tr>
55
<th class="four wide">{{.i18n.Tr "repo.commits.author"}}</th>

‎web_src/less/_repository.less

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3328,4 +3328,83 @@ td.blob-excerpt {
33283328
}
33293329
}
33303330
}
3331+
.commit-header-row {
3332+
.ui.horizontal.list {
3333+
width: 100%;
3334+
overflow-x: scroll;
3335+
margin-top: 2px;
3336+
3337+
.item {
3338+
align-items: center;
3339+
display: flex;
3340+
}
3341+
}
3342+
3343+
.author {
3344+
padding: 3px 0;
3345+
}
3346+
}
3347+
3348+
.commit-header h3 {
3349+
flex-basis: auto !important;
3350+
margin-bottom: .5rem !important;
3351+
}
3352+
3353+
.commits-table {
3354+
flex-direction: column;
3355+
3356+
.commits-table-left {
3357+
align-items: initial !important;
3358+
margin-bottom: 6px;
3359+
}
3360+
3361+
.commits-table-right form {
3362+
display: flex;
3363+
flex-wrap: wrap;
3364+
3365+
> div:nth-child(1) {
3366+
order: 1;
3367+
}
3368+
3369+
> div:nth-child(2) {
3370+
order: 3;
3371+
margin-left: .5rem;
3372+
margin-top: .5rem;
3373+
}
3374+
3375+
> button:nth-child(3) {
3376+
order: 2;
3377+
margin-left: .25rem;
3378+
}
3379+
}
3380+
}
3381+
3382+
.commit-table {
3383+
overflow-x: scroll;
3384+
3385+
td.sha,
3386+
th.sha {
3387+
display: none !important;
3388+
}
3389+
3390+
.commit-list {
3391+
span.message-wrapper {
3392+
max-width: none;
3393+
}
3394+
3395+
tr td:last-child {
3396+
display: block;
3397+
width: max-content;
3398+
}
3399+
3400+
td.author {
3401+
display: block;
3402+
width: calc(100% + .5rem);
3403+
}
3404+
3405+
.copy-commit-sha {
3406+
display: none !important;
3407+
}
3408+
}
3409+
}
33313410
}

0 commit comments

Comments
 (0)