Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Improve commit history styling
Alexis Sellier committed 4 years ago
commit a473c04467eda48d5b061e4b409a678e30e4c9cf
parent 02eb4463c11b9945c65828cbc61223d63ca7b813
3 files changed +27 -32
modified src/base/projects/Commit/CommitTeaser.svelte
@@ -9,7 +9,7 @@
<style>

  .hash {

    font-family: var(--font-family-monospace);
- 
    padding: 0 4px 0 0;
+ 
    padding: 0 1rem 0 0;

  }

  .author {

    margin-right: 8px
@@ -18,19 +18,17 @@
    display: flex;

    align-items: center;

    justify-content: space-between;
- 
    padding: 0 1rem 0 0.6rem;
+ 
    padding: 0 1rem 0 1rem;

    height: 2.5rem;

  }
- 
  .small {
- 
    font-size: 14px;
- 
  }
+ 


  @media (max-width: 720px) {

    .commit {

      flex-direction: column;

      justify-content: center;

      align-items: flex-start;
- 
      padding-top: 0.3rem;
- 
      padding-bottom: 0.3rem;
+ 
      padding-top: 0.25rem;
+ 
      padding-bottom: 0.25rem;

      height: unset;

    }

    .author, .hash {
@@ -45,9 +43,9 @@
  }

</style>
- 
<div class="commit small">
+ 
<div class="commit">

  <div class="summary">
- 
    <span class="secondary desktop-inline hash bold">{formatCommit(commit.sha1)}</span>
+ 
    <span class="secondary desktop-inline hash">{formatCommit(commit.sha1)}</span>

    <span>{commit.summary}</span>

  </div>

  <div>
modified src/base/projects/Commit/History.svelte
@@ -18,29 +18,19 @@
<style>

  .history {

    padding: 0 2rem 0 8rem;
+ 
    font-size: 0.875rem;

  }

  .commit-group header {
- 
    color: var(--color-foreground-6);
- 
    padding-left: 0.6rem;
+ 
    color: var(--color-foreground-faded);

  }

  .commit-group-headers {
- 
    border: 1px solid var(--color-foreground-3);
- 
    border-radius: 0.5rem;
+ 
    border-radius: 0.25rem;

    margin-bottom: 2rem;
+ 
    background: var(--color-foreground-background);

  }

  .commit {
- 
    border-bottom: 1px solid var(--color-foreground-3);

    padding: 0.25rem 0;

  }
- 
  .commit:first-child {
- 
    border-top-left-radius: 0.5rem;
- 
    border-top-right-radius: 0.5rem;
- 
  }
- 
  .commit:last-child {
- 
    border-bottom: none;
- 
    border-bottom-left-radius: 0.5rem;
- 
    border-bottom-right-radius: 0.5rem;
- 
  }

  @media (max-width: 720px) {

    .history {

      padding-left: 2rem;
modified src/base/projects/Header.svelte
@@ -6,7 +6,7 @@
  import type { Info, Tree } from '@app/project';

  import { ProjectContent } from "@app/project";

  import type { Profile } from '@app/profile';
-
+ 


  export let config: Config;

  export let anchors: string | null = null;

  export let urn: string;
@@ -137,7 +137,7 @@
    background-color: var(--color-foreground-background-lighter);

  }
- 
  .clone, .commit-count {
+ 
  .clone {

    color: var(--color-primary);

    background-color: var(--color-primary-background);

    font-family: var(--font-family-monospace);
@@ -146,9 +146,16 @@
    cursor: pointer;

    user-select: none;

  }
- 
  .clone:hover, .commit-count:hover {
+ 
  .clone:hoverr {

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

  }
+ 
  .commit-count {
+ 
    cursor: pointer;
+ 
    user-select: none;
+ 
  }
+ 
  .commit-count:hover {
+ 
    background-color: var(--color-foreground-background-lighter);
+ 
  }

  .dropdown {

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

    padding: 1rem;
@@ -193,6 +200,10 @@
    padding: 0.5rem 0.75rem;

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

  }
+ 
  .stat.active {
+ 
    color: var(--color-background);
+ 
    background: var(--color-foreground-90);
+ 
  }



  .error {

    color: var(--color-negative);
@@ -323,12 +334,8 @@
      {/if}

    </div>

  </span>
- 
  <div class="stat commit-count" on:click={switchContent}>
- 
    {#if content == ProjectContent.Browser}
- 
      <strong>{tree.stats.commits}</strong> commit(s)
- 
    {:else}
- 
      <strong>Back to Browser</strong>
- 
    {/if}
+ 
  <div class="stat commit-count" class:active={content == ProjectContent.Commits} on:click={switchContent}>
+ 
    <strong>{tree.stats.commits}</strong> commit(s)

  </div>

  <div class="stat">

    <strong>{tree.stats.contributors}</strong> contributor(s)