From 95ac87e0fd44986f36f45a5d9e34c1c1673460c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Mon, 24 Jan 2022 01:33:27 +0100 Subject: [PATCH] new card action demos (#1003) --- src/pages/_data/menu.yml | 14 +- .../_includes/cards/body-placeholder.html | 5 + src/pages/_includes/ui/card-dropdown.html | 10 +- src/pages/_includes/ui/map-vector.html | 6 +- src/pages/_includes/ui/svg.html | 7 + src/pages/card-actions.html | 145 ++++++++++++++++++ src/pages/cards-masonry.html | 40 +---- src/pages/cards.html | 2 +- src/scss/ui/_buttons.scss | 46 ++++++ src/scss/ui/_cards.scss | 19 +-- 10 files changed, 236 insertions(+), 58 deletions(-) create mode 100644 src/pages/_includes/cards/body-placeholder.html create mode 100644 src/pages/_includes/ui/svg.html create mode 100644 src/pages/card-actions.html diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 5b4ddd0e84..ee674517ca 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -21,11 +21,17 @@ base: url: buttons.html title: Buttons cards: - url: cards.html title: Cards - cards-masonry: - url: cards-masonry.html - title: Cards Masonry + children: + base: + url: cards.html + title: Sample cards + actions: + url: card-actions.html + title: Card actions + masonry: + url: cards-masonry.html + title: Cards Masonry colors: url: colors.html title: Colors diff --git a/src/pages/_includes/cards/body-placeholder.html b/src/pages/_includes/cards/body-placeholder.html new file mode 100644 index 0000000000..c930156490 --- /dev/null +++ b/src/pages/_includes/cards/body-placeholder.html @@ -0,0 +1,5 @@ +{% assign width = include.width | default: 400 %} +{% assign height = include.height | default: 200 %} +
+ {% include ui/svg.html width=width height=height ratio=include.ratio class="w-100" %} +
\ No newline at end of file diff --git a/src/pages/_includes/ui/card-dropdown.html b/src/pages/_includes/ui/card-dropdown.html index 1708635807..7fbf31c17b 100644 --- a/src/pages/_includes/ui/card-dropdown.html +++ b/src/pages/_includes/ui/card-dropdown.html @@ -1,12 +1,12 @@ -{% assign menu = include.menu | default: 'Import,Export,Download,Another action' | split: ',' %} {% assign icon = include.icon | default: 'dots-vertical' %}
-
- {% for item in menu %} - {{ item }} - {% endfor %} + Import + Export + Download + Delete
diff --git a/src/pages/_includes/ui/map-vector.html b/src/pages/_includes/ui/map-vector.html index f79ff515e3..ad19b9d73e 100644 --- a/src/pages/_includes/ui/map-vector.html +++ b/src/pages/_includes/ui/map-vector.html @@ -15,7 +15,7 @@ {% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %} document.addEventListener("DOMContentLoaded", function() { - {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({ + const map = {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({ selector: '#map-{{ id }}', map: '{{ data.map }}', backgroundColor: 'transparent', @@ -36,6 +36,10 @@ }, {% endif %} }); + + window.addEventListener("resize", () => { + map.updateSize(); + }); }); // @formatter:off diff --git a/src/pages/_includes/ui/svg.html b/src/pages/_includes/ui/svg.html new file mode 100644 index 0000000000..c2799487a2 --- /dev/null +++ b/src/pages/_includes/ui/svg.html @@ -0,0 +1,7 @@ +{% assign width = include.width | default: include.size | default: 20 %} +{% assign height = include.height | default: include.size | default: 20 %} + + + + + diff --git a/src/pages/card-actions.html b/src/pages/card-actions.html new file mode 100644 index 0000000000..c32c7c4df2 --- /dev/null +++ b/src/pages/card-actions.html @@ -0,0 +1,145 @@ +--- +title: Card actions +page-header: Card actions +menu: base.cards.actions +--- + +
+
+
+
+

Sample card

+
+ {% include cards/body-placeholder.html %} +
+
+ +
+
+
+

Card with action

+
+ {% include ui/button.html color="primary" icon="plus" text="Add new" %} +
+
+ {% include cards/body-placeholder.html %} +
+
+ +
+
+
+

Cart title

+
+ {% include ui/button.html icon="phone" text="Phone" %} + {% include ui/button.html icon="mail" text="Email" %} +
+
+ {% include cards/body-placeholder.html %} +
+
+ + {% assign person = site.data.people[0] %} +
+
+
+
+
+
+ {% include ui/avatar.html person=person %} +
+
+
{{ person.full_name }}
+
{{ person.job_title }}
+
+
+
+
+ {% include ui/button.html icon="phone" text="Phone" %} + {% include ui/button.html icon="mail" text="Email" %} +
+
+ {% include cards/body-placeholder.html %} +
+
+ +
+
+
+
+

+ With description +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing. +

+
+
+ {% include cards/body-placeholder.html %} +
+
+ +
+
+
+
+

+ With description and action +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing. +

+
+
+ {% include ui/button.html color="primary" text="Create new job" %} +
+
+ {% include cards/body-placeholder.html %} +
+
+ + {% assign person = site.data.people[3] %} +
+
+
+
+
+
+ {% include ui/avatar.html person=person %} +
+
+
{{ person.full_name }}
+
{{ person.job_title }}
+
+
+
+
+
+ +
+ Edit user + Change permissions + Delete user +
+
+
+
+ {% include cards/body-placeholder.html %} +
+
+ +
+
+
+

Card actions

+
+ {% include ui/icon.html icon="refresh" %} + {% include ui/icon.html icon="chevron-up" %} + {% include ui/icon.html icon="dots-vertical" %} + {% include ui/icon.html icon="x" %} +
+
+ {% include cards/body-placeholder.html %} +
+
+
\ No newline at end of file diff --git a/src/pages/cards-masonry.html b/src/pages/cards-masonry.html index 0f80702255..3e95767e49 100644 --- a/src/pages/cards-masonry.html +++ b/src/pages/cards-masonry.html @@ -1,43 +1,19 @@ --- title: Cards Masonry page-header: Cards Masonry -menu: base.cards-masonry +menu: base.cards.masonry libs: masonry --- +{% assign heights = '200,150,400,300,350,600,700,200,150,250,50,400,300,200' | split: ',' %} +
+ {% for height in heights %}
- {% include cards/card.html body="This is some text within a card body." %} -
-
- {% include cards/card.html img-bottom=true title="Card with bottom image" %} -
-
- {% include cards/card.html footer-elements="more,>switch" %} -
-
- {% include cards/card.html footer-elements=">avatars" %} -
-
- {% include cards/card.html header-tabs=true %} -
-
- {% include cards/card.html header-pills=true %} -
-
- {% include cards/card.html empty=true %} -
-
- {% include cards/card.html progress=true title="Card with progress bar" %} -
-
- {% include cards/card.html title="Card title" subtitle="Card subtitle" %} -
-
- {% include cards/card.html header=true %} -
-
- {% include cards/credit-card.html %} +
+ {% include cards/body-placeholder.html height=height %} +
+ {% endfor %}
diff --git a/src/pages/cards.html b/src/pages/cards.html index 0ab1ed2987..beab7d7700 100644 --- a/src/pages/cards.html +++ b/src/pages/cards.html @@ -1,7 +1,7 @@ --- title: Cards page-header: Cards -menu: base.cards +menu: base.cards.base ---
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss index 8261e6a473..dc2abbda56 100644 --- a/src/scss/ui/_buttons.scss +++ b/src/scss/ui/_buttons.scss @@ -195,4 +195,50 @@ .btn-ghost-#{$name} { @extend %btn-ghost; } +} + +// +// Action button +// +.btn-action { + padding: 0; + border: 0; + color: $text-muted; + display: inline-flex; + width: 2rem; + height: 2rem; + align-items: center; + justify-content: center; + border-radius: $border-radius; + + &:after { + content: none; + } + + &:focus { + outline: none; + box-shadow: none; + } + + &:hover, + &.show { + color: $body-color; + background: $body-bg; + } + + &.show { + color: $primary; + } + + .icon { + margin: 0; + width: 1.25rem; + height: 1.25rem; + font-size: 1.25rem; + stroke-width: 1; + } +} + +.btn-actions { + display: flex; } \ No newline at end of file diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss index cbb2895adc..3cc2338859 100644 --- a/src/scss/ui/_cards.scss +++ b/src/scss/ui/_cards.scss @@ -183,8 +183,8 @@ } .card-actions { - margin-left: auto; - font-size: $h5-font-size; + margin: -.5rem -.5rem -.5rem auto; + padding-left: .5rem; a { text-decoration: none; @@ -248,7 +248,7 @@ Card footer } .card-header & { - margin: .125rem 0; + margin: 0; } } @@ -258,7 +258,7 @@ Card footer color: $text-muted; .card-header & { - margin: -.125rem 0 0; + margin: 0; } } @@ -317,17 +317,6 @@ Card optinos color: $text-muted; } -.card-dropdown { - line-height: 1; - color: $text-muted; - - .icon { - width: 1.5rem; - height: 1.5rem; - font-size: 1.5rem; - stroke-width: 1; - } -} /** Card status