readme, Tabler sponsors

README.md

@@ -2,22 +2,28 @@
 
 A premium and open source dashboard template with a responsive and high-quality UI.
 
-👉 [Become a sponsor to Tabler](https://github.com/sponsors/codecalm) 🚀
+<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/static/sponsor-banner-readme.svg?raw=true" alt="Sponsor Tabler" /></a>
 
 <br><br><br>
 
-[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
+----
- [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
+
+<br><br><br>
+
+# Tabler preview
 
 
 <strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://join.slack.com/t/tabler-ui/shared_invite/enQtMzQxMTYxODk5NDYwLWU4Y2FiNWYxN2UyNWUzOTBjNmU0ZGM2ZDViMjQzMWMyZWM0ZDFkMGRhZGFiYzFhZjM1NmIxOGQ2ZDUwZjlhMTU">Join us on Slack</a></strong>
 
-![Tabler preview](https://raw.githubusercontent.com/tabler/tabler/dev/static/tabler-preview.png)
+![Tabler preview](/static/tabler-preview.png?raw=true)
 
 ## Status
 
 <a href="https://www.npmjs.com/package/tabler"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
 
+[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
+ [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
+
 ## Features
 
 We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualise different types of data in the easiest possible way!

_config.yml

@@ -5,6 +5,7 @@ version: 1.0.0-alpha.3
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
 github_url: https://github.com/tabler/tabler
+sponsor_url: https://github.com/sponsors/codecalm
 
 debug: false
 

pages/_data/charts.yml

@@ -150,6 +150,7 @@ development-activity:
   legend-position: 'top'
   sparkline: true
   datetime: true
+  title: Development Activity
   series:
     - name: 'Purchases'
       color: blue

pages/_data/pages.yml

@@ -21,9 +21,3 @@
   unique: 865
   bounce-rate: 44.89%
   data: 9, 6, 14, 11, 8, 24, 2, 16, 15
-
-- uri: /about.html
-  visitors: 12
-  unique: 10
-  bounce-rate: 90.6%
-  data: 4, 11, 3, 7, 8, 21, 23, 13, 19

pages/_includes/cards/most-visited-pages.html

@@ -9,7 +9,7 @@
 			<tr>
 				<th>Page name</th>
 				<th>Visitors</th>
-				<th>Unique page visits</th>
+				<th>Unique</th>
 				<th colspan="2">Bounce rate</th>
 			</tr>
 			</thead>

pages/_includes/cards/sponsor.html

@@ -0,0 +1,3 @@
+<a href="{{ site.sponsor_url }}" class="card card-sponsor" target="_blank" style="background-image: url({{ site.base }}/static/sponsor-banner-homepage.svg)">
+	<div class="card-body"></div>
+</a>

pages/_includes/forms/form-elements-4.html

@@ -4,3 +4,47 @@
 {% include parts/form/selectgroup-project-manager.html %}
 
 
+<div class="mb-3">
+	<label class="form-label">Buttons group</label>
+	<div class="btn-group w-100p">
+		<button type="button" class="btn btn-secondary">1 min</button>
+		<button type="button" class="btn btn-secondary active">5 min</button>
+		<button type="button" class="btn btn-secondary">10 min</button>
+		<button type="button" class="btn btn-secondary">30 min</button>
+	</div>
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Buttons group with dropdown</label>
+	<div class="btn-group w-100p">
+		<button type="button" class="btn btn-secondary">Option 1</button>
+		<button type="button" class="btn btn-secondary">Option 2</button>
+		<button type="button" class="btn btn-secondary active">Option 3</button>
+		<div class="btn-group" role="group">
+			<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				Other
+			</button>
+			<div class="dropdown-menu dropdown-menu-right">
+				<a class="dropdown-item" href="#">
+					Option 4
+				</a>
+				<a class="dropdown-item" href="#">
+					Option 5
+				</a>
+				<a class="dropdown-item" href="#">
+					Option 6
+				</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Toolbar</label>
+	<div class="btn-group w-100p">
+		{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
+		{% for icon in icons %}
+		{% include ui/button.html color="secondary" icon=icon icon-only=true %}
+		{% endfor %}
+	</div>
+</div>

pages/_includes/layout/homepage.html

@@ -66,25 +66,11 @@
 		{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
 	</div>
 
-	<div class="col-lg-9">
+	<div class="col-md-6 col-lg-8">
 		{% include cards/most-visited-pages.html %}
 	</div>
 
-	<div class="col-lg-3">
+	<div class="col-md-6 col-lg-4">
-		{% include cards/social-traffic.html %}
+		{% include cards/sponsor.html %}
 	</div>
-
+</div>
-</div>
-
-{% include layout/page-header.html title="Invoices" %}
-
-<div class="row row-deck row-cards">
-
-	<div class="col-12">
-		{% include cards/invoices.html %}
-	</div>
-
-	<div class="col-12">
-		{% include cards/table-users.html %}
-	</div>
-</div>

pages/_includes/layout/navbar-secondary.html

@@ -3,6 +3,9 @@
 		{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
 
 		<ul class="navbar-nav ml-auto">
+			<li class="nav-item">
+				{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
+			</li>
 			<li class="nav-item">
 				<a class="nav-link" href="#">Link</a>
 			</li>

scss/demo.scss

@@ -1,3 +1,10 @@
 @import "config";
 @import "demo/highlight";
-@import "demo/examples";
+@import "demo/examples";
+
+
+.card-sponsor {
+  background: #dbe7f6 no-repeat center/100% 100%;
+  border-color: #548ed2;
+  min-height: 316px;
+}

scss/layout/_navbar.scss

@@ -152,6 +152,7 @@ Vertical navbar
 
   .navbar-nav {
     flex-direction: column;
+    align-items: normal;
     margin-left: -($sidenav-padding);
     margin-right: -($sidenav-padding);
 
@@ -334,6 +335,8 @@ Navbar colors
   box-shadow: 0 0 0 1px $border-color;
 
   .navbar-nav {
+    align-items: center;
+
     .nav-link {
       color: inherit;
       opacity: $text-muted-opacity;

scss/ui/_buttons.scss

@@ -2,11 +2,14 @@
   @include button-variant($white, $border-color, $dark);
   background-image: linear-gradient(-180deg, rgba($dark, 0), rgba($dark, .04) 100%);
   box-shadow: none !important;
+
+  &.active {
+    background: $primary;
+    color: $white;
+    z-index: 3 !important;
+  }
 }
 
-.btn-outlined-secondary {
-  @include button-outline-variant($white, $border-color, $dark);
-}
 
 .btn {
   font-weight: 600;
@@ -50,7 +53,7 @@
   svg.icon {
     width: 1em;
     height: 1em;
-    stroke-width: 1.5;
+    stroke-width: 1.75;
   }
 }