From 5a98cb63f05dc7144a6979ea8caea02a3f52d4d0 Mon Sep 17 00:00:00 2001 From: chomik Date: Tue, 2 Apr 2019 18:13:05 +0200 Subject: [PATCH] card components --- pages/_includes/cards/card.html | 19 +- pages/_includes/cards/small-stats-3.html | 3 +- pages/_includes/ui/switch.html | 4 + pages/cards-2.html | 350 ++++++++++++++++++++ pages/cards.html | 398 +++-------------------- scss/_variables.scss | 2 +- scss/layout/_page.scss | 3 +- scss/ui/_cards.scss | 17 +- 8 files changed, 437 insertions(+), 359 deletions(-) create mode 100644 pages/_includes/ui/switch.html create mode 100644 pages/cards-2.html diff --git a/pages/_includes/cards/card.html b/pages/_includes/cards/card.html index fdd4a948d..7872fc5fd 100644 --- a/pages/_includes/cards/card.html +++ b/pages/_includes/cards/card.html @@ -23,18 +23,15 @@ Action 1 Action 2 {% elsif include.show-switch %} - + {% include ui/switch.html checked=true %} {% elsif include.options %} - {{ include.options }} + {{ include.options }} {% else %} - + {% include ui/icon.html icon="chevron-up" %} {% if include.show-fullscreen %} - + {% include ui/icon.html icon="maximize" %} {% endif %} - + {% include ui/icon.html icon="x" %} {% endif %} {% endunless %} @@ -63,4 +60,8 @@ This is standard card footer {% endif %} - \ No newline at end of file + + {% if include.status-bottom %} +
+ {% endif %} + diff --git a/pages/_includes/cards/small-stats-3.html b/pages/_includes/cards/small-stats-3.html index 0005852ef..27465bfe8 100644 --- a/pages/_includes/cards/small-stats-3.html +++ b/pages/_includes/cards/small-stats-3.html @@ -1,12 +1,13 @@
+ {{ include.percentage }}% + {% if include.percentage > 0 %} {% include ui/icon.html icon="arrow-up-right" %} {% elsif include.percentage < 0 %} {% include ui/icon.html icon="arrow-down-right" %} {% endif %} - {{ include.percentage }}%
{{ include.number }}
{{ include.title }}
diff --git a/pages/_includes/ui/switch.html b/pages/_includes/ui/switch.html new file mode 100644 index 000000000..d0ec85dc9 --- /dev/null +++ b/pages/_includes/ui/switch.html @@ -0,0 +1,4 @@ + diff --git a/pages/cards-2.html b/pages/cards-2.html new file mode 100644 index 000000000..a570b4ecc --- /dev/null +++ b/pages/cards-2.html @@ -0,0 +1,350 @@ +--- +title: Cards +page-title: Cards +--- + +{% assign photos = site.data.photos | where: "horizontal", true %} +
+ +
+
+
+ +
+ MUSIC +
+
+
+
+
+
+ + Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film + + What Not To Wear: The Hats, Scarves In History +
+
Feb 22, 11:38 am
+
+
+
+
+
+
+ + +
+ MUSIC +
+
+
+
+
+
+ + It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes + + What Not To Wear: The Hats, Scarves In History +
+
+
Feb 28, 10:54 am
+
+
+
+
+
+
+
+ + +
+ TOP5 +
+
+
+
+
+
+ + The Tallest Unclimbed Mountains In The World + +
+
+
Feb 3, 4:45 am
+
+
+
+
+
+
+
+ + +
+ Music +
+
+
+
+
+
+ + Congrats on the Lifestyle! The Dark Side to Influencer Marketing + +
+
+
Feb 6, 8:18 am
+
+
+
+
+
+
+
+ + +
+ TOP5 +
+
+
+
+
+
+ + The Tallest Unclimbed Mountains In The World + +
+
+
Feb 26, 2:17 am
+
+
+
+
+
+
+
+ + +
+ Fashion +
+
+
+
+
+
+ + What Not To Wear: The Hats, Scarves In History + +
+
+
Feb 23, 11:15 am
+
+
+
+
+
+
+
+ + +
+ AI +
+
+
+
+
+
+ + How AI Helps Recruiters Track Jobseekers’ Emotions + +
+
+
Feb 11, 6:54 am
+
+
+
+
+ +
+
+
+ + +
+
+
+
+
+
+ + Fashion + +
+ + What Not To Wear: The Hats, Scarves In History + +
+
+
Feb 26, 1:49 am
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ + AI + +
+ + How AI Helps Recruiters Track Jobseekers’ Emotions + +
+
+
Feb 16, 11:18 am
+
+
+
+
+ +
+
+ + {% for photo in photos limit: 3 offset: 10 %} +
+
+
+ + +
+
+

