Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Fix margin between comments and other card elements
Sebastian Martinez committed 2 years ago
commit 6d6cbbd34c937f4d1a64215d467de0fa82d96db0
parent b75954d91e7aebc6d598862c7933b7fe72e334a9
2 files changed +47 -43
modified src/components/Thread.svelte
@@ -50,13 +50,17 @@
</script>



<style>
+ 
  .comments {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 1rem;
+ 
  }

  .comment {

    background-color: var(--color-foreground-1);

    border-radius: var(--border-radius);

  }

  .reply {

    margin-left: 3rem;
- 
    margin-top: 1rem;

  }

  .actions {

    display: flex;
@@ -66,45 +70,47 @@
  }

</style>
- 
<div class="comment">
- 
  <CommentComponent
- 
    {rawPath}
- 
    id={root.id}
- 
    authorId={root.author.id}
- 
    authorAlias={root.author.alias}
- 
    timestamp={root.timestamp}
- 
    body={root.body}
- 
    showReplyIcon={Boolean($httpdStore.state === "authenticated")}
- 
    on:toggleReply={toggleReply} />
- 
</div>
- 
{#each replies as reply}
- 
  <div class="comment reply">
+ 
<div class="comments">
+ 
  <div class="comment">

    <CommentComponent

      {rawPath}
- 
      id={reply.id}
- 
      authorId={reply.author.id}
- 
      authorAlias={reply.author.alias}
- 
      timestamp={reply.timestamp}
- 
      body={reply.body} />
+ 
      id={root.id}
+ 
      authorId={root.author.id}
+ 
      authorAlias={root.author.alias}
+ 
      timestamp={root.timestamp}
+ 
      body={root.body}
+ 
      showReplyIcon={Boolean($httpdStore.state === "authenticated")}
+ 
      on:toggleReply={toggleReply} />

  </div>
- 
{/each}
- 
{#if showReplyTextarea}
- 
  <div id={`reply-${root.id}`} class="reply">
- 
    <Textarea
- 
      resizable
- 
      focus={showReplyTextarea}
- 
      bind:value={replyText}
- 
      on:submit={reply}
- 
      placeholder="Leave your reply" />
- 
    <div class="actions">
- 
      <Button variant="text" size="small" on:click={cancel}>Dismiss</Button>
- 
      <Button
- 
        variant="secondary"
- 
        size="small"
- 
        disabled={!replyText}
- 
        on:click={reply}>
- 
        Reply
- 
      </Button>
+ 
  {#each replies as reply}
+ 
    <div class="comment reply">
+ 
      <CommentComponent
+ 
        {rawPath}
+ 
        id={reply.id}
+ 
        authorId={reply.author.id}
+ 
        authorAlias={reply.author.alias}
+ 
        timestamp={reply.timestamp}
+ 
        body={reply.body} />

    </div>
- 
  </div>
- 
{/if}
+ 
  {/each}
+ 
  {#if showReplyTextarea}
+ 
    <div id={`reply-${root.id}`} class="reply">
+ 
      <Textarea
+ 
        resizable
+ 
        focus={showReplyTextarea}
+ 
        bind:value={replyText}
+ 
        on:submit={reply}
+ 
        placeholder="Leave your reply" />
+ 
      <div class="actions">
+ 
        <Button variant="text" size="small" on:click={cancel}>Dismiss</Button>
+ 
        <Button
+ 
          variant="secondary"
+ 
          size="small"
+ 
          disabled={!replyText}
+ 
          on:click={reply}>
+ 
          Reply
+ 
        </Button>
+ 
      </div>
+ 
    </div>
+ 
  {/if}
+ 
</div>
modified src/views/projects/Issue.svelte
@@ -18,7 +18,7 @@
  import Markdown from "@app/components/Markdown.svelte";

  import TagInput from "./Cob/TagInput.svelte";

  import Textarea from "@app/components/Textarea.svelte";
- 
  import Thread from "@app/components/Thread.svelte";
+ 
  import ThreadComponent from "@app/components/Thread.svelte";



  export let issue: Issue;

  export let baseUrl: BaseUrl;
@@ -257,9 +257,7 @@
    </CobHeader>

    <div class="comments">

      {#each threads as thread (thread.root.id)}
- 
        <div style:margin-top="1rem">
- 
          <Thread {thread} {rawPath} on:reply={createReply} />
- 
        </div>
+ 
        <ThreadComponent {thread} {rawPath} on:reply={createReply} />

      {/each}

      <div style:margin-top="1rem">

        {#if $httpdStore.state === "authenticated"}