Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Show avatar and url in org profile
Alexis Sellier committed 5 years ago
commit 1755e3ac8c7b6873be2a49d557073ea185412ba9
parent 90747e6cfedf01aa4531a98ad4d923c33430f9a7
4 files changed +52 -8
modified public/index.css
@@ -222,7 +222,7 @@ input.wide {
	color: var(--color-secondary);

}

.bold {
- 
	font-weight: bold;
+ 
	font-weight: bold !important;

}



button.error:hover {
@@ -242,15 +242,17 @@ td strong {
	font-weight: 600;

}
- 
h1 {
+ 
h1, .title {

	font-size: 1.75rem;
- 
	margin-bottom: 2rem;

	font-weight: normal;

	color: var(--color-secondary);

	text-align: left;

	text-overflow: ellipsis;

	overflow-x: hidden;

}
+ 
h1 {
+ 
	margin-bottom: 2rem;
+ 
}



p {

	margin: 0.5rem 0;
modified src/Form.svelte
@@ -2,6 +2,7 @@
  export interface Field {

    name: string

    value: string | null
+ 
    label?: string

    placeholder?: string

    editable: boolean

  }
@@ -78,7 +79,7 @@
<div class="fields">

  {#each fields as field}

    <div class="label">
- 
      {capitalize(field.name)}
+ 
      {field.label || capitalize(field.name)}

    </div>

    <div>

      <input name={field.name} class="field" placeholder={field.placeholder}
modified src/base/orgs/Profile.svelte
@@ -2,6 +2,8 @@
  import { ethers } from 'ethers';

  import { navigate } from 'svelte-routing';

  import type { Config } from '@app/config';
+ 
  import type { Registration } from '@app/base/register/registrar';
+ 
  import { getRegistration } from '@app/base/register/registrar';

  import { Org } from './Org';

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

  import Modal from '@app/Modal.svelte';
@@ -11,13 +13,31 @@
  export let config: Config;



  let address = `${name}.${config.registrar.domain}`;
+ 
  let registration: Registration | null = null;
- 
  const back = () => {
- 
    navigate("/orgs");
- 
  };
+ 
  getRegistration(name, config).then(r => {
+ 
    registration = r;
+ 
  });
+
+ 
  const back = () => navigate("/orgs");

</script>



<style>
+ 
  main > header {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: left;
+ 
    margin-bottom: 2rem;
+ 
  }
+ 
  main > header > * {
+ 
    margin: 0 1rem 0 0;
+ 
  }
+ 
  .info {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    justify-content: center;
+ 
    align-items: left;
+ 
  }

  .fields {

    display: grid;

    grid-template-columns: auto auto;
@@ -30,6 +50,13 @@
  .actions {

    margin-top: 2rem;

  }
+ 
  .avatar {
+ 
    width: 64px;
+ 
    height: 64px;
+ 
  }
+ 
  .avatar.placeholder {
+ 
    border: 1px solid var(--color-secondary);
+ 
  }

</style>



{#await Org.get(address, config)}
@@ -38,7 +65,19 @@
  {#if org}

    <main>

      <header>
- 
        <h1 class="bold">{address}</h1>
+ 
        {#if registration && registration.avatar}
+ 
          <div class="avatar">
+ 
            <img src={registration.avatar} alt="avatar" />
+ 
          </div>
+ 
        {:else}
+ 
          <div class="avatar placeholder"></div>
+ 
        {/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>

      </header>



      <div class="fields">
modified src/base/register/Registration.svelte
@@ -27,6 +27,8 @@
            value: r.owner, editable: false },

          { name: "address", placeholder: "Not set",

            value: r.address, editable: true },
+ 
          { name: "url", label: "URL", placeholder: "Not set",
+ 
            value: r.url, editable: true },

          { name: "avatar", placeholder: "Not set",

            value: r.avatar, editable: true },

          { name: "twitter", placeholder: "Not set",