rust-lang · bors · Feb 25, 2021 · Feb 25, 2021 · Feb 25, 2021 · Feb 25, 2021
diff --git a/app/components/crate-header.hbs b/app/components/crate-header.hbs
@@ -12,4 +12,31 @@
       <FollowButton @crate={{@crate}}/>
     {{/if}}
   </div>
-</PageHeader>
+</PageHeader>
+
+<NavTabs aria-label="{{@crate.name}} crate subpages" local-class="nav" as |nav|>
+  <nav.Tab
+    @link={{if
+      (eq this.router.currentRouteName "crate.version")
+      (link "crate.version" @crate @version.num)
+      (link "crate.index" @crate)
+    }}
+    data-test-readme-tab
+  >
+    Readme
+  </nav.Tab>
+
+  <nav.Tab @link={{link "crate.versions" @crate}} data-test-versions-tab>
+    {{@crate.versions.length}} Versions
+  </nav.Tab>
+
+  <nav.Tab @link={{link "crate.reverse-dependencies" @crate}} data-test-rev-deps-tab>
+    Dependents
+  </nav.Tab>
+
+  {{#if this.isOwner}}
+    <nav.Tab @link={{link "crate.owners" @crate}} data-test-settings-tab>
+      Settings
+    </nav.Tab>
+  {{/if}}
+</NavTabs>
diff --git a/app/components/crate-header.js b/app/components/crate-header.js
@@ -1,6 +1,13 @@
+import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 
 export default class CrateHeader extends Component {
+  @service router;
   @service session;
+
+  @computed('args.crate.owner_user', 'session.currentUser.id')
+  get isOwner() {
+    return this.args.crate.owner_user.findBy('id', this.session.currentUser?.id);
+  }
 }
diff --git a/app/components/crate-header.module.css b/app/components/crate-header.module.css
@@ -29,3 +29,7 @@
     width: 32px;
     height: 32px;
 }
+
+.nav {
+    margin-bottom: 20px;
+}
diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs
@@ -79,14 +79,6 @@
     <div>
       <h3>Owners</h3>
 
-      {{#if this.isOwner}}
-        <p>
-          <LinkTo @route="crate.owners" @model={{@crate}} data-test-manage-owners-link>
-            Manage owners
-          </LinkTo>
-        </p>
-      {{/if}}
-
       <ul local-class='owners' data-test-owners>
         {{#each @crate.owner_team as |team|}}
           <li>
@@ -152,28 +144,6 @@
       {{/if}}
     {{/unless}}
 
-    <div data-test-versions>
-      <h3>Versions</h3>
-      <ul>
-        {{#each this.smallSortedVersions as |version|}}
-          <li>
-            <LinkTo @route="crate.version" @model={{version.num}} data-test-version-link={{version.num}}>
-              {{ version.num }}
-            </LinkTo>
-            {{date-format version.created_at "PP"}}
-            {{#if version.yanked}}
-              <span local-class='yanked'>yanked</span>
-            {{/if}}
-          </li>
-        {{/each}}
-      </ul>
-      {{#if this.hasMoreVersions}}
-        <LinkTo @route="crate.versions" @model={{@crate}} local-class="more-versions-link" data-test-all-versions-link>
-          show all {{ @crate.versions.length }} versions
-        </LinkTo>
-      {{/if}}
-    </div>
-
     <div>
       <h3>Dependencies</h3>
       <ul data-test-dependencies>
@@ -187,10 +157,6 @@
           {{/if}}
         {{/each}}
       </ul>
-
-      <LinkTo @route="crate.reverse-dependencies" local-class="reverse-deps-link" data-test-reverse-deps-link>
-        Show dependent crates
-      </LinkTo>
     </div>
 
     {{#if @version.buildDependencies}}

diff --git a/app/components/crate-sidebar.js b/app/components/crate-sidebar.js
@@ -1,18 +1,10 @@
 import { computed } from '@ember/object';
 import { gt, readOnly } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 
 const NUM_VERSIONS = 5;
 
 export default class DownloadGraph extends Component {
-  @service session;
-
-  @computed('args.crate.owner_user', 'session.currentUser.id')
-  get isOwner() {
-    return this.args.crate.owner_user.findBy('id', this.session.currentUser?.id);
-  }
-
   @readOnly('args.crate.versions') sortedVersions;
 
   @computed('sortedVersions')

diff --git a/app/components/nav-tabs.hbs b/app/components/nav-tabs.hbs
@@ -0,0 +1,5 @@
+<nav ...attributes>
+  <ul local-class="list">
+    {{yield (hash Tab=(component "nav-tabs/tab"))}}
+  </ul>
+</nav>
diff --git a/app/components/nav-tabs.module.css b/app/components/nav-tabs.module.css
@@ -0,0 +1,18 @@
+.list {
+    --nav-tabs-border-width: 2px;
+    --nav-tabs-padding-h: 20px;
+    --nav-tabs-padding-v: 12px;
+    --nav-tabs-radius: 5px;
+
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-bottom: var(--nav-tabs-border-width) solid var(--gray-border);
+
+    @media only screen and (max-width: 550px) {
+        flex-direction: column;
+        border-left: var(--nav-tabs-border-width) solid var(--gray-border);
+        border-bottom: none;
+    }
+}
diff --git a/app/components/nav-tabs/tab.hbs b/app/components/nav-tabs/tab.hbs
@@ -0,0 +1,9 @@
+<li ...attributes>
+  <a
+    href={{@link.url}}
+    local-class="link {{if @link.isActive "active"}}"
+    {{on "click" @link.transitionTo}}
+  >
+    {{yield}}
+  </a>
+</li>
diff --git a/app/components/nav-tabs/tab.module.css b/app/components/nav-tabs/tab.module.css
@@ -0,0 +1,45 @@
+.link {
+    display: block;
+    padding:
+        calc(var(--nav-tabs-padding-v) + var(--nav-tabs-border-width))
+        var(--nav-tabs-padding-h)
+        var(--nav-tabs-padding-v);
+    color: var(--main-color);
+    border-top-left-radius: var(--nav-tabs-radius);
+    border-top-right-radius: var(--nav-tabs-radius);
+    border-bottom: var(--nav-tabs-border-width) solid transparent;
+    margin-bottom: calc(0px - var(--nav-tabs-border-width));
+    transition: all 300ms;
+
+    &.active {
+        color: var(--link-hover-color);
+        border-bottom-color: var(--link-hover-color);
+        background: var(--main-bg-dark);
+    }
+
+    &:hover {
+        color: var(--link-hover-color);
+        border-bottom-color: var(--link-hover-color);
+        transition: all 0s;
+    }
+
+    @media only screen and (max-width: 550px) {
+        padding:
+            var(--nav-tabs-padding-v)
+            var(--nav-tabs-padding-h)
+            var(--nav-tabs-padding-v)
+            calc(var(--nav-tabs-padding-h) + var(--nav-tabs-border-width));
+
+        border-top-left-radius: 0;
+        border-bottom-right-radius: var(--nav-tabs-radius);
+        border-bottom: none;
+        border-left: var(--nav-tabs-border-width) solid transparent;
+        margin-bottom: 0;
+        margin-left: calc(0px - var(--nav-tabs-border-width));
+
+        &.active,
+        &:hover {
+            border-left-color: var(--link-hover-color);
+        }
+    }
+}
diff --git a/app/styles/crate/versions.module.css b/app/styles/crate/versions.module.css
@@ -3,10 +3,19 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
+
+    @media only screen and (max-width: 550px) {
+        display: block;
+    }
 }
 
 .page-description {
     composes: small from '../shared/typography.module.css';
+
+    @media only screen and (max-width: 550px) {
+        display: block;
+        margin-bottom: 15px;
+    }
 }
 
 .list {

diff --git a/app/templates/crate/owners.hbs b/app/templates/crate/owners.hbs
@@ -1,10 +1,6 @@
 {{page-title 'Manage Crate Owners'}}
 
-<PageHeader
-  @title="Manage Crate Owners"
-  @suffix={{this.crate.name}}
-  @icon="gear"
-/>
+<CrateHeader @crate={{this.crate}} />
 
 <div local-class="me-email">
   <h2>Add Owner</h2>

diff --git a/app/templates/crate/reverse-dependencies.hbs b/app/templates/crate/reverse-dependencies.hbs
@@ -1,9 +1,5 @@
 <CrateHeader @crate={{this.crate}} />
 
-<div local-class="back-link">
-  <LinkTo @route="crate" @model={{this.crate.id}}>&#11013; Back to {{ this.crate.name }}</LinkTo>
-</div>
-
 <div local-class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}

diff --git a/app/templates/crate/versions.hbs b/app/templates/crate/versions.hbs
@@ -1,9 +1,11 @@
 <CrateHeader @crate={{this.model}} />
 
 <div local-class="results-meta">
-  <LinkTo @route="crate" @model={{this.model}} local-class="back-link">
-    &#11013; Back to Main Page
-  </LinkTo>
+  <span local-class="page-description" data-test-page-description>
+    All <strong>{{ this.model.versions.length }}</strong>
+    versions of <strong>{{ this.model.name }}</strong> since
+    {{date-format this.model.created_at 'PPP'}}
+  </span>
 
   <div data-test-search-sort>
     <span local-class="sort-by-label">Sort by </span>
@@ -14,12 +16,6 @@
   </div>
 </div>
 
-<span local-class="page-description" data-test-page-description>
-  All <strong>{{ this.model.versions.length }}</strong>
-  versions of <strong>{{ this.model.name }}</strong> since
-  {{date-format this.model.created_at 'PPP'}}
-</span>
-
 <ul local-class="list">
   {{#each this.sortedVersions as |version|}}
     <li>

diff --git a/tests/acceptance/crate-test.js b/tests/acceptance/crate-test.js
@@ -97,7 +97,7 @@ module('Acceptance | crate page', function (hooks) {
     this.server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    await click('[data-test-all-versions-link]');
+    await click('[data-test-versions-tab] a');
 
     assert.dom('[data-test-page-description]').hasText(/All 13\s+versions of nanomsg since\s+December \d+th, 2014/);
   });
@@ -106,7 +106,7 @@ module('Acceptance | crate page', function (hooks) {
     this.server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    await click('[data-test-reverse-deps-link]');
+    await click('[data-test-rev-deps-tab] a');
 
     assert.equal(currentURL(), '/crates/nanomsg/reverse_dependencies');
     assert.dom('a[href="/crates/unicorn-rpc"]').hasText('unicorn-rpc');
@@ -183,7 +183,7 @@ module('Acceptance | crate page', function (hooks) {
     await visit('/crates/nanomsg');
     assert.dom('[data-test-license]').hasText('Apache-2.0');
 
-    await click('[data-test-version-link="0.5.0"]');
+    await visit('/crates/nanomsg/0.5.0');
     assert.dom('[data-test-license]').hasText('MIT OR Apache-2.0');
   });
 
@@ -211,7 +211,7 @@ module('Acceptance | crate page', function (hooks) {
 
     await visit('/crates/nanomsg');
 
-    assert.dom('[data-test-manage-owners-link]').doesNotExist();
+    assert.dom('[data-test-settings-tab]').doesNotExist();
   });
 
   test('navigating to the owners page when not an owner', async function (assert) {
@@ -222,7 +222,7 @@ module('Acceptance | crate page', function (hooks) {
 
     await visit('/crates/nanomsg');
 
-    assert.dom('[data-test-manage-owners-link]').doesNotExist();
+    assert.dom('[data-test-settings-tab]').doesNotExist();
   });
 
   test('navigating to the owners page', async function (assert) {
@@ -232,7 +232,7 @@ module('Acceptance | crate page', function (hooks) {
     this.authenticateAs(user);
 
     await visit('/crates/nanomsg');
-    await click('[data-test-manage-owners-link]');
+    await click('[data-test-settings-tab] a');
 
     assert.equal(currentURL(), '/crates/nanomsg/owners');
   });