Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Emphasize seed name in r/o section header
dnlklmn committed 2 years ago
commit 9404c3092ac524fb6589a979d15d569b41da5d38
parent 9358798f8fe31bff054a809afd07851059f611ac
2 files changed +31 -7
modified src/views/home/Index.svelte
@@ -130,6 +130,18 @@
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));

    gap: 1rem;

  }
+ 
  .seed {
+ 
    max-width: 100%;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    gap: 0.125rem;
+ 
    color: var(--color-foreground-contrast);
+ 
  }
+ 
  .seed-name {
+ 
    max-width: 100%;
+ 
    overflow: hidden;
+ 
    text-overflow: ellipsis;
+ 
  }



  @media (max-width: 720px) {

    .wrapper {
@@ -214,7 +226,13 @@
        {#if nodeId && $preferredSeeds}

          Pinned repositories on your selected seed node

        {:else}
- 
          Pinned repositories on {$selectedSeed?.hostname}
+ 
          Pinned repositories on
+ 
          <div class="seed">
+ 
            <IconSmall name="seedling" />
+ 
            <span class="seed-name">
+ 
              {$selectedSeed?.hostname}
+ 
            </span>
+ 
          </div>

        {/if}

        {#if !nodeId}

          <div class="global-hide-on-mobile">
modified src/views/home/components/HomepageSection.svelte
@@ -10,23 +10,29 @@
<style>

  .section-header {

    display: flex;
- 
    gap: 1rem;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

  }
-
+ 
  .title {
+ 
    width: 100%;
+ 
    display: flex;
+ 
    align-items: center;
+ 
  }

  .title > * {

    margin: 0;

  }



  .subtitle {
+ 
    max-width: 100%;

    display: flex;
+ 
    flex-wrap: wrap;

    gap: 0.25rem;

    align-items: center;

    margin-top: 0.25rem;

    color: var(--color-foreground-dim);
+ 
    white-space: nowrap;

  }



  .actions {
@@ -58,12 +64,12 @@
  <div class="section-header">

    <div class="title">

      <h2>{title}</h2>
- 
      <div class="subtitle">
- 
        <slot name="subtitle" />
+ 
      <div class="actions">
+ 
        <slot name="actions" />

      </div>

    </div>
- 
    <div class="actions">
- 
      <slot name="actions" />
+ 
    <div class="subtitle">
+ 
      <slot name="subtitle" />

    </div>

  </div>