From 01a0745dfd0f3d556bf9bf1001047ca324bd4190 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 21 Apr 2015 08:44:56 -0700 Subject: [PATCH] Update to guide icons and landing page --- public/_includes/_hover-card.jade | 8 + public/docs/js/latest/_data.json | 2 +- public/docs/js/latest/guide.jade | 10 +- public/docs/js/latest/index.jade | 4 +- public/resources/css/main.scss | 1 + public/resources/css/module/_hover-card.scss | 161 +++++++++++++++++++ 6 files changed, 180 insertions(+), 6 deletions(-) create mode 100644 public/_includes/_hover-card.jade create mode 100644 public/resources/css/module/_hover-card.scss diff --git a/public/_includes/_hover-card.jade b/public/_includes/_hover-card.jade new file mode 100644 index 0000000000..f89df10520 --- /dev/null +++ b/public/_includes/_hover-card.jade @@ -0,0 +1,8 @@ +a(class="hover-card is-button has-icon" href="#{url}" md-button) + span(class="hover-card-icon #{classes}") + h3 #{name} + + if cta + p #{cta} + else + p View #{name} Docs diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index 6eee226e0e..9d466fdfa3 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -12,7 +12,7 @@ }, "guide": { - "icon": "play-circle-fill", + "icon": "list", "title": "Guide", "banner": "Angular 2 is currently in Alpha Preview. For Angular 1.X Resources please visit Angularjs.org." }, diff --git a/public/docs/js/latest/guide.jade b/public/docs/js/latest/guide.jade index 20b27ba287..ede761c8d0 100644 --- a/public/docs/js/latest/guide.jade +++ b/public/docs/js/latest/guide.jade @@ -1,6 +1,10 @@ +number = 0; ul for page, slug in public.docs[current.path[1]][current.path[2]].guide._data - name = page.menuTitle || page.title - selected = current.path[4] == slug ? 'is-selected':'' if slug != '_listtype' - li #{slug} + url = "/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" + num = number++ + name = number + ' ' + page.title + + li.c8 + != partial("../../../_includes/_hover-card", { classes: 'icon', name: name, url: url }) diff --git a/public/docs/js/latest/index.jade b/public/docs/js/latest/index.jade index 3c539a014a..d5d690bb10 100644 --- a/public/docs/js/latest/index.jade +++ b/public/docs/js/latest/index.jade @@ -12,11 +12,11 @@ div.c4 div.c4 md-card.card md-card-content - h3.text-headline.text-uppercase Guide + 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 Resources + a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide.html" class="button button-primary" md-button) View Guide div.c4 diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index e2e450bf1e..197c9852df 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -33,6 +33,7 @@ @import 'module/alert'; @import 'module/callout'; @import 'module/card'; +@import 'module/hover-card'; @import 'module/modal'; @import 'module/shadow'; @import 'module/showcase'; diff --git a/public/resources/css/module/_hover-card.scss b/public/resources/css/module/_hover-card.scss new file mode 100644 index 0000000000..d8fca9fc30 --- /dev/null +++ b/public/resources/css/module/_hover-card.scss @@ -0,0 +1,161 @@ +.hover-card { + position: relative; + display: block; + cursor: pointer; + box-shadow: 0px 2px 2px rgba($coal, 0.24), 0px 0px 2px rgba($coal, 0.12); + border-radius: 2px; + background: $snow; + transition: all .3s; + padding: ($unit * 2) - 1; + margin: 0px 0px ($unit * 2) 0px; + border: $snow solid 1px; + text-decoration: none; + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + margin: ($unit * 2) 0px; + display: block; + } + + /* + * Hover Transitions + * + */ + + &:hover { + transform: translate3d(0,-2px,0); + box-shadow: 0px 4px 4px rgba($coal, 0.24), 0px 0px 4px rgba($coal, 0.12), 0px 6px 18px rgba($blueberry, 0.12); + border: rgba($blueberry, 0.56) solid 1px; + + .hover-card-icon { + color: rgba($blueberry, .87); + } + + h3 { + color: $silver; + } + + .icon-ruby { + background: url('/resources/images/icons/languages/ruby-icon-large-hover.png') 0px 0px no-repeat; + } + .icon-go { + background: url('/resources/images/icons/languages/go-icon-large-hover.png') 0px 0px no-repeat; + } + } + + + /* + * Icon Styles + * + */ + + &.has-icon { + padding-left: ($unit * 9) - 1; + } + + .hover-card-icon { + transition: all .4s; + position: absolute; + top: 18px; + left: 18px; + z-index: $layer-1; + font-size: 36px; + color: rgba($cloud, .56); + } + + .icon-Java { + top: 16px; + left: 20px; + font-size: 40px; + } + + .icon-python { + top: 22px; + left: 20px; + font-size: 34px; + } + + .icon-Nodejs { + top: 20px; + left: 20px; + font-size: 38px; + } + + .icon-go { + background: url('/resources/images/icons/languages/go-icon-large.png') 0px 0px no-repeat; + height: 32px; + width: 24px; + left: 23px; + top: 21px; + } + + .icon-ruby { + background: url('/resources/images/icons/languages/ruby-icon-large.png') 0px 0px no-repeat; + height: 30px; + width: 30px; + left: 21px; + top: 22px; + } + + .icon-php { + top: 26px; + left: 14px; + font-size: 25px; + } + + .icon-C { + top: 26px; + font-size: 24px; + } + + .icon-connection { + top: 24px; + font-size: 28px; + } + + + /* + * Text Styles + * + */ + + h3, + p { + transition: all .4s; + line-height: 24px; + margin: 0; + padding: 0px; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + h3 { + color: $metal; + text-transform: none; + font-size: 20px; + } + + p { + font-size: 11px; + text-transform: uppercase; + color: $blueberry; + } + + + /* + * Material Button Overrides + * + */ + + .md-ripple-container { + opacity: .48; + } + + &.md-button.md-default-theme:not([disabled]):hover, + &.md-button.md-default-theme:not([disabled]):focus { + background-color: $snow; + } +} \ No newline at end of file