mirror of
https://github.com/tabler/tabler.git
synced 2026-08-14 07:12:22 +04:00
table fixes, homepage fixes
This commit is contained in:
codecalm
@@ -60,8 +60,8 @@
|
||||
<td>{{ invoice.price }}</td>
|
||||
|
||||
<td class="text-right">
|
||||
<span class="dropdown ml-1">
|
||||
<button class="btn btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
|
||||
<span class="dropdown">
|
||||
<button class="btn dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
@@ -79,4 +79,8 @@
|
||||
<div class="col-md-6 col-lg-8">
|
||||
{% include cards/tasks.html %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{% include cards/invoices.html %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,82 +1,88 @@
|
||||
{% assign roles = 'User,Admin,Owner' | split: ',' %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter{% if include.mobile %} table-mobile-md{% endif %}{% if include.card %} card-table{% endif %}{% if include.stripped %} table-striped{% endif %}{% if include.nowrap %} table-nowrap{% endif %}">
|
||||
<table
|
||||
class="table table-vcenter{% if include.mobile %} table-mobile-md{% endif %}{% if include.card %} card-table{% endif %}{% if include.stripped %} table-striped{% endif %}{% if include.nowrap %} table-nowrap{% endif %}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Title</th>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Title</th>
|
||||
|
||||
{% unless include.avatars %}
|
||||
<th>Email</th>
|
||||
{% endunless %}
|
||||
{% unless include.avatars %}
|
||||
<th>Email</th>
|
||||
{% endunless %}
|
||||
|
||||
<th>Role</th>
|
||||
|
||||
<th>Role</th>
|
||||
{% if include.nowrap %}
|
||||
<th></th>
|
||||
{% endif %}
|
||||
|
||||
{% if include.nowrap %}
|
||||
<th></th>
|
||||
{% endif %}
|
||||
|
||||
<th class="w-1"></th>
|
||||
</tr>
|
||||
<th class="w-1"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for person in site.data.people limit: 5 offset: include.offset %}
|
||||
<tr>
|
||||
{% if include.avatars %}
|
||||
<td {% if include.mobile %}data-label="Name"{% endif %}>
|
||||
<div class="d-flex py-1 align-items-center">
|
||||
{% include ui/avatar.html person-id=person.id class="mr-2" %}
|
||||
<div class="flex-fill">
|
||||
<div class="font-weight-medium">{{ person.full_name }}</div>
|
||||
<div class="text-muted text-h5"><a href="#" class="text-reset">{{ person.email }}</a></div>
|
||||
</div>
|
||||
<tr>
|
||||
{% if include.avatars %}
|
||||
<td {% if include.mobile %}data-label="Name" {% endif %}>
|
||||
<div class="d-flex py-1 align-items-center">
|
||||
{% include ui/avatar.html person-id=person.id class="mr-2" %}
|
||||
<div class="flex-fill">
|
||||
<div class="font-weight-medium">{{ person.full_name }}</div>
|
||||
<div class="text-muted"><a href="#" class="text-reset">{{ person.email }}</a></div>
|
||||
</div>
|
||||
</td>
|
||||
</div>
|
||||
</td>
|
||||
{% else %}
|
||||
<td {% if include.mobile %}data-label="Name" {% endif %}>{{ person.full_name }}</td>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if include.avatars %}
|
||||
<td {% if include.mobile %}data-label="Title" {% endif %}>
|
||||
<div>{{ person.job_title }}</div>
|
||||
<div class="text-muted">{{ person.department }}</div>
|
||||
</td>
|
||||
{% else %}
|
||||
<td class="text-muted" {% if include.mobile %}data-label="Title" {% endif %}>
|
||||
{{ person.job_title }}, {{ person.department }}
|
||||
</td>
|
||||
{% endif %}
|
||||
|
||||
{% unless include.avatars %}
|
||||
<td class="text-muted" {% if include.mobile %}data-label="Email" {% endif %}><a href="#" class="text-reset">{{
|
||||
person.email }}</a></td>
|
||||
{% endunless %}
|
||||
|
||||
|
||||
<td class="text-muted" {% if include.mobile %}data-label="Role" {% endif %}>
|
||||
{% assign role-id = forloop.index | random_number: 0, 2 %}
|
||||
{{ roles[role-id] }}
|
||||
</td>
|
||||
|
||||
{% if include.nowrap %}
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
|
||||
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
|
||||
quaerat quo repellendus, voluptates.
|
||||
</td>
|
||||
{% endif %}
|
||||
|
||||
<td>
|
||||
{% if include.buttons %}
|
||||
<div class="btn-list flex-nowrap">
|
||||
{% include ui/button.html text="Edit" %}
|
||||
<div class="dropdown">
|
||||
<button class="btn dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">
|
||||
Actions
|
||||
</button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<td {% if include.mobile %}data-label="Name"{% endif %}>{{ person.full_name }}</td>
|
||||
<a href="#">Edit</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if include.avatars %}
|
||||
<td {% if include.mobile %}data-label="Title"{% endif %}>
|
||||
<div>{{ person.job_title }}</div>
|
||||
<div class="text-muted text-h5">{{ person.department }}</div>
|
||||
</td>
|
||||
{% else %}
|
||||
<td class="text-muted" {% if include.mobile %}data-label="Title"{% endif %}>
|
||||
{{ person.job_title }}, {{ person.department }}
|
||||
</td>
|
||||
{% endif %}
|
||||
|
||||
{% unless include.avatars %}
|
||||
<td class="text-muted"{% if include.mobile %}data-label="Email"{% endif %}><a href="#" class="text-reset">{{ person.email }}</a></td>
|
||||
{% endunless %}
|
||||
|
||||
|
||||
<td class="text-muted" {% if include.mobile %}data-label="Role"{% endif %}>
|
||||
{% assign role-id = forloop.index | random_number: 0, 2 %}
|
||||
{{ roles[role-id] }}
|
||||
</td>
|
||||
|
||||
{% if include.nowrap %}
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.</td>
|
||||
{% endif %}
|
||||
|
||||
<td>
|
||||
{% if include.buttons %}
|
||||
<div class="btn-list flex-nowrap">
|
||||
{% include ui/button.html text="Edit" %}
|
||||
<div class="dropdown">
|
||||
<button class="btn dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a href="#">Edit</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
+27
-23
@@ -3,28 +3,32 @@ page-header: Tables
|
||||
menu: base.tables
|
||||
---
|
||||
|
||||
<div class="box">
|
||||
<div class="card">
|
||||
{% include ui/table.html card=true %}
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
{% include ui/table.html card=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
{% include ui/table.html card=true stripped=true offset=5 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
{% include ui/table.html card=true avatars=true offset=10 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
{% include ui/table.html card=true mobile=true avatars=true offset=15 buttons=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{% include cards/invoices.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="card">
|
||||
{% include ui/table.html card=true stripped=true offset=5 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="card">
|
||||
{% include ui/table.html card=true avatars=true offset=10 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="card">
|
||||
{% include ui/table.html card=true mobile=true avatars=true offset=15 buttons=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include cards/invoices.html %}
|
||||
@@ -1,192 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
page-header: Settings
|
||||
page-header-description: Etiam ullamcorper massa viverra consequat, consectetur id nulla tempus. Fringilla egestas justo massa purus sagittis malesuada.
|
||||
page-header-actions: buttons
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="mb">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 size="sm" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 %}
|
||||
</div>
|
||||
<div class="col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 size="md" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
Lorem ipsum dolor sit amet.<br>
|
||||
Aliquid amet atque blanditiis,<br>
|
||||
mollitia perferendis quas.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
Lorem ipsum dolor sit amet.<br>
|
||||
Aliquid amet atque blanditiis,<br>
|
||||
mollitia perferendis quas.<br>
|
||||
Aspernatur, corporis culpa, deleniti
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
{% include ui/avatar.html person-id=3 size="xl" rounded=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h1>header h1 - <small>small</small> <code>28px</code></h1>
|
||||
<h2>header h2 - <small>small</small> <code>20px</code></h2>
|
||||
<h3>header h3 - <small>small</small> <code>16px</code></h3>
|
||||
<h4>header h4 - <small>small</small> <code>14px</code></h4>
|
||||
<h5>header h5 - <small>small</small> <code>12px</code></h5>
|
||||
<h6>header h6 - <small>small</small> <code>10px</code></h6>
|
||||
|
||||
<div class="mb">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb">
|
||||
{% include ui/button.html text="Show modal" modal-id="deactivate" %}
|
||||
{% include ui/button.html text="Show modal" modal-id="success" %}
|
||||
{% include ui/modal.html modal-id="deactivate" %}
|
||||
{% include ui/modal.html modal-id="success" %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>white</td>
|
||||
<td><a href="#" class="btn">white</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn">white</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>link</td>
|
||||
<td><a href="#" class="btn btn-link">link</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-link">link</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{% for color in site.button-variants %}
|
||||
<tr>
|
||||
<td>{{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td><a href="#" class="btn btn-outline-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-outline-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td><a href="#" class="btn btn-ghost-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-ghost-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% for color in site.colors %}
|
||||
<tr>
|
||||
<td>{{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-{{ color[0] }}">{{ color[0] }}</td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-{{ color[0] }}">{{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-outline-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-outline-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td><a href="#" class="btn btn-ghost-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-ghost-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% for color in site.socials %}
|
||||
{% assign icon = color[1].icon %}
|
||||
<tr>
|
||||
<td>{{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-outline-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-outline-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</a></td>
|
||||
<td><a href="#" class="btn btn-ghost-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-ghost-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Offer local delivery at checkout <span class="text-muted">for customers</span> near you. Manage local orders
|
||||
in your Shopify admin or on <code>Shopify POS</code>, and get optimized delivery routes with the Shopify Local Delivery
|
||||
app when it’s time to deliver.</p>
|
||||
|
||||
<p>What a strange person. I dunno. Must be a king. Burn her anyway! And this isn't my nose. <strong> This is a
|
||||
false one.</strong> <em> I have to push the pram a lot.</em> Now, look here, my good man.</p>
|
||||
<h2>Well, I got better.</h2>
|
||||
<p>No, no, no! Yes, yes. A bit. But she's got a wart. Well, how'd you become king, then? How do you know she is
|
||||
a witch? We want a shrubbery!! Be quiet!</p>
|
||||
<ol>
|
||||
<li>Well, I didn't vote for you.</li>
|
||||
<li>Burn her anyway!</li>
|
||||
<li>And the hat. She's a witch!</li>
|
||||
</ol>
|
||||
|
||||
<h3>A newt?</h3>
|
||||
<p>I dunno. Must be a king. Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! …Are you
|
||||
suggesting that coconuts migrate? On second thoughts, let's not go there. It is a silly place.</p>
|
||||
<ul>
|
||||
<li>Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme
|
||||
executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.
|
||||
</li>
|
||||
<li>Why?</li>
|
||||
<li>Well, we did do the nose.</li>
|
||||
</ul>
|
||||
|
||||
<p>Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! Be quiet! Why? How do you know she
|
||||
is a witch?</p>
|
||||
<p>Well, I got better. Well, she turned me into a newt. Well, how'd you become king, then? Burn her anyway!
|
||||
Well, I didn't vote for you.</p>
|
||||
<p>Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme
|
||||
executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. But you are
|
||||
dressed as one…</p>
|
||||
<p>Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme
|
||||
executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Found them?
|
||||
In Mercia?! The coconut's tropical!</p>
|
||||
<p>Who's that then? How do you know she is a witch? Did you dress her up like this? Oh! Come and see the
|
||||
violence inherent in the system! Help, help, I'm being repressed! Shut up! Be quiet!</p>
|
||||
<p>Oh, ow! The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in
|
||||
winter, yet these are not strangers to our land. How do you know she is a witch? Where'd you get the
|
||||
coconuts?</p>
|
||||
<p>Found them? In Mercia?! The coconut's tropical! Why do you think that she is a witch? Why? Look, my
|
||||
liege!</p>
|
||||
<p>Why? What do you mean? Well, how'd you become king, then? I don't want to talk to you no more, you
|
||||
empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your
|
||||
father smelt of elderberries! Now leave before I am forced to taunt you a second time!</p>
|
||||
<p>Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! He hasn't got shit
|
||||
all over him. Now, look here, my good man. Ah, now we see the violence inherent in the system! I'm not a
|
||||
witch.</p>
|
||||
<p>I have to push the pram a lot. Where'd you get the coconuts? Listen. Strange women lying in ponds
|
||||
distributing swords is no basis for a system of government. Supreme executive power derives from a mandate
|
||||
from the masses, not from some farcical aquatic ceremony.</p>
|
||||
<p>No, no, no! Yes, yes. A bit. But she's got a wart. Why? Shh! Knights, I bid you welcome to your new home.
|
||||
Let us ride to Camelot! Now, look here, my good man.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,8 +108,8 @@ $pink: #ed64a6 !default;
|
||||
$red: #e53e3e !default;
|
||||
$orange: #ed8936 !default;
|
||||
$yellow: #fab005 !default;
|
||||
$lime: #74b816 !default;
|
||||
$green: #40c057 !default;
|
||||
$lime: #82c91e !default;
|
||||
$green: #5eba00 !default;
|
||||
$teal: #2bcbba !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
$black: #000000 !default;
|
||||
@@ -268,6 +268,7 @@ $breadcrumb-variants: (
|
||||
//badges
|
||||
$badge-font-size: $code-font-size !default;
|
||||
$badge-line-height: $code-line-height !default;
|
||||
$badge-font-weight: $font-weight-medium !default;
|
||||
$badge-empty-size: .5rem !default;
|
||||
|
||||
//buttons
|
||||
|
||||
@@ -130,6 +130,7 @@
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: -.5rem !important;
|
||||
margin-right: -.5rem;
|
||||
line-height: 1;
|
||||
|
||||
> * {
|
||||
margin: 0 .5rem .5rem 0;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.page-link {
|
||||
min-width: 1.5rem;
|
||||
min-width: 1.75rem;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
|
||||
Reference in New Issue
Block a user