diff options
| author | Joe Mou <dev@mou.fo> | 2026-01-29 08:40:31 -0500 |
|---|---|---|
| committer | Joe Mou <dev@mou.fo> | 2026-02-03 22:16:29 -0500 |
| commit | 031347a2bcb9846881eddb858d1157a71c21c66d (patch) | |
| tree | 69cde9156bbd08bec3586131aebe2701878c7b4a | |
| parent | 7416f8b40fd07031c56584bd089f910185d58f89 (diff) | |
Better formatting for long URLs
| -rw-r--r-- | static/style.css | 21 | ||||
| -rw-r--r-- | views/repo.eta | 12 |
2 files changed, 22 insertions, 11 deletions
diff --git a/static/style.css b/static/style.css index 5673aa7..818c244 100644 --- a/static/style.css +++ b/static/style.css @@ -137,12 +137,23 @@ footer { border: 1px solid var(--border-color); } -.description { - margin-bottom: .2rem; -} +.repo-info { + .description { + margin-bottom: .2rem; + } + + .detail { + white-space: nowrap; + } -.count + .count { - margin-left: 1rem; + div.detail { + overflow-x: hidden; + text-overflow: ellipsis; + } + + span.detail + span.detail { + margin-left: 1rem; + } } pre.box { diff --git a/views/repo.eta b/views/repo.eta index fbca299..a6fcfb3 100644 --- a/views/repo.eta +++ b/views/repo.eta @@ -1,24 +1,24 @@ <% layout("./layout.eta") %> <% if (it.info) { %> - <div class="box"> + <div class="box repo-info"> <% if (it.info.description) { %> <div class="description"><%= it.info.description %></div> <% } %> <% if (it.info.website) { %> - <div><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= it.info.website %>" rel="noopener noreferrer"><%= it.info.website %></a></div> + <div class="detail"><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= it.info.website %>" rel="noopener noreferrer"><%= it.info.website %></a></div> <% } %> <% if (it.info.stars) { %> - <span class="count"><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span> + <span class="detail"><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span> <% } %> <% if (it.info.watchers) { %> - <span class="count"><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span> + <span class="detail"><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span> <% } %> <% if (it.info.forks) { %> - <span class="count"><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span> + <span class="detail"><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span> <% } %> <% if (it.info.numReleases) { %> - <div><a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases"><%= it.info.numReleases %> releases</a></div> + <div class="detail"><a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases"><%= it.info.numReleases %> releases</a></div> <% } %> </div> <% } %> |