Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Extract global layout classes into own file
Rūdolfs Ošiņš committed 3 years ago
commit ae49c6fc5683bb134f81c1319749e3adc3065f82
parent ce68b15ca1fc1f0743c282e06831a0536a190190
22 files changed +100 -102
modified cypress/e2e/projectHeader.spec.ts
@@ -87,7 +87,7 @@ describe("project header", () => {
    cy.get("div.stat.branch")

      .should("have.class", "not-allowed")

      .should("have.text", "main");
- 
    cy.get("div.hash.desktop").should("have.text", "56e4e02");
+ 
    cy.get("div.hash.layout-desktop").should("have.text", "56e4e02");

    cy.get("div.clone-button").click();

  });
@@ -134,7 +134,7 @@ describe("project header", () => {
      );

    });

    cy.get("div.stat.branch").should("have.text", "master");
- 
    cy.get("div.hash.desktop").should("have.text", "cbf5df4");
+ 
    cy.get("div.hash.layout-desktop").should("have.text", "cbf5df4");

  });



  it("navigate to commit history", () => {
modified cypress/support/component-index.html
@@ -6,6 +6,7 @@
    <link rel="stylesheet" type="text/css" href="/typography.css" />

    <link rel="stylesheet" type="text/css" href="/colors.css" />

    <link rel="stylesheet" type="text/css" href="/elevations.css" />
+ 
    <link rel="stylesheet" type="text/css" href="/layout.css" />

    <link rel="stylesheet" type="text/css" href="/index.css" />

    <title>Components App</title>

  </head>
modified index.html
@@ -19,6 +19,7 @@
    <link rel="stylesheet" type="text/css" href="/katex.min.css" />

    <link rel="stylesheet" type="text/css" href="/colors.css" />

    <link rel="stylesheet" type="text/css" href="/elevations.css" />
+ 
    <link rel="stylesheet" type="text/css" href="/layout.css" />

    <link rel="stylesheet" type="text/css" href="/index.css" />

    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

    <link rel="icon" href="/favicon.ico" />
modified public/index.css
@@ -98,37 +98,3 @@ a:hover {
  color: var(--color-foreground);

  border-bottom-color: var(--color-foreground);

}
-
- 
.off-centered {
- 
  height: 100%;
- 
  padding-top: 5rem;
- 
  padding-bottom: 24vh;
- 
  display: flex;
- 
  flex-direction: column;
- 
  justify-content: center;
- 
  align-items: center;
- 
}
-
- 
.mobile,
- 
.mobile-inline {
- 
  display: none !important;
- 
}
- 
.desktop {
- 
  display: block !important;
- 
}
- 
.desktop-inline {
- 
  display: inline !important;
- 
}
-
- 
@media (max-width: 720px) {
- 
  .mobile {
- 
    display: block !important;
- 
  }
- 
  .mobile-inline {
- 
    display: inline !important;
- 
  }
- 
  .desktop,
- 
  .desktop-inline {
- 
    display: none !important;
- 
  }
- 
}
added public/layout.css
@@ -0,0 +1,33 @@
+ 
.layout-centered {
+ 
  height: 100%;
+ 
  padding-top: 5rem;
+ 
  padding-bottom: 24vh;
+ 
  display: flex;
+ 
  flex-direction: column;
+ 
  justify-content: center;
+ 
  align-items: center;
+ 
}
+
+ 
.layout-mobile,
+ 
.layout-mobile-inline {
+ 
  display: none !important;
+ 
}
+ 
.layout-desktop {
+ 
  display: block !important;
+ 
}
+ 
.layout-desktop-inline {
+ 
  display: inline !important;
+ 
}
+
+ 
@media (max-width: 720px) {
+ 
  .layout-mobile {
+ 
    display: block !important;
+ 
  }
+ 
  .layout-mobile-inline {
+ 
    display: inline !important;
+ 
  }
+ 
  .layout-desktop,
+ 
  .layout-desktop-inline {
+ 
    display: none !important;
+ 
  }
+ 
}
modified src/Form.svelte
@@ -215,13 +215,13 @@
                </a>

              </span>

            {:else if isAddress(field.value)}
- 
              <div class="desktop-inline">
+ 
              <div class="layout-desktop-inline">

                <Address

                  resolve={field.resolve ?? false}

                  address={field.value}

                  {config} />

              </div>
- 
              <div class="mobile-inline">
+ 
              <div class="layout-mobile-inline">

                <Address

                  compact

                  resolve={field.resolve ?? false}
@@ -233,10 +233,10 @@
                <a use:link href={field.url} class="txt-link">{field.value}</a>

              </div>

            {:else if field.validate === "id"}
- 
              <div class="mobile">
+ 
              <div class="layout-mobile">

                {formatSeedId(field.value)}

              </div>
- 
              <div class="desktop">
+ 
              <div class="layout-desktop">

                {field.value}

              </div>

            {:else}
modified src/Header.svelte
@@ -209,7 +209,7 @@
      </span>

    {/if}

    <ThemeToggle />
- 
    <div class="mobile">
+ 
    <div class="layout-mobile">

      <Floating overlay>

        <div slot="toggle">

          <span style="transform: scale(1.2);">
modified src/Modal.svelte
@@ -101,7 +101,7 @@
  <div class="overlay" />

{/if}
- 
<div class:floating class:off-centered={!center}>
+ 
<div class:floating class:layout-centered={!center}>

  <div class="modal" class:subtle class:narrow class:small class:error>

    <div class="title">

      <slot name="title" />
modified src/Profile.svelte
@@ -126,7 +126,7 @@
</svelte:head>



{#await Profile.get(addressOrName, ProfileType.Full, config)}
- 
  <div class="off-centered">
+ 
  <div class="layout-centered">

    <Loading center />

  </div>

{:then profile}
@@ -139,12 +139,12 @@
      </div>

      <div class="info">

        <span class="title txt-title">
- 
          <span class="txt-bold desktop">
+ 
          <span class="txt-bold layout-desktop">

            {profile.name

              ? utils.formatName(profile.name, config)

              : profile.address}

          </span>
- 
          <span class="txt-bold mobile">
+ 
          <span class="txt-bold layout-mobile">

            {profile.name

              ? utils.formatName(profile.name, config)

              : utils.formatAddress(profile.address)}
@@ -156,10 +156,10 @@
        <div class="links">

          {#if profile.url}

            <a class="url" href={profile.url}>
- 
              <span class="mobile">
+ 
              <span class="layout-mobile">

                <Icon name="url" />

              </span>
- 
              <span class="desktop" style="margin-right: 0.3rem;">
+ 
              <span class="layout-desktop" style="margin-right: 0.3rem;">

                {profile.url}

              </span>

            </a>
@@ -191,23 +191,23 @@
      {/if}

      <!-- Address -->

      <div class="txt-highlight">Address</div>
- 
      <div class="desktop">
+ 
      <div class="layout-desktop">

        <Address {config} {profile} address={profile.address} />

      </div>
- 
      <div class="mobile">
+ 
      <div class="layout-mobile">

        <Address compact {config} {profile} address={profile.address} />

      </div>
- 
      <div class="desktop" />
+ 
      <div class="layout-desktop" />

      <!-- Owner -->

      {#if profile.org}

        <div class="txt-highlight">Owner</div>
- 
        <div class="desktop">
+ 
        <div class="layout-desktop">

          <Address resolve {config} address={profile.org.owner} />

        </div>
- 
        <div class="mobile">
+ 
        <div class="layout-mobile">

          <Address compact resolve {config} address={profile.org.owner} />

        </div>
- 
        <div class="desktop" />
+ 
        <div class="layout-desktop" />

      {/if}

      <!-- Org Name/Profile -->

      <div class="txt-highlight">Profile</div>
@@ -234,7 +234,7 @@
            <span class="txt-missing">Not set</span>

          {/if}

        </div>
- 
        <div class="desktop">
+ 
        <div class="layout-desktop">

          {#if isUserAuthorized(profile.address) && !profile.org}

            <Button variant="secondary" size="small" on:click={setName}>

              Set
modified src/RadicleUrn.svelte
@@ -33,7 +33,7 @@
  }

</style>
- 
<div class="desktop">
+ 
<div class="layout-desktop">

  <div class="urn">

    <span class="icon">🌱</span>

    <span class="txt-faded">rad:git:</span>
modified src/SeedAddress.svelte
@@ -52,4 +52,4 @@
    small

    text={full ? formatSeedAddress(seed.id, seed.host, port) : seed.host} />

</div>
- 
<div class="desktop" />
+ 
<div class="layout-desktop" />
modified src/base/projects/BranchSelector.spec.ts
@@ -31,7 +31,7 @@ describe("Logic", () => {
    cy.get("div.stat.branch")

      .should("be.visible")

      .should("have.text", "master");
- 
    cy.get("div.hash.mobile")
+ 
    cy.get("div.hash.layout-mobile")

      .should("be.visible")

      .should("have.text", "e678629");

  });
@@ -48,7 +48,7 @@ describe("Logic", () => {
    cy.get("div.stat.branch")

      .should("be.visible")

      .should("have.text", "master");
- 
    cy.get("div.hash.mobile")
+ 
    cy.get("div.hash.layout-mobile")

      .should("be.visible")

      .should("have.text", "e678629");

  });
@@ -90,7 +90,7 @@ describe("Logic", () => {
    cy.get("div.stat.branch")

      .should("be.visible")

      .should("have.text", "feature-branch");
- 
    cy.get("div.hash.mobile")
+ 
    cy.get("div.hash.layout-mobile")

      .should("be.visible")

      .should("have.text", "29e8b7b");

  });
@@ -103,11 +103,11 @@ describe("Logic", () => {
        branches: {},

      },

    });
- 
    cy.get("div.hash.mobile")
+ 
    cy.get("div.hash.layout-mobile")

      .should("be.visible")

      .should("have.text", "debf82e");

    cy.viewport("macbook-13");
- 
    cy.get("div.hash.desktop")
+ 
    cy.get("div.hash.layout-desktop")

      .should("be.visible")

      .should("have.text", "debf82ef3623ec11751a993bda85bac2ff1c6f00");

  });
@@ -119,11 +119,11 @@ describe("Logic", () => {
        revision: "debf82ef3623ec11751a993bda85bac2ff1c6f00",

      },

    });
- 
    cy.get("div.hash.mobile")
+ 
    cy.get("div.hash.layout-mobile")

      .should("be.visible")

      .should("have.text", "debf82e");

    cy.viewport("macbook-13");
- 
    cy.get("div.hash.desktop")
+ 
    cy.get("div.hash.layout-desktop")

      .should("be.visible")

      .should("have.text", "debf82ef3623ec11751a993bda85bac2ff1c6f00");

  });
