jacs/goffeetabler
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cards

Browse source
This commit is contained in:
JACS 2026-05-02 23:51:21 -05:00
parent f03b933359
commit aa651083cd
7 changed files with 330 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

117
storage/templates/tabler/includes/card.html Normal file
View file

@ -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}}