Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Patches › 4d2392f8
Hide radicle-httpd tooltip on mobile
Merged did:key:z6MkkfM3...sVz5 opened 2 years ago

check check-visual check-unit-test check-httpd-api-unit-test check-e2e check-build

👉 Preview
👉 Workflow runs
👉 Branch on GitHub

Activity Changes +31 -33
4 files changed +31 -33 651ed1af → 89ea5f90
modified src/views/home/Index.svelte
@@ -19,14 +19,15 @@
  import AppLayout from "@app/App/AppLayout.svelte";

  import ProjectCard from "@app/components/ProjectCard.svelte";
+ 
  import Command from "@app/components/Command.svelte";

  import ErrorMessage from "@app/components/ErrorMessage.svelte";

  import FilterButton from "./components/FilterButton.svelte";

  import HomepageSection from "./components/HomepageSection.svelte";
- 
  import HoverPopover from "@app/components/HoverPopover.svelte";

  import IconSmall from "@app/components/IconSmall.svelte";

  import NewProjectButton from "./components/NewProjectButton.svelte";
+ 
  import Popover from "@app/components/Popover.svelte";

  import PreferredSeedDropdown from "./components/PreferredSeedDropdown.svelte";
- 
  import Command from "@app/components/Command.svelte";
+ 
  import IconButton from "@app/components/IconButton.svelte";



  const selectedSeed = deduplicateStore(

    derived(preferredSeeds, $ => $?.selected),
@@ -207,20 +208,22 @@
      <svelte:fragment slot="subtitle">

        Pinned projects on your selected seed node

        {#if !nodeId}
- 
          <HoverPopover stylePopoverPositionTop="0.5rem">
- 
            <div slot="toggle">
- 
              <span style:color="var(--color-fill-gray)">
- 
                <IconSmall name="info" />
- 
              </span>
- 
            </div>
+ 
          <div class="global-hide-on-mobile">
+ 
            <Popover popoverPositionBottom="1.5rem" popoverPositionLeft="0">
+ 
              <IconButton slot="toggle" let:toggle on:click={toggle}>
+ 
                <span style:color="var(--color-fill-gray)">
+ 
                  <IconSmall name="info" />
+ 
                </span>
+ 
              </IconButton>
- 
            <div slot="popover" class="popover txt-small">
- 
              <div style:padding-bottom="0.5rem">
- 
                To browse your local projects, run:
+ 
              <div slot="popover" style:width="15rem" class="txt-small">
+ 
                <div style:padding-bottom="0.5rem">
+ 
                  To browse your local projects, run:
+ 
                </div>
+ 
                <Command command="radicle-httpd" />

              </div>
- 
              <Command command="radicle-httpd" />
- 
            </div>
- 
          </HoverPopover>
+ 
            </Popover>
+ 
          </div>

        {/if}

      </svelte:fragment>

      <svelte:fragment slot="actions">
modified src/views/home/components/HomepageSection.svelte
@@ -23,7 +23,7 @@


  .subtitle {

    display: flex;
- 
    gap: 0.5rem;
+ 
    gap: 0.25rem;

    align-items: center;

    margin-top: 0.25rem;

    color: var(--color-foreground-dim);
modified src/views/nodes/ScopePolicyPopover.svelte
@@ -3,14 +3,15 @@


  import capitalize from "lodash/capitalize";
- 
  import HoverPopover from "@app/components/HoverPopover.svelte";

  import IconSmall from "@app/components/IconSmall.svelte";

  import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
+ 
  import IconButton from "@app/components/IconButton.svelte";
+ 
  import Popover from "@app/components/Popover.svelte";



  export let policy: Policy;

  export let scope: Scope;
- 
  export let stylePopoverPositionRight: string | undefined = undefined;
- 
  export let stylePopoverPositionLeft: string | undefined = undefined;
+ 
  export let popoverPositionRight: string | undefined = undefined;
+ 
  export let popoverPositionLeft: string | undefined = undefined;

</script>



<style>
@@ -43,19 +44,19 @@
    <span class="txt-semibold">{capitalize(scope)}</span>

  </span>

  <span style:color="var(--color-fill-gray)">
- 
    <HoverPopover
- 
      {stylePopoverPositionRight}
- 
      {stylePopoverPositionLeft}
- 
      stylePopoverPositionBottom="1.5rem">
- 
      <div slot="toggle">
+ 
    <Popover
+ 
      {popoverPositionRight}
+ 
      {popoverPositionLeft}
+ 
      popoverPositionBottom="1.5rem">
+ 
      <IconButton slot="toggle" let:toggle on:click={toggle}>

        <span style:color="var(--color-fill-gray)">

          <IconSmall name="info" />

        </span>
- 
      </div>
+ 
      </IconButton>



      <div slot="popover" class="popover">

        <ScopePolicyExplainer {scope} {policy} />

      </div>
- 
    </HoverPopover>
+ 
    </Popover>

  </span>

</div>
modified src/views/nodes/View.svelte
@@ -150,19 +150,13 @@
        </div>

        <div class="global-hide-on-mobile" style:margin-left="auto">

          {#if policy && scope}
- 
            <ScopePolicyPopover
- 
              {scope}
- 
              {policy}
- 
              stylePopoverPositionRight="-1rem" />
+ 
            <ScopePolicyPopover {scope} {policy} popoverPositionRight="0" />

          {/if}

        </div>

      </div>

      <div class="subtitle global-hide-on-desktop">

        {#if policy && scope}
- 
          <ScopePolicyPopover
- 
            {scope}
- 
            {policy}
- 
            stylePopoverPositionLeft="-14rem" />
+ 
          <ScopePolicyPopover {scope} {policy} popoverPositionLeft="-5.5rem" />

        {/if}

      </div>