diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 5b4ddd0e8..ee674517c 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 000000000..c93015649 --- /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 170863580..7fbf31c17 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 f79ff515e..ad19b9d73 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 000000000..c2799487a --- /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 000000000..c32c7c4df --- /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 0f8070225..3e95767e4 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 0ab1ed298..beab7d770 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 8261e6a47..dc2abbda5 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 cbb2895ad..3cc233885 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