1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00

reformat code

This commit is contained in:
codecalm
2020-01-29 22:51:49 +01:00
parent 010d92dded
commit bdff782f0e
17 changed files with 496 additions and 495 deletions

View File

@@ -1,27 +1,29 @@
<div class="card">
<div class="card-body">
<div class="card-body">
<div>Total orders</div>
<div>Total orders</div>
<div class="d-flex align-items-baseline mb-3">
<div class="h1 mb-0 mr-2">2,137</div>
<div class="mr-auto">{% include ui/trending.html value=7 %}</div>
</div>
<div class="d-flex align-items-baseline mb-3">
<div class="h1 mb-0 mr-2">2,137</div>
<div class="mr-auto">{% include ui/trending.html value=7 %}</div>
</div>
{% include ui/progress.html values="40,15,25,15,5" class="mb-4" %}
{% include ui/progress.html values="40,15,25,15,5" class="mb-4" %}
<ul class="list-unstyled">
{% for item in site.data.orders %}
<li class="row row-sm lh-sm align-items-center mb-2">
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
<div class="col">
{{ item.title }}
<div class="text-h6 text-muted">{{ item.subtitle }}</div>
</div>
<div class="col-auto small text-muted"><strong class="text-body">{{ forloop.index | random_number: 500, 2000 | intcomma }}</strong> orders</div>
</li>
{% endfor %}
</ul>
</div>
<ul class="list-unstyled">
{% for item in site.data.orders %}
<li class="row row-sm lh-sm align-items-center mb-2">
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
<div class="col">
{{ item.title }}
<div class="text-h6 text-muted">{{ item.subtitle }}</div>
</div>
<div class="col-auto small text-muted"><strong class="text-body">{{ forloop.index | random_number: 500, 2000
| intcomma }}</strong> orders
</div>
</li>
{% endfor %}
</ul>
</div>
</div>

View File

