提交 d54053ff 编写于 作者: C codecalm

unused components, stars, new components, commits list

上级 17825ca3
const glob = require("glob"),
fs = require("fs");
let foundFiles = [];
glob.sync("pages/**/*.{html,md}").forEach(function (file) {
let fileContent = fs.readFileSync(file);
fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, function(f, c, filename){
filename = 'pages/_includes/' + filename;
if(!foundFiles.includes(filename)) {
foundFiles.push(filename);
}
});
});
let includeFiles = glob.sync("pages/_includes/**/*.html");
includeFiles.forEach(function(file){
if(! foundFiles.includes(file)) {
console.log('file', file);
}
});
// console.log('foundFiles', foundFiles);
// console.log('includeFiles', includeFiles);
......@@ -29,7 +29,8 @@
"js-compile": "npm-run-all --sequential js-compile-*",
"js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
"js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
"svg-svgo": "svgo -f svg/fe --pretty && svgo -f svg/brand --pretty"
"svg-svgo": "svgo -f svg/fe --pretty && svgo -f svg/brand --pretty",
"unused-files": "node build/unused-files.js"
},
"repository": {
"type": "git",
......@@ -69,6 +70,7 @@
"eslint-config-xo": "0.27.2",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-unicorn": "13.0.0",
"glob": "^7.1.6",
"http-server": "0.11.1",
"icon-font-generator": "2.1.10",
"node-sass": "4.13.0",
......
此差异已折叠。
......@@ -49,7 +49,7 @@ docs:
# icon: file-plus
# label: v1.0
components:
url: components.html
title: Components
icon: truck
#components:
# url: components.html
# title: Components
# icon: truck
......@@ -48,8 +48,7 @@
"credit_card_type": "bankcard",
"bitcoin_address": "1NvUquhGpiEqpedb4H2HCHawrPaG8i4zap",
"birth_date": "20/04/1999",
"ip_address": "207.39.45.122",
"photo": "img/avatars/001m.jpg"
"ip_address": "207.39.45.122"
},
{
"id": 3,
......@@ -178,8 +177,7 @@
"credit_card_type": "maestro",
"bitcoin_address": "1B4Z2mefCpudYsixuC1gZKzfXyp8224XwD",
"birth_date": "01/05/1978",
"ip_address": "18.191.234.41",
"photo": "img/avatars/004m.jpg"
"ip_address": "18.191.234.41"
},
{
"id": 8,
......@@ -256,8 +254,7 @@
"credit_card_type": "bankcard",
"bitcoin_address": "1MAkh5f9Em7A8Af8K4kpebxDWgq5mRreiR",
"birth_date": "31/05/1959",
"ip_address": "239.192.13.146",
"photo": "img/avatars/005m.jpg"
"ip_address": "239.192.13.146"
},
{
"id": 11,
......@@ -360,8 +357,7 @@
"credit_card_type": "bankcard",
"bitcoin_address": "14DNMF4e5A7TAfHW1YrU786kTA7F6HhJxd",
"birth_date": "11/05/1989",
"ip_address": "103.33.220.252",
"photo": "img/avatars/008m.jpg"
"ip_address": "103.33.220.252"
},
{
"id": 15,
......@@ -490,8 +486,7 @@
"credit_card_type": "mastercard",
"bitcoin_address": "1DZzgRGCNCfBBNQt6SVsf9m3y8a5oKfkeo",
"birth_date": "18/04/1998",
"ip_address": "236.25.68.167",
"photo": "img/avatars/007f.jpg"
"ip_address": "236.25.68.167"
},
{
"id": 20,
......@@ -750,8 +745,7 @@
"credit_card_type": "solo",
"bitcoin_address": "1DqT7amUSs2cj4zqickvh9EeENCLdpVxhV",
"birth_date": "04/04/1978",
"ip_address": "0.216.229.213",
"photo": "img/avatars/014f.jpg"
"ip_address": "0.216.229.213"
},
{
"id": 30,
......@@ -802,8 +796,7 @@
"credit_card_type": "instapayment",
"bitcoin_address": "18w22JWzFW3zqehHWMhtEQiRWnJ4XypvXC",
"birth_date": "31/07/1977",
"ip_address": "50.4.71.163",
"photo": "img/avatars/014m.jpg"
"ip_address": "50.4.71.163"
},
{
"id": 32,
......
......@@ -8,18 +8,18 @@ done: true
### Flag
{% example html %}
{% include ui/flag.html name="tg" class="mr-1" %}
{% include ui/flag.html name="br" class="mr-1" %}
{% include ui/flag.html name="pt" %}
{% include ui/flag.html flag="tg" class="mr-1" %}
{% include ui/flag.html flag="br" class="mr-1" %}
{% include ui/flag.html flag="pt" %}
{% endexample %}
### Flag sizes
{% example html %}
{% include ui/flag.html name="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html name="pl" class="flag-size-lg mr-1" %}
{% include ui/flag.html name="pl" class="flag-size-md" %}
{% include ui/flag.html name="pl" class="mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-md" %}
{% include ui/flag.html flag="pl" class="mr-1" %}
{% endexample %}
### Types
......@@ -27,7 +27,7 @@ done: true
<table>
{% for flag in site.data.flags %}
<tr>
<td>{% include ui/flag.html name=flag.flag %}</td>
<td>{% include ui/flag.html flag=flag.flag %}</td>
<td><code>{{ flag.flag }}</code></td>
<td>{{ flag.name }}</td>
</tr>
......
<div class="card">
<div class="card-status bg-primary"></div>
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae, cumque dolor, eveniet in maiores nihil
pariatur placeat quibusdam suscipit ullam ut. Aliquam eum eveniet praesentium quidem quod repellendus sit?
</div>
<div class="card-body d-flex align-items-center border-top">
{% include ui/avatar.html person-id=17 class="mr-3 rounded" %}
<div class="mr-3">
<div>
<strong>1,700</strong>
</div>
<div class="text-muted">Users</div>
</div>
<div class="ml-auto">
<div class="sparkline" data-spark="20,40,30,40,60,80,100" data-spark-type="line" data-spark-color="yellow">
</div>
</div>
</div>
<div class="card-body text-center border-top p-0">
<div class="d-flex">
<div class="flex-fill py-3">
<div>$6,000</div>
<small class="text-muted">Target</small>
</div>
<div class="flex-fill py-3 border-left">
<div>$2,500</div>
<small class="text-muted">Last Month</small>
</div>
<div class="flex-fill py-3 border-left">
<div>5,235</div>
<small class="text-muted">Likes</small>
</div>
</div>
</div>
<table class="table card-table table-vcenter border-top">
<tbody>
<tr>
<th>Network</th>
<th colspan="2">Visitors</th>
</tr>
<tr>
<td>Instagram</td>
<td>3,550</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 76%"></div>
</div>
</td>
</tr>
<tr>
<td>Twitter</td>
<td>1,789</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 62%"></div>
</div>
</td>
</tr>
<tr>
<td>Facebook</td>
<td>1,245</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 46%"></div>
</div>
</td>
</tr>
<tr>
<td>Pinterest</td>
<td>95</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 6%"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[14].file }}" alt="">
<div class="card-header">
<h5 class="card-title">Card title</h5>
<div class="card-options">
<a href="#" class="btn btn-secondary btn-sm">Button</a>
<a href="#" class="btn btn-primary btn-sm">Button</a>
</div>
</div>
<div class="card-body">
<p>Aliquam autem, culpa dolore doloremque eius error fugiat hic id illum nemo porro quia quos reiciendis, reprehenderit saepe sed, sequi similique vero.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
<div class="progress card-progress">
<div class="progress-bar bg-green" style="width: 20%"></div>
</div>
</div>
<div class="card">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center border-bottom pb-3 mb-3">
<div>
{% include ui/avatar.html person-id="3" class="mr-3"%}
</div>
<div class="text-muted">
<strong class="text-body">Martin</strong> completed the task <a href="#">Set up client chat channel</a>
<div class="font-weight-light">Just now</div>
</div>
</div>
<div class="d-flex align-items-center border-bottom pb-3 mb-3">
<div>
{% include ui/avatar.html person-id="31" class="mr-3"%}
</div>
<div class="text-muted">
<strong class="text-body">Pablo</strong> left the project
<div class="font-weight-light">Just now</div>
</div>
</div>
<div class="d-flex align-items-center">
<div>
{% include ui/avatar.html person-id="10" class="mr-3"%}
</div>
<div class="text-muted">
<strong class="text-body">Kate</strong> added the task <a href="#">Let's make Tabler awesome!</a>
<div class="font-weight-light">Just now</div>
</div>
</div>
</div>
</div>
......@@ -5,33 +5,48 @@
{% assign truncate = include.truncate | default: 100 %}
{% assign avatar = article.author %}
<div class="card{% if type == 'aside' %} card-aside{% endif %}">
{% if type == 'image' %}
<a href="#"><img class="card-img-top" src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}"></a>
{% endif %}
{% if type == 'aside' %}
<a href="#" class="card-aside-column{% if include.aside-class %} {{ include.aside-class }}{% endif %}" style="background-image: url({{ site.base }}/img/photos//{{ site.data.photos[article.image].file }})"></a>
{% endif %}
{% capture card-content %}
<h3><a href="#">{{ article.title }}</a></h3>
<div class="text-muted">{{ article.description | truncate: truncate }}</div>
<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-body">{{ author.first_name }} {{ author.last_name }}</a>
<small class="d-block text-muted">3 days ago</small>
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 {% if liked %}text-red{% else %}text-muted{% endif %}">
{% include ui/icon.html icon="heart" use-svg=true %}
</a>
</div>
</div>
{% endcapture %}
<div class="card-body d-flex flex-column">
<h4><a href="#">{{ article.title }}</a></h4>
<div class="text-muted">{{ article.description | truncate: truncate }}</div>
<div class="card d-flex flex-column">
<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-body">{{ author.first_name }} {{ author.last_name }}</a>
<small class="d-block text-muted">3 days ago</small>
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 {% if liked %}text-red{% else %}text-muted{% endif %}">
{% include ui/icon.html icon="heart" use-svg=true %}
</a>
{% if type == 'aside' %}
<div class="row row-0 flex-fill">
<div class="col-md-3">
<a href="#">
<img src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" class="w-100 h-100 object-cover" alt="Card side image">
</a>
</div>
<div class="col">
<div class="card-body">
{{ card-content }}
</div>
</div>
</div>
{% else %}
{% if type == 'image' %}
<a href="#">
<img class="card-img-top" src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}">
</a>
{% endif %}
<div class="card-body d-flex flex-column">
{{ card-content }}
</div>
{% endif %}
</div>
<div class="card">
<div class="card-header">
<h4>Book Hotel</h4>
</div>
<div class="card-body">
<form>
<div class="mb-2">
<label class="form-label">Check-in</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Pick a date">
<div class="input-group-append">
<span class="input-group-text">
{% include ui/icon.html icon='calendar' %}
</span>
</div>
</div>
</div>
<div class="mb-2">
<label class="form-label">Check-out</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Pick a date">
<div class="input-group-append">
<span class="input-group-text">
{% include ui/icon.html icon='calendar' %}
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="mb-2">
<label class="form-label">Adults</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
{% include ui/icon.html icon='user' %}
</span>
</div>
<input type="text" class="form-control" placeholder="1">
</div>
</div>
</div>
<div class="col-6">
<div class="mb-2">
<label class="form-label">Children</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
{% include ui/icon.html icon='user' %}
</span>
</div>
<input type="text" class="form-control" placeholder="2">
</div>
</div>
</div>
</div>
<label class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input"/>
<span class="custom-control-label">
I need to rent a car as well
</span>
</label>
<button type="submit" class="btn btn-primary btn-block">Book Hotel now</button>
</form>
</div>
</div>
......@@ -2,10 +2,7 @@
<div class="card-header">
<h3 class="card-title">Code block</h3>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempora architecto, sit a repellat dignissimos consequatur mollitia qui consequuntur recusandae numquam voluptate maiores, non cumque illo laboriosam sint dolores. Nostrum.
</div>
<div class="card-footer card-code">
<div class="card-code">
{% highlight scss %}
.card-footer {
background: transparent;
......@@ -16,4 +13,4 @@
}
{% endhighlight %}
</div>
</div>
\ No newline at end of file
</div>
<div class="card">
<div class="card-header">
<div class="card-title">{{ include.title }}</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-3">
<p>{{ include.description }} For more info <a href="{{ include.url }}" target="_blank">click here</a>.</p>
<p><code>&lt;i class="{{ include.icon_class }} {{ include.icon_class }}-ICON_NAME"&gt;&lt;/i&gt;</code></p>
</div>
<div class="col-9">
<div class="icons-list-wrap">
<ul class="icons-list">
{% for icon in include.icons %}
<li class="icons-list-item">
{% include ui/icon-brand.html icon=icon class="icon-md" %}
</li>
{% endfor %}
{% for icon in (0..20) %}
<li></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<a href="#">
<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[0].file }}"/>
</a>
<div class="card-body">
<h4>Awesome Breakfast</h4>
<div class="toolbar mb-3">
<a href="#" class="text-muted">
{% include ui/icon.html icon="clock" %}
May 23rd, 2018
</a>
<a href="#feed-form-1" class="text-muted">
{% include ui/icon.html icon="message-square" %}
24
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur consequatur dolor dolore, earum enim
error, nemo neque nulla quasi rerum, </p>
<a href="#" class="btn btn-primary">See more</a>
</div>
</div>
......@@ -25,7 +25,7 @@
<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 name=invoice.country %}
{% include ui/flag.html flag=invoice.country %}
{{ invoice.client }}
</td>
<td>
......
{% assign icon = include.icon | default: 'twitter' %}
<div class="card">
<div class="card-body text-center">
<div class="avatar avatar-lg bg-{{ icon }} mt-2 mb-4">
{% include ui/icon-brand.html icon=icon class="avatar-icon" %}
</div>
<h3>3 notifications</h3>
<p class="text-muted">Waiting for you!</p>
</div>
</div>
<div class="card">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{{ site.base }}/img/photos/{{ site.data.photos[22].file }}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{{ site.base }}/img/photos/{{ site.data.photos[10].file }}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{{ site.base }}/img/photos/{{ site.data.photos[15].file }}" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-body">
<h4>Sunny Place Apartment</h4>
<div class="toolbar mb-5">
<a href="#" class="text-muted">
{% include ui/icon.html icon="map-pin" %}
Veiga, PT
</a>
<a href="#" class="text-muted">
{% include ui/icon.html icon="users" %}
51
</a>
</div>
<div class="d-flex justify-content-between">
<div>
{% include ui/icon.html icon="star" class="icon-filled text-warning" %}
{% include ui/icon.html icon="star" class="icon-filled text-warning" %}
{% include ui/icon.html icon="star" class="icon-filled text-warning" %}
{% include ui/icon.html icon="star" class="icon-filled text-warning" %}
{% include ui/icon.html icon="star" %}
</div>
<span>
<strong>65 </strong>
Reviews</span>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
{% include ui/progress.html color="yellow" class="mb-2" value=10 %}
{% include ui/progress.html color="red" class="mb-2" value=30 %}
{% include ui/progress.html color="green" class="mb-2" value=80 %}
{% include ui/progress.html size="xs" color="blue" value=70 %}
</div>
</div>
<div class="card">
<div class="card-body">
<h4>System redesign</h4>
<div class="toolbar mb-3">
<a href="#" class="text-muted">
{% include ui/icon.html icon="file" %}
24 Files
</a>
<a href="#" class="text-muted">
{% include ui/icon.html icon="bar-chart-2" %}
12 Reports
</a>
</div>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis dolorem earum et, fugiat illum
incidunt modi ne&hellip; </p>
{% include ui/avatar-list.html text="+5" %}
</div>
</div>
{% assign person-id = include.person-id | default: 43 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}
<div class="card">
<div class="card-body">
<svg class="icon float-left">
<use xlink:href="#svg-map-pin"></use>
</svg>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid aperiam dolorem explicabo hic,
illo inventore molestiae!</p>
<div class="d-flex align-items-center">
<a href="#">
{% include ui/avatar.html person=p size="lg" %}
</a>
<div class="mx-3">
<h4>{{ p.full_name }}</h4>
<div>
{% include ui/icon.html icon="star" class="icon-filled text-warning" %}
{% include ui/icon.html icon="star" class="icon-filled text-warning" %}
{% include ui/icon.html icon="star" class="icon-filled text-warning" %}
{% include ui/icon.html icon="star" class="icon-filled text-warning" %}
{% include ui/icon.html icon="star" %}
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<ul class="list-unstyled mb-0">
{% for person in site.data.people limit: 5 offset: 50 %}
<li class="d-flex align-items-center pb-3 mb-3 border-bottom">
<img src="http://placehold.it/64x64" class="mr-3" alt="">
<div class="media-body">
<h5 class="mb-1">Naglowek lalala</h5>
<span class="text-muted">May 24th, 2018</span>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
\ No newline at end of file
<div class="card">
<div class="card-header">
<div class="card-title">Recommended Users</div>
</div>
<div class="card-body">
{% for person in site.data.people limit: 5 offset: 50 %}
<div class="mb-3">
<a href="#" class="d-flex align-items-center text-reset">
{% include ui/avatar.html person=person size="sm" class="mr-2"%}
{{ person.full_name }}
</a>
</div>
{% endfor %}
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Card title</h4>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam dolorem exercitationem
id illo iste maiores, nihil omnis perferendis possimus quis quos reiciendis tenetur unde vitae voluptas
voluptatum? Officia, quia!
</div>
</div>
......@@ -19,7 +19,7 @@
<div class="text-muted font-weight-normal mt-0">{{ include.title | default: 'Customers' }}</div>
<h3 class="h2 mt-2 mb-3">{{ include.count | default: "1,850" }}</h3>
<p class="mb-0 text-muted">
<span class="text-{{ color }} mr-2">{% include ui/icon.html icon=arrow %} {{ include.growth }}%</span>
{% include ui/trending.html value=include.growth %}
<span class="text-nowrap">{{ include.description | default: 'Since last month' }}</span>
</p>
</div>
......
<div class="card">
<div class="card-body p-2 text-center">
<div class="text-right {% if include.percentage > 0 %}text-green{% elsif include.percentage < 0 %}text-red{% endif %}">
{{ include.percentage }}%
{% if include.percentage > 0 %}
{% include ui/icon.html icon="arrow-up-right" class="icon-thin" %}
{% elsif include.percentage < 0 %}
{% include ui/icon.html icon="arrow-down-right" class="icon-thin" %}
{% endif %}
{% include ui/trending.html value=include.percentage %}
</div>
<div class="h1 m-0">{{ include.number }}</div>
<div class="text-muted mb-4">{{ include.title }}</div>
......
<div class="card">
<div class="card-body">
<h4>Text Widget</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores aspernatur dolor fugit id,
illo iste molestiae nam nesciunt veniam?
</p>
<a href="#" class="btn btn-primary">Find out more</a>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Top users</h4>
</div>
<div class="card-body">
<div class="row">
{% for person in site.data.people limit: 12 offset: 40 %}
<div class="col-sm-6" data-id="8">
<div class="media">
<a href="#">
{% include ui/avatar.html src=person.photo size="md" %}
</a>
</div>
<div class="d-flex flex-column">
<a href="#" class="text-body">{{ person.full_name }}</a>
<a href="#" class="text-muted leading-none">
{{ person.company }}
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">Typography</div>
</div>
<div class="card-body">
<div class="markdown">
<h1>Hello World</h1>
<p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus
ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate
semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub>
works as well!</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus
mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam
mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
</div>
</div>
{% assign photos = site.data.photos | where: "horizontal", true %}
{% assign person-id = include.person-id | default: 9 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}
<div class="card">
<div class="card-body d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center flex-row pr-1">
<div>
{% include ui/avatar.html person=p size="md" class="mr-3" %}
</div>
<div>
<p class="mb-0">{{ p.full_name }}</p>
<p class="mb-0 text-muted">{{ p.job_title }}</p>
</div>
</div>
{% include ui/button.html text="Follow" pill="true" outline="true" color="primary"%}
</div>
<div class="card-footer">
<div class="row row-xs">
{% for photo in photos limit: 9 %}
<div class="col-4 mb-2">
<div class="media media-1x1 rounded">
<a class="media-content"
style="background-image: url({{ site.base }}/img/photos/{{ photo.file }})"></a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% assign person-id = include.person-id | default: 22 %}
{% assign person-id = include.person-id | default: 25 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}
<div class="card">
<div class="card-body">
<div class="card-title font-weight-bold mb-4">Basic info</div>
<div class="mb-3">
{% include ui/icon.html icon="calendar" class="mr-2" %}
<span class="mr-2">Went to:</span>
<strong>{{ p.university }}</strong>
<div class="card-title">{{ include.title | default: 'Basic info' }}</div>
<div class="mb-2">
{% include ui/icon.html icon="book" class="mr-2 text-muted" %}
Went to: <strong>{{ p.university }}</strong>
</div>
<div class="mb-3">
{% include ui/icon.html icon="briefcase" class="mr-2" %}
<span class="mr-2">Worked at:</span>
<strong>{{ p.company }}</strong>
<div class="mb-2">
{% include ui/icon.html icon="briefcase" class="mr-2 text-muted" %}
Worked at: <strong>{{ p.company }}</strong>
</div>
<div class="mb-3">
{% include ui/icon.html icon="home" class="mr-2" %}
<span class="mr-2">Lives in:</span>
<strong>{{ p.city }}, {{ p.country }}</strong>
</div>
<div class="">
{% include ui/icon.html icon="map-pin" class="mr-2" %}
<span class="mr-2">From:</span>
<strong>{{ p.country }}</strong>
<div class="mb-2">
{% include ui/icon.html icon="home" class="mr-2 text-muted" %}
Lives in: <strong>{{ p.city }}, {{ p.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="map-pin" class="mr-2 text-muted" %}
From: <strong>{% include ui/flag.html flag=p.country_code %} {{ p.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="calendar" class="mr-2 text-muted" %}
Birth date: <strong>{{ p.birth_date }}</strong>
</div>
<div>
{% include ui/icon.html icon="clock" class="mr-2 text-muted" %}
Time zone: <strong>{{ p.time_zone }}</strong>
</div>
</div>
</div>
{% assign person-id = include.person-id | default: 25 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}
<div class="card">
<div class="card-body text-center">
<div class="row row-xs mb-4">
<div class="col-6 d-flex">
<div class="media flex-fill rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/6d35d9a2bd6c63c2.jpg)"></a>
</div>
</div>
<div class="col-6">
<div class="media media-2x1 mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/phcarouselExampleIndicatorsotos/6f6e2ef709fef97a.jpg)"></a>
</div>
<div class="row row-xs">
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/6fe407b4b13bbcde.jpg)"></a>
</div>
</div>
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/7ce612d952e536b2.jpg)"></a>
</div>
</div>
</div>
</div>
</div>
<h4 class="mb-1">Landscape Photos</h4>
<p class="mb-3 text-muted">Photos by {{ p.full_name }}</p>
<div class="d-flex justify-content-around align-items-center">
<div>
{% include ui/icon.html icon="eye" class="mr-2" %}
16K
</div>
{% include ui/avatar.html person=p size="md" %}
<div>
{% include ui/icon.html icon="image" class="mr-2" %}
69
</div>
</div>
</div>
</div>
{% assign person-id = include.person-id | default: 10 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}
<div class="card">
<div class="card-body text-center">
<a href="#">
{% include ui/avatar.html person=p size="lg" class="mb-3" %}
</a>
<h4>{{p.full_name}}</h4>
<div class="toolbar justify-content-center">
<a href="#" class="text-muted">
{% include ui/icon.html icon="map-pin" %}
{{ p.city }}, {{ p.country }}
</a>
<a href="#" class="text-muted">
{% include ui/icon.html icon="briefcase" %}
{{ p.job_title }}
</a>
</div>
</div>
<div class="row no-gutters border-top text-center">
<div class="col border-right py-3">
<p class="font-weight-bold mb-0">246</p>
<p class="text-muted mb-0">Followers</p>
</div>
<div class="col py-3">
<p class="font-weight-bold mb-0">1,205</p>
<p class="text-muted mb-0">Posts</p>
</div>
</div>
</div>
{% assign person-id = include.person-id | default: 20 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}
<div class="card">
<div class="card-body">
{% include ui/avatar.html person=p size="xl" status="success" class="mb-3"%}
<h4 class="mb-0">{{ p.full_name }}</h4>
<p class="text-muted mb-3">{{ p.job_title }}</p>
<div class="text-muted">
{% include ui/icon.html icon="mail" class="mr-1" %}
<span>{{ p.email }}</span>
</div>
<div class="text-muted mb-4">
{% include ui/icon.html icon="mic" class="mr-1" %}
<span>{{ p.ssn }}</span>
</div>
<div class="d-flex">
{% include ui/icon.html icon="facebook" class="mr-4" %}
{% include ui/icon.html icon="twitter" class="mx-4" %}
{% include ui/icon.html icon="mic" class="mx-4" %}
</div>
</div>
</div>
{% assign person-id = include.person-id | default: 19 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}
<div class="card">
<div class="card-body text-center">
{% include ui/avatar.html person=p size="xl" status="success" class="mb-3"%}
<h4 class="mb-0">{{ p.full_name }}</h4>
<p class="text-muted mb-3">{{ p.job_title }}</p>
<div class="text-muted mb-1">{{ p.email }}</div>
<div class="text-muted mb-4">{{ p.ssn }}</div>
<div class="d-flex justify-content-center">
{% include ui/icon.html icon="brand/facebook" class="mr-2 text-facebook" %}
{% include ui/icon.html icon="brand/twitter" class="text-twitter mx-2" %}
{% include ui/icon.html icon="brand/youtube" class="text-youtube mx-2" %}
</div>
</div>
</div>
{% assign person-id = include.person-id | default: 13 %}
{% assign person = site.data.people[person-id] %}
{% assign p = person[0] %}
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<a href="#">
{% include ui/avatar.html person=p size="lg" %}
</a>
<div class="mx-3">
<h4>{{ p.full_name }}</h4>
<div class="text-muted">
{% include ui/icon.html icon="map-pin" %}
{{ p.city }}, {{ p.country }}
</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consectetur dolore earum magnam
officiis.</p>
<div class="d-flex">
<a href="#" class="btn btn-block btn-primary">View profile</a>
<a href="#" class="btn btn-secondary btn-icon ml-3">
{% include ui/icon.html icon="user" %}
</a>
</div>
</div>
</div>
{% assign limit = include.limit | default: 10 %}
{% assign offset = include.offset | default: 0 %}
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Top users' }}</h3>
</div>
<div class="card-body">
<div class="row mb-n3">
{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
{% for person in site.data.people limit: limit offset: offset %}
{% assign color = forloop.index | plus: 5 | random_item: colors %}
<div class="col-6 row row-sm mb-3 align-items-center">
<a href="#" class="col-auto">
{% include ui/avatar.html person=person status=color %}
</a>
<div class="col text-truncate">
<a href="#" class="text-body d-block text-truncate">{{ person.full_name }}</a>
<small class="d-block text-muted text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</small>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% assign limit = include.limit | default: 8 %}
{% assign offset = include.offset | default: 0 %}
{% assign hoverable = include.hoverable | default: false %}
{% assign checked-ids = include.checked-ids | default: '3,5,6' | extract: ',' %}
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Last commits' }}</h3>
</div>
<div class="list list-row{% if hoverable %} list-hoverable{% endif %}">
{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
{% for person in site.data.people limit: limit offset: offset %}
{% assign color = forloop.index | plus: 5 | random_item: colors %}
<div class="list-item">
{% if include.checkbox %}
<div><input type="checkbox" class="form-check-input"{% if checked-ids contains forloop.index %} checked{% endif %}></div>
{% else %}
<div><span class="badge{% if color != 'x' %} bg-{{ color }}{% endif %}"></span></div>
{% endif %}
<a href="#">
{% include ui/avatar.html person=person %}
</a>
<div class="text-truncate">
<a href="#" class="text-body d-block">{{ person.full_name }}</a>
{% assign i = forloop.index | plus: offset %}
<small class="d-block text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</small>
</div>
{% if hoverable %}
{% if checked-ids contains forloop.index %}
{% assign star-color = 'text-yellow' %}
{% else %}
{% assign star-color = 'text-muted' %}
{% endif %}
<a href="#" class="list-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include ui/icon.html icon="star" class=star-color %}</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<script>
$(document).ready(function () {
$('#{{ include.id }}').each(function () {
$(this).vectorMap({
map: '{{ include.data[1].map }}'
});
});
})
</script>
......@@ -23,13 +23,13 @@
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number=43 title="New Tickets" value=6 %}
{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number="$95" title="Daily Earnings" value=-2 %}
{% include cards/small-stats-3.html number=95 number-prefix="$" title="Daily Earnings" percentage=-2 %}
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number=7 title="New Replies" value=9 %}
{% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
</div>
</div>
</div>
......@@ -55,26 +55,6 @@
<div class="col-md-4">
{% include cards/order-statistics.html %}
</div>
<div class="col-md-6">
<div class="alert alert-primary">Are you in trouble? <a href="{{ site.base }}/docs/index.html" class="alert-link">Read our documentation</a> with code samples.</div>
<div class="row">
<div class="col-sm-6">
{% include cards/chart.html height=12 title="Chart title" id="chart-donut" data="donut" %}
</div>
<div class="col-sm-6">
{% include cards/chart.html height=12 title="Chart title" id="chart-pie" data="pie" %}
</div>
<div class="col-sm-6">
{% include cards/digit.html color="red" title="New feedback" digit="62" width="28%" %}
</div>
<div class="col-sm-6">
{% include cards/digit.html color="green" title="Today profit" digit="$652" width="84%" %}
</div>
</div>
</div>
{% endcomment %}
<div class="col-sm-6 col-xl-3">
......@@ -91,51 +71,12 @@
</div>
</div>
{% comment %}
<div class="row row-deck">
{% for article in site.data.articles limit: 2 %}
<div class="col-lg-6">
{% include cards/blog-single.html article=article type="aside" %}
{% for article in site.data.articles limit: 3 offset: 4 %}
<div class="col-lg">
{% include cards/blog-single.html article=article type="image" %}
</div>
{% endfor %}
</div>
{% endcomment %}
<div class="row row-deck">
{% comment %}
<div class="col-12">
{% include cards/table-users.html %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/browsers.html %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/projects-list.html %}
</div>
<div class="col-md-6 col-lg-4">
{% include cards/members.html %}
</div>
<div class="col-md-6 col-lg-12">
<div class="row">
<div class="col-sm-6 col-lg-3">
{% include cards/chart-bg.html id="chart-bg-users-1" %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/chart-bg.html id="chart-bg-users-2" offset=60 aggregate=true color="red" rate="-3%" %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/chart-bg.html id="chart-bg-users-3" offset=50 color="green" rate="-3%" %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/chart-bg.html id="chart-bg-users-4" offset=40 color="yellow" rate="9%" %}
</div>
</div>
</div>
{% endcomment %}
<div class="col-12">
{% include cards/invoices.html %}
......
{% assign id = 0 | random_id %}
<a href="{{ site.base }}" class="navbar-brand">
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
</a>
<div class="flex-fill">
<h6 class="navbar-heading">Docs</h6>
{% include layout/menu.html menu=include.menu class="mb-md-4" %}
<h6 class="navbar-heading">Other</h6>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon">{% include ui/icon.html icon="power" %}</span>
<span class="nav-text">Logout</span>
</a>
</li>
</ul>
{% assign menu = page.menu | default: layout.menu %}
<aside class="layout-menubar {% if include.class %} {{ include.class }}{% endif %} {% if include.dark %}sidenav-dark bg-dark text-white{% else %}sidenav-light{% endif %}{% if include.fixed %} sidenav-fixed{% endif %}{% if include.right %} sidenav-right{% endif %}{% if include.folded %} sidenav-folded{% endif %} js-sidebar" id="sidebar">
<div class="container">
{% include layout/sidenav-content.html menu=menu dark=include.dark %}
</div>
</aside>
<span class="flag flag-{{ include.name }}{% if include.class %} {{ include.class }}{% endif %}"></span>
<span class="flag flag-{{ include.flag | default: 'uk' | downcase }}{% if include.class %} {{ include.class }}{% endif %}"></span>
{% removeemptylines %}
{% assign count = include.count | default: 5 %}
{% assign rate = include.rate | default: 4 %}
{% assign icon = include.icon | default: 'star' %}
{% assign class = include.color | default: 'yellow' | prepend: 'text-' %}
{% assign filled = include.filled | default: false %}
<div class="stars">
{% for i in (1..5) %}
<span class="star {% if forloop.index <= rate %}{{ class }}{% endif %}">
{% if forloop.index <= rate and filled %}
{% include ui/icon.html icon=icon class="icon-filled" %}
{% else %}
{% include ui/icon.html icon=icon %}
{% endif %}
</span>
{% endfor %}
</div>
{% endremoveemptylines %}
<label class="custom-switch m-0">
<input type="checkbox" value="1" class="custom-switch-input"{% if include.checked %} checked{% endif %}>
<span class="custom-switch-indicator"></span>
</label>
......@@ -10,6 +10,6 @@
{% assign icon = 'trending-down' %}
{% endif %}
<span class="text-{{ color }}{% if include.class %} {{ include.class }}{% endif %}">
<span class="text-{{ color }} d-inline-flex align-items-center leading-none{% if include.class %} {{ include.class }}{% endif %}">
{{ value }}% {% include ui/icon.html icon=icon class="icon-thin" %}
</span>
......@@ -7,7 +7,7 @@ done: true
{% for flag in site.data.flags %}
<div class="d-flex flex-column text-center m-3">
<p class="d-inline-block">{{flag.name}}</p>
{% include ui/flag.html name=flag.flag class="my-3 mx-auto" %}
{% include ui/flag.html flag=flag.flag class="my-3 mx-auto" %}
<code>.flag .flag-{{flag.flag}}</code>
</div>
{% endfor %}
......
......@@ -53,11 +53,10 @@ page-title-right: date
{% include cards/small-stats-2.html title="Customers" count="1,950" growth=5.2 color="yellow" %}
{% include cards/small-stats-2.html title="Orders" count="8256" growth=0 color="green" %}
{% include cards/small-stats-2.html title="Revenue" count="$58,924" growth=-3.1 color="red" light=true %}
{% include cards/_full.html %}
</div>
<div class="col-md-6 col-lg-4">
{% include cards/project-kanban.html title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0 due="72 days" %}
{% include cards/project-kanban.html title="Tabler React" value=80 offset=20 %}
{% include cards/_full-2.html %}
{% include cards/user-info.html %}
</div>
</div>
---
---
<div class="row">
<div class="col-md-6">
{% include cards/user-info.html %}
{% include cards/users-list-2.html %}
<div class="card">
<div class="card-body">
<div>{% include ui/stars.html %}</div>
<div>{% include ui/stars.html count=3 %}</div>
<div>{% include ui/stars.html color="red" %}</div>
<div>{% include ui/stars.html filled=true %}</div>
<div>{% include ui/stars.html icon="heart" color="red" rate=2 %}</div>
<div>{% include ui/stars.html icon="circle" color="blue" %}</div>
</div>
</div>
</div>
<div class="col-md-6">
{% include cards/users-list.html hoverable=true checked-ids="2,5,8" %}
{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
</div>
</div>
......@@ -39,6 +39,7 @@
@import "ui/login";
@import "ui/modals";
@import "ui/nav";
@import "ui/stars";
@import "ui/pagination";
@import "ui/progress";
@import "ui/ribbons";
......
......@@ -266,14 +266,15 @@ Card table
Card code
*/
.card-code {
background: $dark;
padding: 0;
.highlight {
@extend .highlight-dark;
margin: 0;
border: 0;
}
pre {
padding: 0;
margin: 0;
color: #fff;
text-shadow: none;
......
......@@ -19,8 +19,8 @@
.flag {
position: relative;
display: inline-block;
width: 1.125rem * 1.33333;
height: 1.125rem;
width: 1em * 1.33333;
height: 1em;
vertical-align: -3px;
background-repeat: no-repeat;
background-position: center;
......
......@@ -2,6 +2,7 @@
width: 1em;
height: 1em;
font-size: 1em;
vertical-align: -0.2em;
&:hover {
text-decoration: none;
......
.list-item {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
}
.list-item-actions {
margin-left: auto;
}
.list-bordered {
.list-item {
border-top: 1px solid $border-color-alpha;
margin-top: -1px;
&:first-child {
border-top: none;
}
}
}
.list-hoverable {
.list-item-actions {
opacity: 0;
transition: .3s opacity;
}
.list-item:hover .list-item-actions,
.list-item-actions.show {
opacity: 1;
}
}
.list-row {
@extend .list-bordered;
.list-item {
flex-direction: row;
align-items: center;
padding: .5rem ($card-spacer-x / 2);
> * {
padding-left: ($card-spacer-x / 2);
padding-right: ($card-spacer-x / 2);
}
}
}
.list-timeline {
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.list-timeline > li {
position: relative;
margin-bottom: 1.5rem;
> li {
position: relative;
margin-bottom: 1.5rem;
&:last-child {
margin-bottom: 0;
&:last-child {
margin-bottom: 0;
}
}
}
......@@ -29,7 +80,7 @@
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: #fff;
color: #ffffff;
text-align: center;
background: $text-muted;
border-radius: 50%;
......
......@@ -40,7 +40,6 @@
}
.nav-icon {
font-size: 1rem;
line-height: 1;
margin-right: .25rem;
......
......@@ -3,15 +3,16 @@
align-items: center;
justify-content: center;
min-width: px2rem(40px);
height: px2rem(40px);
min-width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
padding: 0 .25rem;
font-size: $font-size-base;
font-weight: 600;
line-height: px2rem(40px);
color: $text-muted;
text-align: center;
background: theme-color-lightest($text-muted);
background: $gray-200;
border-radius: 3px;
.icon {
......
.stars {
display: inline-flex;
color: $gray-400;
font-size: $h5-font-size;
.star:not(:first-child) {
margin-left: .25rem;
}
}
.star {
}
......@@ -3,6 +3,9 @@
height: auto;
width: auto;
left: .5rem;
border: 1px solid $border-color;
background: $white;
color: $body-color;
}
.jqvmap-zoomin {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册