@@ -151,11 +151,11 @@ describe("Layout", () => {
      },

    });

    cy.viewport("iphone-x");
- 
    cy.get("div.hash.mobile").should("be.visible");
- 
    cy.get("div.hash.desktop").should("not.be.visible");
+ 
    cy.get("div.hash.layout-mobile").should("be.visible");
+ 
    cy.get("div.hash.layout-desktop").should("not.be.visible");

    cy.viewport("macbook-15");
- 
    cy.get("div.hash.mobile").should("not.be.visible");
- 
    cy.get("div.hash.desktop").should("be.visible");
+ 
    cy.get("div.hash.layout-mobile").should("not.be.visible");
+ 
    cy.get("div.hash.layout-desktop").should("be.visible");

  });

});
modified src/base/projects/BranchSelector.svelte
@@ -90,15 +90,15 @@
            on:select={e => switchBranch(e.detail)} />

        </svelte:fragment>

      </Floating>
- 
      <div class="hash desktop">
+ 
      <div class="hash layout-desktop">

        {formatCommit(commit)}

      </div>

    {:else}
- 
      <div class="unlabeled hash desktop">
+ 
      <div class="unlabeled hash layout-desktop">

        {commit}

      </div>

    {/if}
- 
    <div class="hash mobile">
+ 
    <div class="hash layout-mobile">

      {formatCommit(commit)}

    </div>

    <!-- If there is no branch listing available, show default branch name if commit is head and else show entire commit -->
