Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Separate home page layout from orgs
Alexis Sellier committed 4 years ago
commit d6065f9d3476a2182821f36f83bb6807b8b0ee00
parent e2cc61671b6887609db5717f7080baf1cd859232
3 files changed +58 -19
modified src/base/home/Index.svelte
@@ -1,14 +1,37 @@
<script lang="ts">
+ 
  import { navigate } from 'svelte-routing';

  import type { Config } from '@app/config';
- 
  import Orgs from '@app/base/orgs/Index.svelte';
+ 
  import { Org } from '@app/base/orgs/Org';
+ 
  import Loading from '@app/Loading.svelte';
+ 
  import Message from '@app/Message.svelte';
+
+ 
  import List from '@app/base/orgs/List.svelte';



  export let config: Config;
+
+ 
  const getOrgs = config.orgs.pinned.length > 0
+ 
    ? Org.getMulti(config.orgs.pinned, config)
+ 
    : Org.getAll(config);
+
+ 
  const viewMore = () => {
+ 
    navigate("/orgs");
+ 
  };

</script>



<style>

  main {
+ 
    padding: 3rem 3rem;

    width: 100%;

  }
+ 
  .heading {
+ 
    color: var(--color-secondary);
+ 
    padding: 1rem 0rem;
+ 
    font-size: 1.25rem;
+ 
  }
+ 
  .actions {
+ 
    margin-top: 1rem;
+ 
    text-align: center;
+ 
  }

</style>



<svelte:head>
@@ -16,7 +39,27 @@
</svelte:head>



<main>
- 
  <div>
- 
    <Orgs {config} pinned />
- 
  </div>
+ 
  {#await getOrgs}
+ 
    <div class="loading">
+ 
      <Loading center />
+ 
    </div>
+ 
  {:then orgs}
+ 
    <div class="heading">
+ 
      Explore <strong>orgs</strong> and <strong>projects</strong> on the Radicle network.
+ 
    </div>
+ 
    <List {config} {orgs}>
+ 
      <div class="orgs-empty">There are no orgs.</div>
+ 
    </List>
+ 
    <div class="actions">
+ 
      <button class="small secondary" on:click={viewMore}>
+ 
        View all
+ 
      </button>
+ 
    </div>
+ 
  {:catch}
+ 
    <div class="padding">
+ 
      <Message error>
+ 
        <strong>Error: </strong> failed to load orgs.
+ 
      </Message>
+ 
    </div>
+ 
  {/await}

</main>
modified src/base/orgs/Index.svelte
@@ -9,11 +9,7 @@
  import List from './List.svelte';



  export let config: Config;
- 
  export let pinned = false;
- 
  const getOrgs = pinned && (config.orgs.pinned.length > 0)
- 
    ? Org.getMulti(config.orgs.pinned, config)
- 
    : Org.getAll(config);

  const onCreate = () => modal = Create;

  let modal: typeof SvelteComponent | null = null;
@@ -23,7 +19,7 @@
<style>

  main {

    width: 100%;
- 
    padding: 5rem 3rem;
+ 
    padding: 3rem;

    display: block;

    align-items: space-between;

    justify-content: space-between;
@@ -33,10 +29,7 @@
    font-size: 1.25rem;

    display: flex;

    align-items: center;
- 
  }
-
- 
  .padding {
- 
    padding: 0 2rem 2rem 2rem;
+ 
    padding: 1rem 0;

  }



  .my-orgs {
@@ -65,7 +58,7 @@
<main>

  {#if account}

    <div class="my-orgs">
- 
      <header class="padding">
+ 
      <header>

        <span>My <strong>Orgs</strong></span>

        <button class="create small secondary" on:click={onCreate} disabled={!account}>

          Create
@@ -81,7 +74,7 @@
          <div class="orgs-empty">Orgs you are a member of show up here.</div>

        </List>

      {:catch}
- 
        <div class="padding">
+ 
        <div>

          <Message error>

            <strong>Error: </strong> failed to load orgs.

          </Message>
@@ -90,11 +83,11 @@
    </div>

  {/if}
- 
  <header class="padding">
+ 
  <header>

    <span><strong>Orgs</strong> of the Radicle network</span>

  </header>
- 
  {#await getOrgs}
+ 
  {#await Org.getAll(config)}

    <div class="loading">

      <Loading center />

    </div>
@@ -103,7 +96,7 @@
      <div class="orgs-empty">There are no orgs.</div>

    </List>

  {:catch}
- 
    <div class="padding">
+ 
    <div>

      <Message error>

        <strong>Error: </strong> failed to load orgs.

      </Message>
modified src/base/orgs/List.svelte
@@ -28,7 +28,7 @@
  .org {

    width: 10rem;

    height: 10rem;
- 
    margin-left: 3rem;
+ 
    margin-right: 3rem;

    margin-top: 1.5rem;

    margin-bottom: 1.5rem;

    padding: 1rem;
@@ -36,6 +36,9 @@
    text-align: center;

    border-radius: 1rem;

  }
+ 
  .org::last-child {
+ 
    margin-right: 0;
+ 
  }

  .org:hover  {

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

  }