From b920c92df62771f9ce5d7d6b20f4774caadd9e5b Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 6 Jun 2021 09:59:06 +0200
Subject: [PATCH 1/3] Footer: Remove `width-limit`

Let's just use all the space that is available
---
 app/components/footer.module.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/components/footer.module.css b/app/components/footer.module.css
index 9ba1cd9efb9..011ab30c63a 100644
--- a/app/components/footer.module.css
+++ b/app/components/footer.module.css
@@ -11,8 +11,6 @@
 }
 
 .after-main-links {
-    composes: width-limit from '../styles/application.module.css';
-
     margin: 40px;
     text-align: center;
 

From e54459c0e30a0f0d07c2647c8b62dd2a262a8cf6 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 6 Jun 2021 10:52:28 +0200
Subject: [PATCH 2/3] Header: Use full width and mobile-first styling

---
 .template-lintrc.js              |   2 -
 app/components/header.hbs        | 282 +++++++++++++++----------------
 app/components/header.module.css |  88 ++++++----
 3 files changed, 183 insertions(+), 189 deletions(-)

diff --git a/.template-lintrc.js b/.template-lintrc.js
index 199228f87ad..c6331e9310f 100644
--- a/.template-lintrc.js
+++ b/.template-lintrc.js
@@ -2,6 +2,4 @@
 
 module.exports = {
   extends: ['octane', 'a11y'],
-
-  pending: [{ moduleId: 'app/components/header', only: ['no-duplicate-landmark-elements'] }],
 };
diff --git a/app/components/header.hbs b/app/components/header.hbs
index c515c3c00c5..ba57e67ab73 100644
--- a/app/components/header.hbs
+++ b/app/components/header.hbs
@@ -1,161 +1,143 @@
 <header local-class="header">
-  <div local-class="header-inner">
-    <LinkTo @route="index" local-class="index-link">
-      <img src="/assets/Cargo-Logo-Small.png" role="presentation" alt="" local-class="logo">
-      <h1>crates.io</h1>
-    </LinkTo>
-
-    <form local-class="desktop-search-form" action='/search' {{on "submit" (prevent-default this.search)}} data-test-search-form>
-      <input
-        type="text"
-        local-class="search"
-        name="q"
-        id="cargo-desktop-search"
-        placeholder="Click or press 'S' to search..."
-        value={{this.header.searchValue}}
-        oninput={{this.updateSearchValue}}
-        autocorrect="off"
-        autocapitalize="off"
-        autofocus="autofocus"
-        spellcheck="false"
-        required
-        data-test-search-input
-      >
-      <label for="cargo-desktop-search" local-class="search-label">Search</label>
-      {{on-key 's' (focus '#cargo-desktop-search')}}
-      {{on-key 'S' (focus '#cargo-desktop-search')}}
-      {{on-key 'shift+s' (focus '#cargo-desktop-search')}}
-    </form>
+  <LinkTo @route="index" local-class="index-link">
+    <img src="/assets/Cargo-Logo-Small.png" role="presentation" alt="" local-class="logo">
+    <h1>crates.io</h1>
+  </LinkTo>
 
-    <nav local-class='nav'>
-      <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
-        Browse All Crates
-      </LinkTo>
-      <span local-class="sep">|</span>
-      <Dropdown as |dd|>
-        <dd.Trigger local-class="dropdown-button">
-          Docs
-        </dd.Trigger>
+  <form local-class="search-form" action='/search' {{on "submit" (prevent-default this.search)}} data-test-search-form>
+    <input
+      type="text"
+      local-class="search"
+      name="q"
+      id="cargo-desktop-search"
+      placeholder="Click or press 'S' to search..."
+      value={{this.header.searchValue}}
+      oninput={{this.updateSearchValue}}
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      required
+      data-test-search-input
+    >
+    <label for="cargo-desktop-search" local-class="search-label">Search</label>
+    {{on-key 's' (focus '#cargo-desktop-search')}}
+    {{on-key 'S' (focus '#cargo-desktop-search')}}
+    {{on-key 'shift+s' (focus '#cargo-desktop-search')}}
+  </form>
 
-        <dd.Menu local-class="doc-links" as |menu|>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/publishing.html'>Publishing on crates.io</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/faq.html'>FAQ</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/manifest.html'>Cargo.toml Format</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/build-scripts.html'>Build Scripts</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/config.html'>Configuration</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/pkgid-spec.html'>Package ID specs</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></menu.Item>
-          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></menu.Item>
-          <menu.Item><LinkTo @route="policies">Policies</LinkTo></menu.Item>
-          <menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
-        </dd.Menu>
-      </Dropdown>
-      <span local-class="sep">|</span>
-      {{#if this.session.currentUser}}
-        <Dropdown data-test-user-menu as |dd|>
-          <dd.Trigger local-class="dropdown-button" data-test-toggle>
-            <UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
-            {{ this.session.currentUser.name }}
-          </dd.Trigger>
-
-          <dd.Menu local-class="current-user-links" as |menu|>
-            <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
-            <menu.Item local-class="menu-item-with-separator">
-              <button
-                type="button"
-                disabled={{this.session.logoutTask.isRunning}}
-                local-class="logout-menu-item"
-                data-test-logout-button
-                {{on "click" (perform this.session.logoutTask)}}
-              >
-                {{#if this.session.logoutTask.isRunning}}
-                  <LoadingSpinner local-class="spinner"/>
-                {{/if}}
-                Sign Out
-              </button>
-            </menu.Item>
-          </dd.Menu>
-        </Dropdown>
-      {{else}}
-        <button
-          type="button"
-          disabled={{this.session.loginTask.isRunning}}
-          local-class="login-button"
-          data-test-login-button
-          {{on "click" (perform this.session.loginTask)}}
-        >
-          {{#if this.session.loginTask.isRunning}}
-            <LoadingSpinner local-class="spinner"/>
-          {{else}}
-            {{svg-jar "lock" local-class="login-icon"}}
-          {{/if}}
-          Log in with GitHub
-        </button>
-      {{/if}}
-    </nav>
+  <nav local-class='nav'>
+    <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
+      Browse All Crates
+    </LinkTo>
+    <span local-class="sep">|</span>
+    <Dropdown as |dd|>
+      <dd.Trigger local-class="dropdown-button">
+        Docs
+      </dd.Trigger>
 
-    <div local-class='menu'>
-      <Dropdown as |dd|>
-        <dd.Trigger local-class="dropdown-button">
-          Menu
+      <dd.Menu local-class="doc-links" as |menu|>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/publishing.html'>Publishing on crates.io</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/faq.html'>FAQ</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/manifest.html'>Cargo.toml Format</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/build-scripts.html'>Build Scripts</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/config.html'>Configuration</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/pkgid-spec.html'>Package ID specs</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></menu.Item>
+        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></menu.Item>
+        <menu.Item><LinkTo @route="policies">Policies</LinkTo></menu.Item>
+        <menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
+      </dd.Menu>
+    </Dropdown>
+    <span local-class="sep">|</span>
+    {{#if this.session.currentUser}}
+      <Dropdown data-test-user-menu as |dd|>
+        <dd.Trigger local-class="dropdown-button" data-test-toggle>
+          <UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
+          {{ this.session.currentUser.name }}
         </dd.Trigger>
+
         <dd.Menu local-class="current-user-links" as |menu|>
-          <menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
-          {{#if this.session.currentUser}}
-            <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
-            <menu.Item local-class="menu-item-with-separator">
-              <button
-                type="button"
-                disabled={{this.session.logoutTask.isRunning}}
-                local-class="logout-menu-item"
-                {{on "click" (perform this.session.logoutTask)}}
-              >
-                {{#if this.session.logoutTask.isRunning}}
-                  <LoadingSpinner local-class="spinner"/>
-                {{/if}}
-                Sign Out
-              </button>
-            </menu.Item>
-          {{else}}
-            <menu.Item>
-              <button
-                type="button"
-                disabled={{this.session.loginTask.isRunning}}
-                local-class="login-menu-item"
-                {{on "click" (perform this.session.loginTask)}}
-              >
-                {{#if this.session.loginTask.isRunning}}
-                  <LoadingSpinner local-class="spinner"/>
-                {{/if}}
-                Log in with GitHub
-              </button>
-            </menu.Item>
-          {{/if}}
+          <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
+          <menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
+          <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
+          <menu.Item local-class="menu-item-with-separator">
+            <button
+              type="button"
+              disabled={{this.session.logoutTask.isRunning}}
+              local-class="logout-menu-item"
+              data-test-logout-button
+              {{on "click" (perform this.session.logoutTask)}}
+            >
+              {{#if this.session.logoutTask.isRunning}}
+                <LoadingSpinner local-class="spinner"/>
+              {{/if}}
+              Sign Out
+            </button>
+          </menu.Item>
         </dd.Menu>
       </Dropdown>
-    </div>
-
-    <form local-class='mobile-search' action='/search' {{on "submit" (prevent-default this.search)}}>
-      <input
-        type="text"
-        local-class="search"
-        name="q"
-        id="cargo-mobile-search"
-        placeholder="Search"
-        value={{this.header.searchValue}}
-        oninput={{this.updateSearchValue}}
-        autocorrect="off"
-        required
+    {{else}}
+      <button
+        type="button"
+        disabled={{this.session.loginTask.isRunning}}
+        local-class="login-button"
+        data-test-login-button
+        {{on "click" (perform this.session.loginTask)}}
       >
-      <label for="cargo-mobile-search" local-class="search-label">Search</label>
-    </form>
+        {{#if this.session.loginTask.isRunning}}
+          <LoadingSpinner local-class="spinner"/>
+        {{else}}
+          {{svg-jar "lock" local-class="login-icon"}}
+        {{/if}}
+        Log in with GitHub
+      </button>
+    {{/if}}
+  </nav>
+
+  <div local-class='menu'>
+    <Dropdown as |dd|>
+      <dd.Trigger local-class="dropdown-button">
+        Menu
+      </dd.Trigger>
+      <dd.Menu local-class="current-user-links" as |menu|>
+        <menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
+        {{#if this.session.currentUser}}
+          <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
+          <menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
+          <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
+          <menu.Item local-class="menu-item-with-separator">
+            <button
+              type="button"
+              disabled={{this.session.logoutTask.isRunning}}
+              local-class="logout-menu-item"
+              {{on "click" (perform this.session.logoutTask)}}
+            >
+              {{#if this.session.logoutTask.isRunning}}
+                <LoadingSpinner local-class="spinner"/>
+              {{/if}}
+              Sign Out
+            </button>
+          </menu.Item>
+        {{else}}
+          <menu.Item>
+            <button
+              type="button"
+              disabled={{this.session.loginTask.isRunning}}
+              local-class="login-menu-item"
+              {{on "click" (perform this.session.loginTask)}}
+            >
+              {{#if this.session.loginTask.isRunning}}
+                <LoadingSpinner local-class="spinner"/>
+              {{/if}}
+              Log in with GitHub
+            </button>
+          </menu.Item>
+        {{/if}}
+      </dd.Menu>
+    </Dropdown>
   </div>
 </header>
\ No newline at end of file
diff --git a/app/components/header.module.css b/app/components/header.module.css
index b37d50a7fd0..eb9ab23bc19 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -1,45 +1,69 @@
 .header {
-    display: flex;
-    justify-content: center;
+    display: grid;
     width: 100%;
+    padding: 20px;
+    color: white;
+
+    align-items: center;
+    grid-template:
+        "index-link . menu" auto
+        "search-form search-form search-form" auto
+        / auto 1fr auto;
+
+    @media only screen and (min-width: 551px) {
+        grid-template:
+            "index-link search-form menu" auto
+            / auto 1fr auto;
+    }
+
+    @media only screen and (min-width: 890px) {
+        grid-template:
+            "index-link search-form nav" auto
+            / auto 1fr auto;
+    }
+
+    a {
+        color: white;
+        text-decoration: none;
+
+        &:hover {
+            color: white;
+        }
+    }
 }
 
 .header-inner {
-    composes: width-limit from '../styles/application.module.css';
-
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
-    padding: 10px;
-    color: white;
 
-    a {
-        color: white; text-decoration: none;
-        &:hover { color: white; }
-    }
 }
 
 .index-link {
+    grid-area: index-link;
     display: flex;
     align-items: center;
 
     h1 {
         font-size: 24px;
+        margin: 0;
     }
 }
 
 .logo {
     width: 60px;
     height: auto;
-    margin-right: 10px;
+    margin: -10px 10px -10px -10px;
 }
 
-.desktop-search-form {
+.search-form {
+    grid-area: search-form;
+    margin-top: 15px;
     display: flex;
     flex-grow: 1;
 
-    @media only screen and (max-width: 820px) {
-        display: none;
+    @media only screen and (min-width: 551px) {
+        margin: 0 20px;
     }
 }
 
@@ -48,8 +72,6 @@ input.search {
     border: none;
     color: black;
     width: 100%;
-    margin-left: 16px;
-    margin-right: 16px;
     padding: 5px 5px 5px 25px;
     background-color: white;
     background-image: url('/assets/search.png');
@@ -58,26 +80,19 @@ input.search {
     background-size: 14px 15px;
     border-radius: 15px;
     box-shadow: none;
-    transition: box-shadow 150ms;
+    transition: box-shadow 150ms, max-width 150ms;
 
     &:focus {
         outline: none;
         box-shadow: 0 0 0 4px var(--yellow500);
     }
-}
 
-.mobile-search {
-    display: none;
-    grid-row: 2;
-    grid-column: span 3;
-    margin: 0 10px 10px;
-
-    input.search {
-        margin: 0;
-    }
+    @media only screen and (min-width: 551px) {
+        max-width: 400px;
 
-    @media only screen and (max-width: 820px) {
-        display: block;
+        &:focus {
+            max-width: 100%;
+        }
     }
 }
 
@@ -101,24 +116,23 @@ input.search {
 }
 
 .nav {
-    display: flex;
+    grid-area: nav;
+    display: none;
     align-items: center;
     text-align: right;
     margin-right: 5px;
 
-    @media only screen and (max-width: 900px) {
-        display: none;
+    @media only screen and (min-width: 890px) {
+        display: flex;
     }
 }
 
 .menu {
+    grid-area: menu;
     text-align: right;
-    margin-right: 5px;
-    flex-grow: 2;
-    display: none;
 
-    @media only screen and (max-width: 900px) {
-        display: block;
+    @media only screen and (min-width: 890px) {
+        display: none;
     }
 }
 

From e5264e9ac81d54b701a425f5dbd5c2fa202ec2fc Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 6 Jun 2021 11:44:18 +0200
Subject: [PATCH 3/3] Header: Move primary nav to the left side

---
 app/components/header.hbs        |  6 ++++--
 app/components/header.module.css | 22 +++++++++++-----------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/components/header.hbs b/app/components/header.hbs
index ba57e67ab73..f531e589ae7 100644
--- a/app/components/header.hbs
+++ b/app/components/header.hbs
@@ -52,7 +52,9 @@
         <menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
       </dd.Menu>
     </Dropdown>
-    <span local-class="sep">|</span>
+  </nav>
+
+  <div local-class="login">
     {{#if this.session.currentUser}}
       <Dropdown data-test-user-menu as |dd|>
         <dd.Trigger local-class="dropdown-button" data-test-toggle>
@@ -96,7 +98,7 @@
         Log in with GitHub
       </button>
     {{/if}}
-  </nav>
+  </div>
 
   <div local-class='menu'>
     <Dropdown as |dd|>
diff --git a/app/components/header.module.css b/app/components/header.module.css
index eb9ab23bc19..2856c36babf 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -18,8 +18,8 @@
 
     @media only screen and (min-width: 890px) {
         grid-template:
-            "index-link search-form nav" auto
-            / auto 1fr auto;
+            "index-link search-form nav login" auto
+            / auto minmax(150px, 400px) minmax(220px, 1fr) auto;
     }
 
     a {
@@ -80,20 +80,12 @@ input.search {
     background-size: 14px 15px;
     border-radius: 15px;
     box-shadow: none;
-    transition: box-shadow 150ms, max-width 150ms;
+    transition: box-shadow 150ms;
 
     &:focus {
         outline: none;
         box-shadow: 0 0 0 4px var(--yellow500);
     }
-
-    @media only screen and (min-width: 551px) {
-        max-width: 400px;
-
-        &:focus {
-            max-width: 100%;
-        }
-    }
 }
 
 .search-label {
@@ -127,6 +119,14 @@ input.search {
     }
 }
 
+.login {
+    display: none;
+
+    @media only screen and (min-width: 890px) {
+        display: block;
+    }
+}
+
 .menu {
     grid-area: menu;
     text-align: right;