From ff19d676d58f36fb012e1391e6bec20a9568e97c Mon Sep 17 00:00:00 2001 From: chomik Date: Tue, 2 Apr 2019 18:29:07 +0200 Subject: [PATCH] charts on homepage --- _config.yml | 4 ++-- js/app/charts.js | 2 +- pages/_includes/cards/card.html | 15 +++++++++++---- pages/_includes/cards/user-card.html | 4 ++-- pages/cards.html | 2 +- pages/index.html | 4 ++-- scss/ui/_cards.scss | 27 ++++++++++++++++----------- 7 files changed, 35 insertions(+), 23 deletions(-) diff --git a/_config.yml b/_config.yml index 1877b9afb..7d42125d2 100644 --- a/_config.yml +++ b/_config.yml @@ -68,7 +68,7 @@ colors: hex: '#f66d9b' name: Pink red: - hex: '#e74c3c' + hex: '#cd201f' name: Red orange: hex: '#fd9644' @@ -103,4 +103,4 @@ docs-menu: - title: Getting started pages: [index] - title: Components - pages: [avatars, typography, alerts, buttons, colors, cards] \ No newline at end of file + pages: [avatars, typography, alerts, buttons, colors, cards] diff --git a/js/app/charts.js b/js/app/charts.js index 12e1167f7..211f233a0 100644 --- a/js/app/charts.js +++ b/js/app/charts.js @@ -14,7 +14,7 @@ fillColor = uikit.colors[color]; if (type === 'donut' || type === 'pie') { - fillColor = [fillColor, 'rgba(0, 0, 0, .064)']; + fillColor = [fillColor, uikit.hexToRgbA(fillColor, .1)]; } else if (type === 'bar') { fillColor = [fillColor]; } else if (type === 'line') { diff --git a/pages/_includes/cards/card.html b/pages/_includes/cards/card.html index 7872fc5fd..9786456fe 100644 --- a/pages/_includes/cards/card.html +++ b/pages/_includes/cards/card.html @@ -3,6 +3,7 @@
{% endif %} + {% unless include.hide-header %}

{{ include.title | default: 'Card title' }}

@@ -36,23 +37,29 @@
{% endunless %} - {% if include.alert %} + {% endunless %} + + {% if include.alert %}
{{ include.alert }}
{% endif %}
+ {% if include.body-title %} +

{{ include.body-title }}

+ {% endif %} + {% if include.body %} - {{ include.body }} + {{ include.body }} {% elsif include.show-loader %}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus! +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

{% else %} - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus! +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

{% endif %}
{% if include.show-footer %} diff --git a/pages/_includes/cards/user-card.html b/pages/_includes/cards/user-card.html index 25674cdb2..f6db78777 100644 --- a/pages/_includes/cards/user-card.html +++ b/pages/_includes/cards/user-card.html @@ -5,7 +5,7 @@
{% include ui/avatar.html person=person %}
-
{{ person.full_name }}
+
{{ person.full_name }}
{{ person.job_title }}
- \ No newline at end of file + diff --git a/pages/cards.html b/pages/cards.html index bea21939a..c60a3b7cc 100644 --- a/pages/cards.html +++ b/pages/cards.html @@ -16,7 +16,7 @@ page-title: Cards {% include cards/card.html title="Card green" status-left="green" %}
- {% include cards/card.html title="Card orange" status-bottom="orange" %} + {% include cards/card.html body-title="Card with body title" hide-header=true %}
{% include cards/card.html title="Card red" status="red" %} diff --git a/pages/index.html b/pages/index.html index 83fbdb364..6a6854393 100644 --- a/pages/index.html +++ b/pages/index.html @@ -57,10 +57,10 @@ page-title: Dashboard {% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
- {% include cards/small-stats.html color="red" icon="users" count="1352" subtitle="Members" description="163 registered today" %} + {% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
- {% include cards/small-stats.html color="yellow" icon="message-square" count="132" subtitle="Comments" description="16 waiting" %} + {% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 404050b35..552e36ace 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -89,7 +89,6 @@ .card-title { display: block; - margin: 0; font-size: $h4-font-size; font-weight: 500; line-height: 1; @@ -98,6 +97,10 @@ @at-root a#{&}:hover { color: inherit; } + + .card-header & { + margin: 0; + } } .card-body { @@ -110,6 +113,9 @@ overflow: auto; } +/** +Card optinos + */ .card-options { top: 1.5rem; right: .75rem; @@ -123,6 +129,9 @@ min-width: 1rem; } +/** +Card status + */ .card-status { height: 2px; border-radius: $card-border-radius $card-border-radius 0 0; @@ -132,6 +141,9 @@ border-radius: 0 0 $card-border-radius $card-border-radius; } +/** +Card table + */ .card-table { margin-bottom: 0; @@ -162,6 +174,9 @@ } } +/* +Card code + */ .card-code { background: $dark; @@ -177,13 +192,3 @@ background: transparent; } } - -//.card-nav { -// background: $min-black; -// -// .nav-link { -// &.active { -// background: #fff; -// } -// } -//}