Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Improve app layout
Alexis Sellier committed 4 years ago
commit 08bf1e8dbbc5ac908c49f48d39d414dcbd01b389
parent fceffee48cacad50170c1d9548141bc03a4f867b
10 files changed +46 -21
modified public/index.css
@@ -55,14 +55,18 @@
	--font-family-monospace: monospace;

	--border-radius: 50px;

	--box-shadow-color: var(--color-secondary-2);
+ 
	--content-max-width: 1920px;
+ 
	--content-min-width: 480px;

}
- 


body {

	font-size: 16px;

	font-weight: 400;

	line-height: 1.5;

	min-width: 580px;
+ 
	height: 100%;
+ 
	margin: 0;
+ 
	padding: 0;

	color: white;

	text-align: left;

	background-color: var(--color-background);
@@ -271,6 +275,15 @@ input.wide {
	background: var(--color-yellow-background);

}
+ 
.centered {
+ 
	height: 100%;
+ 
	padding-top: 5rem;
+ 
	padding-bottom: 24vh;
+ 
	display: flex;
+ 
	flex-direction: column;
+ 
	justify-content: center;
+ 
}
+ 


span.small {

	font-size: 0.75rem;

}
modified src/App.svelte
@@ -23,14 +23,16 @@
</script>



<style>
+ 
  .app {
+ 
    height: 100%;
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
  }

  .wrapper {

    display: flex;

    align-items: center;

    flex-direction: column;
- 
    justify-content: center;
- 
    min-height: 24rem;
- 
    padding-top: 6rem;
- 
    padding-bottom: 6rem;
+ 
    height: 100%;

  }

</style>
modified src/Header.svelte
@@ -25,7 +25,7 @@
    justify-content: space-between;

    align-items: center;

    margin: 0;
- 
    padding: 1rem;
+ 
    padding: 1.5rem;

  }

  header .nav {

    display: inline-block;
modified src/Modal.svelte
@@ -81,7 +81,7 @@
  <div class="modal-overlay"></div>

{/if}
- 
<div class:modal-floating={floating}>
+ 
<div class:modal-floating={floating} class="centered">

  <div class="modal" class:error class:modal-subtle={subtle} class:modal-small={small}>

    <div class="modal-title">

      <slot name="title"></slot>
modified src/base/home/Index.svelte
@@ -9,9 +9,11 @@
  };

</script>
- 
<main>
- 
  <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
- 
  <button class="primary" on:click={search} disabled={!input}>
- 
    Search
- 
  </button>
+ 
<main class="centered">
+ 
  <div>
+ 
    <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
+ 
    <button class="primary" on:click={search} disabled={!input}>
+ 
      Search
+ 
    </button>
+ 
  </div>

</main>
modified src/base/orgs/Index.svelte
@@ -20,7 +20,7 @@
<style>

  main {

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

    display: block;

    align-items: space-between;

    justify-content: space-between;
@@ -43,14 +43,20 @@
    margin: 3rem;

    display: inline-block;

  }
+
+ 
  .loading {
+ 
    padding: 3rem 0;
+ 
  }

</style>



<main>

  {#await Org.getAll(config)}
- 
    <Loading center />
+ 
    <div class="loading">
+ 
      <Loading center />
+ 
    </div>

  {:then orgs}

    <header>
- 
      <span><strong>Orgs</strong> on the Radicle network.</span>
+ 
      <span><strong>Orgs</strong> of the Radicle network.</span>

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

        Create

      </button>
modified src/base/orgs/View.svelte
@@ -50,6 +50,9 @@
</script>



<style>
+ 
  main {
+ 
    padding: 5rem 0;
+ 
  }

  main > header {

    display: flex;

    align-items: center;
modified src/base/registrations/Index.svelte
@@ -14,10 +14,6 @@
</script>



<style>
- 
  main {
- 
    padding-top: 2rem;
- 
    align-self: center;
- 
  }

  div.input-caption {

    font-size: 1.25rem;

    text-align: left;
@@ -37,7 +33,7 @@
  }

</style>
- 
<main>
+ 
<main class="centered">

  <div class="input-caption">

    Register a <strong>{config.registrar.domain}</strong> name

  </div>
modified src/base/registrations/View.svelte
@@ -83,6 +83,9 @@
</script>



<style>
+ 
  main {
+ 
    padding: 5rem 0;
+ 
  }

  main > header {

    display: flex;

    align-items: center;
modified src/base/vesting/Index.svelte
@@ -52,7 +52,7 @@
  }

</style>
- 
<main>
+ 
<main class="centered">

  {#if info}

    <Modal>

      <span slot="title">