mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-08-27 20:53:48 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: added class names to the divs and made a separate grid design for mobile layout

Browse source 
- added/modified the class names of both date & button in commits_list
- created a new vertical layout for mobile (3rows, 212cols-per-row)
This commit is contained in:
iamyaash 2025-05-29 13:25:13 +05:30
commit 1b16e5bcfd
2 changed files with 34 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

8
templates/repo/pulls/commits_list.tmpl
View file

@ -31,7 +31,7 @@
</div>
</div>
<div class="message tw-flex-1">
<div class="message">
{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
<div class="message-wrapper">{{RenderCommitMessageLinkSubject $.Context .Message $commitLink ($.Repository.ComposeMetas ctx)}}</div>
{{if IsMultilineCommitMessage .Message}}
@ -71,12 +71,12 @@
</a>
</div>
<div class="tw-flex-1 tw-text-right tw-pr-4">
<div class="date tw-flex-1 tw-text-right tw-pr-4">
{{if .Committer}}{{DateUtils.TimeSince .Committer.When}}{{else}}{{DateUtils.TimeSince .Author.When}}{{end}}
</div>
<div>
<button class="btn interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
<div class="btn">
<button class="interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
{{if not $.PageIsWiki}}
{{if $.FileName}}
<a

34
web_src/css/repo.css
View file

@ -2775,14 +2775,38 @@ tbody.commit-list {
row-gap: 0.5rem;
grid-template-columns: minmax(8ch, 15%) 1fr minmax(20ch, 1%) minmax(10ch, 10%) auto;
align-items: center;
.message {padding-left: 10%}
.author {margin-right: 10%}
}
@media (max-width: 640px) {
.commit-ui-redesign {
grid-template-columns: minmax(12ch, 100%) minmax(12ch,10%) auto minmax(10ch,40%) auto;
align-items: center;
column-gap: 0.5rem;
.sha.label {display:none}
grid-template-columns: 1fr 1fr;
}
/* manual div allocation in grid cols, since it uses a new layout for mobile */
.commit-ui-redesign .author {
grid-row: 1;
grid-column: 1;
}
.commit-ui-redesign .date {
grid-row: 1;
grid-column: 2;
justify-self: right;
}
.commit-ui-redesign .message {
grid-row: 2;
grid-column: 1 / span 2;
}
.commit-ui-redesign .ui.sha.label {
grid-row: 3;
grid-column: 1;
}
.commit-ui-redesign .btn {
grid-row: 3;
grid-column: 2;
justify-self: right;
}
}