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

users cards

Browse Source
This commit is contained in:
codecalm
2020-12-27 19:23:47 +01:00
parent 674f486325
commit 30603f7b51
2 changed files with 38 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/users.html
View File

@@ -8,48 +8,35 @@ menu: extra.users
---
<div class="row row-cards">
{% for person in site.data.people limit: 18 %}
{% assign progress = forloop.index | random_number: 4, 95 %}
{% assign online_counter = forloop.index | random_number: 1, 10 %}
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<div class="row g-2 align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person %}
</div>
<div class="col">
<h3 class="mb-0"><a href="#">{{ person.full_name }}</a></h3>
<div class="text-muted text-h5">{{ person.job_title }}</div>
</div>
{% for person in site.data.people limit: 18 %}
{% assign progress = forloop.index | random_number: 4, 95 %}
{% assign online_counter = forloop.index | random_number: 1, 10 %}
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-body p-4 text-center">
{% include ui/avatar.html size="xl" rounded=true person=person class="mb-3" %}
<h3 class="m-0 mb-1"><a href="#">{{ person.full_name }}</a></h3>
<div class="text-muted">{{ person.job_title }}</div>
{% if online_counter > 7 %}
<div class="col-auto lh-1 align-self-start">
{% include ui/badge.html text="online" color="green-lt" %}
</div>
{% elsif online_counter > 5 %}
<div class="col-auto lh-1 align-self-start">
{% include ui/badge.html text="offline" color="gray-lt" %}
</div>
{% endif %}
</div>
<div class="row align-items-center mt-4">
<div class="col">
{% include ui/progress-description.html value=progress label="Progress" %}
</div>
<div class="col-auto">
<div class="btn-list">
{% include ui/button.html text="Chat" color="white" size="sm" %}
{% include ui/button.html text="Profile" color="white" size="sm" %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="mt-3">
{% if forloop.index == 1 %}
<span class="badge bg-purple-lt">Owner</span>
{% elsif forloop.index < 5 %}
<span class="badge bg-green-lt">Admin</span>
{% else %}
<span class="badge bg-muted-lt">User</span>
{% endif %}
</div>
</div>
<div class="d-flex">
<a href="#" class="card-btn">{% include ui/icon.html icon="mail" color="muted" class="me-2" %} Email</a>
<a href="#" class="card-btn">{% include ui/icon.html icon="phone" color="muted" class="me-2" %} Call</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="d-flex mt-4">
{% include ui/pagination.html class="ms-auto" %}
{% include ui/pagination.html class="ms-auto" %}
</div>

12
src/scss/ui/_cards.scss
View File

@@ -79,15 +79,25 @@
}
.card-btn {
display: flex;
align-items: center;
justify-content: center;
padding: $card-spacer-y $card-spacer-x;
text-align: center;
background: rgba($primary, .02);
transition: .3s background;
border-top: 1px solid $border-color;
flex: 1;
color: inherit;
font-weight: $font-weight-medium;
&:hover {
text-decoration: none;
background: $active-bg;
}
&:not(:first-child) {
border-left: 1px solid $border-color;
}
}
.card-stacked {