@@ -1,29 +1,29 @@
<div class="card">
<div class="card-body">
<div class="media">
{% include ui/avatar.html person-id=8 size="xl" %}
<div class="media-body ml-4">
<h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
<p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>
<div class="card-body">
<div class="media">
{% include ui/avatar.html person-id=8 size="xl" %}
<div class="media-body ml-4">
<h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
<p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>
<ul class="social-links list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="#" title="Facebook" data-toggle="tooltip">
{% include ui/icon.html icon="facebook" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="Twitter" data-toggle="tooltip">
{% include ui/icon.html icon="twitter" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="1234567890" data-toggle="tooltip">
{% include ui/icon.html icon="phone" %}
</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="social-links list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="#" title="Facebook" data-toggle="tooltip">
{% include ui/icon.html icon="facebook" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="Twitter" data-toggle="tooltip">
{% include ui/icon.html icon="twitter" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="1234567890" data-toggle="tooltip">
{% include ui/icon.html icon="phone" %}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

View File

@@ -1,76 +1,76 @@
<form class="card">
<div class="card-body">
<h3 class="card-title">Edit Profile</h3>
<div class="card-body">
<h3 class="card-title">Edit Profile</h3>
<div class="row">
<div class="col-md-5">
<div class="mb-2">
<label class="form-label">Company</label>
<input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-2">
<label class="form-label">Username</label>
<input type="text" class="form-control" placeholder="Username" value="michael23">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-2">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Company" value="Chet">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" value="Faker">
</div>
</div>
<div class="col-md-12">
<div class="mb-2">
<label class="form-label">Address</label>
<input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-2">
<label class="form-label">City</label>
<input type="text" class="form-control" placeholder="City" value="Melbourne">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-2">
<label class="form-label">Postal Code</label>
<input type="number" class="form-control" placeholder="ZIP Code">
</div>
</div>
<div class="col-md-5">
<div class="mb-2">
<label class="form-label">Country</label>
<select class="form-select">
<option value="">Germany</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-2 mb-0">
<label class="form-label">About Me</label>
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
<div class="row">
<div class="col-md-5">
<div class="mb-2">
<label class="form-label">Company</label>
<input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-2">
<label class="form-label">Username</label>
<input type="text" class="form-control" placeholder="Username" value="michael23">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-2">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Company" value="Chet">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" value="Faker">
</div>
</div>
<div class="col-md-12">
<div class="mb-2">
<label class="form-label">Address</label>
<input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-2">
<label class="form-label">City</label>
<input type="text" class="form-control" placeholder="City" value="Melbourne">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-2">
<label class="form-label">Postal Code</label>
<input type="number" class="form-control" placeholder="ZIP Code">
</div>
</div>
<div class="col-md-5">
<div class="mb-2">
<label class="form-label">Country</label>
<select class="form-select">
<option value="">Germany</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-2 mb-0">
<label class="form-label">About Me</label>
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
You doubt I'll bother, reading into it
I'll probably won't, left to my own devices
But that's the difference in our opinions.</textarea>
</div>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="submit" class="btn btn-primary">Update Profile</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="submit" class="btn btn-primary">Update Profile</button>
</div>
</form>

View File

@@ -1,39 +1,39 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">My Profile</h3>
</div>
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col-auto">
<span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span>
</div>
<div class="col">
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
</div>
</div>
<div class="card-header">
<h3 class="card-title">My Profile</h3>
</div>
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col-auto">
<span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span>
</div>
<div class="col">
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
</div>
</div>
<div class="mb-2">
<label class="form-label">Bio</label>
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
</div>
<div class="mb-2">
<label class="form-label">Bio</label>
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
</div>
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
<div class="mb-2">
<label class="form-label">Password</label>
<input type="password" class="form-control" value="password"/>
</div>
<div class="mb-2">
<label class="form-label">Password</label>
<input type="password" class="form-control" value="password"/>
</div>
<div class="form-footer">
<button class="btn btn-primary btn-block">Save</button>
</div>
</form>
</div>
<div class="form-footer">
<button class="btn btn-primary btn-block">Save</button>
</div>
</form>
</div>
</div>

View File

@@ -1,102 +1,102 @@
<div class="card">
<div class="card-header">
<div class="input-group">
<input type="text" class="form-control" placeholder="Message">
<div class="input-group-append">
{% include ui/button.html icon="camera" icon-only=true color="secondary" %}
</div>
</div>
</div>
<ul class="list-group card-list-group">
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=5 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">4 min</small>
<h4>{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4>
</div>
<div class="card-header">
<div class="input-group">
<input type="text" class="form-control" placeholder="Message">
<div class="input-group-append">
{% include ui/button.html icon="camera" icon-only=true color="secondary" %}
</div>
</div>
</div>
<ul class="list-group card-list-group">
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=5 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">4 min</small>
<h4>{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4>
</div>
<div>
Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</div>
<div>
Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</div>
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=8 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[7].first_name }} {{ site.data.people[7].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=10 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[9].first_name }} {{ site.data.people[9].last_name }}: </strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus.
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=11 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">12 min</small>
<h4>{{ site.data.people[10].first_name }} {{ site.data.people[10].last_name }}</h4>
</div>
<div>
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</li>
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=15 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">34 min</small>
<h4>{{ site.data.people[14].first_name }} {{ site.data.people[14].last_name }}</h4>
</div>
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=8 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[7].first_name }} {{ site.data.people[7].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=10 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[9].first_name }} {{ site.data.people[9].last_name }}: </strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus.
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=11 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">12 min</small>
<h4>{{ site.data.people[10].first_name }} {{ site.data.people[10].last_name }}</h4>
</div>
<div>
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</li>
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=15 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">34 min</small>
<h4>{{ site.data.people[14].first_name }} {{ site.data.people[14].last_name }}</h4>
</div>
<div>
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<div>
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=6 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[5].first_name }} {{ site.data.people[5].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=6 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[5].first_name }} {{ site.data.people[5].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>

View File

@@ -1,14 +1,14 @@
<div class="card">
<div class="card-body text-center">
<h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
<div class="card-body text-center">
<h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
<p class="mb-4">
Big belly rude boy, million dollar hustler. Unemployed.
</p>
<p class="mb-4">
Big belly rude boy, million dollar hustler. Unemployed.
</p>
<button class="btn btn-outline-primary btn-sm">
{% include ui/icon.html icon="twitter" %}
Follow
</button>
</div>
<button class="btn btn-outline-primary btn-sm">
{% include ui/icon.html icon="twitter" %}
Follow
</button>
</div>
</div>

View File

@@ -3,10 +3,10 @@
<div class="card">
<div class="card-body{% unless include.lorem %} h-8{% endunless %}">
{% if include.lorem %}
<h3 class="card-title">Card with ribbon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
{% endif %}
{% if include.lorem %}
<h3 class="card-title">Card with ribbon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
{% endif %}
</div>
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" class="icon-filled" use-svg=true %}{% endif %}</div>

View File

@@ -1,9 +1,9 @@
<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 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>
<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 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>
</div>

View File

@@ -1,33 +1,33 @@
{% assign chart-type = include.chart-type | default: 'line' %}
{% assign chart-position = include.chart-position | default: 'right' %}
<div class="card">
<div class="card-body p-3 d-flex align-items-center">
{% if include.icon %}
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include ui/icon.html icon=include.icon %}</span>
{% elsif include.person-id %}
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
{% endif %}
<div class="card-body p-3 d-flex align-items-center">
{% if include.icon %}
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include ui/icon.html icon=include.icon %}</span>
{% elsif include.person-id %}
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
{% endif %}
{% if include.chart-data and chart-position == "left" %}
<div class="mr-3">
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
{% if include.chart-data and chart-position == "left" %}
<div class="mr-3">
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
<div class="mr-3 lh-sm">
<div class="strong">
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
{% if include.small-icon %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% endif %}
</div>
<div class="text-muted">{{ include.description | default: "Users" }}</div>
</div>
<div class="mr-3 lh-sm">
<div class="strong">
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
{% if include.small-icon %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% endif %}
</div>
<div class="text-muted">{{ include.description | default: "Users" }}</div>
</div>
{% if include.chart-data and chart-position=="right" %}
<div class="ml-auto">
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
</div>
{% if include.chart-data and chart-position=="right" %}
<div class="ml-auto">
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
</div>
</div>

