Auto merge of #3681 - Turbo87:big-head, r=pichfl

bors · bors · commit 529c446c5ba5 · 2021-06-08T08:28:37.000Z
Use full page width for `Header` and `Footer` components This PR removes the `width-limit` from the header and footer on all pages. This will allow us to use wider layouts in the future for certain pages that would benefit from having more space (e.g. crate details page). The PR also refactors the `Header` component at the same time to use a CSS grid to get rid of the duplicate search form. <img width="508" alt="Bildschirmfoto 2021-06-06 um 11 47 31" src="https://user-images.githubusercontent.com/141300/120920046-1e09a800-c6bd-11eb-8fb3-2e77a612f74e.png"> <img width="811" alt="Bildschirmfoto 2021-06-06 um 11 47 22" src="https://user-images.githubusercontent.com/141300/120920048-1fd36b80-c6bd-11eb-8f0d-d6d1c6584403.png"> <img width="911" alt="Bildschirmfoto 2021-06-06 um 11 47 14" src="https://user-images.githubusercontent.com/141300/120920049-206c0200-c6bd-11eb-8e6c-41dfddc8fa3b.png"> <img width="1743" alt="Bildschirmfoto 2021-06-06 um 11 47 00" src="https://user-images.githubusercontent.com/141300/120920051-21049880-c6bd-11eb-9497-f47ceef3869a.png"> <img width="1742" alt="Bildschirmfoto 2021-06-06 um 11 46 47" src="https://user-images.githubusercontent.com/141300/120920052-2235c580-c6bd-11eb-9f66-3c7434f78067.png">
diff --git 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/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;
 
diff --git a/app/components/header.hbs b/app/components/header.hbs
@@ -1,161 +1,145 @@
 <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>
+  <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>
 
-          <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>
+      <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>
+  </nav>
 
-    <div local-class='menu'>
-      <Dropdown as |dd|>
-        <dd.Trigger local-class="dropdown-button">
-          Menu
+  <div local-class="login">
+    {{#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}}
+  </div>
+
+  <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>
diff --git a/app/components/header.module.css b/app/components/header.module.css

Original file line number	Diff line number	Diff line change
`@@ -11,8 +11,6 @@`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.after-main-links {`
`14`		`- composes: width-limit from '../styles/application.module.css';`
`15`		`-`
`16`	`14`	`margin: 40px;`
`17`	`15`	`text-align: center;`
`18`	`16`