From b9495a1a2dfaba070f44154ed3e88996bcbf5355 Mon Sep 17 00:00:00 2001 From: Kruy Vanna Date: Sun, 3 Nov 2013 16:44:22 +0900 Subject: [PATCH 1/5] add assembled example --- index.jade | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/index.jade b/index.jade index 4310a2e..7242e8f 100644 --- a/index.jade +++ b/index.jade @@ -56,6 +56,16 @@ html a#slide-menu-button.topcoat-icon-button--large--quiet span.topcoat-icon--large.topcoat-icon--menu-stack #content.max-width + article.component + div(class="topcoat-navigation-bar") + div(class="topcoat-navigation-bar__item left quarter") + span(class="topcoat-icon-button--quiet") + i(class="topcoat-icon--menu-stack") + div(class="topcoat-navigation-bar__item center half") + span(class="topcoat-navigation-bar__title") + div(class="topcoat-navigation-bar__item right quarter") + span(class="topcoat-icon-button--quiet") + i(class="topcoat-icon--menu-stack") - each component in document.components article.component(id=component.slug) header From 594d1210ce566c49b52dca77bf255b4a462e56fe Mon Sep 17 00:00:00 2001 From: Kruy Vanna Date: Sun, 3 Nov 2013 18:07:16 +0900 Subject: [PATCH 2/5] add more controls to showcase --- index.jade | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 95 insertions(+), 4 deletions(-) diff --git a/index.jade b/index.jade index 7242e8f..d741002 100644 --- a/index.jade +++ b/index.jade @@ -56,16 +56,107 @@ html a#slide-menu-button.topcoat-icon-button--large--quiet span.topcoat-icon--large.topcoat-icon--menu-stack #content.max-width - article.component + article.component + div.showcase(style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px") div(class="topcoat-navigation-bar") div(class="topcoat-navigation-bar__item left quarter") span(class="topcoat-icon-button--quiet") - i(class="topcoat-icon--menu-stack") + span(class="topcoat-icon", style="background-color:#A5A7A7;") div(class="topcoat-navigation-bar__item center half") - span(class="topcoat-navigation-bar__title") + span(class="topcoat-navigation-bar__title") Title div(class="topcoat-navigation-bar__item right quarter") span(class="topcoat-icon-button--quiet") - i(class="topcoat-icon--menu-stack") + span(class="topcoat-icon", style="background-color:#A5A7A7;") + div.topcoat-list + h3.topcoat-list__header Category + ul.topcoat-list__container + li.topcoat-list__item Item + li.topcoat-list__item Item + h3.topcoat-list__header Category + ul.topcoat-list__container + li.topcoat-list__item Item + li.topcoat-list__item Item + li.topcoat-list__item Item + h3.topcoat-list__header Category + ul.topcoat-list__container + li.topcoat-list__item Item + li.topcoat-list__item Item + li.topcoat-list__item Item + li.topcoat-list__item Item + div.topcoat-tab-bar.full + label.topcoat-tab-bar__item + input(type="radio", name="tab-bar") + button.topcoat-tab-bar__button.full One + label.topcoat-tab-bar__item + input(type="radio", name="tab-bar") + button.topcoat-tab-bar__button.full Two + label.topcoat-tab-bar__item + input(type="radio", name="tab-bar") + button.topcoat-tab-bar__button.full Three + div.showcase(style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px") + div(class="topcoat-navigation-bar") + div(class="topcoat-navigation-bar__item left quarter") + span(class="topcoat-icon-button--quiet") + span(class="topcoat-icon", style="background-color:#A5A7A7;") + div(class="topcoat-navigation-bar__item center half") + span(class="topcoat-navigation-bar__title") Title + div(class="topcoat-navigation-bar__item right quarter") + span(class="topcoat-icon-button--quiet") + span(class="topcoat-icon", style="background-color:#A5A7A7;") + div.topcoat-list + h3.topcoat-list__header + input.topcoat-search-input.full(placeholder="Search") + h3.topcoat-list__header + input(type="text", class="topcoat-text-input full", placeholder="text", value="") + ul.topcoat-list__container + li.topcoat-list__item + span Notification + span.topcoat-notification(style="float: right") 1 + li.topcoat-list__item + span Radio Button + span(style="float: right") + label.topcoat-radio-button + input(type="radio", name="topcoat") + div.topcoat-radio-button__checkmark + label.topcoat-radio-button OR + input(type="radio", name="topcoat") + div.topcoat-radio-button__checkmark + li.topcoat-list__item + span Checkbox + span(style="float: right") + label.topcoat-checkbox + input(type="checkbox") + div.topcoat-checkbox__checkmark + li.topcoat-list__item + span Switch + span(style="float: right") + label.topcoat-switch + input(type="checkbox", class="topcoat-switch__input") + div.topcoat-switch__toggle + li.topcoat-list__item + span Range + span(style="float: right") + input(type="range", class="topcoat-range") + h3.topcoat-list__header Button + ul.topcoat-list__container + li.topcoat-list__item + button.topcoat-button Button + button.topcoat-button--cta Button cta + h3.topcoat-list__header Quiet Button + ul.topcoat-list__container + li.topcoat-list__item + button.topcoat-button--quiet Button + div.topcoat-tab-bar.full + label.topcoat-tab-bar__item + input(type="radio", name="tab-bar") + button.topcoat-tab-bar__button.full One + label.topcoat-tab-bar__item + input(type="radio", name="tab-bar") + button.topcoat-tab-bar__button.full Two + label.topcoat-tab-bar__item + input(type="radio", name="tab-bar") + button.topcoat-tab-bar__button.full Three + div(style="clear: both") - each component in document.components article.component(id=component.slug) header From 1307e5e08d6d587e2ee2b0afb45854c9061cc686 Mon Sep 17 00:00:00 2001 From: Kruy Vanna Date: Wed, 22 Jan 2014 12:01:03 +0900 Subject: [PATCH 3/5] add font-awesome --- index.jade | 1 + 1 file changed, 1 insertion(+) diff --git a/index.jade b/index.jade index d741002..805a614 100644 --- a/index.jade +++ b/index.jade @@ -13,6 +13,7 @@ html link(rel = 'stylesheet', type = 'text/css', href = document.relativeSource) link(rel = 'stylesheet', type = 'text/css', href = 'css/main.css') link(rel = 'stylesheet', type = 'text/css', href = 'css/brackets.css') + link(href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css", rel="stylesheet") //if lt IE 9 script(src = '//html5shiv.googlecode.com/svn/trunk/html5.js') body(class=tint) From a55c5f0e0234e709bbf3a3c171e8bbe0eb198674 Mon Sep 17 00:00:00 2001 From: Kruy Vanna Date: Wed, 22 Jan 2014 12:14:42 +0900 Subject: [PATCH 4/5] add font awesome icon to navigation bar --- index.jade | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/index.jade b/index.jade index 805a614..5edb720 100644 --- a/index.jade +++ b/index.jade @@ -61,13 +61,13 @@ html div.showcase(style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px") div(class="topcoat-navigation-bar") div(class="topcoat-navigation-bar__item left quarter") - span(class="topcoat-icon-button--quiet") - span(class="topcoat-icon", style="background-color:#A5A7A7;") + span(class="topcoat-icon-button--quiet", style="vertical-align: middle") + i.fa.fa-lg.fa-bars div(class="topcoat-navigation-bar__item center half") span(class="topcoat-navigation-bar__title") Title div(class="topcoat-navigation-bar__item right quarter") - span(class="topcoat-icon-button--quiet") - span(class="topcoat-icon", style="background-color:#A5A7A7;") + span(class="topcoat-icon-button--quiet", style="vertical-align: middle") + i.fa.fa-lg.fa-angle-right div.topcoat-list h3.topcoat-list__header Category ul.topcoat-list__container @@ -97,13 +97,13 @@ html div.showcase(style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px") div(class="topcoat-navigation-bar") div(class="topcoat-navigation-bar__item left quarter") - span(class="topcoat-icon-button--quiet") - span(class="topcoat-icon", style="background-color:#A5A7A7;") + span(class="topcoat-icon-button--quiet", style="vertical-align: middle") + i.fa.fa-lg.fa-bars div(class="topcoat-navigation-bar__item center half") span(class="topcoat-navigation-bar__title") Title div(class="topcoat-navigation-bar__item right quarter") - span(class="topcoat-icon-button--quiet") - span(class="topcoat-icon", style="background-color:#A5A7A7;") + span(class="topcoat-icon-button--quiet", style="vertical-align: middle") + i.fa.fa-lg.fa-angle-right div.topcoat-list h3.topcoat-list__header input.topcoat-search-input.full(placeholder="Search") From 74c06463187b52b78595171e27156b6a4ac69cad Mon Sep 17 00:00:00 2001 From: yutaro Date: Wed, 22 Jan 2014 12:22:14 +0900 Subject: [PATCH 5/5] fix font awesome link --- index.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.jade b/index.jade index 5edb720..4cc745d 100644 --- a/index.jade +++ b/index.jade @@ -13,7 +13,7 @@ html link(rel = 'stylesheet', type = 'text/css', href = document.relativeSource) link(rel = 'stylesheet', type = 'text/css', href = 'css/main.css') link(rel = 'stylesheet', type = 'text/css', href = 'css/brackets.css') - link(href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css", rel="stylesheet") + link(href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css", rel="stylesheet") //if lt IE 9 script(src = '//html5shiv.googlecode.com/svn/trunk/html5.js') body(class=tint)