show ellipsis for long filenames, fielname as tooltip

albertodonato · Jun 24, 2024 · 7a90118 · 7a90118
1 parent 528a4d7
commit 7a90118
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/server/assets/style.css b/server/assets/style.css
@@ -116,6 +116,10 @@ a.type-file {
 }
 .col-name {
     flex-grow: 1;
+    flex-shrink: 10;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    text-overflow: ellipsis;
 }
 .col-size {
     border-color: var(--size-color);

diff --git a/server/template.html b/server/template.html
@@ -25,16 +25,16 @@ <h1>
         </div>
         {{ if not .Dir.IsRoot -}}
         <div class="row entry">
-          <a href=".." class="col col-name type-dir-up">..</a>
+          <a title="Up one directory" href=".." class="col col-name type-dir-up">..</a>
         </div>
         {{- end }}
         {{- range $i, $entry := .Dir.Entries -}}
         {{- $i := inc $i -}}
         <div class="row entry">
           {{ if .IsDir -}}
-          <a href="{{ .Name }}/" class="col col-name type-dir" tabindex="{{ $i }}">{{ .Name }}/</a>
+          <a title="{{ .Name }}/" href="{{ .Name }}/" class="col col-name type-dir" tabindex="{{ $i }}">{{ .Name }}/</a>
           {{- else -}}
-          <a href="{{ .Name }}" class="col col-name type-file" tabindex="{{ $i }}">{{ .Name }}</a>
+          <a title="{{ .Name }}" href="{{ .Name }}" class="col col-name type-file" tabindex="{{ $i }}">{{ .Name }}</a>
           {{- end }}
           <span class="col col-size">
             {{ if eq .HumanSize.Suffix "" }}&mdash;{{ else }}{{ .HumanSize.Value }}{{ end -}}