Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 c566b7d8 编写于 作者: C codecalm
浏览文件
操作

selectize fixes, buttons fixes, bootstrap upgrade

上级 a0dd18c6
隐藏空白更改
内联 并排
Showing with 186 addition and 124 deletion
pages/_data/selects.yml
浏览文件 @ c566b7d8
......@@ -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
......
pages/_includes/cards/invoices.html
浏览文件 @ c566b7d8
<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>
pages/_includes/parts/buttons-table.html
浏览文件 @ c566b7d8
......@@ -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 %}
......
pages/_includes/ui/button.html
浏览文件 @ c566b7d8
{% 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' %}
......
pages/_includes/ui/form/selectize.html
浏览文件 @ c566b7d8
......@@ -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 %}
pages/gallery.html
浏览文件 @ c566b7d8
......@@ -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>
pages/pagination.html
浏览文件 @ c566b7d8
......@@ -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>
pages/tmp4.html 0 → 100644
浏览文件 @ c566b7d8
---
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>
pages/users.html
浏览文件 @ c566b7d8
......@@ -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>
scss/_variables.scss
浏览文件 @ c566b7d8
......@@ -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
......
scss/ui/_buttons.scss
浏览文件 @ c566b7d8
.btn-secondary {
@include button-variant($secondary, $border-color, $body-color);
@include button-variant($white, $border-color, $secondary);
}
.btn {
......
scss/vendor/_selectize.scss
浏览文件 @ c566b7d8
.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;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或