Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

selectize fixes, buttons fixes, bootstrap upgrade

Browse Source
This commit is contained in:
codecalm
2020-01-02 17:19:17 +01:00
parent a0dd18c65a
commit c566b7d84d
14 changed files with 186 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -110,7 +110,7 @@
"@fullcalendar/timegrid": "4.3.0",
"apexcharts": "3.11.2",
"autosize": "4.0.2",
"bootstrap": "twbs/bootstrap#bd27834",
"bootstrap": "twbs/bootstrap#e2530d3",
"fullcalendar": "3.10.1",
"imask": "5.2.1",
"jquery": "3.4.1",

9
pages/_data/selects.yml
View File

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

164
pages/_includes/cards/invoices.html
View File

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

4
pages/_includes/parts/buttons-table.html
View File

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

3
pages/_includes/ui/button.html
View File

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

63
pages/_includes/ui/form/selectize.html
View File

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

0
pages/_includes/parts/pagination.html → pages/_includes/ui/pagination.html
View File

2
pages/gallery.html
View File

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

8
pages/pagination.html
View File

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

24
pages/tmp4.html Normal file
View File

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

2
pages/users.html
View File

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

16
scss/_variables.scss
View File

@@ -18,14 +18,14 @@ $icon-fonts: () !default;
// COLORS
$theme-color-interval: 10% !default;
$light-black: rgba(0, 0, 0, .4) !default;
$light-white: rgba(255, 255, 255, .4) !default;
$min-black: rgba(135, 150, 165, .032) !default;
$min-white: rgba(255, 255, 255, .032) !default;
$light: #f5f7fb !default;
$dark: #354052 !default;
$light-black: rgba($dark, .4) !default;
$light-white: rgba($light, .4) !default;
$min-black: rgba($dark, .02) !default;
$min-white: rgba($light, .02) !default;
$gray-100: $light !default;
$gray-200: mix($light, $dark, 98%) !default;
$gray-300: mix($light, $dark, 94%) !default;
@@ -52,7 +52,7 @@ $black: #000000 !default;
$white: #ffffff !default;
$primary: $blue !default;
$secondary: $white !default;
$secondary: $gray-800 !default;
$success: $green !default;
$info: $azure !default;
$warning: $yellow !default;
@@ -102,6 +102,7 @@ $colors: (
) !default;
$avatar-sizes: (
"xs": 1.5rem,
"sm": 2rem,
"md": 3rem,
"lg": 4.5rem,
@@ -200,6 +201,7 @@ $badge-font-weight: $font-weight-bold !default;
$badge-empty-size: .5rem !default;
//buttons
$input-color: $body-color !default;
$input-btn-line-height: (22/15) !default;
$input-btn-font-size: $font-size-base !default;
@@ -216,7 +218,7 @@ $input-height-sm: null !default;
$input-height-lg: null !default;
$btn-padding-x: 1rem !default;
$btn-font-weight: $font-weight-bold !default;
$btn-font-weight: 500 !default;
$btn-border-radius: 3px !default;
//cards

2
scss/ui/_buttons.scss
View File

@@ -1,5 +1,5 @@
.btn-secondary {
@include button-variant($secondary, $border-color, $body-color);
@include button-variant($white, $border-color, $secondary);
}
.btn {

11
scss/vendor/_selectize.scss vendored
View File

@@ -1,9 +1,20 @@
.selectize-control {
padding: 0;
border: 0;
&.multi .selectize-input > div {
font-size: $h5-font-size;
margin: 0 8px 2px 0;
padding: 2px 8px;
border-radius: $border-radius;
background-color: $gray-200;
color: inherit;
}
}
.selectize-input {
display: flex !important;
height: 100%;
border: 1px solid $border-color;
padding: $input-padding-y $input-padding-x;
font-size: $input-font-size;