View File

@@ -1,48 +1,48 @@
<div class="card">
<div class="card-header">
<h4 class="card-title">Social Media Traffic</h4>
</div>
<table class="table card-table table-vcenter">
<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 class="card-header">
<h4 class="card-title">Social Media Traffic</h4>
</div>
<table class="table card-table table-vcenter">
<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>

View File

@@ -1,35 +1,35 @@
{% assign person-id = include.person-id | default: 0 %}
{% assign person = site.data.people[person-id] %}
<div class="card">
<div class="card-body">
<div class="row row-sm align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person size="lg" %}
</div>
<div class="col">
<h4 class="card-title m-0">
<a href="#">{{ person.full_name }}</a>
</h4>
<div class="text-muted">
Working in {{ person.company }}
</div>
<div class="small mt-1">
<span class="text-success"></span> Online
</div>
</div>
<div class="col-auto">
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
Subscribe
</a>
</div>
<div class="col-auto">
<div class="dropdown">
<button class="btn-options" type="button" data-toggle="dropdown">
{% include ui/icon.html icon="more-vertical" %}
</button>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row row-sm align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person size="lg" %}
</div>
<div class="col">
<h4 class="card-title m-0">
<a href="#">{{ person.full_name }}</a>
</h4>
<div class="text-muted">
Working in {{ person.company }}
</div>
<div class="small mt-1">
<span class="text-success"></span> Online
</div>
</div>
<div class="col-auto">
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
Subscribe
</a>
</div>
<div class="col-auto">
<div class="dropdown">
<button class="btn-options" type="button" data-toggle="dropdown">
{% include ui/icon.html icon="more-vertical" %}
</button>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,35 +1,39 @@
<div class="card">
<div class="card-header">
<h4 class="card-title">Tasks</h4>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter">
{% for task in site.data.tasks %}
<tr>
<td class="w-1 pr-0">
<label class="custom-control custom-checkbox m-0">
<input type="checkbox" class="custom-control-input" name="" value=""{% if task.checked %} checked{% endif %}>
<span class="custom-control-label"></span>
</label>
</td>
<td class="w-100">
<a href="#" class="text-reset">{{ task.name }}</a>
</td>
<td class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %}
{{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">{% include ui/icon.html icon="check" %} {{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}</a>
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">{% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
</td>
<td>
{% include ui/avatar.html person-id=forloop.index size="sm" %}
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="card-header">
<h4 class="card-title">Tasks</h4>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter">
{% for task in site.data.tasks %}
<tr>
<td class="w-1 pr-0">
<label class="form-check m-0">
<input type="checkbox" class="form-check-input"{% if task.checked %} checked{% endif %}>
<span class="form-check-label"></span>
</label>
</td>
<td class="w-100">
<a href="#" class="text-reset">{{ task.name }}</a>
</td>
<td class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %}
{{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">
{% include ui/icon.html icon="check" %}
{{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}
</a>
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">
% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
</td>
<td>
{% include ui/avatar.html person-id=forloop.index size="sm" %}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>

View File

@@ -1,13 +1,13 @@
{% assign person-id = include.person-id | default: 0 %}
{% assign person = site.data.people[person-id] %}
<a class="card card-link" href="#">
<div class="card-body">
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
{% include ui/avatar.html person=person class="rounded" %}
</div>
<div class="lh-sm">
<div class="strong">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div>
</div>
</div>
<div class="card-body">
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
{% include ui/avatar.html person=person class="rounded" %}
</div>
<div class="lh-sm">
<div class="strong">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div>
</div>
</div>
</a>

View File

@@ -2,31 +2,31 @@
{% assign person = site.data.people[person-id] %}
<div class="card">
<div class="card-body">
<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>{{ person.university }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="briefcase" class="mr-2 text-muted" %}
Worked at: <strong>{{ person.company }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="home" class="mr-2 text-muted" %}
Lives in: <strong>{{ person.city }}, {{ person.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=person.country_code %} {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="calendar" class="mr-2 text-muted" %}
Birth date: <strong>{{ person.birth_date }}</strong>
</div>
<div>
{% include ui/icon.html icon="clock" class="mr-2 text-muted" %}
Time zone: <strong>{{ person.time_zone }}</strong>
</div>
</div>
<div class="card-body">
<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>{{ person.university }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="briefcase" class="mr-2 text-muted" %}
Worked at: <strong>{{ person.company }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="home" class="mr-2 text-muted" %}
Lives in: <strong>{{ person.city }}, {{ person.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=person.country_code %} {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="calendar" class="mr-2 text-muted" %}
Birth date: <strong>{{ person.birth_date }}</strong>
</div>
<div>
{% include ui/icon.html icon="clock" class="mr-2 text-muted" %}
Time zone: <strong>{{ person.time_zone }}</strong>
</div>
</div>
</div>

View File

@@ -1,24 +1,24 @@
{% 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 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>

View File

@@ -3,36 +3,36 @@
{% 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 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>

View File

@@ -85,11 +85,6 @@ Form control
color: $red;
}
.custom-control-label:before {
background: transparent;
border: 1px solid $border-color;
}
/**
Form help
*/