Skip to content

Commit

Permalink
Refactor activity template to ensure text-overflow ellipsis #181
Browse files Browse the repository at this point in the history
  • Loading branch information
@lowlighter
lowlighter committed Mar 29, 2021
1 parent f1bd991 commit addefee
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 37 deletions.
72 changes: 48 additions & 24 deletions source/templates/classic/partials/activity.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@
<% } else { %>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
<% } %>
<%- /create/.test(type) ? `${_("C")}reated new` : `${_("D")}eleted` %>
<%= event.ref.type %> <div class="code"><%= event.ref.name %></div> in <div class="repo"><%= repo %></div>
<div class="content">
<%- /create/.test(type) ? `${_("C")}reated new` : `${_("D")}eleted` %>
<%= event.ref.type %> <span class="code"><%= event.ref.name %></span> in <span class="repo"><%= repo %></span>
</div>
</div>
<% } %>
<% if (type === "comment") { %>
Expand All @@ -39,17 +41,21 @@
<% } else if ((event.on === "issue")||(event.on === "commit")) { %>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z"></path></svg>
<% } %>
<%- _("C") %>ommented on <div class="issue">#<%= event.number %> <%= event.title %></div>
<div class="content">
<%- _("C") %>ommented on <span class="issue">#<%= event.number %> <%= event.title %></span>
</div>
</div>
<div class="details">
<div><%= event.on === "commit" ? "committed" : "opened" %> by <%= event.user %> in <div class="repo"><%= repo %></div></div>
<div class="details">
<div><%= event.on === "commit" ? "committed" : "opened" %> by <%= event.user %> in <span class="repo"><%= repo %></span></div>
<div class="comment"><%= event.content %></div>
</div>
<% } %>
<% if (type === "wiki") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"></path></svg>
<%- _("U") %>pdated <%= event.pages.length %> wiki page<%= s(event.pages.length) %> in <div class="repo"><%= repo %></div>
<div class="content">
<%- _("U") %>pdated <%= event.pages.length %> wiki page<%= s(event.pages.length) %> in <span class="repo"><%= repo %></span>
</div>
</div>
<div class="details">
<% for (const page of event.pages) { %>
Expand All @@ -62,77 +68,95 @@
<% if (type === "pr") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
<%- event.action === "opened" ? `${_("O")}pened` : `${_("M")}erged` %> <div class="issue">#<%= event.number %> <%= event.title %></div>
<div class="content">
<%- event.action === "opened" ? `${_("O")}pened` : `${_("M")}erged` %> <span class="issue">#<%= event.number %> <%= event.title %></span>
</div>
</div>
<div class="details">
<div>opened <%= user.login !== event.user ? `by ${event.user}` : "" %> in <div class="repo"><%= repo %></div></div>
<div><%= event.files.changed %> file<%= s(event.files.changed) %> changed <div class="code">++<%= event.lines.added %> --<%= event.lines.deleted%></div></div>
<div><%= user.login !== event.user ? `opened by ${event.user}` : "" %> in <span class="repo"><%= repo %></span></div>
<div><%= event.files.changed %> file<%= s(event.files.changed) %> changed <span class="code">++<%= event.lines.added %> --<%= event.lines.deleted%></span></div>
</div>
<% } %>
<% if (type === "issue") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
<%- event.action === "opened" ? `${_("O")}pened` : event.action === "reopened" ? `${_("R")}eopened` : `${_("C")}losed` %> <div class="issue">#<%= event.number %> <%= event.title %></div>
<div class="content">
<%- event.action === "opened" ? `${_("O")}pened` : event.action === "reopened" ? `${_("R")}eopened` : `${_("C")}losed` %> <span class="issue">#<%= event.number %> <%= event.title %></span>
</div>
</div>
<div class="details">
<div>opened <%= user.login !== event.user ? `by ${event.user}` : "" %> in <div class="repo"><%= repo %></div></div>
<div>opened <%= user.login !== event.user ? `by ${event.user}` : "" %> in <span class="repo"><%= repo %></span></div>
</div>
<% } %>
<% if (type === "fork") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
<%- _("F") %>orked <div class="repo"><%= repo %></div>
<div class="content">
<%- _("F") %>orked <span class="repo"><%= repo %></span>
</div>
</div>
<% } %>
<% if (type === "public") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
<%- _("M") %>ade <div class="repo"><%= repo %></div> public
<div class="content">
<%- _("M") %>ade <span class="repo"><%= repo %></span> public
</div>
</div>
<% } %>
<% if (type === "review") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 1.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v7.736a.75.75 0 101.5 0V1.75A1.75 1.75 0 0011.25 0h-8.5A1.75 1.75 0 001 1.75v11.5c0 .966.784 1.75 1.75 1.75h3.17a.75.75 0 000-1.5H2.75a.25.25 0 01-.25-.25V1.75zM4.75 4a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM4 7.75A.75.75 0 014.75 7h2a.75.75 0 010 1.5h-2A.75.75 0 014 7.75zm11.774 3.537a.75.75 0 00-1.048-1.074L10.7 14.145 9.281 12.72a.75.75 0 00-1.062 1.058l1.943 1.95a.75.75 0 001.055.008l4.557-4.45z"></path></svg>
<%- _("R") %>eviewed <div class="issue">#<%= event.number %> <%= event.title %></div>
<div class="content">
<%- _("R") %>eviewed <span class="issue">#<%= event.number %> <%= event.title %></span>
</div>
</div>
<div class="details">
<div>opened <%= user.login !== event.user ? `by ${event.user}` : "" %> in <div class="repo"><%= repo %></div></div>
<div>opened <%= user.login !== event.user ? `by ${event.user}` : "" %> in <span class="repo"><%= repo %></span></div>
</div>
<% } %>
<% if (type === "push") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"></path></svg>
<%- _("P") %>ushed <%= event.size %> commit<%= s(event.size) %> in <div class="repo"><%= repo %></div>
<div class="content">
<%- _("P") %>ushed <%= event.size %> commit<%= s(event.size) %> in <span class="repo"><%= repo %></span>
</div>
</div>
<div class="details">
<% if (event.branch) { %>
<div>on branch <div class="code"><%= event.branch %></div></div>
<div>on branch <span class="code"><%= event.branch %></span></div>
<% } %>
<% for (const commit of event.commits) { %>
<div class="commit">
<div class="sha">#<%= commit.sha %></div>
<div class="message"><%= commit.message %></div>
<span class="sha">#<%= commit.sha %></span>
<span class="message"><%= commit.message %></span>
</div>
<% } %>
</div>
<% } %>
<% if (type === "release") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"></path></svg>
<%- event.draft ? `${_("D")}rafted release` : event.prerelease ? `${_("P")}re-released` : `${_("R")}eleased` %>
<div class="bold"><%= event.name %></div> of <div class="repo"><%= repo %></div>
<div class="content">
<%- event.draft ? `${_("D")}rafted release` : event.prerelease ? `${_("P")}re-released` : `${_("R")}eleased` %>
<span class="bold"><%= event.name %></span> of <span class="repo"><%= repo %></span>
</div>
</div>
<% } %>
<% if (type === "star") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"></path></svg>
<%- _("S") %>tarred <div class="repo"><%= repo %></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
<div class="content">
<%- _("S") %>tarred <span class="repo"><%= repo %></span>
</div>
</div>
<% } %>
<% if (type === "member") { %>
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path></svg>
<%- _("A") %>dded <%= event.user %> as collaborator in <div class="repo"><%= repo %></div>
<div class="content">
<%- _("A") %>dded <%= event.user %> as collaborator in <span class="repo"><%= repo %></span>
</div>
</div>
<% } %>
<% if (plugins.activity.timestamps) { %>
Expand Down
20 changes: 7 additions & 13 deletions source/templates/classic/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -533,18 +533,17 @@
margin-bottom: 0;
}

.activity .repo, .activity .issue, .activity .commit .sha {
color: #58a6ff;
margin: 0 4px;
}

.activity .issue {
.activity .field .content {
flex-grow: 1;
width: 0%;
text-overflow: ellipsis;
overflow: hidden;
}

.activity .repo, .activity .issue, .activity .commit .sha {
display: inline;
color: #58a6ff;
}

.activity .code {
background-color: #7777771F;
padding: 1px 5px;
Expand All @@ -561,7 +560,7 @@
}

.activity .details, .activity .timestamp {
padding-left: 42px;
padding-left: 38px;
display: flex;
flex-direction: column;
font-size: 13px;
Expand All @@ -573,11 +572,6 @@
margin-top: 4px;
}

.activity .details > div {
display: flex;
align-items: center;
}

.activity .commit .sha {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
}
Expand Down

0 comments on commit addefee

Please sign in to comment.