mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-08-29 13:43:51 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: rewrite commit layout CSS from Tailwind to plain CSS and fix mobile layout

Browse source 
- rewritten tailwind css to plain css in web_src/css/repo.css
- fixed mobile layout, but shabox styling is pending; overall layout looks good
This commit is contained in:
iamyaash 2025-05-27 00:02:20 +05:30
commit a2933b66db
2 changed files with 26 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}} {{$commitRepoLink := $.RepoLink}}
{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
{{$prevDate := ""}} {{$prevDate := ""}}
{{range .Commits}} {{range .Commits}}
{{$commitTime := .Committer.When}} {{$commitTime := .Committer.When}}
@ -14,7 +15,7 @@
<div class="tw-border tw-border-[--color-secondary] tw-rounded-md tw-divide-y tw-divide-[--color-secondary]"> <div class="tw-border tw-border-[--color-secondary] tw-rounded-md tw-divide-y tw-divide-[--color-secondary]">
{{end}} {{end}}
<div class="tw-grid tw-grid-cols-1 sm:tw-grid-cols-[minmax(8ch,15%)_1fr_minmax(8ch,15%)_auto_auto] sm:tw-items-center tw-p-2 tw-gap-y-2"> <div class="commit-ui-redesign">
<div class="author"> <div class="author">
<div class="tw-flex"> <div class="tw-flex">
{{$userName := .Author.Name}} {{$userName := .Author.Name}}
@ -30,7 +31,7 @@
</div> </div>
</div> </div>
<div class="tw-flex-1"> <div class="message tw-flex-1">
{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}} {{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
<div class="message-wrapper">{{RenderCommitMessageLinkSubject $.Context .Message $commitLink ($.Repository.ComposeMetas ctx)}}</div> <div class="message-wrapper">{{RenderCommitMessageLinkSubject $.Context .Message $commitLink ($.Repository.ComposeMetas ctx)}}</div>
{{if IsMultilineCommitMessage .Message}} {{if IsMultilineCommitMessage .Message}}
@ -40,7 +41,7 @@
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}} {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
</div> </div>
<div class=""> <div class="tw-text-left">
{{$class := "ui sha label"}} {{$class := "ui sha label"}}
{{if .Signature}} {{if .Signature}}
{{$class = (print $class " isSigned")}} {{$class = (print $class " isSigned")}}
@ -70,7 +71,7 @@
</a> </a>
</div> </div>
<div class="tw-flex-1 tw-text-right tw-p-2"> <div class="tw-flex-1 tw-text-right tw-pr-4">
{{if .Committer}}{{DateUtils.TimeSince .Committer.When}}{{else}}{{DateUtils.TimeSince .Author.When}}{{end}} {{if .Committer}}{{DateUtils.TimeSince .Committer.When}}{{else}}{{DateUtils.TimeSince .Author.When}}{{end}}
</div> </div>

20
web_src/css/repo.css
View file

@ -2766,3 +2766,23 @@ tbody.commit-list {
#repo-activity-top-authors-chart { #repo-activity-top-authors-chart {
height: 150px; /* Pre-allocate the height that will be taken up by the chart, to avoid the container 'jumping'. */ height: 150px; /* Pre-allocate the height that will be taken up by the chart, to avoid the container 'jumping'. */
} }
/* Layout for templates/repo/pulls/commits_list.tmpl */
/* Redesigned commit layout using responsive grid configuration */
.commit-ui-redesign {
display: grid;
padding: 0.5rem;
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%}
}
@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}
}