new card action demos (#1003)

tabler · Jan 24, 2022 · 95ac87e · 95ac87e
1 parent 61e4809
commit 95ac87e
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 58 deletions.
diff --git 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
@@ -0,0 +1,5 @@
+{% assign width = include.width | default: 400 %}
+{% assign height = include.height | default: 200 %}
+<div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
+	{% include ui/svg.html width=width height=height ratio=include.ratio class="w-100" %}
+</div>
diff --git 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' %}
 <div class="dropdown{% if include.class %} {{ include.class }}{% endif %}">
-   <a href="#" class="card-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
+   <a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
       {% include ui/icon.html icon=icon %}
    </a>
    <div class="dropdown-menu dropdown-menu-end">
-      {% for item in menu %}
-      <a href="#" class="dropdown-item">{{ item }}</a>
-      {% endfor %}
+      <a href="#" class="dropdown-item">Import</a>
+      <a href="#" class="dropdown-item">Export</a>
+      <a href="#" class="dropdown-item">Download</a>
+      <a href="#" class="dropdown-item text-danger">Delete</a>
    </div>
 </div>
diff --git 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
 	</script>

diff --git a/src/pages/_includes/ui/svg.html 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 %}
+<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{% if include.ratio %}auto{% else %}{{ height }}{% endif %}" viewBox="0 0 {{ width }} {{ height }}" stroke="var(--tblr-border-color, #b8cef1)">
+<!--	<rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" fill="#fff" rx="2"></rect>-->
+	<line x1="0" y1="0" x2="{{ width }}" y2="{{ height }}"></line>
+	<line x1="0" y1="{{ height }}" x2="{{ width }}" y2="0"></line>
+</svg>
diff --git a/src/pages/card-actions.html b/src/pages/card-actions.html
@@ -0,0 +1,145 @@
+---
+title: Card actions
+page-header: Card actions
+menu: base.cards.actions
+---
+
+<div class="row row-cards">
+	<div class="col-6">
+		<div class="card">
+			<div class="card-header">
+				<h3 class="card-title">Sample card</h3>
+			</div>
+			{% include cards/body-placeholder.html %}
+		</div>
+	</div>
+
+	<div class="col-6">
+		<div class="card">
+			<div class="card-header">
+				<h3 class="card-title">Card with action</h3>
+				<div class="card-actions">
+					{% include ui/button.html color="primary" icon="plus" text="Add new" %}
+				</div>
+			</div>
+			{% include cards/body-placeholder.html %}
+		</div>
+	</div>
+
+	<div class="col-6">
+		<div class="card">
+			<div class="card-header">
+				<h3 class="card-title">Cart title</h3>
+				<div class="card-actions">
+					{% include ui/button.html icon="phone" text="Phone" %}
+					{% include ui/button.html icon="mail" text="Email" %}
+				</div>
+			</div>
+			{% include cards/body-placeholder.html %}
+		</div>
+	</div>
+
+	{% assign person = site.data.people[0] %}
+	<div class="col-6">
+		<div class="card">
+			<div class="card-header">
+				<div>
+					<div class="row align-items-center">
+						<div class="col-auto">
+							{% include ui/avatar.html person=person %}
+						</div>
+						<div class="col">
+							<div class="card-title">{{ person.full_name }}</div>
+							<div class="card-subtitle">{{ person.job_title }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="card-actions">
+					{% include ui/button.html icon="phone" text="Phone" %}
+					{% include ui/button.html icon="mail" text="Email" %}
+				</div>
+			</div>
+			{% include cards/body-placeholder.html %}
+		</div>
+	</div>
+
+	<div class="col-6">
+		<div class="card">
+			<div class="card-header">
+				<div>
+					<h3 class="card-title">
+						With description
+					</h3>
+					<p class="card-subtitle">
+						Lorem ipsum dolor sit amet consectetur adipisicing.
+					</p>
+				</div>
+			</div>
+			{% include cards/body-placeholder.html %}
+		</div>
+	</div>
+
+	<div class="col-6">
+		<div class="card">
+			<div class="card-header">
+				<div>
+					<h3 class="card-title">
+						With description and action
+					</h3>
+					<p class="card-subtitle">
+						Lorem ipsum dolor sit amet consectetur adipisicing.
+					</p>
+				</div>
+				<div class="card-actions">
+					{% include ui/button.html color="primary" text="Create new job" %}
+				</div>
+			</div>
+			{% include cards/body-placeholder.html %}
+		</div>
+	</div>
+
+	{% assign person = site.data.people[3] %}
+	<div class="col-6">
+		<div class="card">
+			<div class="card-header">
+				<div>
+					<div class="row align-items-center">
+						<div class="col-auto">
+							{% include ui/avatar.html person=person %}
+						</div>
+						<div class="col">
+							<div class="card-title">{{ person.full_name }}</div>
+							<div class="card-subtitle">{{ person.job_title }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="card-actions">
+					<div class="dropdown">
+						<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% include ui/icon.html icon="dots-vertical" %}</a>
+						<div class="dropdown-menu dropdown-menu-end">
+							<a class="dropdown-item" href="#">Edit user</a>
+							<a class="dropdown-item" href="#">Change permissions</a>
+							<a class="dropdown-item text-danger" href="#">Delete user</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			{% include cards/body-placeholder.html %}
+		</div>
+	</div>
+
+	<div class="col-6">
+		<div class="card">
+			<div class="card-header">
+				<h3 class="card-title">Card actions</h3>
+				<div class="card-actions btn-actions">
+					<a href="#" class="btn-action" >{% include ui/icon.html icon="refresh" %}</a>
+					<a href="#" class="btn-action" >{% include ui/icon.html icon="chevron-up" %}</a>
+					<a href="#" class="btn-action" >{% include ui/icon.html icon="dots-vertical" %}</a>
+					<a href="#" class="btn-action" >{% include ui/icon.html icon="x" %}</a>
+				</div>
+			</div>
+			{% include cards/body-placeholder.html %}
+		</div>
+	</div>
+</div>
diff --git 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: ',' %}
+
 <div class="row row-cards" data-masonry='{"percentPosition": true }'>
+	{% for height in heights %}
 	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html body="This is some text within a card body." %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html img-bottom=true title="Card with bottom image" %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html footer-elements="more,>switch" %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html footer-elements=">avatars" %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html header-tabs=true %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html header-pills=true %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html empty=true %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html progress=true title="Card with progress bar" %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html title="Card title" subtitle="Card subtitle" %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/card.html header=true %}
-	</div>
-	<div class="col-sm-6 col-lg-4">
-		{% include cards/credit-card.html %}
+		<div class="card">
+			{% include cards/body-placeholder.html height=height %}
+		</div>
 	</div>
+	{% endfor %}
 </div>
 
diff --git 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
 ---
 
 <div class="row row-cards">

diff --git 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;
 }
diff --git 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