diff --git a/.template-lintrc.js b/.template-lintrc.js index c6331e9310f..199228f87ad 100644 --- a/.template-lintrc.js +++ b/.template-lintrc.js @@ -2,4 +2,6 @@ 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 index 011ab30c63a..9ba1cd9efb9 100644 --- a/app/components/footer.module.css +++ b/app/components/footer.module.css @@ -11,6 +11,8 @@ } .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 index f531e589ae7..c515c3c00c5 100644 --- a/app/components/header.hbs +++ b/app/components/header.hbs @@ -1,145 +1,161 @@
- - -

crates.io

-
- -
- - - {{on-key 's' (focus '#cargo-desktop-search')}} - {{on-key 'S' (focus '#cargo-desktop-search')}} - {{on-key 'shift+s' (focus '#cargo-desktop-search')}} -
- - +
+ + + {{on-key 's' (focus '#cargo-desktop-search')}} + {{on-key 'S' (focus '#cargo-desktop-search')}} + {{on-key 'shift+s' (focus '#cargo-desktop-search')}} +
-
- {{#if this.session.currentUser}} - - - - {{ this.session.currentUser.name }} + + +
+ + + Menu + - Dashboard - Account Settings - Owner Invites - - - + Browse All Crates + {{#if this.session.currentUser}} + Dashboard + Account Settings + Owner Invites + + + + {{else}} + + + + {{/if}} - {{else}} - - {{/if}} -
+
-
- - - Menu - - - Browse All Crates - {{#if this.session.currentUser}} - Dashboard - Account Settings - Owner Invites - - - - {{else}} - - - - {{/if}} - - +
+ + +
\ No newline at end of file diff --git a/app/components/header.module.css b/app/components/header.module.css index 2856c36babf..b37d50a7fd0 100644 --- a/app/components/header.module.css +++ b/app/components/header.module.css @@ -1,69 +1,45 @@ .header { - display: grid; + display: flex; + justify-content: center; 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 login" auto - / auto minmax(150px, 400px) minmax(220px, 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: -10px 10px -10px -10px; + margin-right: 10px; } -.search-form { - grid-area: search-form; - margin-top: 15px; +.desktop-search-form { display: flex; flex-grow: 1; - @media only screen and (min-width: 551px) { - margin: 0 20px; + @media only screen and (max-width: 820px) { + display: none; } } @@ -72,6 +48,8 @@ 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'); @@ -88,6 +66,21 @@ input.search { } } +.mobile-search { + display: none; + grid-row: 2; + grid-column: span 3; + margin: 0 10px 10px; + + input.search { + margin: 0; + } + + @media only screen and (max-width: 820px) { + display: block; + } +} + .search-label { position: absolute; left: -10000px; @@ -108,31 +101,24 @@ input.search { } .nav { - grid-area: nav; - display: none; + display: flex; align-items: center; text-align: right; margin-right: 5px; - @media only screen and (min-width: 890px) { - display: flex; - } -} - -.login { - display: none; - - @media only screen and (min-width: 890px) { - display: block; + @media only screen and (max-width: 900px) { + display: none; } } .menu { - grid-area: menu; text-align: right; + margin-right: 5px; + flex-grow: 2; + display: none; - @media only screen and (min-width: 890px) { - display: none; + @media only screen and (max-width: 900px) { + display: block; } }