Skip to content

[dash] Updates for widgets pages #1459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fertolg merged 2 commits into from
Oct 15, 2018
Merged

[dash] Updates for widgets pages #1459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f99712
Updates for widgets pages
Oct 12, 2018
1d5187d
fixing broken links, adding new card markup to individual catalogues
Oct 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 36 additions & 4 deletions src/_assets/css/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
15 changes: 13 additions & 2 deletions src/_assets/css/_bootstrap_adjust.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/_assets/css/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

.btn {
@include media-breakpoint-up(md) {
margin-left: bs-spacer(4);
margin-right: bs-spacer(4);
}
}

Expand Down
8 changes: 1 addition & 7 deletions src/_assets/css/_showcase.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.showcase {
.card {
.card.card--app {
margin-bottom: bs-spacer(6);
padding: bs-spacer(8) bs-spacer(6);

Expand All @@ -25,13 +25,7 @@
}

.card-footer {
border: none;
background-color: transparent;
padding: 0;

> *:not(:last-child) {
margin-right: bs-spacer(4);
}
}
}

Expand Down
93 changes: 46 additions & 47 deletions src/_includes/catalogpage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 1 addition & 2 deletions src/_includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
32 changes: 17 additions & 15 deletions src/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
28 changes: 16 additions & 12 deletions src/api-and-reference/widgets/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
20 changes: 12 additions & 8 deletions src/development/ui/widgets-catalog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="/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="/api-and-reference/widgets/{{section.id}}">Visit</a>
</div>
</div>
{% endfor %}
</div>
8 changes: 4 additions & 4 deletions src/showcase/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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' %}
Expand All @@ -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">
Expand Down