Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add hero image to home screen
Rūdolfs Ošiņš committed 1 year ago
commit d7c811ba112cc0c140f957cde27e5f873bf140a4
parent c31652570fe53a43ac60504357ac22fc5c42dffe
3 files changed +58 -17
added public/aliens.png
modified src/components/Header.svelte
@@ -7,7 +7,6 @@


<style>

  .header {
- 
    margin: 0 0.5rem;

    padding: 0 0.5rem;

    gap: 0.25rem;

    height: 3rem;
modified src/views/Home.svelte
@@ -16,12 +16,49 @@
  .header {

    position: sticky;

    top: 0;
+ 
    z-index: 1;

  }

  .repo-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));

    gap: 1rem;
- 
    padding: 1rem;
+ 
  }
+
+ 
  .hero-image {
+ 
    background-image: url("aliens.png");
+ 
    background-position: center;
+ 
    background-size: cover;
+ 
    height: 9.5rem;
+ 
    clip-path: polygon(
+ 
      0 6px,
+ 
      2px 6px,
+ 
      2px 4px,
+ 
      4px 4px,
+ 
      4px 2px,
+ 
      6px 2px,
+ 
      6px 0,
+ 
      calc(100% - 6px) 0,
+ 
      calc(100% - 6px) 2px,
+ 
      calc(100% - 4px) 2px,
+ 
      calc(100% - 4px) 4px,
+ 
      calc(100% - 2px) 4px,
+ 
      calc(100% - 2px) 6px,
+ 
      100% 6px,
+ 
      100% calc(100% - 6px),
+ 
      calc(100% - 2px) calc(100% - 6px),
+ 
      calc(100% - 2px) calc(100% - 4px),
+ 
      calc(100% - 4px) calc(100% - 4px),
+ 
      calc(100% - 4px) calc(100% - 2px),
+ 
      calc(100% - 6px) calc(100% - 2px),
+ 
      calc(100% - 6px) 100%,
+ 
      6px 100%,
+ 
      6px calc(100% - 2px),
+ 
      4px calc(100% - 2px),
+ 
      4px calc(100% - 4px),
+ 
      2px calc(100% - 4px),
+ 
      2px calc(100% - 6px),
+ 
      0 calc(100% - 6px)
+ 
    );

  }

</style>
@@ -33,20 +70,25 @@
      </svelte:fragment>

    </Header>

  </div>
- 
  <div class="repo-grid">
- 
    {#each repos as repo}
- 
      {#if repo.payloads["xyz.radicle.project"]}
- 
        <RepoCard
- 
          {repo}
- 
          selfDid={`did:key:${config.publicKey}`}
- 
          onclick={() => {
- 
            void router.push({
- 
              resource: "repo.issues",
- 
              rid: repo.rid,
- 
              status: "open",
- 
            });
- 
          }} />
- 
      {/if}
- 
    {/each}
+ 
  <div style:padding="1rem">
+ 
    <div class="hero-image"></div>
+
+ 
    <div class="txt-semibold" style:margin="1.5rem 0">Repositories</div>
+ 
    <div class="repo-grid">
+ 
      {#each repos as repo}
+ 
        {#if repo.payloads["xyz.radicle.project"]}
+ 
          <RepoCard
+ 
            {repo}
+ 
            selfDid={`did:key:${config.publicKey}`}
+ 
            onclick={() => {
+ 
              void router.push({
+ 
                resource: "repo.issues",
+ 
                rid: repo.rid,
+ 
                status: "open",
+ 
              });
+ 
            }} />
+ 
        {/if}
+ 
      {/each}
+ 
    </div>

  </div>

</div>