mirror of
https://github.com/tabler/tabler.git
synced 2026-07-28 14:04:38 +04:00
Merge branch 'dev' into dev-users-table-and-payments
This commit is contained in:
@@ -1,10 +0,0 @@
|
||||
{% assign data = site.data.charts[include.chart-id] %}
|
||||
{% assign height = include.height | default: 10 %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% if include.title %}
|
||||
<h3 class="card-title">{{ include.title }}</h3>
|
||||
{% endif %}
|
||||
{% include ui/chart.html height=height chart-id=include.chart-id %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,6 +4,6 @@
|
||||
<h3 class="card-title">Total sales</h3>
|
||||
|
||||
{% include ui/chart.html chart-id="total-sales" height=15 %}
|
||||
{% include ui/chart.html chart-id="total-sales2" height=15 %}
|
||||
{% include ui/chart.html chart-id="campaigns" height=15 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<a href="#" class="mb-3 d-block"><img src="{{ site.base }}/img/photos/{{ photo.file }}" class="rounded"></a>
|
||||
<div class="d-flex align-items-center">
|
||||
{% include ui/avatar.html person=include.person class="mr-3 rounded" %}
|
||||
<div class="lh-sm">
|
||||
<div>{{ include.person.full_name }}</div>
|
||||
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<a href="#" class="text-muted">
|
||||
{% include_cached ui/icon.html icon="eye" %}
|
||||
{{ forloop.index | random_number: 300, 600 }}
|
||||
</a>
|
||||
<a href="#" class="ml-3 text-muted">
|
||||
{% include_cached ui/icon.html icon="heart" %}
|
||||
{{ forloop.index | random_number: 20, 100 }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,94 +1,103 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">#INV0015</h3>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-primary" onclick="javascript:window.print();"><i class="si si-printer"></i> Print Invoice</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row my-5">
|
||||
<div class="col-6">
|
||||
<p class="h3">Company</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ltd@example.com
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<p class="h3">Client</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ctr@example.com
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th class="text-center" style="width: 1%"></th>
|
||||
<th>Product</th>
|
||||
<th class="text-center" style="width: 1%">Qnt</th>
|
||||
<th class="text-right" style="width: 1%">Unit</th>
|
||||
<th class="text-right" style="width: 1%">Amount</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">1</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">Logo Creation</p>
|
||||
<div class="text-muted">Logo and business cards design</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">2</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">Online Store Design & Development</p>
|
||||
<div class="text-muted">Design/Development for all popular modern browsers</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">App Design</p>
|
||||
<div class="text-muted">Promotional mobile application</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Subtotal</td>
|
||||
<td class="text-right">$25.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Vat Rate</td>
|
||||
<td class="text-right">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Vat Due</td>
|
||||
<td class="text-right">$5.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-weight-bold text-uppercase text-right">Total Due</td>
|
||||
<td class="font-weight-bold text-right">$30.000,00</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-muted text-center">Thank you very much for doing business with us. We look forward to working with you again!</p>
|
||||
</div>
|
||||
<div class="card-header d-print-none">
|
||||
<h3 class="card-title">Invoice</h3>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-primary" onclick="javascript:window.print();"><i
|
||||
class="si si-printer"></i> Print Invoice
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<p class="h3">Company</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ltd@example.com
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<p class="h3">Client</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ctr@example.com
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
<h1>Invoice INV/001/15</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 1%"></th>
|
||||
<th>Product</th>
|
||||
<th class="text-center" style="width: 1%">Qnt</th>
|
||||
<th class="text-right" style="width: 1%">Unit</th>
|
||||
<th class="text-right" style="width: 1%">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="text-center">1</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Logo Creation</p>
|
||||
<div class="text-muted">Logo and business cards design</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">2</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Online Store Design & Development</p>
|
||||
<div class="text-muted">Design/Development for all popular modern browsers</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>
|
||||
<p class="strong mb-1">App Design</p>
|
||||
<div class="text-muted">Promotional mobile application</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-right">Subtotal</td>
|
||||
<td class="text-right">$25.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-right">Vat Rate</td>
|
||||
<td class="text-right">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-right">Vat Due</td>
|
||||
<td class="text-right">$5.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-weight-bold text-uppercase text-right">Total Due</td>
|
||||
<td class="font-weight-bold text-right">$30.000,00</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-muted text-center">Thank you very much for doing business with us. We look forward to working with
|
||||
you again!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<h3 class="card-title">Invoices</h3>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
|
||||
@@ -42,7 +42,7 @@
|
||||
<td class="text-right">
|
||||
<span class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||||
{% include ui/dropdown-menu.html %}
|
||||
{% include_cached ui/dropdown-menu.html %}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<ul class="list-unstyled">
|
||||
{% for item in site.data.orders %}
|
||||
<li class="row row-sm leading-tight align-items-center mb-2">
|
||||
<li class="row row-sm lh-sm align-items-center mb-2">
|
||||
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
|
||||
<div class="col">
|
||||
{{ item.title }}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="text-uppercase text-muted">{{ include.category | default: 'Enterprise' }}</div>
|
||||
<div class="h1 my-4">${{ include.price | default: '79' }}</div>
|
||||
|
||||
<ul class="list-unstyled leading-loose">
|
||||
<ul class="list-unstyled lh-lg">
|
||||
<li><strong>{{ include.users | default: 10 }}</strong> Users</li>
|
||||
{% for feature in features %}
|
||||
<li>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<button class="btn-options" type="button" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="more-vertical" %}
|
||||
</button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
{% include_cached ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
<div class="card-title">
|
||||
<h6 class="h4 mb-3"><a href="#">{{ include.title | default: 'Task Title' }}</a>{% if include.badge %} <span class="badge">{{ include.badge }}</span>{% endif %}</h6>
|
||||
|
||||
@@ -1,39 +1,33 @@
|
||||
{% assign chart-type = include.chart-type | default: 'line' %}
|
||||
{% assign chart-position = include.chart-position | default: 'right' %}
|
||||
<div class="card">
|
||||
<div class="card-body p-3 d-flex align-items-center">
|
||||
{% if include.icon %}
|
||||
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include_cached ui/icon.html icon=include.icon %}</span>
|
||||
{% elsif include.person-id %}
|
||||
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
|
||||
{% endif %}
|
||||
<div class="card-body p-3 d-flex align-items-center">
|
||||
{% if include.icon %}
|
||||
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include_cached ui/icon.html icon=include.icon %}</span>
|
||||
{% elsif include.person-id %}
|
||||
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
|
||||
{% endif %}
|
||||
|
||||
{% if include.chart-data and chart-position=="left" %}
|
||||
<div class="mr-3">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.chart-data and chart-position == "left" %}
|
||||
<div class="mr-3">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mr-3">
|
||||
<div>
|
||||
<strong>{{ include.count | default: 1700 | format_number }}</strong> {{ include.subtitle }}
|
||||
{% if include.small-icon %}
|
||||
{% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-muted text-h5">{{ include.description | default: "Users" }}</div>
|
||||
</div>
|
||||
<div class="mr-3 lh-sm">
|
||||
<div class="strong">
|
||||
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
|
||||
{% if include.small-icon %}
|
||||
{% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-muted">{{ include.description | default: "Users" }}</div>
|
||||
</div>
|
||||
|
||||
{% if include.second-icon %}
|
||||
<div class="ml-auto">
|
||||
{% include_cached ui/icon.html icon=include.second-icon color=include.color class="icon-lg icon-thin" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.chart-data and chart-position=="right" %}
|
||||
<div class="ml-auto">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if include.chart-data and chart-position=="right" %}
|
||||
<div class="ml-auto">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row row-sm align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person=person size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="card-title m-0">
|
||||
<a href="#">{{ person.full_name }}</a>
|
||||
</h4>
|
||||
<div class="text-muted">
|
||||
Working in {{ person.company }}
|
||||
</div>
|
||||
<div class="small mt-1">
|
||||
<span class="text-success">●</span> Online
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="dropdown">
|
||||
<button class="btn-options" type="button" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="more-vertical" %}
|
||||
</button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row row-sm align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person=person size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="card-title m-0">
|
||||
<a href="#">{{ person.full_name }}</a>
|
||||
</h4>
|
||||
<div class="text-muted">
|
||||
Working in {{ person.company }}
|
||||
</div>
|
||||
<div class="small mt-1">
|
||||
<span class="text-success">●</span> Online
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="dropdown">
|
||||
<button class="btn-options" type="button" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="more-vertical" %}
|
||||
</button>
|
||||
{% include_cached ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,13 +32,7 @@
|
||||
{% if include.dropdown %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
{% include_cached ui/dropdown-menu.html %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if include.settings %}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
<a class="card card-link" href="#">
|
||||
<div class="card-body">
|
||||
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
|
||||
{% include ui/avatar.html person=person %}
|
||||
</div>
|
||||
<div class="card-title mb-1">{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
|
||||
{% include ui/avatar.html person=person class="rounded" %}
|
||||
</div>
|
||||
<div class="lh-sm">
|
||||
<div class="strong">{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user