Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Work on styles and visuals
Alexis Sellier committed 4 years ago
commit 3a94e215ba093079da965818cd28d75d6bbf0351
parent 02a0ed46648a5ff6c574bb76648a69fcce869639
7 files changed +69 -35
modified public/index.css
@@ -33,7 +33,7 @@
	--color-yellow-background: #ffff9911;

	--color-positive: #53db53;

	--color-positive-background: #53db5311;
- 
	--color-positive-1: #21402f;
+ 
	--color-positive-1: #11332b;

	--color-positive-2: #2c6837;

	--color-positive-6: #e3ffe3;

	--color-caution: #ffc555;
@@ -42,11 +42,12 @@
	--color-caution-6: #ffefcf;

	--color-negative: #ff5555;

	--color-negative-background: #ff555511;
- 
	--color-negative-1: #38282f;
+ 
	--color-negative-1: #35202b;

	--color-negative-2: #623237;

	--color-negative-6: #ffd4d4;

	--color-foreground: #ffffff;

	--color-foreground-90: #dddddd;
+ 
	--color-foreground-80: #aaaaaa;

	--color-foreground-faded: #777788;

	--color-foreground-subtle: #444455;

	--color-foreground-subtler: #333344;
modified src/base/projects/Commit.svelte
@@ -51,7 +51,25 @@
    display: flex;

    flex-direction: row;

    justify-content: space-between;
- 
    align-items: flex-start;
+ 
    align-items: center;
+ 
  }
+ 
  .description {
+ 
    margin: 0.5rem 0 1rem 0;
+ 
  }
+ 
  .meta {
+ 
    color: var(--color-foreground-80);
+ 
  }
+ 
  .email {
+ 
    font-family: var(--font-family-monospace);
+ 
    font-size: 0.875rem;
+ 
  }
+ 
  .sha1 {
+ 
    color: var(--color-foreground-80);
+ 
    font-size: 0.875rem;
+ 
  }
