From 7f9971229bd634c234348f671a06b071e4c205d7 Mon Sep 17 00:00:00 2001
From: Fernando Toledo <fguerrero@google.com>
Date: Fri, 12 Oct 2018 15:57:12 -0700
Subject: [PATCH 1/2] Updates for widgets pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- adds bootstrap cards for widget catalog and the widget index
- removes “flutter by google” nav logo
- reorganizes styles to keep cards more consistent across different pages (showcase, widgets, etc).
---
 src/_assets/css/_base.scss             | 40 +++++++++++++++++++++++---
 src/_assets/css/_bootstrap_adjust.scss | 15 ++++++++--
 src/_assets/css/_header.scss           |  2 +-
 src/_assets/css/_showcase.scss         |  8 +-----
 src/_includes/header.html              |  3 +-
 src/_layouts/default.html              | 32 +++++++++++----------
 src/api-and-reference/widgets/index.md | 28 ++++++++++--------
 src/development/ui/widgets-catalog.md  | 20 +++++++------
 src/showcase/index.md                  |  8 +++---
 9 files changed, 101 insertions(+), 55 deletions(-)

diff --git a/src/_assets/css/_base.scss b/src/_assets/css/_base.scss
index 14ef94133a0..31974e22530 100644
--- a/src/_assets/css/_base.scss
+++ b/src/_assets/css/_base.scss
@@ -21,10 +21,42 @@ dd {
   margin-bottom: .75rem;
 }
 
