Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Make header sticky
Rūdolfs Ošiņš committed 1 year ago
commit c31652570fe53a43ac60504357ac22fc5c42dffe
parent 1bb8a806aa5f3ea0014b8b28bf2a16943b1d2eb0
2 files changed +54 -39
modified src/views/Home.svelte
@@ -13,22 +13,26 @@
</script>



<style>
- 
  .layout {
- 
    padding: 1rem;
+ 
  .header {
+ 
    position: sticky;
+ 
    top: 0;

  }

  .repo-grid {

    display: grid;

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

    gap: 1rem;
+ 
    padding: 1rem;

  }

</style>
- 
<Header>
- 
  <svelte:fragment slot="center">
- 
    <CopyableId id={`did:key:${config.publicKey}`} />
- 
  </svelte:fragment>
- 
</Header>
- 
<div class="layout">
+ 
<div style:height="fit-content">
+ 
  <div class="header">
+ 
    <Header>
+ 
      <svelte:fragment slot="center">
+ 
        <CopyableId id={`did:key:${config.publicKey}`} />
+ 
      </svelte:fragment>
+ 
    </Header>
+ 
  </div>

  <div class="repo-grid">

    {#each repos as repo}

      {#if repo.payloads["xyz.radicle.project"]}
modified src/views/repo/Layout.svelte
@@ -11,36 +11,47 @@
  $: project = repo.payloads["xyz.radicle.project"]!;

</script>
- 
<Header>
- 
  <svelte:fragment slot="icon-left">
- 
    <Icon name="sidebar" />
- 
  </svelte:fragment>
- 
  <svelte:fragment slot="center">
- 
    <CopyableId id={repo.rid} />
- 
  </svelte:fragment>
- 
</Header>
- 
<div>{project.data.name}</div>
+ 
<style>
+ 
  .header {
+ 
    position: sticky;
+ 
    top: 0;
+ 
  }
+ 
</style>
- 
Issues
- 
<Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>
- 
  Open
- 
</Link>
- 
<Link route={{ resource: "repo.issues", rid: repo.rid, status: "closed" }}>
- 
  Closed
- 
</Link>
+ 
<div style:height="fit-content">
+ 
  <div class="header">
+ 
    <Header>
+ 
      <svelte:fragment slot="icon-left">
+ 
        <Icon name="sidebar" />
+ 
      </svelte:fragment>
+ 
      <svelte:fragment slot="center">
+ 
        <CopyableId id={repo.rid} />
+ 
      </svelte:fragment>
+ 
    </Header>
+ 
  </div>
+ 
  <div>{project.data.name}</div>
- 
<br />
- 
Patches
- 
<Link route={{ resource: "repo.patches", rid: repo.rid, status: "draft" }}>
- 
  Draft
- 
</Link>
- 
<Link route={{ resource: "repo.patches", rid: repo.rid, status: "open" }}>
- 
  Open
- 
</Link>
- 
<Link route={{ resource: "repo.patches", rid: repo.rid, status: "archived" }}>
- 
  Archived
- 
</Link>
- 
<Link route={{ resource: "repo.patches", rid: repo.rid, status: "merged" }}>
- 
  Merged
- 
</Link>
- 
<slot />
+ 
  Issues
+ 
  <Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>
+ 
    Open
+ 
  </Link>
+ 
  <Link route={{ resource: "repo.issues", rid: repo.rid, status: "closed" }}>
+ 
    Closed
+ 
  </Link>
+
+ 
  <br />
+ 
  Patches
+ 
  <Link route={{ resource: "repo.patches", rid: repo.rid, status: "draft" }}>
+ 
    Draft
+ 
  </Link>
+ 
  <Link route={{ resource: "repo.patches", rid: repo.rid, status: "open" }}>
+ 
    Open
+ 
  </Link>
+ 
  <Link route={{ resource: "repo.patches", rid: repo.rid, status: "archived" }}>
+ 
    Archived
+ 
  </Link>
+ 
  <Link route={{ resource: "repo.patches", rid: repo.rid, status: "merged" }}>
+ 
    Merged
+ 
  </Link>
+ 
  <slot />
+ 
</div>