view_list.tmpl

{{/* use grid layout, still use the old ID because there are many other CSS styles depending on this ID */}}
<div id="repo-files-table" {{if .HasFilesWithoutLatestCommit}}hx-indicator="#repo-files-table .repo-file-cell.message" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
	<div class="repo-file-line repo-file-last-commit">
		{{template "repo/latest_commit" .}}
		<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
	</div>
	
	{{$.FileIconPoolHTML}}
	{{if .HasParentPath}}
	<a class="repo-file-line parent-link silenced" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">
		{{index $.FileIcons ".."}} ..
	</a>
	{{end}}
	{{range $item := .Files}}
		<div class="repo-file-item">
			{{$entry := $item.Entry}}
			{{$commit := $item.Commit}}
			{{$submoduleFile := $item.SubmoduleFile}}
			<div class="repo-file-cell name muted-links {{if not $commit}}notready{{end}}">
				{{index $.FileIcons $entry.Name}}
				{{if $entry.IsSubModule}}
					{{$submoduleLink := $submoduleFile.SubmoduleWebLinkTree ctx}}
					{{if $submoduleLink}}
						<a class="entry-name" href="{{$submoduleLink.RepoWebLink}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
						@ <a class="text primary" href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a>
					{{else}}
						<span class="entry-name" title="{{$entry.Name}}">{{$entry.Name}}</span>
						@ {{ShortSha $submoduleFile.RefID}}
					{{end}}
				{{else}}
					{{if $entry.IsDir}}
						{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
						
						{{/* Extract current branch from BranchLink */}}
						{{$currentBranch := ""}}
						{{if $.BranchLink}}
							{{$parts := StringUtils.Split $.BranchLink "/"}}
							{{range $i, $part := $parts}}
								{{if eq $part "branch"}}
									{{if lt (Eval $i "+" 1) (len $parts)}}
										{{$currentBranch = index $parts (Eval $i "+" 1)}}
									{{end}}
								{{end}}
							{{end}}
						{{end}}
						
						{{/* Folder download dropdown menu with unified style */}}
						<button class="ui dropdown basic compact jump button repo-download-folder-inline" 
								data-tooltip-content='{{ctx.Locale.Tr "repo.download_folder"}}'
								title='{{ctx.Locale.Tr "repo.download_folder"}}'>
							{{svg "octicon-download" 16}}
							<div class="menu">
								{{/* Build download path */}}
								{{$downloadPath := ""}}
								{{if $.TreePath}}
									{{$downloadPath = printf "%s/%s" $.TreePath $entry.Name}}
								{{else}}
									{{$downloadPath = $entry.Name}}
								{{end}}
								{{$escapedPath := PathEscapeSegments $downloadPath}}
								
								{{/* Build URL with branch */}}
								{{$branchPrefix := ""}}
								{{if $currentBranch}}
									{{$branchPrefix = printf "/branch/%s/" $currentBranch}}
								{{end}}
								
								<a class="item" href="{{$.RepoLink}}/download/folder{{$branchPrefix}}{{$escapedPath}}?format=zip">
									{{svg "octicon-file-zip" 16 "tw-mr-2"}}ZIP
								</a>
								<a class="item" href="{{$.RepoLink}}/download/folder{{$branchPrefix}}{{$escapedPath}}?format=tar">
									{{svg "octicon-file-binary" 16 "tw-mr-2"}}TAR
								</a>
								<a class="item" href="{{$.RepoLink}}/download/folder{{$branchPrefix}}{{$escapedPath}}?format=tar.gz">
									{{svg "octicon-file-zip" 16 "tw-mr-2"}}TAR.GZ
								</a>
							</div>
						</button>
						
						<a class="entry-name" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
							{{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}}
							{{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}}
							{{if eq $subJumpablePathFieldLast 0}}
								{{$subJumpablePathName}}
							{{else}}
								{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
								<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
							{{end}}
						</a>
					{{else}}
						<a class="entry-name" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
						{{if $entry.IsLink}}
							<a class="entry-symbol-link flex-text-inline" data-tooltip-content title="{{ctx.Locale.Tr "repo.find_file.follow_symlink"}}" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}?follow_symlink=1">{{svg "octicon-link" 12}}</a>
						{{end}}
					{{end}}
				{{end}}
			</div>
			<div class="repo-file-cell message commit-summary loading-icon-2px">
				{{if $commit}}
					{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
					{{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink $.Repository}}
				{{else}}
					… {{/* will be loaded again by LastCommitLoaderURL */}}
				{{end}}
			</div>
			<div class="repo-file-cell age">{{if $commit}}{{DateUtils.TimeSince $commit.Committer.When}}{{end}}</div>
		</div>
	{{end}}
</div>

<style>
.repo-download-folder-inline {
    padding: 4px 6px;
    margin-right: 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    min-width: 32px;
    height: 24px;
    vertical-align: middle;
    position: relative; /* Добавляем относительное позиционирование для контейнера */
}

.repo-download-folder-inline:hover {
    color: #0366d6;
    background-color: #f6f8fa;
    border-color: #e1e4e8;
}

.repo-download-folder-inline .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 6px 0;
    margin-top: 4px;
    max-height: 200px; /* Ограничиваем максимальную высоту */
    overflow-y: auto; /* Добавляем прокрутку при необходимости */
}

.repo-download-folder-inline:hover .menu {
    display: block;
}

.repo-download-folder-inline .menu .item {
    padding: 8px 12px;
    white-space: nowrap;
    display: block;
    text-align: left;
    width: 100%;
}

.repo-download-folder-inline .menu .item:hover {
    background-color: #f6f8fa;
    color: #0366d6;
}

.repo-download-folder-inline .menu .item svg {
    margin-right: 8px;
    vertical-align: middle;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    .repo-download-folder-inline {
        padding: 3px 4px;
        min-width: 28px;
        height: 22px;
        margin-right: 4px;
    }
    
    .repo-download-folder-inline .menu {
        position: fixed; /* На мобильных используем фиксированное позиционирование */
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 12px 12px 0 0;
        margin-top: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
    
    /* Затемнение фона на мобильных */
    .repo-download-folder-inline:hover::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .repo-download-folder-inline .menu {
        max-height: 40vh;
    }
}
</style>