+ 
  .time {
+ 
    margin-left: 0.25rem;
+ 
    color: var(--color-foreground-faded);

  }

  @media (max-width: 960px) {

    .commit {
@@ -65,23 +83,22 @@
    <header>

      <div class="summary">

        <h3>{commit.header.summary}</h3>
- 
        <div class="desktop font-mono faded">
- 
          <span>commit</span>
+ 
        <div class="desktop font-mono sha1">

          <span>{commit.header.sha1}</span>

        </div>
- 
        <div class="mobile font-mono faded">
+ 
        <div class="mobile font-mono sha1">

          {formatCommit(commit.header.sha1)}

        </div>

      </div>
- 
      <pre>{commit.header.description}</pre>
- 
      <div>
- 
        <span>Committed by {commit.header.committer.name}</span>
- 
        <span class="font-mono faded desktop-inline">&lt;{commit.header.committer.email}&gt; </span>
- 
        <span class="desktop-inline">{formatCommitTime(commit.header.committerTime)}</span>
+ 
      <pre class="description">{commit.header.description}</pre>
+ 
      <div class="meta">
+ 
        <span>Committed by <strong>{commit.header.committer.name}</strong></span>
+ 
        <span class="font-mono email desktop-inline">&lt;{commit.header.committer.email}&gt; </span>
+ 
        <span class="time desktop-inline">{formatCommitTime(commit.header.committerTime)}</span>

      </div>
- 
      <div>
- 
        <span>Authored by {commit.header.author.name} </span>
- 
        <span class="font-mono faded desktop-inline">&lt;{commit.header.author.email}&gt;</span>
+ 
      <div class="meta">
+ 
        <span>Authored by <strong>{commit.header.author.name}</strong> </span>
+ 
        <span class="font-mono email desktop-inline">&lt;{commit.header.author.email}&gt;</span>

      </div>

    </header>

    <Changeset stats={commit.stats} diff={commit.diff} on:browse={(event) => navigateCommit(event.detail)} />
@@ -90,7 +107,6 @@
  <div class="commit">

    <div class="error error-message text-xsmall">

      <div>API request to <code class="text-xsmall">{err.url}</code> failed.</div>
- 
      <div>API needs to be version ^0.2.</div>

    </div>

  </div>

{/await}
modified src/base/projects/Commit/CommitTeaser.svelte
@@ -20,20 +20,19 @@
    padding: 0 1rem 0 0;

  }

  .author {
- 
    margin-right: 8px
+ 
    margin-right: 0.5rem;

  }

  .commit {

    display: flex;

    align-items: center;

    justify-content: space-between;
- 
    padding: 0 1rem 0 1rem;
- 
    height: 2.5rem;
- 
    cursor: pointer;
+ 
    padding: 0.5rem 1rem;

  }

  .commit .right {

    display: flex;

    flex-direction: row;

    align-items: center;
+ 
    gap: 0.5rem;

  }

  .time {

    margin-right: 0.5rem;
@@ -67,7 +66,7 @@
  </div>

  <div class="right">

    <span class="bold author">{commit.committer.name}</span>
- 
    <span class="desktop-inline time">{formatCommitTime(commit.committerTime)}</span>
+ 
    <span class="desktop-inline font-mono text-small time">{formatCommitTime(commit.committerTime)}</span>

    <Icon name="browse" width={17} inline fill on:click={() => browseCommit(commit.sha1)} />

  </div>

</div>
modified src/base/projects/Header.svelte
@@ -16,7 +16,7 @@
  export let revision: string;

  // If peerSelector should be showed.

  export let peerSelector: boolean;
-
+ 


  let { urn, peer, config, project, branches, peers, anchors } = source;



  let dropdownState: { [key: string]: boolean } = { clone: false, seed: false, branch: false, peer: false };
modified src/base/projects/History.svelte
@@ -54,7 +54,18 @@
    background: var(--color-foreground-background);

  }

  .commit {
- 
    padding: 0.25rem 0;
+ 
    cursor: pointer;
+ 
  }
+ 
  .commit:first-child {
+ 
    border-top-left-radius: 0.25rem;
+ 
    border-top-right-radius: 0.25rem;
+ 
  }
+ 
  .commit:last-child {
+ 
    border-bottom-left-radius: 0.25rem;
+ 
    border-bottom-right-radius: 0.25rem;
+ 
  }
+ 
  .commit:hover {
+ 
    background: var(--color-foreground-background-lighter);

  }

  @media (max-width: 960px) {

    .history {
@@ -86,7 +97,6 @@
  <div class="history">

    <div class="error error-message text-xsmall">

      <div>API request to <code class="text-xsmall">{err.url}</code> failed.</div>
- 
      <div>API needs to be version ^0.2.</div>

    </div>

  </div>

{/await}
modified src/base/projects/SourceBrowser/Changeset.svelte
@@ -44,10 +44,14 @@
  }

  .file-header .diff-type.created {

    color: var(--color-positive);
+ 
    font-family: var(--font-family-monospace);
+ 
    font-size: 0.75rem;

    background-color: var(--color-positive-1);

  }

  .file-header .diff-type.deleted {

    color: var(--color-negative);
+ 
    font-family: var(--font-family-monospace);
+ 
    font-size: 0.75rem;

    background-color: var(--color-negative-1);

  }

  .file-header .file-data {
modified src/base/projects/SourceBrowser/FileDiff.svelte
@@ -18,9 +18,10 @@
<style>

  .changeset-file {

    border: 1px solid var(--color-foreground-3);
- 
    border-radius: 0.5rem;
+ 
    border-radius: 0.25rem;

    min-width: var(--content-min-width);

    margin-bottom: 2rem;
+ 
    line-height: 1.5rem;

  }

  .changeset-file header {

    cursor: pointer;
@@ -32,7 +33,7 @@
    padding: 1rem;

  }

  main {
- 
    border-top: 1px solid var(--color-foreground-3);
+ 
    border-top: 1px dashed var(--color-foreground-3);

  }

  .changeset-file main {

    overflow-x: auto;
@@ -60,29 +61,32 @@
    margin: 0.5rem 0;

  }

  tr.diff-line[data-type="+"] > * {
- 
    background: var(--color-positive-1);
+ 
    color: var(--color-positive);

  }

  tr.diff-line[data-type="-"] > * {
- 
    background: var(--color-negative-1);
+ 
    color: var(--color-negative);

  }

  td.diff-line-number {

    text-align: right;

    user-select: none;
- 
    line-height: 150%;
+ 
    line-height: 1.5rem;
+ 
    min-width: 3rem;

  }

  td.diff-line-number[data-type="+"],

  td.diff-line-type[data-type="+"] {
+ 
    background-color: var(--color-positive-background);

    color: var(--color-positive-6);

  }

  td.diff-line-number[data-type="-"],

  td.diff-line-type[data-type="-"] {
+ 
    background-color: var(--color-negative-background);

    color: var(--color-negative-6);

  }

  td.diff-line-number.left {
- 
    padding: 0 0.25rem 0 1rem;
+ 
    padding: 0 0.5rem 0 0.75rem;

  }

  td.diff-line-number.right {
- 
    padding: 0 1rem 0 0.25rem;
+ 
    padding: 0 0.75rem 0 0.5rem;

  }

  td.diff-line-content {

    white-space: pre;
@@ -90,18 +94,19 @@
    padding-right: 0.5rem;

  }

  td.diff-line-type {
- 
    padding-right: 1rem;

    text-align: center;
+ 
    padding-left: 0.75rem;
+ 
    padding-right: 0.75rem;

  }

  td.diff-expand-header {
- 
    background: var(--color-background);
+ 
    padding-left: 0.5rem;

    color: var(--color-foreground-4);

  }

  td.diff-line-number {

    color: var(--color-foreground-4);

  }

  .file-path {
- 
    margin-left: 0.5rem;
+ 
    font-size: 1rem;

  }

</style>
@@ -109,8 +114,7 @@
  <header

    on:click={collapse}>

    <div class="actions">
- 
      <Icon name="chevron" width={20} inline fill />
- 
      <p class="bold file-path">{file.path}</p>
+ 
      <p class="file-path">{file.path}</p>

    </div>

    <Icon name="browse" width={20} inline fill on:click={() => dispatch("browse", file.path)} />

  </header>