mirror of
https://github.com/tabler/tabler.git
synced 2026-08-02 08:25:32 +04:00
selectize fixes, buttons fixes, bootstrap upgrade
This commit is contained in:
codecalm
@@ -11,6 +11,7 @@ users:
|
||||
name: Nikola Tesla
|
||||
|
||||
tags:
|
||||
max-items: 3
|
||||
value: dev, test
|
||||
options:
|
||||
- dev
|
||||
@@ -22,16 +23,16 @@ countries:
|
||||
options:
|
||||
pl:
|
||||
name: Poland
|
||||
image: img/flags/pl.svg
|
||||
flag: pl
|
||||
de:
|
||||
name: Germany
|
||||
image: img/flags/de.svg
|
||||
flag: de
|
||||
cz:
|
||||
name: Czech Republic
|
||||
image: img/flags/cz.svg
|
||||
flag: cz
|
||||
br:
|
||||
name: Brazil
|
||||
image: img/flags/br.svg
|
||||
flag: br
|
||||
|
||||
people:
|
||||
value: 4
|
||||
|
||||
@@ -1,84 +1,82 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Invoices</h3>
|
||||
</div>
|
||||
<div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap overflow-hidden">
|
||||
|
||||
<div class="mb-0">
|
||||
Show
|
||||
<div class="mx-2 d-inline-block" style="width: 4rem;">
|
||||
<input type="text" class="form-control" value="8">
|
||||
</div>
|
||||
entries
|
||||
</div>
|
||||
|
||||
<div class="mb-0 ml-4">
|
||||
Serach:
|
||||
<div class="ml-2 d-inline-block" style="width: 10rem;">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
|
||||
<th class="w-1p">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
|
||||
<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>Created {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for invoice in site.data.invoices limit: 8 %}
|
||||
<tr>
|
||||
<td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
|
||||
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
|
||||
<td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
|
||||
<td>
|
||||
{% include ui/flag.html flag=invoice.country %}
|
||||
{{ invoice.client }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.vat-no }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.date }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
|
||||
</td>
|
||||
<td>{{ invoice.price }}</td>
|
||||
|
||||
<td class="text-right">
|
||||
<button class="btn btn-secondary btn-sm align-text-top">Manage</button>
|
||||
<span class="dropdown ml-1">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
|
||||
{% include ui/dropdown-menu.html %}
|
||||
</span>
|
||||
</td>
|
||||
<td style="padding-right: 1rem;">
|
||||
{% include ui/icon.html icon="edit" class="icon-sm float-right" %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap">
|
||||
<div class="mb-0 d-flex align-items-center">
|
||||
<p class="mb-0 align-middle">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
|
||||
</div>
|
||||
<div class="mb-0 ml-4">
|
||||
<a href="#" class="btn btn-secondary disabled">Previous</a><a href="#" class="btn btn-primary ml-2">1</a><a href="#" class="btn btn-secondary ml-2">2</a><a href="#" class="btn btn-secondary ml-2 font-weight-bold text-secondary">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Invoices</h3>
|
||||
</div>
|
||||
<div class="card-body border-bottom py-3">
|
||||
|
||||
<div class="d-flex">
|
||||
<div class="mb-0">
|
||||
Show
|
||||
<div class="mx-2 d-inline-block">
|
||||
<input type="text" class="form-control form-control-sm" value="8" size="3">
|
||||
</div>
|
||||
entries
|
||||
</div>
|
||||
|
||||
<div class="mb-0 ml-auto">
|
||||
Search:
|
||||
<div class="ml-2 d-inline-block">
|
||||
<input type="text" class="form-control form-control-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
|
||||
<th class="w-1p">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
|
||||
<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>Created {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for invoice in site.data.invoices limit: 8 %}
|
||||
<tr>
|
||||
<td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
|
||||
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
|
||||
<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
|
||||
<td>
|
||||
{% include ui/flag.html flag=invoice.country %}
|
||||
{{ invoice.client }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.vat-no }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.date }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
|
||||
</td>
|
||||
<td>{{ invoice.price }}</td>
|
||||
|
||||
<td class="text-right">
|
||||
<button class="btn btn-secondary btn-sm align-text-top">Manage</button>
|
||||
<span class="dropdown ml-1">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
|
||||
{% include ui/dropdown-menu.html %}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% include ui/icon.html icon="edit" class="icon-sm float-right" %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex align-items-center border-top-0">
|
||||
<p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
|
||||
{% include ui/pagination.html class="m-0 ml-auto" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
{% endif %}
|
||||
|
||||
{% assign text = type[1].title %}
|
||||
|
||||
{% include ui/button.html block=true class=class icon=icon icon-only=icon-only text=text %}
|
||||
{% assign color = type[0] %}
|
||||
{% include ui/button.html block=true color=false class=class icon=icon icon-only=icon-only text=text %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
{% removeemptylines %}
|
||||
{% assign spinner-class = false %}
|
||||
{% assign color = include.color | default: 'secondary' %}
|
||||
{% if include.color == false %}
|
||||
{% assign color = null %}
|
||||
{% endif %}
|
||||
{% assign provider = include.provider | default: 'fe' %}
|
||||
{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
|
||||
{% assign e = include.element | default: 'a' %}
|
||||
|
||||
@@ -2,32 +2,55 @@
|
||||
{% assign data = site.data.selects[key] %}
|
||||
{% assign options = data.options %}
|
||||
<select name="{{ key }}" id="select-{{ key }}" class="form-select">
|
||||
{% if options == 'people' %}
|
||||
{% for person in site.data.people limit: 20 %}
|
||||
<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
|
||||
{% endfor %}
|
||||
{% if options == 'people' %}
|
||||
{% for person in site.data.people limit: 20 %}
|
||||
<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
{% for option in options %}
|
||||
{% if option[1] %}
|
||||
{% assign value = option[0] %}
|
||||
{% assign name = option[1].name %}
|
||||
{% assign all-data = option[1] %}
|
||||
{% else %}
|
||||
{% assign value = option %}
|
||||
{% assign name = option %}
|
||||
{% endif %}
|
||||
<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for option in options %}
|
||||
{% if option[1] %}
|
||||
{% assign value = option[0] %}
|
||||
{% assign name = option[1].name %}
|
||||
{% assign all-data = option[1] %}
|
||||
{% else %}
|
||||
{% assign value = option %}
|
||||
{% assign name = option %}
|
||||
{% endif %}
|
||||
<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% elsif all-data.flag %} data-data='{"flag": "{{ all-data.flag }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</select>
|
||||
|
||||
{% append_lib selectize %}
|
||||
{% capture_global scripts %}
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#select-{{ key }}').selectize({});
|
||||
});
|
||||
$(document).ready(function () {
|
||||
$('#select-{{ key }}').selectize({
|
||||
{% if key == "countries" %}
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div class="option"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div class="d-flex align-items-center"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
|
||||
}
|
||||
}
|
||||
{% elsif key == "people" %}
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div class="option"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div class="d-flex align-items-center"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
{% if data.max-items %}
|
||||
maxItems: {{ data.max-items }}
|
||||
{% endif %}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endcapture_global %}
|
||||
|
||||
+1
-1
@@ -25,5 +25,5 @@ menu: gallery
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
{% include parts/pagination.html class="ml-auto" %}
|
||||
{% include ui/pagination.html class="ml-auto" %}
|
||||
</div>
|
||||
|
||||
@@ -4,15 +4,15 @@ title: Pagination
|
||||
|
||||
|
||||
{% card %}
|
||||
{% include parts/pagination.html %}
|
||||
{% include parts/pagination.html icons=true %}
|
||||
{% include ui/pagination.html %}
|
||||
{% include ui/pagination.html icons=true %}
|
||||
{% endcard %}
|
||||
|
||||
|
||||
{% card %}
|
||||
{% include parts/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
|
||||
{% include ui/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
|
||||
{% endcard %}
|
||||
|
||||
<div>
|
||||
{% include parts/pagination.html icons=true %}
|
||||
{% include ui/pagination.html icons=true %}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
tmp: true
|
||||
---
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tags</label>
|
||||
{% include ui/form/selectize.html key="tags" %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Top person</label>
|
||||
{% include ui/form/selectize.html key="users" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Users list</label>
|
||||
{% include ui/form/selectize.html key="people" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Countries</label>
|
||||
{% include ui/form/selectize.html key="countries" %}
|
||||
</div>
|
||||
+1
-1
@@ -52,5 +52,5 @@ menu: base.users
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
{% include parts/pagination.html class="ml-auto" %}
|
||||
{% include ui/pagination.html class="ml-auto" %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user