Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

cards components, progress fixes, font fixes

Browse Source
This commit is contained in:
codecalm
2019-10-15 20:25:41 +02:00
parent faf81c6e16
commit 40a1f9dc7c
29 changed files with 237 additions and 1905 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_components/progress.html
+9
View File
@@ -0,0 +1,9 @@
---
title: Progress bar
columns: 1
---
{% include ui/progress-description.html percentage=45 %}
{% include ui/progress-description.html percentage=32 color="red" %}
{% include ui/progress-description.html percentage=90 color="yellow" %}
{% include ui/progress-description.html percentage=51 color="green" %}
pages/_data/menu.yml
-7
View File
@@ -70,10 +70,3 @@ components:
url: components.html
title: Components
icon: truck
customize:
url: '#customize'
title: Customize
icon: sliders
toggle: modal
pages/_includes/cards/blog-single.html
+1 -1
View File
@@ -24,7 +24,7 @@
<div class="d-flex align-items-center pt-5 mt-auto">
{% include ui/avatar.html person-id=avatar size="md" %}
<div class="ml-3">
<a href="{{ site.base }}/profile.html" class="text-default">{{ author.first_name }} {{ author.last_name }}</a>
<a href="{{ site.base }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
<small class="d-block text-muted">3 days ago</small>
</div>
<div class="ml-auto">
pages/_includes/cards/company-employees.html
+1 -1
View File
@@ -13,7 +13,7 @@
{% for person in site.data.people limit: 5 offset: 20 %}
<tr>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="javascript:void(0)" class="text-inherit">{{ person.full_name }}</a></td>
<td><a href="javascript:void(0)" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
<td>
pages/_includes/cards/invoices.html
+1 -1
View File
@@ -21,7 +21,7 @@
{% for invoice in site.data.invoices limit: 5 %}
<tr>
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
<td><a href="invoice.html" class="text-inherit">{{ invoice.name }}</a></td>
<td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
<td>
{% include ui/flag.html name=invoice.country %}
{{ invoice.client }}
pages/_includes/cards/recommended-users.html
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="card-body">
{% for person in site.data.people limit: 5 offset: 50 %}
<div class="mb-3">
<a href="javascript:void(0)" class="d-flex align-items-center text-inherit">
<a href="javascript:void(0)" class="d-flex align-items-center text-reset">
{% include ui/avatar.html person=person size="sm" class="mr-2"%}
{{ person.full_name }}
</a>
pages/_includes/cards/tasks.html
+1 -1
View File
@@ -13,7 +13,7 @@
</label>
</td>
<td class="w-100">
<a href="javascript:void(0)" class="text-inherit">{{ task.name }}</a>
<a href="javascript:void(0)" class="text-reset">{{ task.name }}</a>
</td>
<td class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %}
pages/_includes/cards/top-users.html
+1 -1
View File
@@ -12,7 +12,7 @@
</a>
</div>
<div class="d-flex flex-column">
<a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a>
<a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
<a href="javascript:void(0)" class="text-muted leading-none">
{{ person.company }}
</a>
pages/_includes/layout/sidenav-content.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% assign id = 0 | random_id %}
<div class="pb-3">
<a href="{{ site.base }}" class="navbar-brand text-inherit">
<a href="{{ site.base }}" class="navbar-brand text-reset">
<img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
</a>
pages/_includes/parts/navbar.html
+2 -2
View File
@@ -7,7 +7,7 @@
<span class="navbar-toggler-icon"></span>
</a>
<a href="{{ site.base }}" class="navbar-brand text-inherit mr-md-3">
<a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %}
@@ -101,7 +101,7 @@
</span>
{% elsif include.user-menu == 2 %}
<span class="mx-2 d-none leading-none d-lg-block text-right">
<span class="text-default">{{ person.full_name }}</span>
<span class="text-body">{{ person.full_name }}</span>
</span>
{% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 3 %}
pages/_includes/ui/button.html
+4 -4
View File
@@ -2,13 +2,13 @@
{% assign spinner-class = false %}
{% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
{% assign element = include.element | default: 'button' %}
<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">
{% assign e = include.element | default: 'button' %}
<{{ e }}{% if e == 'a' %} href="{{ include.href | default: '#' }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">
{% if include.spinner %}
{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %}
{{ include.text }}
{{ include.text | default: "Button" }}
{% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
</{{ element }}>
</{{ e }}>
{% endremoveemptylines %}
pages/_includes/ui/icon.html
+19 -20
View File
@@ -1,25 +1,24 @@
{% removeemptylines %}
{% if include.use-svg %}
{% assign svg-file="svg/" | append: include.icon | append: ".svg" %}
{% capture svg-icon %}
{% include_cached {{ svg-file }} %}
{% endcapture %}
{% assign svg-file="svg/" | append: include.icon | append: ".svg" %}
{% capture svg-icon %}
{% include_cached {{ svg-file }} %}
{% endcapture %}
{% assign replace-to = "icon" %}
{% assign replace-to = "icon" %}
{% if include.right %}
{% assign replace-to = replace-to | append: " icon-right" %}
{% endif %}
{% if include.class %}
{% assign replace-to = replace-to | append: ' ' | append: include.class %}
{% endif %}
{% assign replace-to = 'class="' | append: replace-to | append: '"' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{% else %}
{% assign provider = include.provider | default: "fe" %}
<i class="icon {{ provider }} {{ provider }}-{{ include.icon }}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}"></i>
{% if include.right %}
{% assign replace-to = replace-to | append: " icon-right" %}
{% endif %}
{% if include.class %}
{% assign replace-to = replace-to | append: ' ' | append: include.class %}
{% endif %}
{% if include.color %}
{% assign replace-to = replace-to | append: ' text-' | append: include.color %}
{% endif %}
{% assign replace-to = 'class="' | append: replace-to | append: '"' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{% endremoveemptylines %}
pages/_includes/ui/progress-description.html
+11
View File
@@ -0,0 +1,11 @@
{% assign size = include['size'] | default: 'sm' %}
{% assign color = include.color | default: 'blue' %}
<div class="{% if include.class %}{{ include.class }}{% else %}mb-3{% endif %}">
<div class="d-flex mb-1 align-items-center">
<div class="text-h5 font-weight-bolder m-0 mr-2">Label</div>
<div class="text-h5 text-muted">Description</div>
<span class="ml-auto text-h6 text-{{ color }}">{{ include.percentage }}%</span>
</div>
{% include ui/progress.html size=size percentage=include.percentage color=color %}
</div>
pages/_layouts/component.html
+25 -1
View File
@@ -7,6 +7,25 @@ og-component: true
{% assign columns = page.columns | default: 0 %}
{% capture demo-html %}
<div class="tabler-demo">
{{ content }}
</div>
{% endcapture %}
{% capture demo-css %}
.tabler-demo {
padding: 3rem;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
}
{% endcapture %}
<div class="row">
<div class="col-lg-3">
<div class="list-group list-group-transparent mb-0">
@@ -37,7 +56,12 @@ og-component: true
<div class="row">
<div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
<div class="col">{% include ui/button.html icon="codesandbox" text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
<div class="col">
<form action="https://codepen.io/pen/define" method="post" target="_blank">
<input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
{% include ui/button.html icon="codesandbox" text="Edit in CodePen" color="primary" block=true class="mt-4" element="button" type="submit" %}
</form>
</div>
</div>
</div>
</div>
pages/_layouts/docs.html
+2 -2
View File
@@ -23,10 +23,10 @@ page-title: Documentation
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-lg-8">
<div class="card-body p-lg-7">
<div class="markdown">
<h2 class="mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
<h2 class="h1 mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
{% if page.plugin %}
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code> plugin.</div>
pages/repo.html
+6 -6
View File
@@ -32,12 +32,12 @@ done: true
<div class="d-flex align-items-center w-100">
{% include ui/avatar.html person=person size="xs" class="mr-2" %}
<div>
<a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a>
<a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
merge pull request
<a href="javascript:void(0)" class="text-default">#176</a>
<a href="javascript:void(0)" class="text-body">#176</a>
from codecalm/dev
</div>
<div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-inherit font-semibold">54e9403</a> 4 days ago</div>
<div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-reset font-semibold">54e9403</a> 4 days ago</div>
</div>
</div>
<div class="table-responsive">
@@ -50,13 +50,13 @@ done: true
{% else %}
{% include ui/icon.html icon="file" class="mr-1" %}
{% endif %}
<a href="javascript:void(0)" class="text-default">{{ file.name }}</a>
<a href="javascript:void(0)" class="text-body">{{ file.name }}</a>
</td>
<td class="text-muted text-nowrap">
<a href="javascript:void(0)" class="text-inherit">{{ file.comment }}</a>
<a href="javascript:void(0)" class="text-reset">{{ file.comment }}</a>
</td>
<td class="text-right text-muted text-nowrap">
<a href="javascript:void(0)" class="text-inherit">{{ file.date }}</a>
<a href="javascript:void(0)" class="text-reset">{{ file.date }}</a>
</td>
</tr>
{% endfor %}
pages/text.html
+44
View File
@@ -0,0 +1,44 @@
---
---
<div class="card">
<div class="card-body">
<div class="mb-3">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
{% include ui/button.html color="blue" size="sm" %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h5>Lorem ipsum dolor sit amet</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
</div>
<div class="mb-3">
{% include ui/button.html color="blue" %}
{% include ui/button.html color="danger" %}
{% include ui/button.html color="green" %}
</div>
<div class="mb-3">
<input type="text" class="form-control d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" %}
<input type="text" class="form-control form-control-sm d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" size="sm" %}
<input type="text" class="form-control form-control-lg d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" size="lg" %}
</div>
</div>
</div>