Merge pull request #414 from tabler/dev-footer

Copied footer from the old version and added it to grid layout

pages/_includes/cards/charts/active-users.html

@@ -2,7 +2,7 @@
    <div class="card-body">
       <div class="d-flex align-items-center">
          <div class="subheader">Active users</div>
-         <div class="ml-auto">
+         <div class="ml-auto lh-1">
             {% include parts/dropdown/days.html %}
          </div>
       </div>

pages/_includes/cards/charts/new-clients.html

@@ -2,7 +2,7 @@
    <div class="card-body">
       <div class="d-flex align-items-center">
          <div class="subheader">New clients</div>
-         <div class="ml-auto">
+         <div class="ml-auto lh-1">
             {% include parts/dropdown/days.html %}
          </div>
       </div>

pages/_includes/cards/charts/revenue.html

@@ -2,7 +2,7 @@
    <div class="card-body">
       <div class="d-flex align-items-center">
          <div class="subheader">Revenue</div>
-         <div class="ml-auto">
+         <div class="ml-auto lh-1">
             {% include parts/dropdown/days.html %}
          </div>
       </div>

pages/_includes/cards/charts/sales.html

@@ -2,7 +2,7 @@
    <div class="card-body">
       <div class="d-flex align-items-center">
          <div class="subheader">Sales</div>
-         <div class="ml-auto">
+         <div class="ml-auto lh-1">
             {% include parts/dropdown/days.html %}
          </div>
       </div>

pages/_includes/cards/invoices.html

@@ -35,7 +35,6 @@
 				<th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
 				<th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
 				<th></th>
-				<th></th>
 			</tr>
 			</thead>
 
@@ -67,9 +66,6 @@
 						{% include ui/dropdown-menu.html right=true %}
 					</span>
 				</td>
-				<td>
-					{% include ui/icon.html icon="edit" class="icon-sm float-right" %}
-				</td>
 			</tr>
 			{% endfor %}
 			</tbody>

pages/_includes/cards/table-users.html

@@ -8,7 +8,6 @@
 				<th class="text-center">Payment</th>
 				<th>Activity</th>
 				<th class="w-1p">Satisfaction</th>
-				<th class="w-1p"></th>
 			</tr>
 			</thead>
 			<tbody>
@@ -59,14 +58,6 @@
 <!--					</div>-->
 					{% include ui/sparkline.html percentage=percentage type="pie" %}
 				</td>
-				<td class="text-center">
-					<div class="dropdown">
-						<a href="#" class="text-secondary mx-2" data-boundary="viewport" data-toggle="dropdown">
-							{% include ui/icon.html icon="more-vertical" %}
-						</a>
-						{% include ui/dropdown-menu.html right=true %}
-					</div>
-				</td>
 			</tr>
 			{% endfor %}
 			</tbody>

pages/_includes/layout/footer.html

+<div class="mb-n3 mt-3">
+	<footer class="footer">
+		<div class="container">
+			<div class="row align-items-center flex-row-reverse">
+				<div class="col-auto ml-lg-auto">
+					<div class="row align-items-center">
+						<div class="col-auto">
+							<ul class="list-inline list-inline-dots mb-0">
+								<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
+								<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
+							</ul>
+						</div>
+						<div class="col-auto">
+							{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
+						</div>
+					</div>
+				</div>
+				<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
+					Copyright © {{ site.time | date: '%Y' }}
+					<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
+					All rights reserved.
+				</div>
+			</div>
+		</div>
+	</footer>
+</div>
\ No newline at end of file

pages/_layouts/default.html

@@ -9,12 +9,14 @@ layout: base
 	{% include layout/navbar-secondary.html %}
 
 	<div class="content">
-		<main class="container">
+		<div class="container">
 			{% if page-header %}
 				{% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle %}
 			{% endif %}
 
 			{{ content }}
-		</main>
+		</div>
+
+		{% include layout/footer.html %}
 	</div>
 </div>

scss/_tabler-core.scss

@@ -6,6 +6,7 @@
 @import "layout/core";
 @import "layout/navbar";
 @import "layout/page";
+@import "layout/footer";
 
 @import "ui/alerts";
 @import "ui/avatars";

scss/_variables.scss

@@ -300,7 +300,7 @@ $dropdown-border-color: $border-color !default;
 $dropdown-menu-max-width: 25rem !default;
 
 //grid
-$grid-gutter-width: 1.25rem !default;
+$grid-gutter-width: 1.5rem !default;
 
 //loader
 $loader-size: 2.5rem !default;
@@ -346,6 +346,11 @@ $navbar-toggler-transform-time: .2s !default;
 //popover
 $popover-border-color: $border-color !default;
 
+//footer
+$footer-bg: $white !default;
+$footer-border-color: $border-color !default;
+$footer-border-color: $border-color !default;
+
 //nav
 //$nav-link-padding-y: 1rem !default;
 
@@ -465,4 +470,4 @@ $enable-ghost-buttons: true !default;
 $enable-extra-colors: true !default;
 $enable-gradients: false !default;
 $enable-navbar-vertical: true !default;
-$enable-dark-mode: true !default;
\ No newline at end of file
+$enable-dark-mode: true !default;

scss/layout/_footer.scss

+.footer {
+  border-top: 1px solid $footer-border-color;
+  background-color: $footer-bg;
+  padding: 1rem 0;
+  color: $text-muted;
+}
\ No newline at end of file

scss/layout/_page.scss

@@ -2,15 +2,18 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  min-height: 100vh;
 }
 
 .content {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 
-  @include media-breakpoint-up(xl) {
-    padding-left: .5rem;
-    padding-right: .5rem;
+  >[class*="container"] {
+    flex: 1;
   }
 
   @media print {

scss/ui/_lists.scss

@@ -182,3 +182,14 @@
     border-top: 1px solid $border-color;
   }
 }
+
+/**
+Inline list
+ */
+
+.list-inline-dots {
+  .list-inline-item + .list-inline-item:before {
+      content: '· ';
+      margin-right: $list-inline-padding;
+  }
+}
\ No newline at end of file