{{ photo.title }}

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi + architecto commodi, cum, dicta dignissimos distinctio eos

+

+ Last updated 3 mins ago +

+
+
+
+ {% endfor %} +
+
+ +
+
+ {% for photo in photos limit: 3 offset: 13 %} +
+
+ + +
+
+
{{ photo.title }}
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+

+ Last updated 3 mins ago +

+
+
+ {% endfor %} +
+
+ +
+
+
+
+ Card image cap +
+
Card title that wraps to a new line
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ + Someone famous in Source Title + +
+ +
+
+ +
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional + content.

+

+ Last updated 3 mins ago +

+
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

+
+ Someone famous in Source Title +
+ +
+
+
+
Card title
+

This card has supporting text below as a natural lead-in to additional + content.

+

+ Last updated 3 mins ago +

+
+
+
+ +
+
+ Card image +
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ Someone famous in Source Title +
+ +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This card has even longer content than the first to show that equal + height + action.

+

+ Last updated 3 mins ago +

+
+
+
+ +
+
+ +
diff --git a/pages/cards.html b/pages/cards.html index a570b4ecc..bea21939a 100644 --- a/pages/cards.html +++ b/pages/cards.html @@ -1,350 +1,60 @@ --- -title: Cards page-title: Cards --- -{% assign photos = site.data.photos | where: "horizontal", true %}
- -
-
-
- -
- MUSIC -
-
-
-
-
-
- - Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film - - What Not To Wear: The Hats, Scarves In History -
-
Feb 22, 11:38 am
-
-
-
-
-
-
- - -
- MUSIC -
-
-
-
-
-
- - It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes - - What Not To Wear: The Hats, Scarves In History -
-
-
Feb 28, 10:54 am
-
-
-
-
-
-
-
- - -
- TOP5 -
-
-
-
-
-
- - The Tallest Unclimbed Mountains In The World - -
-
-
Feb 3, 4:45 am
-
-
-
-
-
-
-
- - -
- Music -
-
-
-
-
-
- - Congrats on the Lifestyle! The Dark Side to Influencer Marketing - -
-
-
Feb 6, 8:18 am
-
-
-
-
-
-
-
- - -
- TOP5 -
-
-
-
-
-
- - The Tallest Unclimbed Mountains In The World - -
-
-
Feb 26, 2:17 am
-
-
-
-
-
-
-
- - -
- Fashion -
-
-
-
-
-
- - What Not To Wear: The Hats, Scarves In History - -
-
-
Feb 23, 11:15 am
-
-
-
-
-
-
-
- - -
- AI -
-
-
-
-
-
- - How AI Helps Recruiters Track Jobseekers’ Emotions - -
-
-
Feb 11, 6:54 am
-
-
-
-
- -
-
-
- - -
-
-
-
-
-
- - Fashion - -
- - What Not To Wear: The Hats, Scarves In History - -
-
-
Feb 26, 1:49 am
-
-
-
-
-
-
-
- - -
-
-
-
-
-
- - AI - -
- - How AI Helps Recruiters Track Jobseekers’ Emotions - -
-
-
Feb 16, 11:18 am
-
-
-
-
- -
-
- - {% for photo in photos limit: 3 offset: 10 %} -
-
-
- - -
-
-