-.card-title {
-  font-family: $site-font-family-alt;
-  font-size: $font-size-lg;
-  margin-bottom: bs-spacer(2);
+.card-deck.card-deck--responsive {
+  .card {
+    flex: 0 0 calc((100% / 3) - #{bs-spacer(4)});
+    margin-bottom: bs-spacer(4);
+  }
+}
+
+.card-footer.card-footer--transparent {
+  border: none;
+  background-color: transparent;
+
+}
+
+.card-footer.card-footer--links {
+  > *:not(:last-child) {
+    margin-right: bs-spacer(4);
+  }
+}
+
+.card-image-holder {
+  align-items: center;
+  display: flex;
+  height: 200px;
+  justify-content: center;
+
+  img {
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+  }
+
+  svg {
+    height: 100%;
+    width: 100%;
+  }
 }
 
 .fixed-col {
diff --git a/src/_assets/css/_bootstrap_adjust.scss b/src/_assets/css/_bootstrap_adjust.scss
index d8905d0c921..6d62fbffed7 100644
--- a/src/_assets/css/_bootstrap_adjust.scss
+++ b/src/_assets/css/_bootstrap_adjust.scss
@@ -20,6 +20,12 @@ a.card {
   }
 }
 
+.card-title {
+  font-family: $site-font-family-alt;
+  font-size: $font-size-lg;
+  margin-bottom: bs-spacer(2);
+}
+
 .breadcrumb {
   align-items: center;
 }
@@ -57,9 +63,14 @@ a.card {
   padding: bs-spacer(4) 0;
 }
 
-.nav-tabs .nav-link.active {
+.nav-tabs .nav-link,
+.nav-tabs .nav-link:hover {
   border: none;
-  border-bottom: 2px solid $site-color-primary;
+  border-bottom: 2px solid transparent;
+}
+
+.nav-tabs .nav-link.active {
+  border-color: $site-color-primary;
 }
 
 @mixin pre-defaults {
diff --git a/src/_assets/css/_header.scss b/src/_assets/css/_header.scss
index 68758e4df24..68fa58efdf6 100644
--- a/src/_assets/css/_header.scss
+++ b/src/_assets/css/_header.scss
@@ -30,7 +30,7 @@
 
     .btn {
       @include media-breakpoint-up(md) {
-        margin-left: bs-spacer(4);
+        margin-right: bs-spacer(4);
       }
     }
 
diff --git a/src/_assets/css/_showcase.scss b/src/_assets/css/_showcase.scss
index 6fabf338ae0..12f3dd5810d 100644
--- a/src/_assets/css/_showcase.scss
+++ b/src/_assets/css/_showcase.scss
@@ -1,5 +1,5 @@
 .showcase {
-  .card {
+  .card.card--app {
     margin-bottom: bs-spacer(6);
     padding: bs-spacer(8) bs-spacer(6);
 
@@ -25,13 +25,7 @@
     }
 
     .card-footer {
-      border: none;
-      background-color: transparent;
       padding: 0;
-
-      > *:not(:last-child) {
-        margin-right: bs-spacer(4);
-      }
     }
   }
 
diff --git a/src/_includes/header.html b/src/_includes/header.html
index dc7ab6644a6..63f532ea27d 100644
--- a/src/_includes/header.html
+++ b/src/_includes/header.html
@@ -7,8 +7,7 @@
     </button>
 
     <a class="navbar-brand" href="/">
-      {% asset 'flutter-lockup_w_tagline.svg' alt='Flutter by Google' height="37" width="217" class="d-none d-lg-inline-block align-middle" %}
-      {% asset 'flutter-lockup.svg' alt='Flutter by Google' height="37" width="129" class="d-lg-none align-middle" %}
+      {% asset 'flutter-lockup.svg' alt='Flutter by Google' height="37" width="129" class="align-middle" %}
     </a>
 
     <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
index 2c2bd6f0796..eb529d3176f 100644
--- a/src/_layouts/default.html
+++ b/src/_layouts/default.html
@@ -4,10 +4,10 @@
 
 {% assign sidebar-col = 'col-12 col-md-3 col-xl-2' -%}
 {% if page.toc -%}
-  {% assign main-col = 'col-12 col-md-9 offset-md-3 col-xl-8 offset-xl-2' -%}
+  {% assign main-col = 'col-12 col-md-9 offset-md-3 col-xl-8 offset-xl-2 col-xxl-8 offset-xxl-2' -%}
   {% comment %}Side toc is col-xl-2{% endcomment -%}
 {% else -%}
-  {% assign main-col = 'col-12 col-md-9 offset-md-3 col-xl-10 offset-xl-2' -%}
+  {% assign main-col = 'col-12 col-md-9 offset-md-3 col-xl-10 offset-xl-2 col-xxl-8 offset-xxl-2' -%}
 {% endif -%}
 
 <div class="container-fluid">
@@ -19,20 +19,22 @@
       {% include toc.html kind="side" class="fixed-col col-xl-2 order-3" %}
     {% endif -%}
     <main class="site-content {{main-col}}" role="main">
-      {% include banner.html -%}
-      {% include next-prev-nav.html %}
-      <header class="site-content__title">
-        {% include shared/page-github-links.html %}
-        <h1>{{ page.title }}</h1>
-        {% if page.show_breadcrumbs -%}
-          {% include shared/breadcrumbs.html %}
+      <div class="container">
+        {% include banner.html -%}
+        {% include next-prev-nav.html %}
+        <header class="site-content__title">
+          {% include shared/page-github-links.html %}
+          <h1>{{ page.title }}</h1>
+          {% if page.show_breadcrumbs -%}
+            {% include shared/breadcrumbs.html %}
+          {% endif -%}
+        </header>
+        {% if page.toc -%}
+          {% include toc.html kind="inline" %}
         {% endif -%}
-      </header>
-      {% if page.toc -%}
-        {% include toc.html kind="inline" %}
-      {% endif -%}
-      {{ content | inject_anchors }}
-      {% include next-prev-nav.html %}
+        {{ content | inject_anchors }}
+        {% include next-prev-nav.html %}
+      </div>
     </main>
   </div>
 </div>
diff --git a/src/api-and-reference/widgets/index.md b/src/api-and-reference/widgets/index.md
index 5e5cc9afa46..51aab4dbc12 100644
--- a/src/api-and-reference/widgets/index.md
+++ b/src/api-and-reference/widgets/index.md
@@ -9,15 +9,19 @@ toc: true
 
 This is an alphabetical list of nearly every widget that is bundled with Flutter. You can also <a href="/development/ui/widgets-catalog">browse widgets by category.
 
-<ul class="cards">
-  {% for comp in sorted %}
-  <li class="cards__item">
-      <div class="catalog-entry">
-          <div class="catalog-image-holder">{{comp.image}}</div>
-          <h3>{{comp.name}}</h3>
-          <p class="scrollable-description"> {{comp.description}} </p>
-          <p><a href="{{comp.link}}">Documentation</a></p><div class="clear"></div>
-      </div>
-  </li>
-  {% endfor %}
-</ul>
+<div class="card-deck card-deck--responsive">
+{% for comp in sorted %}
+    <div class="card">
+        <div class="card-image-holder">
+            {{comp.image}}
+        </div>
+        <div class="card-body">
+            <a href="{{comp.link}}"><header class="card-title">{{comp.name}}</header></a>
+            <p class="card-text">{{comp.description}}</p>
+        </div>
+        <div class="card-footer card-footer--transparent">
+            <a href="{{comp.link}}">Documentation</a>
+        </div>
+    </div>
+{% endfor %}
+</div>
diff --git a/src/development/ui/widgets-catalog.md b/src/development/ui/widgets-catalog.md
index d7e7074b98a..261c44253d8 100644
--- a/src/development/ui/widgets-catalog.md
+++ b/src/development/ui/widgets-catalog.md
@@ -4,15 +4,19 @@ toc: false
 ---
 
 Create beautiful apps faster with Flutter's collection of visual, structural,
-platform, and interactive widgets.
-
-In addition to browsing widgets by category,
+platform, and interactive widgets. In addition to browsing widgets by category,
 you can also see all the widgets in the [Flutter widget index](/api-and-reference/widgets).
 
+<div class="card-deck card-deck--responsive">
 {% for section in site.data.catalog.index %}
-- ### [{{section.name}}](/api-and-reference/widgets/{{section.id}})
-  {:.catalog-category-title}
-
-  {{section.description}}
-{:.card}
+    <div class="card">
+        <div class="card-body">
+            <a href="/development/ui/widgets/{{section.id}}"><header class="card-title">{{section.name}}</header></a>
+            <p class="card-text">{{section.description}}</p>
+        </div>
+        <div class="card-footer card-footer--transparent">
+            <a href="/development/ui/widgets/{{section.id}}">Visit</a>
+        </div>
+    </div>
 {% endfor %}
+</div>
diff --git a/src/showcase/index.md b/src/showcase/index.md
index 5a6e0ad5fa3..ca815626904 100644
--- a/src/showcase/index.md
+++ b/src/showcase/index.md
@@ -11,7 +11,7 @@ toc: false
         <div class="container">
             <div class="row">
                 <div class="col-md-7 offset-md-5 col-lg-5 offset-lg-6 col-xl-4 offset-xl-7">
-                    <div class="card">
+                    <div class="card card--app">
                         <div class="card-body">
                             <h2 class="card-category">Featured</h2>
                             <h3>Hamilton Musical</h3>
@@ -20,7 +20,7 @@ toc: false
                             videos, a trivia game, merchandise store, and more.
                             </p>
                         </div>
-                        <div class="card-footer">
+                        <div class="card-footer card-footer--transparent card-footer--links">
                             <a class="btn btn-link" href="https://blog.goposse.com/rise-up-the-story-of-how-the-hamilton-app-uses-flutter-to-do-more-for-its-fans-1d9cd76f95f1" target="_blank">Learn more</a>
                             <button class="btn btn-link btn-icon d-inline-flex" type="button" data-toggle="modal" data-target="#videoModal"><i class="material-icons">play_circle_filled</i> Watch the video</button>
                         </div>
@@ -48,7 +48,7 @@ toc: false
             {% if modulo3 == '0' %}
                 <div class="showcase__apps__cards text-left card-deck flex-column flex-lg-row">
             {% endif %}
-                    <div class="card">
+                    <div class="card card--app">
                         <div class="card-header">
                             {% if case.logo_src %}
                                 {% asset '{{ case.logo_src }}' class='showcase__apps__logo' %}
@@ -58,7 +58,7 @@ toc: false
                             <h3>{{ case.name }}</h3>
                             <p>{{ case.description }}</p>
                         </div>
-                        <div class="card-footer">
+                        <div class="card-footer card-footer--transparent card-footer--links">
                             {% if case.learn_more_link %}<a href="{{ case.learn_more_link }}">Learn more</a>{% endif %}
                             {% if case.play_store_link or case.app_store_link %}
                                 <span class="dropdown">

From 1d5187d97698edfd287817417ecf476f7e290ae9 Mon Sep 17 00:00:00 2001
From: Fernando Toledo <fguerrero@google.com>
Date: Mon, 15 Oct 2018 15:51:32 -0700
Subject: [PATCH 2/2] fixing broken links, adding new card markup to individual
 catalogues

---
 src/_includes/catalogpage.html        | 93 +++++++++++++--------------
 src/development/ui/widgets-catalog.md |  4 +-
 2 files changed, 48 insertions(+), 49 deletions(-)

diff --git a/src/_includes/catalogpage.html b/src/_includes/catalogpage.html
index 9fac44f9a5b..9513f4082fd 100644
--- a/src/_includes/catalogpage.html
+++ b/src/_includes/catalogpage.html
@@ -1,66 +1,65 @@
 <div class="catalog">
     {% for section in site.data.catalog.index %}
-    {% if section.name contains include.category %}
-    <div class="category-description"><p>{{section.description}}</p></div>
-    {% endif %}
+        {% if section.name contains include.category %}
+            <div class="category-description"><p>{{section.description}}</p></div>
+        {% endif %}
     {% endfor %}
 
     <ul>
         {% for category in site.data.catalog.index %}
-        {% if category.name == include.category %}
-        {% for sub in category.subcategories %}
-        <li><a href="#{{sub.name}}">{{sub.name}}</a></li>
-        {% endfor %}
-        {% endif %}
+            {% if category.name == include.category %}
+                {% for sub in category.subcategories %}
+                    <li><a href="#{{sub.name}}">{{sub.name}}</a></li>
+                {% endfor %}
+            {% endif %}
         {% endfor %}
     </ul>
 
     <p>See more widgets in the <a href="/development/ui/widgets-catalog">Flutter widget catalog</a>.</p>
 
-    <ul class="cards">
+    <div class="card-deck card-deck--responsive">
         {% for comp in site.data.catalog.widgets %}
-        {% if comp.categories contains include.category %}
-        <li class="cards__item">
-            <div class="catalog-entry">
-                <div class="catalog-image-holder">{{comp.image}}</div>
-                <h3>{{comp.name}}</h3>
-                <p class="scrollable-description"> {{comp.description}} </p>
-                <p>
-                    <a href="{{comp.link}}">Documentation</a>
-                    {% if comp.sample %}, <a href="/catalog/samples/{{comp.sample}}">Samples</a>{% endif %}
-                </p>
-                <div class="clear"></div>
-            </div>
-        </li>
-        {% endif %}
+            {% if comp.categories contains include.category %}
+                <div class="card">
+                    <div class="card-image-holder">
+                        {{comp.image}}
+                    </div>
+                    <div class="card-body">
+                        <a href="{{comp.link}}"><header class="card-title">{{comp.name}}</header></a>
+                        <p class="card-text">{{comp.description}}</p>
+                    </div>
+                    <div class="card-footer card-footer--transparent">
+                        <a href="{{comp.link}}">Documentation</a>
+                    </div>
+                </div>
+            {% endif %}
         {% endfor %}
-    </ul>
-
+    </div>
 
     {% for category in site.data.catalog.index %}
-    {% if category.name == include.category %}
-    {% for sub in category.subcategories %}
-    <h1 id="{{sub.name}}">{{sub.name}}</h1>
-    <ul class="cards">
-        {% for comp in site.data.catalog.widgets %}
-        {% if comp.subcategories contains sub.name %}
-        <li class="cards__item">
-            <div class="catalog-entry" >
-                <div class="catalog-image-holder">{{comp.image}}</div>
-                <h3>{{comp.name}}</h3>
-                <p class="scrollable-description"> {{comp.description}} </p>
-                <p>
-                    <a href="{{comp.link}}">Documentation</a>
-                    {% if comp.sample %}, <a href="/catalog/samples/{{comp.sample}}">Samples</a>{% endif %}
-                </p>
-                <div class="clear"></div>
-            </div>
-        </li>
+        {% if category.name == include.category %}
+            {% for sub in category.subcategories %}
+                <h2 id="{{sub.name}}">{{sub.name}}</h2>
+                <div class="card-deck card-deck--responsive">
+                    {% for comp in site.data.catalog.widgets %}
+                        {% if comp.subcategories contains sub.name %}
+                            <div class="card">
+                                <div class="card-image-holder">
+                                    {{comp.image}}
+                                </div>
+                                <div class="card-body">
+                                    <a href="{{comp.link}}"><header class="card-title">{{comp.name}}</header></a>
+                                    <p class="card-text">{{comp.description}}</p>
+                                </div>
+                                <div class="card-footer card-footer--transparent">
+                                    <a href="{{comp.link}}">Documentation</a>
+                                </div>
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            {% endfor %}
         {% endif %}
-        {% endfor %}
-    </ul>
-    {% endfor %}
-    {% endif %}
     {% endfor %}
 
     <p>See more widgets in the <a href="/development/ui/widgets-catalog">Flutter widget catalog</a>.</p>
diff --git a/src/development/ui/widgets-catalog.md b/src/development/ui/widgets-catalog.md
index 261c44253d8..5ca9bbb595c 100644
--- a/src/development/ui/widgets-catalog.md
+++ b/src/development/ui/widgets-catalog.md
@@ -11,11 +11,11 @@ you can also see all the widgets in the [Flutter widget index](/api-and-referenc
 {% for section in site.data.catalog.index %}
     <div class="card">
         <div class="card-body">
-            <a href="/development/ui/widgets/{{section.id}}"><header class="card-title">{{section.name}}</header></a>
+            <a href="/api-and-reference/widgets/{{section.id}}"><header class="card-title">{{section.name}}</header></a>
             <p class="card-text">{{section.description}}</p>
         </div>
         <div class="card-footer card-footer--transparent">
-            <a href="/development/ui/widgets/{{section.id}}">Visit</a>
+            <a href="/api-and-reference/widgets/{{section.id}}">Visit</a>
         </div>
     </div>
 {% endfor %}