Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Show icons for twitter/github
Alexis Sellier committed 5 years ago
commit 9bd4a23664792e51ad5bd0883a4835966a3d3464
parent e274cac675bbf351c888cbc045e7f056ed8e87b9
2 files changed +61 -3
added src/Icon.svelte
@@ -0,0 +1,34 @@
+ 
<script lang="typescript">
+ 
  export let name: string;
+ 
  export let width: number | null = null;
+ 
  export let height: number | null = null;
+
+ 
  const icons = [
+ 
    {
+ 
      name: "twitter",
+ 
      size: 24,
+ 
      data: `<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>`
+ 
    },
+ 
    {
+ 
      name: "github",
+ 
      size: 24,
+ 
      data: `<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>`
+ 
    }
+ 
  ];
+ 
  const svg = icons.find(e => e.name === name);
+ 
</script>
+
+ 
<style>
+ 
  svg {
+ 
    fill: currentColor;
+ 
  }
+ 
</style>
+
+ 
{#if svg}
+ 
  <svg role="img" class={$$props.class}
+ 
       width={width || "1rem"}
+ 
       height={height || "1rem"}
+ 
       viewBox="0 0 {svg.size} {svg.size}">
+ 
    {@html svg.data}
+ 
  </svg>
+ 
{/if}
modified src/base/orgs/Profile.svelte
@@ -8,6 +8,7 @@
  import Loading from '@app/Loading.svelte';

  import Modal from '@app/Modal.svelte';

  import Error from '@app/Error.svelte';
+ 
  import Icon from '@app/Icon.svelte';



  export let name: string;

  export let config: Config;
@@ -56,6 +57,15 @@
    width: 64px;

    height: 64px;

  }
+ 
  .links {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: center;
+ 
  }
+ 
  .url {
+ 
    display: flex; /* Ensures correct vertical positioning of icons */
+ 
    margin-right: 1rem;
+ 
  }

</style>



{#await Org.get(address, config)}
@@ -71,9 +81,23 @@
        {/if}

        <div class="info">

          <span class="title bold">{address}</span>
- 
          {#if registration && registration.url}
- 
            <a class="url" href={registration.url}>{registration.url}</a>
- 
          {/if}
+ 
          <div class="links">
+ 
            {#if registration}
+ 
              {#if registration.url}
+ 
                <a class="url" href={registration.url}>{registration.url}</a>
+ 
              {/if}
+ 
              {#if registration.twitter}
+ 
                <a class="url" href={registration.twitter}>
+ 
                  <Icon name="twitter" />
+ 
                </a>
+ 
              {/if}
+ 
              {#if registration.github}
+ 
                <a class="url" href={registration.github}>
+ 
                  <Icon name="github" />
+ 
                </a>
+ 
              {/if}
+ 
            {/if}
+ 
          </div>

        </div>

        <div>

          {#if loading}