228c2b2 Add activity graph to compact project widget — radicle-explorer

Radicle web interface

Add activity graph to compact project widget

Sebastian Martinez committed 3 years ago

commit 228c2b259f8a6dad5f150e28773678ea38406dbf
parent fa4d528395a8c2d776c2b624dd475f704215e485

3 files changed +30 -21

modified cypress/e2e/home.spec.ts

@@ -7,6 +7,10 @@ describe("landing page", () => {

       { pathname: "/v1/projects/*" },
       { fixture: "projectInfo.json" },
     ).as("projectInfo");
     cy.intercept(
       { pathname: "/v1/projects/*/activity" },
       { fixture: "projectActivity.json" },
     ).as("projectActivity");
     cy.visit("/", {
       onBeforeLoad(win) {
         const address = "0xB98bD7C7f656290071E52D1aA617D9cB4467Fd6D";

@@ -19,7 +23,7 @@ describe("landing page", () => {

         });
       },
     });
     cy.wait("@projectInfo");
     cy.wait(["@projectInfo", "@projectActivity"]);
     cy.get(".project .name")
       .first()
       .should("have.text", "bright-forest-protocol");

added cypress/fixtures/projectActivity.json

@@ -0,0 +1,3 @@

modified src/base/projects/Widget.svelte

@@ -45,7 +45,7 @@

   }
   article.compact {
     min-width: 16rem;
     height: 8rem;
     height: 9rem;
   }
   article.compact .left {
     width: 100%;

@@ -68,9 +68,6 @@

     border-color: var(--color-secondary);
     background-color: var(--color-secondary-1);
   }
   article:hover .activity {
     display: none !important;
   }
   article.project-faded:hover {
     border-color: var(--color-foreground-5);
   }

@@ -86,13 +83,11 @@

   article .stateHash {
     color: var(--color-secondary);
     font-size: var(--font-size-tiny);
     font-family: var(--font-family-monospace);
     min-height: 2rem;
     display: flex;
     align-items: center;
   }
   article .commit {
     font-family: var(--font-family-monospace);
   }
   article .id {
     display: flex;
     justify-content: space-between;

@@ -121,20 +116,27 @@

     </div>
     <div class="description">{project.description || ""}</div>
     <div class="stateHash">
       <span class="commit">
         <slot name="stateHash">
           {#if project.head}
             {#if compact}
               {formatCommit(project.head)}
             {:else}
               {project.head}
             {/if}
           {:else}
             <span class="txt-missing">✗ No head</span>
           {/if}
         </slot>
       </span>
       {#if project.head}
         {#if compact}
           {formatCommit(project.head)}
         {:else}
           {project.head}
         {/if}
       {:else}
         <span class="txt-missing">✗ No head</span>
       {/if}
     </div>
     {#if compact}
       {#await loadCommits() then points}
         <div class="activity">
           <Diagram
             {points}
             strokeWidth={3}
             viewBoxHeight={70}
             viewBoxWidth={600} />
         </div>
       {/await}
     {/if}
   </div>
   {#if !compact}