cards

storage/templates/tabler/includes/card.html

@@ -0,0 +1,117 @@
+{{define "tabler_card"}}
+{{$card := .}}
+{{if $card.Link}}<a href="{{$card.Link}}" class="card{{if $card.Active}} card-active{{end}}{{if $card.Inactive}} card-inactive{{end}}{{if $card.Class}} {{$card.Class}}{{end}}">{{else}}<div class="card{{if $card.Active}} card-active{{end}}{{if $card.Inactive}} card-inactive{{end}}{{if $card.Class}} {{$card.Class}}{{end}}">{{end}}
+
+  {{if $card.Empty}}
+    {{template "tabler_card_empty" $card.Empty}}
+  {{else}}
+
+    {{if $card.Image}}
+      {{if eq $card.Image.Position "top"}}
+      <img src="{{$card.Image.Src}}" class="card-img-top" alt="">
+      {{end}}
+    {{end}}
+
+    {{if $card.Status}}
+      <div class="card-status-{{$card.Status.Position}} bg-{{defaultVal "blue" $card.Status.Color}}"></div>
+    {{end}}
+
+    {{if $card.Header}}
+    <div class="card-header">
+      {{if $card.Header.UseTabs}}
+        <ul class="nav nav-tabs card-header-tabs">
+          {{range $card.Header.Tabs}}
+          <li class="nav-item">
+            <a class="nav-link{{if .Active}} active{{end}}{{if .Disabled}} disabled{{end}}" href="{{defaultVal "#" .Link}}">{{.Title}}</a>
+          </li>
+          {{end}}
+        </ul>
+      {{else if $card.Header.UsePills}}
+        <ul class="nav nav-pills card-header-pills">
+          {{range $card.Header.Pills}}
+          <li class="nav-item">
+            <a class="nav-link{{if .Active}} active{{end}}{{if .Disabled}} disabled{{end}}" href="{{defaultVal "#" .Link}}">{{.Title}}</a>
+          </li>
+          {{end}}
+        </ul>
+      {{else}}
+        <h3 class="card-title">{{defaultVal "Header title" $card.Header.Title}}</h3>
+      {{end}}
+    </div>
+    {{end}}
+
+    {{if $card.Alert}}
+    <div class="card-alert alert alert-{{defaultVal "success" $card.Alert.Type}} mb-0">
+      {{$card.Alert.Text}}
+    </div>
+    {{end}}
+
+    {{with $card.Body}}
+    <div class="card-body">
+      {{if .Title}}<h3 class="card-title">{{.Title}}</h3>{{end}}
+      {{if .Subtitle}}<div class="card-subtitle">{{.Subtitle}}</div>{{end}}
+      <p class="text-secondary">{{defaultVal "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem." .Text}}</p>
+      {{if .HasButton}}
+      <div class="card-text">
+        <a href="{{defaultVal "#" .ButtonLink}}" class="btn btn-primary">{{defaultVal "Go somewhere" .ButtonText}}</a>
+      </div>
+      {{end}}
+    </div>
+    {{end}}
+
+    {{with $card.Footer}}
+    <div class="card-footer">
+      {{if or .HasSwitch .HasCheck .HasAvatars .HasMore}}
+      <div class="row align-items-center">
+        {{if .HasSwitch}}
+        <div class="col-auto"><label class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" checked></label></div>
+        {{end}}
+        {{if .HasCheck}}
+        <div class="col-auto"><label class="form-check m-0"><input class="form-check-input" type="checkbox" checked></label></div>
+        {{end}}
+        {{if .HasAvatars}}
+        <div class="col-auto"><div class="avatar-list avatar-list-stacked"><span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span><span class="avatar avatar-sm" style="background-image: url(/static/avatars/052f.jpg)"></span><span class="avatar avatar-sm" style="background-image: url(/static/avatars/002m.jpg)"></span><span class="avatar avatar-sm">+3</span></div></div>
+        {{end}}
+        {{if .HasMore}}
+        <div class="col-auto ms-auto"><a href="#">More information</a></div>
+        {{end}}
+      </div>
+      {{else if .Button}}
+      <a href="{{defaultVal "#" .ButtonLink}}" class="btn btn-primary">{{.Button}}</a>
+      {{else if and .ButtonsCancel .ButtonsAction}}
+      <div class="d-flex">
+        <a href="#" class="btn btn-link">{{.ButtonsCancel}}</a>
+        <a href="{{defaultVal "#" .ButtonsActionLink}}" class="btn btn-primary ms-auto">{{.ButtonsAction}}</a>
+      </div>
+      {{else}}
+      {{defaultVal "This is standard card footer" .Text}}
+      {{end}}
+    </div>
+    {{end}}
+
+    {{if $card.Image}}
+      {{if eq $card.Image.Position "bottom"}}
+      <img src="{{$card.Image.Src}}" class="card-img-bottom" alt="">
+      {{end}}
+    {{end}}
+
+    {{if $card.Progress}}
+    <div class="progress progress-sm card-progress">
+      <div class="progress-bar{{if $card.Progress.Color}} bg-{{$card.Progress.Color}}{{end}}" style="width: {{$card.Progress.Percent}}%"></div>
+    </div>
+    {{end}}
+
+  {{end}}
+
+{{if $card.Link}}</a>{{else}}</div>{{end}}
+{{end}}
+
+{{define "tabler_card_empty"}}
+<div class="empty">
+  <div class="empty-img">
+    <img src="/public/static/illustrations/not-found.svg" height="160" alt="">
+  </div>
+  <p class="empty-title">No results found</p>
+  <p class="empty-subtitle text-secondary">Try adjusting your search or filter criteria.</p>
+</div>
+{{end}}

storage/templates/tabler/layouts/default.html

@@ -24,7 +24,15 @@
       {{.Content}}
       {{else}}
       <div class="container-xl{{if .ContainerCentered}} my-auto{{end}}{{if .ContainerClass}} {{.ContainerClass}}{{end}}">
-        {{if hasField . "Tables"}}
+        {{if hasField . "Cards"}}
+          <div class="row row-cards">
+            {{range .Cards}}
+            <div class="col-md-6 col-lg-4">
+              {{template "tabler_card" .}}
+            </div>
+            {{end}}
+          </div>
+        {{else if hasField . "Tables"}}
           {{range .Tables}}
           <div class="card{{if .CardClass}} {{.CardClass}}{{end}}">
             {{template "tabler_table" .}}

storage/templates/tabler_cards.html

@@ -0,0 +1 @@
+{{template "default_layout" .}}