diff --git a/caddy/setup/browse.go b/caddy/setup/browse.go index 4e5291a5e..5986194bd 100644 --- a/caddy/setup/browse.go +++ b/caddy/setup/browse.go @@ -90,167 +90,269 @@ const defaultTemplate = ` * { padding: 0; margin: 0; } body { - padding: 1% 2%; - font: 16px Arial; + font-family: sans-serif; + text-rendering: optimizespeed; +} + +a { + color: #006ed3; + text-decoration: none; +} + +a:hover, +h1 a:hover { + color: #319cff; +} + +header, +.content { + padding-left: 5%; + padding-right: 5%; +} + +th:first-child, +td:first-child { + padding-left: 5%; +} + +th:last-child, +td:last-child { + padding-right: 5%; } header { - font-size: 45px; - padding: 25px; -} - -header a { - text-decoration: none; - color: inherit; -} - -header .up { - display: inline-block; - height: 50px; - width: 50px; - text-align: center; - margin-right: 20px; -} - -header a.up:hover { - background: #000; - color: #FFF; + padding-top: 25px; + padding-bottom: 15px; + background-color: #f2f2f2; } h1 { - font-size: 30px; - display: inline; + font-size: 20px; + font-weight: normal; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; +} + +h1 a { + color: inherit; +} + +h1 a:hover { + text-decoration: underline; +} + +main { + display: block; +} + +.meta { + font-size: 12px; + font-family: Verdana, sans-serif; + border-bottom: 1px solid #9C9C9C; + padding-top: 15px; + padding-bottom: 15px; +} + +.meta-item { + margin-right: 1em; } table { - border: 0; + width: 100%; border-collapse: collapse; - max-width: 750px; - margin: 0 auto; +} + +tr { + border-bottom: 1px dashed #dadada; +} + +tr:not(:first-child):hover { + background-color: #ffffec; } th, td { - padding: 4px 20px; - vertical-align: middle; - line-height: 1.5em; /* emoji are kind of odd heights */ + text-align: left; + padding: 10px 0; } th { - text-align: left; + padding-top: 15px; + padding-bottom: 15px; + font-size: 16px; } th a { - color: #000; - text-decoration: none; + color: black; } -@media (max-width: 700px) { +th svg { + vertical-align: middle; +} + +td { + font-size: 14px; +} + +td:first-child { + width: 50%; + overflow-wrap: break-word; + word-break: break-word; +} + +th:last-child, +td:last-child { + text-align: right; +} + +footer { + padding: 40px 20px; + font-size: 12px; + text-align: center; +} + +@media (max-width: 600px) { .hideable { display: none; } - body { - padding: 0; - } - - header, - header h1 { - font-size: 16px; - } - - header { - position: fixed; - top: 0; - width: 100%; - background: #333; - color: #FFF; - padding: 15px; - text-align: center; - } - - header .up { - height: auto; + td:first-child { width: auto; - display: none; } - header a.up { - display: inline-block; - position: absolute; - left: 0; - top: 0; - width: 40px; - height: 48px; - font-size: 35px; + th:nth-child(2), + td:nth-child(2) { + padding-right: 5%; + text-align: right; } - - header h1 { - font-weight: normal; - } - - main { - margin-top: 70px; - } -} - -.name { - white-space: pre; }
- {{if .CanGoUp}} - ⬑ - {{else}} -
 
- {{end}} - -

{{.Path}}

+

{{.LinkedPath}}

- - - - - - - {{range .Items}} - - - - - - {{end}} -
- {{if and (eq .Sort "name") (ne .Order "desc")}} - Name ▲ - {{else if and (eq .Sort "name") (ne .Order "asc")}} - Name ▼ - {{else}} - Name - {{end}} - - {{if and (eq .Sort "size") (ne .Order "desc")}} - Size ▲ - {{else if and (eq .Sort "size") (ne .Order "asc")}} - Size ▼ - {{else}} - Size - {{end}} - - {{if and (eq .Sort "time") (ne .Order "desc")}} - Modified ▲ - {{else if and (eq .Sort "time") (ne .Order "asc")}} - Modified ▼ - {{else}} - Modified - {{end}} -
- {{if .IsDir}}📂{{else}}📄{{end}} - {{.Name}} - {{.HumanSize}}{{.HumanModTime "01/02/2006 3:04:05 PM -0700"}}
+
+
+ {{.NumDirs}} director{{if eq 1 .NumDirs}}y{{else}}ies{{end}} + {{.NumFiles}} file{{if ne 1 .NumFiles}}s{{end}} +
+
+
+ + + + + + + {{range .Items}} + + + + + + {{end}} +
+ {{if and (eq .Sort "name") (ne .Order "desc")}} + Name + {{else if and (eq .Sort "name") (ne .Order "asc")}} + Name + {{else}} + Name + {{end}} + + {{if and (eq .Sort "size") (ne .Order "desc")}} + Size + {{else if and (eq .Sort "size") (ne .Order "asc")}} + Size + {{else}} + Size + {{end}} + + {{if and (eq .Sort "time") (ne .Order "desc")}} + Modified + {{else if and (eq .Sort "time") (ne .Order "asc")}} + Modified + {{else}} + Modified + {{end}} +
+ + {{if .IsDir}} + + {{else}} + + {{end}} + {{.Name}} + + {{.HumanSize}}{{.HumanModTime "01/02/2006 03:04:05 PM"}}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ` diff --git a/middleware/browse/browse.go b/middleware/browse/browse.go index 5a8c229b1..75a5b32ca 100644 --- a/middleware/browse/browse.go +++ b/middleware/browse/browse.go @@ -6,6 +6,7 @@ import ( "bytes" "encoding/json" "errors" + "fmt" "net/http" "net/url" "os" @@ -36,7 +37,7 @@ type Config struct { Template *template.Template } -// A Listing is used to fill out a template. +// A Listing is the context used to fill out a template. type Listing struct { // The name of the directory (the last element of the path) Name string @@ -50,6 +51,12 @@ type Listing struct { // The items (files and folders) in the path Items []FileInfo + // The number of directories in the listing + NumDirs int + + // The number of files (items that aren't directories) in the listing + NumFiles int + // Which sorting order is used Sort string @@ -62,6 +69,33 @@ type Listing struct { middleware.Context } +// LinkedPath returns l.Path where every element is a clickable +// link to the path up to that point so far. +func (l Listing) LinkedPath() string { + if len(l.Path) == 0 { + return "" + } + + // skip trailing slash + lpath := l.Path + if lpath[len(lpath)-1] == '/' { + lpath = lpath[:len(lpath)-1] + } + + parts := strings.Split(lpath, "/") + var result string + for i, part := range parts { + if i == 0 && part == "" { + // Leading slash (root) + result += `/` + continue + } + result += fmt.Sprintf(`%s/`, strings.Join(parts[:i+1], "/"), part) + } + + return result +} + // FileInfo is the info about a particular file or directory type FileInfo struct { IsDir bool @@ -140,7 +174,9 @@ func (fi FileInfo) HumanModTime(format string) string { func directoryListing(files []os.FileInfo, r *http.Request, canGoUp bool, root string, ignoreIndexes bool, vars interface{}) (Listing, error) { var fileinfos []FileInfo + var dirCount, fileCount int var urlPath = r.URL.Path + for _, f := range files { name := f.Name() @@ -155,6 +191,9 @@ func directoryListing(files []os.FileInfo, r *http.Request, canGoUp bool, root s if f.IsDir() { name += "/" + dirCount++ + } else { + fileCount++ } url := url.URL{Path: name} @@ -170,10 +209,12 @@ func directoryListing(files []os.FileInfo, r *http.Request, canGoUp bool, root s } return Listing{ - Name: path.Base(urlPath), - Path: urlPath, - CanGoUp: canGoUp, - Items: fileinfos, + Name: path.Base(urlPath), + Path: urlPath, + CanGoUp: canGoUp, + Items: fileinfos, + NumDirs: dirCount, + NumFiles: fileCount, Context: middleware.Context{ Root: http.Dir(root), Req: r,