From a165fb98ada2768b842727ac4cd7026dbee81dce Mon Sep 17 00:00:00 2001 From: John Ryan Date: Mon, 16 Mar 2020 10:03:24 -0700 Subject: [PATCH] update samples_index UX (#371) - Use Google Sans - add brand colors - adjust spacing on elements - align MDC Chips to spec - update type labels to spec --- web/samples_index/lib/src/templates.dart | 8 +- .../logo_lockup_flutter_horizontal_wht_96.png | Bin 0 -> 10285 bytes web/samples_index/web/styles.scss | 118 +++++++++++++----- 3 files changed, 89 insertions(+), 37 deletions(-) create mode 100644 web/samples_index/web/images/logos/logo_lockup_flutter_horizontal_wht_96.png diff --git a/web/samples_index/lib/src/templates.dart b/web/samples_index/lib/src/templates.dart index e745bf7a6..83d58c9e1 100644 --- a/web/samples_index/lib/src/templates.dart +++ b/web/samples_index/lib/src/templates.dart @@ -33,7 +33,7 @@ String _indexHeader = ''' Flutter samples - + @@ -46,7 +46,7 @@ String _descriptionHeader = ''' Flutter samples - + @@ -57,7 +57,7 @@ String _descriptionHeader = ''' String _navbar = '''
- + Samples
@@ -134,7 +134,7 @@ String _backgroundImage(String url) => _escapeAttribute('background-image: url(\'$url\');'); String _indexCards(List samples) => samples.map(_indexCard).join(); String _indexCard(Sample sample) => ''' -
+
${_escapeElement(sample.type)}
diff --git a/web/samples_index/web/images/logos/logo_lockup_flutter_horizontal_wht_96.png b/web/samples_index/web/images/logos/logo_lockup_flutter_horizontal_wht_96.png new file mode 100644 index 0000000000000000000000000000000000000000..12338de79b8a943c84fdbf9a44fddd17d96dec0b GIT binary patch literal 10285 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

vJ!! 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 literal 0 HcmV?d00001 diff --git a/web/samples_index/web/styles.scss b/web/samples_index/web/styles.scss index f5d3d82ec..32869d7df 100644 --- a/web/samples_index/web/styles.scss +++ b/web/samples_index/web/styles.scss @@ -1,24 +1,47 @@ +// Copyright 2020 The Flutter team. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file + +// Flutter brand colors +$flutter-grey-900-color: #202124; +$flutter-grey-800-color: #3C4043; +$flutter-grey-700-color: #5F6368; +$flutter-grey-500-color: #5F6368; +$flutter-grey-300-color: #DADCE0; +$flutter-blue-700-color: #02569B; +$flutter-blue-600-color: #0175C2; +$flutter-secondary-400-color: #13B9FD; +$flutter-yellow: #FFC108; + // Material Design Web theme colors. Must be imported before importing // material-components-web.scss. -$mdc-theme-primary: #0175C2; -$mdc-theme-secondary: #FFC108; -//$mdc-theme-background: $playground-background-color; -//$mdc-theme-surface: $playground-background-color; -//$mdc-theme-error: $dark-red; +$mdc-theme-primary: $flutter-grey-500-color; +$mdc-theme-secondary: $flutter-blue-700-color; @import 'package:mdc_web/material-components-web'; -$dark: #202124; +// App colors +$navbar-background-color: #3D4043; +$dark-text-color: #202124; +$light-text-color: #3D4043; $background-color: #F8F9FA; -$grey: var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54)); +$text-color: $dark-text-color; +$card-border-color: #DBDCE0; +$type-label-border-color: #82868A; + +// Sizes $font-size-small: 0.875rem; $card-width: 300px; $mobile-width: 960px; $container-width: 960px; -$text-color: $dark; $footer-height: 96px; + +// Fonts $font: Roboto, sans-serif; +$title-font: Google Sans Display, Roboto, sans-serif; +$subtitle-font: Google Sans, Roboto, sans-serif; +// CSS Reset html, body { height: 100%; margin: 0; @@ -29,16 +52,9 @@ body { margin: 0; } -.content { - min-height: 100%; - >.container { - padding-bottom: $footer-height; - } -} - h1, h2, h3, h4, h5, h6 { color: $text-color; - font-family: $font; + font-family: $title-font; margin: 0; } @@ -81,13 +97,22 @@ a { display: none; } + +// Custom Styles +.content { + min-height: 100%; + >.container { + padding-bottom: $footer-height; + } +} + .navbar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; - background-color: $dark; + background-color: $navbar-background-color; color: white; padding: 16px 125px 16px 125px; margin-bottom: 48px; @@ -109,25 +134,27 @@ a { flex-direction: row; align-items: center; > * { - margin: 0 8px 0 8px; + margin: 0 8px 3px 8px; // adjusted vertically to align flutter logo text with "Samples" text } } .nav-items { + font-family: 'Google Sans', 'Roboto', sans-serif; @media screen and (max-width: $mobile-width) { display: none; } } span.title { - font-size: 28px; - font-weight: 300; + font-family: 'Google Sans Display', 'Roboto', sans-serif; + font-size: 26px; + letter-spacing: 0.5px; margin: 0; - color: #5DE0FD; + color: #13B9FD; } img { - height: 36px; + height: 32px; } a { @@ -145,7 +172,7 @@ a { justify-content: center; align-items: center; - background-color: $dark; + background-color: $dark-text-color; color: white; //padding: 36px 125px 36px 125px; height: $footer-height; @@ -186,6 +213,7 @@ a { flex-direction: row; height: 360px; overflow-x: scroll; + margin: 48px 0 48px 0; @media screen and (max-width: $mobile-width) { height: 240px; @@ -225,6 +253,20 @@ a { justify-content: center; } +.mdc-chip { + @include mdc-chip-fill-color(transparent); + @include mdc-chip-ink-color($flutter-grey-500-color); + @include mdc-chip-selected-ink-color($flutter-grey-500-color); +} + +.mdc-chip--selected { + font-weight: bold; + text-decoration: underline; + @include mdc-chip-fill-color(transparent); + @include mdc-chip-ink-color($flutter-grey-500-color); + @include mdc-chip-selected-ink-color($flutter-grey-500-color); +} + .mdc-card__media { background-position: top; } @@ -236,9 +278,10 @@ a { #search-bar { flex: 1; @include mdc-text-field-fill-color($background-color); + @include mdc-text-field-line-ripple-color($flutter-blue-600-color); + @include mdc-states-hover-opacity(0.0); @include mdc-states-focus-opacity(0.0); - } .grid { @@ -253,6 +296,7 @@ a { .demo-card { width: $card-width; margin: 12px; + border: 1px solid $card-border-color; @media screen and (max-width: $mobile-width) { margin-left: auto; margin-right: auto; @@ -263,6 +307,7 @@ a { .demo-card__title { font-family: $font; + color: $dark-text-color; margin: 0; } @@ -277,7 +322,7 @@ a { .demo-card__secondary { font-family: $font; padding: 0 1rem 8px; - color: $grey; + color: $light-text-color; } .demo-card__label { @@ -289,8 +334,8 @@ a { .type-label { font-family: $font; font-size: $font-size-small; - text-transform: uppercase; - color: $dark; + text-transform: capitalize; + color: $dark-text-color; background-color: rgba(255, 255, 255, .95); border-radius: 8px; padding: 7px; @@ -298,7 +343,11 @@ a { } .type-label-bordered { - border: 1px solid $dark; + color: $type-label-border-color; + border: 1px solid $type-label-border-color; + background-color: transparent; + padding: 4px; + font-size: $font-size-small; } .description-title-row { @@ -313,33 +362,36 @@ a { .tags-container { max-width: 400px; .tags-label { - color: $dark; + color: $dark-text-color; display: flex; flex-direction: row; align-items: center; justify-content: start; text-transform: uppercase; font-weight: bold; + margin-bottom: 6px; >span{ margin-left: 4px; } } .tags { - color: $grey; + color: $light-text-color; + line-height: 1.6em; + a { margin-left: 8px; margin-right: 8px; text-decoration: underline; - color: $dark; + color: $flutter-grey-900-color; &:active { - color: $dark; + color: $flutter-grey-900-color; } &:hover { - color: lighten($dark, 25%); + color: lighten($flutter-grey-900-color, 25%); } } }