{{ photo.title }}

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi - architecto commodi, cum, dicta dignissimos distinctio eos

-

- Last updated 3 mins ago -

-
-
-
- {% endfor %} -
-
- -
-
- {% for photo in photos limit: 3 offset: 13 %} -
-
- - -
-
-
{{ photo.title }}
-

This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer.

-

- Last updated 3 mins ago -

-
-
- {% endfor %} -
-
- -
-
-
-
- Card image cap -
-
Card title that wraps to a new line
-

This is a longer card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer.

-
-
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in Source Title - -
- -
-
- -
-
- Card image cap -
-
Card title
-

This card has supporting text below as a natural lead-in to additional - content.

-

- Last updated 3 mins ago -

-
-
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

-
- Someone famous in Source Title -
- -
-
-
-
Card title
-

This card has supporting text below as a natural lead-in to additional - content.

-

- Last updated 3 mins ago -

-
-
-
- -
-
- Card image -
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- Someone famous in Source Title -
- -
-
-
-
Card title
-

This is a wider card with supporting text below as a natural lead-in to - additional content. This card has even longer content than the first to show that equal - height - action.

-

- Last updated 3 mins ago -

-
-
-
- -
-
- +
+ {% include cards/card.html title="This is a standard card" show-footer=true %} +
+
+ {% include cards/card.html title="Built card" %} +
+
+ {% include cards/card.html title="Card blue" status="blue" %} +
+
+ {% include cards/card.html title="Card green" status-left="green" %} +
+
+ {% include cards/card.html title="Card orange" status-bottom="orange" %} +
+
+ {% include cards/card.html title="Card red" status="red" %} +
+
+ {% include cards/card.html title="Card yellow" status="yellow" %} +
+
+ {% include cards/card.html title="Card teal" status="teal" %} +
+
+ {% include cards/card.html title="Card purple" status="purple" %} +
+
+ {% include cards/card.html title="Card status on left side" status-left="blue" %} +
+
+ {% include cards/card.html title="Initial collapsed card" collapsed=true %} +
+
+ {% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %} +
+
+ {% include cards/card.html title="Panel with custom buttons" show-buttons=true %} +
+
+ {% include cards/card.html title="Card with search form" show-form=true %} +
+
+ {% include cards/card.html title="Card with alert" alert="Adding action was successful" %} +
+
+ {% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %} +
+
+ {% include cards/card.html title="Card with switch" show-switch=true %} +
+
+ {% include cards/card.html title="Card with loader" show-loader=true %} +
diff --git a/scss/_variables.scss b/scss/_variables.scss index 8c48b93af..d2fc41a45 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -26,7 +26,7 @@ $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; -$blue: #458edd !default; +$blue: #467fcf !default; $azure: #45aaf2 !default; $indigo: #6574cd !default; $purple: #a55eea !default; diff --git a/scss/layout/_page.scss b/scss/layout/_page.scss index 995d92e73..56f46753d 100644 --- a/scss/layout/_page.scss +++ b/scss/layout/_page.scss @@ -9,7 +9,8 @@ .page-title { margin: 0; font-size: $h4-font-size; - font-weight: 300; + font-weight: 400; + line-height: 2.5rem; } .page-title-options { diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 2bf70f4a5..404050b35 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -1,5 +1,5 @@ .card { - margin-bottom: 1rem; + margin-bottom: 1.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .04); } @@ -90,7 +90,7 @@ .card-title { display: block; margin: 0; - font-size: 1rem; + font-size: $h4-font-size; font-weight: 500; line-height: 1; color: inherit; @@ -116,11 +116,22 @@ margin-left: auto; } +.card-options-link { + margin-left: .25rem; + color: $text-muted-light; + display: inline-block; + min-width: 1rem; +} + .card-status { - height: 3px; + height: 2px; border-radius: $card-border-radius $card-border-radius 0 0; } +.card-status-bottom { + border-radius: 0 0 $card-border-radius $card-border-radius; +} + .card-table { margin-bottom: 0;