Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-01 07:54:38 +04:00
Code Issues Projects Releases Wiki Activity

homepage fixes

Browse Source
This commit is contained in:
codecalm
2020-02-18 19:40:29 +01:00
parent 97c63d186b
commit 5b71b4d96a
15 changed files with 102 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/menu.yml
+1 -1
View File
@@ -5,7 +5,7 @@ home:
forms:
url: form-elements.html
title: Forms
title: Form elements
icon: check-square
base:
pages/_data/tasks.yml
+2
View File
@@ -8,4 +8,6 @@
checked: true
- name: Define users and workflow
checked: false
- name: Check Pull Requests
checked: true
pages/_includes/cards/company-employees.html
+27 -26
View File
@@ -1,29 +1,30 @@
<div class="card">
<div class="card-header">
<h4 class="card-title">Company Employees</h4>
</div>
<table class="table card-table table-vcenter">
<tr>
<th colspan="2">Name</th>
<th>Department</th>
<th colspan="2" class="w-25">Progress</th>
<th></th>
</tr>
<div class="card-header">
<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>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="#" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
</div>
</td>
<td><a href="" class="text-muted">{% include ui/icon.html icon="more-horizontal" %}</a></td>
</tr>
{% endfor %}
</table>
{% for person in site.data.people limit: 5 offset: 20 %}
<tr>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="#" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
</div>
</td>
<td><a href="" class="text-muted">{% include ui/icon.html icon="more-horizontal" %}</a></td>
</tr>
{% endfor %}
</table>
</div>
pages/_includes/cards/development-activity.html
+27 -54
View File
@@ -1,58 +1,31 @@
<div class="card">
{% include ui/chart.html chart-id="development-activity" height=10 class="mt-4" %}
{% include ui/chart.html chart-id="development-activity" height=10 class="mt-4" %}
<div class="table-responsive">
<table class="table card-table table-vcenter">
<thead>
<tr>
<th colspan="2">User</th>
<th>Commit</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="w-1">
{% include ui/avatar.html person-id=10 %}
</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>
<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>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter">
<thead>
<tr>
<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=forloop.index %}
</td>
<td class="td-truncate">
<div class="text-truncate">
{{ commit.description }}
</div>
</td>
<td class="text-nowrap text-muted">{{ commit.date | date_to_string }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
pages/_includes/cards/social-traffic.html
+9 -57
View File
@@ -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>
pages/_includes/layout/homepage.html
+8
View File
@@ -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>
pages/_includes/parts/modals/report.html
+1
View File
@@ -0,0 +1 @@
{% include ui/modal/header.html title="New report" %}
pages/_includes/ui/form/selectize.html
+1 -1
View File
@@ -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 %}
pages/datatables.html
+1
View File
@@ -1,5 +1,6 @@
---
title: Data Tables
menu: base.datatables
---
{% include cards/invoices.html %}
pages/homepage.html
-29
View File
@@ -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>
scss/_variables.scss
+2 -3
View File
@@ -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
scss/ui/_avatars.scss
+8 -7
View File
@@ -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 & {
scss/ui/_buttons.scss
-2
View File
@@ -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;
scss/ui/_cards.scss
+8 -1
View File
@@ -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;
scss/ui/_tables.scss
+7
View File
@@ -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%;
}