@@ -110,10 +110,10 @@
      {formatCommit(commit)}

    </div>

  {:else}
- 
    <div class="unlabeled hash desktop">
+ 
    <div class="unlabeled hash layout-desktop">

      {commit}

    </div>
- 
    <div class="hash mobile">
+ 
    <div class="hash layout-mobile">

      {formatCommit(commit)}

    </div>

  {/if}
modified src/base/projects/Browser.svelte
@@ -178,7 +178,7 @@
<main>

  <!-- Mobile navigation -->

  {#if tree.entries.length > 0}
- 
    <nav class="mobile">
+ 
    <nav class="layout-mobile">

      <Button

        style="width: 100%;"

        variant="secondary"
modified src/base/projects/Commit.svelte
@@ -59,10 +59,10 @@
  <header>

    <div class="summary">

      <div class="txt-medium">{commit.header.summary}</div>
- 
      <div class="desktop txt-monospace sha1">
+ 
      <div class="layout-desktop txt-monospace sha1">

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

      </div>
- 
      <div class="mobile txt-monospace sha1 txt-small">
+ 
      <div class="layout-mobile txt-monospace sha1 txt-small">

        {formatCommit(commit.header.sha1)}

      </div>

    </div>
modified src/base/projects/Commit/CommitAuthorship.svelte
@@ -51,7 +51,7 @@
      {/if}

      <span>committed</span>

    {:else}
- 
      <span class="desktop-inline committer">
+ 
      <span class="layout-desktop-inline committer">

        {commit.header.committer.name}

      </span>

      <span>committed</span>
@@ -62,7 +62,9 @@
        class="avatar"

        alt="avatar"

        src={gravatarURL(commit.header.author.email)} />
- 
      <span class="desktop-inline author">{commit.header.author.name}</span>
+ 
      <span class="layout-desktop-inline author">
+ 
        {commit.header.author.name}
+ 
      </span>

      <span>authored</span>

    {/if}

    <img
@@ -78,14 +80,14 @@
      {/if}

      <span>committed</span>

    {:else}
- 
      <span class="desktop-inline committer">
+ 
      <span class="layout-desktop-inline committer">

        {commit.header.committer.name}

      </span>

      <span>committed</span>

    {/if}

  {/if}

  {#if !noTime}
- 
    <span class="desktop-inline">
+ 
    <span class="layout-desktop-inline">

      {formatTimestamp(commit.header.committerTime)}

    </span>

  {/if}
modified src/base/projects/Commit/CommitTeaser.svelte
@@ -95,7 +95,7 @@
  </div>

  <div class="column-right">

    {#if commit.context.committer}
- 
      <div class="desktop">
+ 
      <div class="layout-desktop">

        <CommitVerifiedBadge {commit} />

      </div>

    {/if}
modified src/base/projects/Issue.svelte
@@ -116,8 +116,10 @@
        <span class="summary-title txt-medium">

          {issue.title}

        </span>
- 
        <span class="txt-monospace id desktop">{issue.id}</span>
- 
        <span class="txt-monospace id mobile">{formatObjectId(issue.id)}</span>
+ 
        <span class="txt-monospace id layout-desktop">{issue.id}</span>
+ 
        <span class="txt-monospace id layout-mobile">
+ 
          {formatObjectId(issue.id)}
+ 
        </span>

      </div>

      <div

        class="summary-state"
@@ -146,7 +148,7 @@
        {/if}

      {/each}

    </div>
- 
    <div class="metadata desktop">
+ 
    <div class="metadata layout-desktop">

      <div class="metadata-section">

        <div class="metadata-section-header">Labels</div>

        <div class="metadata-section-body">
modified src/base/projects/Patch.svelte
@@ -101,8 +101,10 @@
        <span class="summary-title txt-medium">

          {patch.title}

        </span>
- 
        <span class="txt-monospace id desktop">{patch.id}</span>
- 
        <span class="txt-monospace id mobile">{formatObjectId(patch.id)}</span>
+ 
        <span class="txt-monospace id layout-desktop">{patch.id}</span>
+ 
        <span class="txt-monospace id layout-mobile">
+ 
          {formatObjectId(patch.id)}
+ 
        </span>

      </div>

      <div

        class="summary-state"
modified src/base/projects/Patch/PatchSideBar.svelte
@@ -38,7 +38,7 @@
  }

</style>
- 
<div class="metadata desktop">
+ 
<div class="metadata layout-desktop">

  <div class="metadata-section">

    <div class="metadata-section-header">Labels</div>

    <div class="metadata-section-body">
modified src/base/projects/Widget.svelte
@@ -147,10 +147,10 @@
  {#if !compact}

    <div class="right">

      <div class="id">
- 
        <span class="urn desktop">{project.urn}</span>
+ 
        <span class="urn layout-desktop">{project.urn}</span>

      </div>

      {#await loadCommits() then points}
- 
        <div class="desktop activity">
+ 
        <div class="layout-desktop activity">

          <Diagram

            {points}

            strokeWidth={3}
modified src/base/seeds/View.svelte
@@ -85,12 +85,6 @@
    padding: 0.25rem 0.5rem;

    border-radius: var(--border-radius);

  }
- 
  .desktop {
- 
    display: block !important;
- 
  }
- 
  .inline {
- 
    display: inline !important;
- 
  }

  .seed-label {

    display: flex;

    align-items: center;
@@ -107,9 +101,6 @@
    .fields {

      grid-template-columns: 5rem auto;

    }
- 
    .desktop {
- 
      display: none !important;
- 
    }

  }

</style>
@@ -118,7 +109,7 @@
</svelte:head>



{#await Seed.lookup(host, config)}
- 
  <main class="off-centered">
+ 
  <main class="layout-centered">

    <Loading center />

  </main>

{:then seed}
@@ -127,7 +118,7 @@
      <span class="title txt-title">

        <span class="txt-bold">

          {hostName}
- 
          <span class="desktop inline">{seed.emoji}</span>
+ 
          <span class="layout-desktop-inline">{seed.emoji}</span>

        </span>

      </span>

      <!-- User Session -->
@@ -166,15 +157,15 @@
        {formatSeedId(seed.id)}

        <Clipboard small text={seed.id} />

      </div>
- 
      <div class="desktop" />
+ 
      <div class="layout-desktop" />

      <!-- API Port -->

      <div class="txt-highlight">API Port</div>

      <div>{seed.api.port}</div>
- 
      <div class="desktop" />
+ 
      <div class="layout-desktop" />

      <!-- API Version -->

      <div class="txt-highlight">Version</div>

      <div>{seed.version}</div>
- 
      <div class="desktop" />
+ 
      <div class="layout-desktop" />

    </div>

    <!-- Seed Projects -->

    <Async fetch={getProjectsAndStats(seed)} let:result>