Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Repo file list enhancements #32835

Merged
merged 14 commits into from
Dec 15, 2024
6 changes: 3 additions & 3 deletions templates/repo/view_list.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
</div>
{{if .HasParentPath}}
<div class="repo-file-line">
{{svg "octicon-reply"}} <a class="muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">..</a>
</div>
<a class="repo-file-line parent-link silenced" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">
silverwind marked this conversation as resolved.
Show resolved Hide resolved
{{svg "octicon-file-directory-fill"}} ..
</a>
{{end}}
{{range $item := .Files}}
<div class="repo-file-item">
Expand Down
46 changes: 38 additions & 8 deletions web_src/css/repo/home-file-list.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,23 @@
#repo-files-table {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-columns: 2fr 3fr auto;
border: 1px solid var(--color-light-border);
background: var(--color-box-body);
border-radius: var(--border-radius);
margin: 10px 0; /* match the "clone-panel-popup" margin to avoid "visual double-border" */
}

@media (max-width: 767.98px) {
#repo-files-table {
grid-template-columns: 1fr 1fr auto;
}
}

#repo-files-table .repo-file-cell.name .svg {
margin-right: 2px;
}

#repo-files-table .svg.octicon-file-directory-fill,
#repo-files-table .svg.octicon-file-submodule {
color: var(--color-primary);
Expand All @@ -22,18 +33,34 @@
display: contents;
}

#repo-files-table .repo-file-item:hover > .repo-file-cell {
#repo-files-table .repo-file-item:hover > .repo-file-cell,
#repo-files-table .parent-link:hover {
background: var(--color-hover);
}

#repo-files-table .repo-file-line,
#repo-files-table .repo-file-cell {
border-top: 1px solid var(--color-light-border);
border-top: .5px solid var(--color-light-border);
border-bottom: .5px solid var(--color-light-border);
padding: 8px 10px;
}

#repo-files-table .repo-file-line:first-child {
border-top: none;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}

#repo-files-table .repo-file-item:last-child .repo-file-line,
#repo-files-table .repo-file-item:last-child .repo-file-cell {
border-bottom: none;
}

#repo-files-table .repo-file-item:last-child .repo-file-cell:first-child {
border-bottom-left-radius: calc(var(--border-radius) - 1px);
}

#repo-files-table .repo-file-item:last-child .repo-file-cell:last-child {
border-bottom-right-radius: calc(var(--border-radius) - 1px);
}

#repo-files-table .repo-file-line {
Expand All @@ -48,12 +75,17 @@
}

#repo-files-table .repo-file-cell.name {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
silverwind marked this conversation as resolved.
Show resolved Hide resolved
#repo-files-table .repo-file-cell.name {
max-width: 35vw;
}
}

#repo-files-table .repo-file-cell.message {
white-space: nowrap;
overflow: hidden;
Expand All @@ -67,8 +99,6 @@
color: var(--color-text-light-1);
}

@media (max-width: 767.98px) {
#repo-files-table .repo-file-cell.name {
max-width: 150px;
}
#repo-files-table .parent-link {
width: 100%;
}
Loading