mirror of
https://github.com/tabler/tabler.git
synced 2026-08-01 07:54:38 +04:00
homepage fixes
This commit is contained in:
@@ -5,7 +5,7 @@ home:
|
||||
|
||||
forms:
|
||||
url: form-elements.html
|
||||
title: Forms
|
||||
title: Form elements
|
||||
icon: check-square
|
||||
|
||||
base:
|
||||
|
||||
@@ -8,4 +8,6 @@
|
||||
checked: true
|
||||
- name: Define users and workflow
|
||||
checked: false
|
||||
- name: Check Pull Requests
|
||||
checked: true
|
||||
|
||||
|
||||
@@ -3,12 +3,14 @@
|
||||
<h4 class="card-title">Company Employees</h4>
|
||||
</div>
|
||||
<table class="table card-table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Name</th>
|
||||
<th>Department</th>
|
||||
<th colspan="2" class="w-25">Progress</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{% for person in site.data.people limit: 5 offset: 20 %}
|
||||
<tr>
|
||||
@@ -24,6 +26,5 @@
|
||||
<td><a href="" class="text-muted">{% include ui/icon.html icon="more-horizontal" %}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -5,52 +5,25 @@
|
||||
<table class="table card-table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">User</th>
|
||||
<th>User</th>
|
||||
<th>Commit</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for commit in site.data.commits limit: 5 %}
|
||||
<tr>
|
||||
<td class="w-1">
|
||||
{% include ui/avatar.html person-id=10 %}
|
||||
{% include ui/avatar.html person-id=forloop.index %}
|
||||
</td>
|
||||
<td>{{ site.data.people[10].full_name }}</td>
|
||||
<td>Initial commit</td>
|
||||
<td class="text-nowrap text-muted">May 6, 2019</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-1">
|
||||
{% include ui/avatar.html person-id=17 %}
|
||||
<td class="td-truncate">
|
||||
<div class="text-truncate">
|
||||
{{ commit.description }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ site.data.people[17].full_name }}</td>
|
||||
<td>Main structure</td>
|
||||
<td class="text-nowrap text-muted">April 22, 2019</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-1">
|
||||
{% include ui/avatar.html person-id=16 %}
|
||||
</td>
|
||||
<td>{{ site.data.people[16].full_name }}</td>
|
||||
<td>Left sidebar adjustments</td>
|
||||
<td class="text-nowrap text-muted">April 15, 2019</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-1">
|
||||
{% include ui/avatar.html person-id=12 %}
|
||||
</td>
|
||||
<td>{{ site.data.people[12].full_name }}</td>
|
||||
<td>Topbar dropdown style</td>
|
||||
<td class="text-nowrap text-muted">April 8, 2019</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-1">
|
||||
{% include ui/avatar.html person-id=19 %}
|
||||
</td>
|
||||
<td>{{ site.data.people[19].full_name }}</td>
|
||||
<td>Fixes #625</td>
|
||||
<td class="text-nowrap text-muted">April 9, 2019</td>
|
||||
<td class="text-nowrap text-muted">{{ commit.date | date_to_string }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{% assign services = 'Instagram:3550,Twitter:1798,Facebook:1245,Pinterest:854,VK:650' | split: ',' %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Social Media Traffic</h4>
|
||||
@@ -9,69 +10,20 @@
|
||||
<th colspan="2">Visitors</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for service in services %}
|
||||
{% assign s = service | split: ':' %}
|
||||
<tr>
|
||||
<td>Instagram</td>
|
||||
<td>3,550</td>
|
||||
<td>{{ s[0] }}</td>
|
||||
<td>{{ s[1] | format_number }}</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>854</td>
|
||||
<td class="w-50">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-primary" style="width: 26%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VK</td>
|
||||
<td>650</td>
|
||||
<td class="w-50">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-primary" style="width: 20%"></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>
|
||||
<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 class="progress-bar bg-primary" style="width: {{ s[1] | divided_by: 5000.0 | times: 100 }}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -71,4 +71,12 @@
|
||||
<div class="col-md-6 col-lg-4">
|
||||
{% include cards/sponsor.html %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
{% include cards/social-traffic.html %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-8">
|
||||
{% include cards/tasks.html %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{% include ui/modal/header.html title="New report" %}
|
||||
@@ -6,7 +6,7 @@
|
||||
{% if options == 'people' %}
|
||||
{% for person in site.data.people limit: 20 %}
|
||||
{% capture avatar %}
|
||||
{% include ui/avatar.html person=person class="avatar-xs rounded mr-2 ml-n1" %}
|
||||
{% include ui/avatar.html person=person class="avatar-sm rounded mr-2 ml-n1" %}
|
||||
{% endcapture %}
|
||||
<option value="{{ person.id }}" data-data='{"avatar": "{{ avatar | strip | replace: '"', '\"' }}"}'{% if person.id == data.value %} selected{% endif %}>{{ person.full_name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Data Tables
|
||||
menu: base.datatables
|
||||
---
|
||||
|
||||
{% include cards/invoices.html %}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
title: Homepage
|
||||
page-header: Homepage
|
||||
page-header-pretitle: Overview
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
{% include cards/project-summary.html %}
|
||||
{% include cards/social-traffic.html %}
|
||||
|
||||
{% for person in site.data.people limit: 6 %}
|
||||
<div class="card p-3">
|
||||
<div class="d-flex">
|
||||
{% include ui/avatar.html person=person class="mr-3" size="md" %}
|
||||
<div>
|
||||
{{ person.first_name }} <a href="#">created a new task</a><br>
|
||||
<div class="text-muted">{{ forloop.index | random_number: 1, 10 }}h ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
{% include cards/tasks.html %}
|
||||
{% include cards/company-employees.html %}
|
||||
{% include cards/most-visited-pages.html %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,7 +24,7 @@ $light-black: rgba($dark, .24) !default;
|
||||
$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
|
||||
$light-white: rgba($light, .24) !default;
|
||||
|
||||
$min-black: rgba($dark, .032) !default;
|
||||
$min-black: rgba($dark, .024) !default;
|
||||
$min-white: rgba(mix($light, $dark, 48%), .1) !default;
|
||||
|
||||
$gray-100: $light !default;
|
||||
@@ -106,8 +106,7 @@ $colors: (
|
||||
) !default;
|
||||
|
||||
$avatar-sizes: (
|
||||
"xs": 1.5rem,
|
||||
"sm": 2rem,
|
||||
"sm": 1.5rem,
|
||||
"md": 3rem,
|
||||
"lg": 4.5rem,
|
||||
"xl": 6rem
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
font-size: .875rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: $h5-font-size;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 400;
|
||||
color: $text-muted;
|
||||
text-align: center;
|
||||
@@ -42,9 +43,9 @@
|
||||
|
||||
|
||||
.avatar-list {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
margin: 0 0 -.5rem;
|
||||
font-size: 0;
|
||||
|
||||
.avatar {
|
||||
margin-bottom: .5rem;
|
||||
@@ -63,7 +64,7 @@
|
||||
|
||||
.avatar-list-stacked {
|
||||
.avatar {
|
||||
margin-right: -.5em !important;
|
||||
margin-right: -.5rem !important;
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
|
||||
@at-root .card-footer & {
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
|
||||
&:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]) {
|
||||
&:not(.btn-secondary) {
|
||||
@@ -60,7 +59,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-lg {
|
||||
svg.icon {
|
||||
stroke-width: 2;
|
||||
|
||||
+8
-1
@@ -287,9 +287,16 @@ Card table
|
||||
margin-bottom: 0;
|
||||
|
||||
tr {
|
||||
.card-header ~ .table-responsive &,
|
||||
.card-header ~ & {
|
||||
&:first-child td {
|
||||
//border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-top: 1px solid $border-color;
|
||||
//border-top: 1px solid $border-color;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $card-spacer-x;
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
background: $min-black;
|
||||
border-width: $table-border-width;
|
||||
@include subheader;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
|
||||
@media print {
|
||||
background: transparent;
|
||||
@@ -46,3 +48,8 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.td-truncate {
|
||||
max-width: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user