From f38e6e7bd4b724c1b66c155c152c25ded1e31a89 Mon Sep 17 00:00:00 2001 From: Robert Messerle Date: Fri, 2 Oct 2015 14:09:38 -0700 Subject: [PATCH] cleans up various alignment and layout issues --- .../templates/module.template.html | 2 +- public/docs/dart/latest/guide/index.jade | 2 +- public/docs/dart/latest/index.jade | 44 +++++++++---------- public/docs/js/latest/api/index.jade | 4 +- public/docs/js/latest/guide/index.jade | 2 +- public/docs/js/latest/index.jade | 44 +++++++++---------- public/docs/ts/latest/guide/index.jade | 2 +- public/docs/ts/latest/index.jade | 44 +++++++++---------- public/resources/css/base/_type.scss | 15 +++++++ public/resources/css/module/_banner.scss | 2 +- public/resources/css/module/_dropdown.scss | 3 ++ public/resources/css/module/_hero.scss | 9 ++-- 12 files changed, 96 insertions(+), 77 deletions(-) diff --git a/public/api-builder/angular.io-package/templates/module.template.html b/public/api-builder/angular.io-package/templates/module.template.html index fa8008cd09..0664b8113e 100644 --- a/public/api-builder/angular.io-package/templates/module.template.html +++ b/public/api-builder/angular.io-package/templates/module.template.html @@ -10,7 +10,7 @@ ul if slug != 'index' - var url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html" - li.c8 + li != partial("../../../../../_includes/_hover-card", {name: page.title, url: url }) {% endblock %} \ No newline at end of file diff --git a/public/docs/dart/latest/guide/index.jade b/public/docs/dart/latest/guide/index.jade index c58e3477e6..cbcf5addb2 100644 --- a/public/docs/dart/latest/guide/index.jade +++ b/public/docs/dart/latest/guide/index.jade @@ -1,5 +1,5 @@ - var number = 1; -ul.is-plain.l-offset-page-header +ul.is-plain for page, slug in public.docs[current.path[1]][current.path[2]].guide._data if slug != '_listtype' && slug != 'index' diff --git a/public/docs/dart/latest/index.jade b/public/docs/dart/latest/index.jade index 1783f89814..37f877df95 100644 --- a/public/docs/dart/latest/index.jade +++ b/public/docs/dart/latest/index.jade @@ -1,30 +1,30 @@ +div.card-row(layout='row') + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase Quickstart + p.text-body Learn in 5 minutes -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase Quickstart - p.text-body Learn in 5 minutes - - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase Guide - p.text-body Step by Step Guide + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase Guide + p.text-body Step by Step Guide - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase API - p.text-body API 2.0 Preview + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase API + p.text-body API 2.0 Preview - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API diff --git a/public/docs/js/latest/api/index.jade b/public/docs/js/latest/api/index.jade index 3bfb06ab03..d63b1ce5eb 100644 --- a/public/docs/js/latest/api/index.jade +++ b/public/docs/js/latest/api/index.jade @@ -1,4 +1,4 @@ -.callout.is-helpful.l-offset-page-header +.callout.is-helpful header Developer Preview p. @@ -7,7 +7,7 @@ in the development community. If you're building a production app today, please use Angular 1.X. -ul.is-plain.l-offset-page-header +ul.is-plain for page, slug in public.docs[current.path[1]][current.path[2]].api if slug != 'index' && slug != '_contents' && slug != '_data' diff --git a/public/docs/js/latest/guide/index.jade b/public/docs/js/latest/guide/index.jade index c58e3477e6..cbcf5addb2 100644 --- a/public/docs/js/latest/guide/index.jade +++ b/public/docs/js/latest/guide/index.jade @@ -1,5 +1,5 @@ - var number = 1; -ul.is-plain.l-offset-page-header +ul.is-plain for page, slug in public.docs[current.path[1]][current.path[2]].guide._data if slug != '_listtype' && slug != 'index' diff --git a/public/docs/js/latest/index.jade b/public/docs/js/latest/index.jade index 08b8f840b0..fe8d3dd81a 100644 --- a/public/docs/js/latest/index.jade +++ b/public/docs/js/latest/index.jade @@ -1,30 +1,30 @@ +div.card-row(layout='row') + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase Quickstart + p.text-body Learn in 5 minutes -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase Quickstart - p.text-body Learn in 5 minutes - - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase Guide - p.text-body Step by Step Guide + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase Guide + p.text-body Step by Step Guide - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase API Preview - p.text-body API 2.0 Preview + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase API Preview + p.text-body API 2.0 Preview - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade index c58e3477e6..cbcf5addb2 100644 --- a/public/docs/ts/latest/guide/index.jade +++ b/public/docs/ts/latest/guide/index.jade @@ -1,5 +1,5 @@ - var number = 1; -ul.is-plain.l-offset-page-header +ul.is-plain for page, slug in public.docs[current.path[1]][current.path[2]].guide._data if slug != '_listtype' && slug != 'index' diff --git a/public/docs/ts/latest/index.jade b/public/docs/ts/latest/index.jade index 08b8f840b0..fe8d3dd81a 100644 --- a/public/docs/ts/latest/index.jade +++ b/public/docs/ts/latest/index.jade @@ -1,30 +1,30 @@ +div.card-row(layout='row') + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase Quickstart + p.text-body Learn in 5 minutes -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase Quickstart - p.text-body Learn in 5 minutes - - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase Guide - p.text-body Step by Step Guide + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase Guide + p.text-body Step by Step Guide - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide -div.c4 - md-card.card - md-card-content - h3.text-headline.text-uppercase API Preview - p.text-body API 2.0 Preview + div(flex) + md-card.card + md-card-content + h3.text-headline.text-uppercase API Preview + p.text-body API 2.0 Preview - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index f92bd6ca5c..e5b46673df 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -105,6 +105,7 @@ table th, font-weight: 400; opacity: .87; line-height: 28px; + padding: 0; &.is-plain { list-style-type: none; @@ -112,6 +113,11 @@ table th, } } +.docs-content ul, +.docs-content ol { + padding-left: ($unit * 4); +} + .l-sub-section p, table td { font-size: 14px; @@ -161,3 +167,12 @@ table td { .docs-content .l-sub-section aside { background: $snow; } + +.docs-content .card-row { + > div:first-child > .card { + margin-left: 0; + } + > div:last-child > .card { + margin-right: 0; + } +} \ No newline at end of file diff --git a/public/resources/css/module/_banner.scss b/public/resources/css/module/_banner.scss index 94659e9db6..7c1ddd38b7 100644 --- a/public/resources/css/module/_banner.scss +++ b/public/resources/css/module/_banner.scss @@ -6,7 +6,7 @@ .banner { background: $mist; - padding: ($unit * 4) ($unit * 4) ($unit * 4) ($unit * 12); + padding: ($unit * 4) ($unit * 6); min-height: $unit * 12; @media handheld and (max-width: $phone-breakpoint), diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss index 933fc58274..c916851469 100644 --- a/public/resources/css/module/_dropdown.scss +++ b/public/resources/css/module/_dropdown.scss @@ -12,6 +12,7 @@ cursor: pointer; position: relative; z-index: $layer-1; + opacity: 0.87; .icon { position: absolute; @@ -31,6 +32,8 @@ left: 0px; z-index: $layer-5; display: none; + border-radius: 3px; + overflow: hidden; ul { list-style-type: none; diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index dca1bf24dc..7c4dcf5105 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -1,4 +1,4 @@ -$hero-padding: $unit * 2; +$hero-padding: ($unit * 10) ($unit * 6) ($unit * 5); .hero { position: relative; @@ -14,6 +14,7 @@ $hero-padding: $unit * 2; &.is-large { height: 478px; + padding-top: ($unit * 2); text-align: center; @media handheld and (max-width: $phone-breakpoint), @@ -25,7 +26,7 @@ $hero-padding: $unit * 2; .hero-title { text-transform: uppercase; - margin: ($unit * 9) 0px 0px ($unit * 10); + margin: 0; opacity: .87; &.is-standard-case { @@ -40,8 +41,8 @@ $hero-padding: $unit * 2; } .hero-subtitle { - margin: 0px 0px 0px ($unit * 10); - opacity: .87; + margin: 0; + opacity: 1; @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint),