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

source/plugins/sponsors/index.mjs

@@ -7,7 +7,7 @@ export default async function({login, q, imports, data, graphql, queries, accoun
       return null
 
     //Load inputs
-    const {size, sections, past} = await imports.metadata.plugins.sponsors.inputs({data, account, q})
+    let {size, sections, past} = await imports.metadata.plugins.sponsors.inputs({data, account, q})
 
     //Query description and goal
     console.debug(`metrics/compute/${login}/plugins > sponsors > querying sponsors and goal`)
@@ -15,6 +15,8 @@ export default async function({login, q, imports, data, graphql, queries, accoun
     const about = await imports.markdown(fullDescription, {mode: "multiline"})
     const goal = activeGoal ? {progress: activeGoal.percentComplete, title: activeGoal.title, description: await imports.markdown(activeGoal.description)} : null
     const count = {total: {count: 0, user: 0, organization: 0}, active: {total: 0, user: 0, organization: 0}, past: {total: 0, user: 0, organization: 0}}
+    if (!goal)
+      sections = sections.filter(section => section.name !== "goal")
 
     //Query active sponsors
     let list = []
@@ -73,7 +75,7 @@ export default async function({login, q, imports, data, graphql, queries, accoun
 
     //Results
     list = list.sort((a, b) => a.past === b.past ? b.amount - a.amount : a.past - b.past)
-    return {sections, about, list, count, goal, size}
+    return {sections, about, list, count, goal, size, past}
   }
   //Handle errors
   catch (error) {

source/plugins/sponsors/metadata.yml

@@ -24,10 +24,11 @@ inputs:
       Displayed sections
       - `goal`: display GitHub active goal
       - `about`: display GitHub sponsors introduction
+      - `list`: display GitHub sponsors list
     type: array
     format: comma-separated
-    default: goal, about
-    example: goal, about
+    default: goal, list, about
+    example: goal, list, about
     values:
       - goal
       - about

source/templates/classic/partials/sponsors.ejs

@@ -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>

source/templates/classic/style.css

@@ -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;