Auto merge of #4026 - Turbo87:hero-header, r=locks

Header: Implement `@hero` mode for the `index` route

<img width="1210" alt="Bildschirmfoto 2021-10-18 um 22 56 48" src="https://user-images.githubusercontent.com/141300/137805754-afcdda3a-13ef-4c70-8a3d-f85cc308acdc.png">

<img width="325" alt="Bildschirmfoto 2021-10-18 um 22 57 10" src="https://user-images.githubusercontent.com/141300/137805759-2592bb20-d2e3-488e-9759-73dc5957c0e5.png">

Author: bors

app/components/header.hbs

@@ -1,50 +1,17 @@
-<header local-class="header">
+<header local-class="header {{if @hero "hero"}}">
   <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="search-form" action='/search' role="search" {{on "submit" (prevent-default this.search)}} data-test-search-form>
-      {{! template-lint-disable require-input-label}}
-      {{! disabled due to https://github.com/ember-template-lint/ember-template-lint/issues/2141 }}
-      <input
-        type="text"
-        local-class="search-input-lg"
-        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
-        aria-label="Search"
-        data-test-search-input
-      >
+    <div local-class="search-form">
+      <h1 local-class="hero-title">
+        The Rust community&rsquo;s crate registry
+      </h1>
 
-      {{! Second input fields for narrow screens because CSS does not allow us to change the placeholder }}
-      <input
-        type="text"
-        local-class="search-input-sm"
-        name="q"
-        placeholder="Search"
-        value={{this.header.searchValue}}
-        oninput={{this.updateSearchValue}}
-        autocorrect="off"
-        required
-        aria-label="Search"
-      >
-
-      {{! Hidden submit button to enable enter-to-submit behavior for form with multiple inputs }}
-      <button type="submit" local-class="submit-button">Submit</button>
-
-      {{on-key 's' (focus '#cargo-desktop-search')}}
-      {{on-key 'S' (focus '#cargo-desktop-search')}}
-      {{on-key 'shift+s' (focus '#cargo-desktop-search')}}
-    </form>
+      <SearchForm @size={{if @hero "big"}} />
+    </div>
 
     <nav local-class='nav'>
       <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>

app/components/header.js

@@ -1,23 +1,6 @@
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 
 export default class Header extends Component {
-  @service header;
-  @service router;
   @service session;
-
-  @action updateSearchValue(event) {
-    let { value } = event.target;
-    this.header.searchValue = value;
-  }
-
-  @action search() {
-    this.router.transitionTo('search', {
-      queryParams: {
-        q: this.header.searchValue,
-        page: 1,
-      },
-    });
-  }
 }

app/components/header.module.css

@@ -32,6 +32,20 @@
             "search search" auto /
             auto 1fr;
     }
+
+    .hero & {
+        grid-template:
+            "logo nav" auto
+            "search search" auto /
+            auto 1fr;
+
+        @media only screen and (max-width: 900px) {
+            grid-template:
+                "logo menu" auto
+                "search search" auto /
+                auto 1fr;
+        }
+    }
 }
 
 .index-link {
@@ -54,55 +68,40 @@
 
 .search-form {
     grid-area: search;
-    display: flex;
-}
-
-.search-input {
-    font-size: 90%;
-    border: none;
-    color: black;
-    width: 100%;
-    padding: 5px 5px 5px 25px;
-    background-color: white;
-    background-image: url('/assets/search.png');
-    background-repeat: no-repeat;
-    background-position: 6px 6px;
-    background-size: 14px 15px;
-    border-radius: 15px;
-    box-shadow: none;
-    transition: box-shadow 150ms;
+    padding: 0 16px;
 
-    &:focus {
-        outline: none;
-        box-shadow: 0 0 0 4px var(--yellow500);
+    @media only screen and (max-width: 820px) {
+        padding: 10px 0;
     }
-}
 
-.search-input-lg {
-    composes: search-input;
-    margin-left: 16px;
-    margin-right: 16px;
+    .hero & {
+        justify-self: center;
+        padding: 40px 0 60px;
 
-    @media only screen and (max-width: 820px) {
-        display: none;
+        @media only screen and (max-width: 450px) {
+            padding: 40px 0 30px;
+        }
     }
 }
 
-.search-input-sm {
-    composes: search-input;
+.hero-title {
     display: none;
-    margin: 10px 0;
+    margin: 0 0 20px;
+    font-size: 45px;
+    color: #dfffdb;
+    text-align: center;
+
+    .hero & {
+        display: block;
+    }
 
     @media only screen and (max-width: 820px) {
-        display: unset;
+        font-size: 30px;
     }
-}
 
-.submit-button {
-    position: absolute;
-    visibility: hidden;
-    width: 0;
-    height: 0;
+    @media only screen and (max-width: 550px) {
+        font-size: 24px;
+    }
 }
 
 .sep {
@@ -119,7 +118,7 @@
     grid-area: nav;
     display: flex;
     align-items: center;
-    text-align: right;
+    justify-self: end;
 
     @media only screen and (max-width: 900px) {
         display: none;
@@ -128,7 +127,7 @@
 
 .menu {
     grid-area: menu;
-    text-align: right;
+    justify-self: end;
     display: none;
 
     @media only screen and (max-width: 900px) {

app/components/search-form.hbs

@@ -0,0 +1,47 @@
+<form
+  local-class="form {{if (eq @size "big") "size-big"}}"
+  action="/search"
+  role="search"
+  data-test-search-form
+  ...attributes
+  {{on "submit" (prevent-default this.search)}}
+>
+  {{! template-lint-disable require-input-label}}
+  {{! disabled due to https://github.com/ember-template-lint/ember-template-lint/issues/2141 }}
+  <input
+    type="text"
+    local-class="input-lg"
+    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
+    aria-label="Search"
+    data-test-search-input
+  >
+
+  {{! Second input fields for narrow screens because CSS does not allow us to change the placeholder }}
+  <input
+    type="text"
+    local-class="input-sm"
+    name="q"
+    placeholder="Search"
+    value={{this.header.searchValue}}
+    oninput={{this.updateSearchValue}}
+    autocorrect="off"
+    required
+    aria-label="Search"
+  >
+
+  {{! Hidden submit button to enable enter-to-submit behavior for form with multiple inputs }}
+  <button type="submit" local-class="submit-button">Submit</button>
+
+  {{on-key 's' (focus '#cargo-desktop-search')}}
+  {{on-key 'S' (focus '#cargo-desktop-search')}}
+  {{on-key 'shift+s' (focus '#cargo-desktop-search')}}
+</form>

app/components/search-form.js

@@ -0,0 +1,22 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class Header extends Component {
+  @service header;
+  @service router;
+
+  @action updateSearchValue(event) {
+    let { value } = event.target;
+    this.header.searchValue = value;
+  }
+
+  @action search() {
+    this.router.transitionTo('search', {
+      queryParams: {
+        q: this.header.searchValue,
+        page: 1,
+      },
+    });
+  }
+}

app/components/search-form.module.css

@@ -0,0 +1,55 @@
+.form {
+    display: flex;
+}
+
+.input {
+    font-size: 90%;
+    border: none;
+    color: black;
+    width: 100%;
+    padding: 5px 5px 5px 25px;
+    background-color: white;
+    background-image: url('/assets/search.png');
+    background-repeat: no-repeat;
+    background-position: 6px 6px;
+    background-size: 14px 15px;
+    border-radius: 15px;
+    box-shadow: none;
+    transition: box-shadow 150ms;
+
+    .size-big & {
+        font-size: 125%;
+        padding: 5px 5px 5px 35px;
+        background-position: 10px 7px;
+        background-size: 20px 21px;
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 4px var(--yellow500);
+    }
+}
+
+.input-lg {
+    composes: input;
+
+    @media only screen and (max-width: 820px) {
+        display: none;
+    }
+}
+
+.input-sm {
+    composes: input;
+    display: none;
+
+    @media only screen and (max-width: 820px) {
+        display: unset;
+    }
+}
+
+.submit-button {
+    position: absolute;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}

app/controllers/application.js

@@ -4,4 +4,9 @@ import { inject as service } from '@ember/service';
 export default class ApplicationController extends Controller {
   @service design;
   @service progress;
+  @service router;
+
+  get isIndex() {
+    return this.router.currentRouteName === 'index';
+  }
 }

app/styles/index.module.css

@@ -1,8 +1,13 @@
 .title-header {
     text-align: center;
     border-bottom: 5px solid var(--gray-border);
+    margin-top: 25px;
     padding-bottom: 40px;
 
+    @media only screen and (max-width: 570px) {
+        margin-top: 0;
+    }
+
     h1 {
         font-size: 50px;
         @media only screen and (max-width: 370px) {

app/templates/application.hbs

@@ -5,7 +5,7 @@
 <ProgressBar/>
 <NotificationContainer @position="top-right"/>
 
-<Header/>
+<Header @hero={{this.isIndex}} />
 
 <main local-class="main">
   <div local-class="inner-main">

app/templates/index.hbs

@@ -1,6 +1,4 @@
 <div local-class='title-header'>
-  <h1>The Rust community&rsquo;s crate registry</h1>
-
   <div local-class='links'>
     <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" local-class="hero-button" data-test-install-cargo-link>
       {{svg-jar "download-arrow" local-class="icon"}}