Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › a350777
Style review list correctly with pixelated corners
Rūdolfs Ošiņš committed 1 year ago
commit a35077707f69d816ff24c670fda36eee3cfef1fb
parent a3c1430
2 files changed +26 -5
modified src/components/ReviewTeaser.svelte
@@ -21,9 +21,17 @@
    review: Review;

    rid: string;

    status: PatchStatus | undefined;
+ 
    first?: boolean;
+ 
    last?: boolean;

  }
- 
  const { patchId, review, rid, status }: Props = $props();
+ 
  const { patchId, review, rid, status, first, last }: Props = $props();
+ 
  const style = $derived(
+ 
    (first && last && "--local-clip-path: var(--2px-corner-fill)") ||
+ 
      (first && "--local-clip-path: var(--2px-top-corner-fill)") ||
+ 
      (last && "--local-clip-path: var(--2px-bottom-corner-fill)") ||
+ 
      "",
+ 
  );

</script>



<style>
@@ -41,7 +49,7 @@
    z-index: -1;

    content: " ";

    background-color: var(--color-fill-float);
- 
    clip-path: var(--2px-corner-fill);
+ 
    clip-path: var(--local-clip-path);

    width: 100%;

    height: 100%;

    top: 0;
@@ -92,6 +100,7 @@
  tabindex="0"

  role="button"

  class="review"
+ 
  {style}

  style:cursor="pointer"

  onclick={() => {

    void push({
modified src/components/Reviews.svelte
@@ -74,6 +74,12 @@
  .hide {

    display: none;

  }
+ 
  .review-list {
+ 
    margin-top: 1rem;
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 2px;
+ 
  }

</style>



<div style:margin={hideReviews ? "1.5rem 0" : "1.5rem 0 2.5rem 0"}>
@@ -119,9 +125,15 @@
  </div>



  {#if revision.reviews && revision.reviews.length}
- 
    <div class:hide={hideReviews} style:margin-top="1rem">
- 
      {#each revision.reviews as review}
- 
        <ReviewTeaser {rid} {review} {patchId} {status} />
+ 
    <div class:hide={hideReviews} class="review-list">
+ 
      {#each revision.reviews as review, idx}
+ 
        <ReviewTeaser
+ 
          {rid}
+ 
          {review}
+ 
          {patchId}
+ 
          {status}
+ 
          first={idx === 0}
+ 
          last={idx === revision.reviews.length - 1} />

      {/each}

    </div>

  {/if}