Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Fix reactions spacing
dnlklmn committed 2 years ago
commit 20f895df6ed42a0a731420534eb3308dba34c7aa
parent b8b2bb5031c2876c9268e7ca9d650f6e03edd07f
5 files changed +34 -29
modified src/components/Comment.svelte
@@ -90,7 +90,7 @@
    align-items: center;

    gap: 0.5rem;

    padding-left: 2rem;
- 
    height: 22px;
+ 
    margin-left: -0.25rem;

  }

  .edit-buttons {

    display: flex;
modified src/components/IconButton.svelte
@@ -5,6 +5,7 @@
  export let inline: boolean = false;

  export let loading: boolean = false;

  export let title: string | undefined = undefined;
+ 
  export let stylePadding: string | undefined = undefined;

</script>



<style>
@@ -35,6 +36,7 @@
{:else}

  <!-- svelte-ignore a11y-click-events-have-key-events -->

  <div
+ 
    style:padding={stylePadding}

    role="button"

    tabindex="0"

    aria-label={ariaLabel}
modified src/components/ReactionSelector.svelte
@@ -40,29 +40,32 @@
  }

</style>
- 
<Popover
- 
  popoverPositionBottom="2rem"
- 
  popoverPositionLeft="0"
- 
  popoverPadding="0">
- 
  <IconButton
- 
    slot="toggle"
- 
    let:toggle
- 
    on:click={toggle}
- 
    title="toggle-reaction-popover">
- 
    <IconSmall name="face" />
- 
  </IconButton>
+ 
<div style="margin-top: 0.875rem;">
+ 
  <Popover
+ 
    popoverPositionBottom="2rem"
+ 
    popoverPositionLeft="0"
+ 
    popoverPadding="0">
+ 
    <IconButton
+ 
      stylePadding="4px"
+ 
      slot="toggle"
+ 
      let:toggle
+ 
      on:click={toggle}
+ 
      title="toggle-reaction-popover">
+ 
      <IconSmall name="face" />
+ 
    </IconButton>
- 
  <div class="selector" slot="popover">
- 
    {#each config.reactions as reaction}
- 
      <button
- 
        class:active={Boolean(reactions?.get(reaction)?.self)}
- 
        on:click={() =>
- 
          dispatch("select", {
- 
            nids: reactions?.get(reaction)?.all ?? [],
- 
            reaction,
- 
          })}>
- 
        {reaction}
- 
      </button>
- 
    {/each}
- 
  </div>
- 
</Popover>
+ 
    <div class="selector" slot="popover">
+ 
      {#each config.reactions as reaction}
+ 
        <button
+ 
          class:active={Boolean(reactions?.get(reaction)?.self)}
+ 
          on:click={() =>
+ 
            dispatch("select", {
+ 
              nids: reactions?.get(reaction)?.all ?? [],
+ 
              reaction,
+ 
            })}>
+ 
          {reaction}
+ 
        </button>
+ 
      {/each}
+ 
    </div>
+ 
  </Popover>
+ 
</div>
modified src/components/Reactions.svelte
@@ -14,6 +14,7 @@
    display: flex;

    align-items: center;

    gap: 0.5rem;
+ 
    margin-top: 0.875rem;

  }

  .reaction {

    display: inline-flex;
modified src/views/projects/Issue.svelte
@@ -408,7 +408,6 @@
    display: flex;

    flex: 1;

    flex-direction: column;
- 
    gap: 1.5rem;

    background-color: var(--color-background-float);

  }

  .bottom {
@@ -460,8 +459,8 @@
  .reactions {

    display: flex;

    gap: 0.5rem;
- 
    height: 22px;
- 
    margin-top: 1rem;
+ 
    align-items: center;
+ 
    margin-left: -0.25rem;

  }



  @media (max-width: 720px) {