feat(plugins/sponsors): improve display [skip ci]

This commit is contained in:
lowlighter
2022-04-23 21:05:06 -04:00
parent 30bf208c24
commit 9d1083f263
4 changed files with 23 additions and 24 deletions

View File

@@ -46,8 +46,18 @@
</div>
<% if ((section === "list")||(plugins.sponsors.sections.includes("list"))) { %>
<div class="row">
<% for (const user of plugins.sponsors.list) { %><img class="avatar <%= user.type === "organization" ? "organization" : "" %> <%= user.past ? "past" : "" %>" src="<%= user.avatar %>" width="<%= plugins.sponsors.size %>" height="<%= plugins.sponsors.size %>" alt="" /><% } %>
<% for (const user of plugins.sponsors.list.filter(({past}) => !past)) { %><img class="avatar <%= user.type === "organization" ? "organization" : "" %>" src="<%= user.avatar %>" width="<%= plugins.sponsors.size %>" height="<%= plugins.sponsors.size %>" alt="" /><% } %>
</div>
<% if ((plugins.sponsors.past)&&(plugins.sponsors.count.past.total)) { %>
<div class="past-text">
<span>
<%= plugins.sponsors.count.past.total %> sponsor<%= s(plugins.sponsors.count.past.total) %> helped <%= user.login %> in the past
</span>
</div>
<div class="row">
<% for (const user of plugins.sponsors.list.filter(({past}) => past)) { %><img class="avatar past <%= user.type === "organization" ? "organization" : "" %>" src="<%= user.avatar %>" width="<%= 0.8*plugins.sponsors.size %>" height="<%= 0.8*plugins.sponsors.size %>" alt="" /><% } %>
</div>
<% } %>
<% } %>
</section>
</div>

View File

@@ -147,9 +147,6 @@
border-radius: 50%;
margin: 0 6px;
}
.avatar.past {
filter: opacity(0.5);
}
.organization.avatar {
border-radius: 15%;
@@ -1069,13 +1066,16 @@
border-radius: 5px;
background-color: #7777771F;
}
.sponsors .goal-text {
.sponsors .goal-text, .sponsors .past-text {
display: flex;
justify-content: space-between;
font-style: italic;
font-size: 10px;
font-size: 12px;
margin-bottom: 4px;
}
.sponsors .past-text {
margin: 8px 0 2px;
}
.sponsors .avatar {
margin: 2px;
}
@@ -1405,20 +1405,6 @@
height: auto;
}
/* Fade animation */
.af {
opacity: 0;
animation: animation-fade 1s ease forwards;
}
@keyframes animation-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Twemoji and GitHub emoji */
.twemoji, .gemoji {
height: 1em;