minor bugs fixes (#5350)

pull/5352/head
Daniel 2023-09-21 20:11:45 +05:30 committed by GitHub
parent 2f64c3da87
commit 7fe4beb503
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 211 additions and 155 deletions

View File

@ -9,8 +9,8 @@ const year = new Date().getFullYear();
<!--end::To the end--> <!--end::To the end-->
<!--begin::Copyright--> <!--begin::Copyright-->
<strong> <strong>
Copyright &copy; 2014-{year} Copyright &copy; 2014-{year}&nbsp;
<a href="https://adminlte.io">AdminLTE.io</a>. <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong> </strong>
All rights reserved. All rights reserved.
<!--end::Copyright--> <!--end::Copyright-->

View File

@ -63,7 +63,7 @@ const pageTitle = "General UI Elements";
href="https://getbootstrap.com/docs/5.3/components/" href="https://getbootstrap.com/docs/5.3/components/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="fw-bold" class="callout-link"
> >
Bootstrap Components Bootstrap Components
</a> </a>

View File

@ -60,8 +60,10 @@ const page = "color-mode";
<div class="callout callout-info"> <div class="callout callout-info">
<h5 class="fw-bold">Tips</h5> <h5 class="fw-bold">Tips</h5>
<p> <p>
First Visit <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
https://getbootstrap.com/docs/5.3/customize/color-modes/ Color modes in Bootstrap
</a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.
</p> </p>
</div> </div>
</div> </div>

View File

@ -59,8 +59,9 @@ const distPath = path;
<h5 class="fw-bold">Reminder!</h5> <h5 class="fw-bold">Reminder!</h5>
<p> <p>
AdminLTE uses all of Bootstrap 5 components. It's a good start AdminLTE uses all of Bootstrap 5 components. It's a good start
to review the [Bootstrap to review the <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="callout-link">
documentation](https://getbootstrap.com/) to get an idea of the Bootstrap documentation
</a> to get an idea of the
various components that this documentation <b>does not</b> cover. various components that this documentation <b>does not</b> cover.
</p> </p>
</div> </div>

View File

@ -55,7 +55,7 @@ const page = "layout";
<div class="callout callout-info mb-4"> <div class="callout callout-info mb-4">
<h5 class="fw-bold">Tips</h5> <h5 class="fw-bold">Tips</h5>
<p> <p>
The <a href="/starter.html" class="link-primary"> The <a href="/starter.html" target="_blank" rel="noopener noreferrer" class="callout-link">
starter page starter page
</a> is a good place to start building your app if youd like to </a> is a good place to start building your app if youd like to
start from scratch. start from scratch.

View File

@ -49,11 +49,11 @@ const year = new Date().getFullYear();
Enter your password to retrieve your session Enter your password to retrieve your session
</div> </div>
<div class="text-center"> <div class="text-center">
<a href="login.html">Or sign in as a different user</a> <a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
</div> </div>
<div class="lockscreen-footer text-center"> <div class="lockscreen-footer text-center">
Copyright © 2014-{year} Copyright © 2014-{year} &nbsp;
<b><a href="https://adminlte.io">AdminLTE.io</a></b><br /> <b><a href="https://adminlte.io" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">AdminLTE.io</a></b> <br />
All rights reserved All rights reserved
</div> </div>
</div> </div>

View File

@ -62,7 +62,7 @@ const page = "general";
href="https://getbootstrap.com/docs/5.3/forms/overview/" href="https://getbootstrap.com/docs/5.3/forms/overview/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="fw-bold" class="callout-link"
> >
Bootstrap Form Bootstrap Form
</a> </a>

View File

@ -11,7 +11,7 @@ const mainPage = "dashboard";
const page = "index"; const page = "index";
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<!--begin::Head--> <!--begin::Head-->
<head> <head>
@ -91,7 +91,10 @@ const page = "index";
d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a
href="#"
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
>
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>
@ -117,7 +120,10 @@ const page = "index";
d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z" d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a
href="#"
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
>
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>
@ -143,7 +149,10 @@ const page = "index";
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z" d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a
href="#"
class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover"
>
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>
@ -176,7 +185,10 @@ const page = "index";
d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a
href="#"
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
>
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>
@ -201,7 +213,7 @@ const page = "index";
<!-- /.card --> <!-- /.card -->
<!-- DIRECT CHAT --> <!-- DIRECT CHAT -->
<div class="card direct-chat direct-chat-primary"> <div class="card direct-chat direct-chat-primary mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Direct Chat</h3> <h3 class="card-title">Direct Chat</h3>
@ -510,7 +522,7 @@ const page = "index";
<!-- Start col --> <!-- Start col -->
<div class="col-lg-5 connectedSortable"> <div class="col-lg-5 connectedSortable">
<div <div
class="card mb-4 text-white bg-primary bg-gradient border-primary" class="card text-white bg-primary bg-gradient border-primary mb-4"
> >
<div class="card-header border-0"> <div class="card-header border-0">
<h3 class="card-title">Sales Value</h3> <h3 class="card-title">Sales Value</h3>
@ -532,15 +544,15 @@ const page = "index";
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row">
<div class="col-4 text-center"> <div class="col-4 text-center">
<div id="sparkline-1"></div> <div id="sparkline-1" class="text-dark"></div>
<div class="text-white">Visitors</div> <div class="text-white">Visitors</div>
</div> </div>
<div class="col-4 text-center"> <div class="col-4 text-center">
<div id="sparkline-2"></div> <div id="sparkline-2" class="text-dark"></div>
<div class="text-white">Online</div> <div class="text-white">Online</div>
</div> </div>
<div class="col-4 text-center"> <div class="col-4 text-center">
<div id="sparkline-3"></div> <div id="sparkline-3" class="text-dark"></div>
<div class="text-white">Sales</div> <div class="text-white">Sales</div>
</div> </div>
</div> </div>
@ -569,8 +581,7 @@ const page = "index";
<script <script
src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js" src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ=" integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<!-- sortablejs --> <!-- sortablejs -->
<script is:inline> <script is:inline>
@ -579,11 +590,12 @@ const page = "index";
connectedSortables.forEach((connectedSortable) => { connectedSortables.forEach((connectedSortable) => {
let sortable = new Sortable(connectedSortable, { let sortable = new Sortable(connectedSortable, {
group: "shared", group: "shared",
handle: ".card-header",
}); });
}); });
const cardHeaders = document.querySelectorAll( const cardHeaders = document.querySelectorAll(
".connectedSortable .card-header" ".connectedSortable .card-header",
); );
cardHeaders.forEach((cardHeader) => { cardHeaders.forEach((cardHeader) => {
cardHeader.style.cursor = "move"; cardHeader.style.cursor = "move";
@ -594,8 +606,7 @@ const page = "index";
<script <script
src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<!-- ChartJS --> <!-- ChartJS -->
<script is:inline> <script is:inline>
@ -652,7 +663,7 @@ const page = "index";
const sales_chart = new ApexCharts( const sales_chart = new ApexCharts(
document.querySelector("#revenue-chart"), document.querySelector("#revenue-chart"),
sales_chart_options sales_chart_options,
); );
sales_chart.render(); sales_chart.render();
</script> </script>
@ -661,13 +672,11 @@ const page = "index";
<script <script
src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js" src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y=" integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<script <script
src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js" src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY=" integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<!-- jsvectormap --> <!-- jsvectormap -->
<script is:inline> <script is:inline>
@ -719,7 +728,7 @@ const page = "index";
const sparkline1 = new ApexCharts( const sparkline1 = new ApexCharts(
document.querySelector("#sparkline-1"), document.querySelector("#sparkline-1"),
option_sparkline1 option_sparkline1,
); );
sparkline1.render(); sparkline1.render();
@ -750,7 +759,7 @@ const page = "index";
const sparkline2 = new ApexCharts( const sparkline2 = new ApexCharts(
document.querySelector("#sparkline-2"), document.querySelector("#sparkline-2"),
option_sparkline2 option_sparkline2,
); );
sparkline2.render(); sparkline2.render();
@ -781,7 +790,7 @@ const page = "index";
const sparkline3 = new ApexCharts( const sparkline3 = new ApexCharts(
document.querySelector("#sparkline-3"), document.querySelector("#sparkline-3"),
option_sparkline3 option_sparkline3,
); );
sparkline3.render(); sparkline3.render();
</script> </script>

View File

@ -11,7 +11,7 @@ const mainPage = "dashboard";
const page = "index2"; const page = "index2";
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<!--begin::Head--> <!--begin::Head-->
<head> <head>
@ -309,7 +309,7 @@ const page = "index2";
<!-- Start col --> <!-- Start col -->
<div class="col-md-8"> <div class="col-md-8">
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row g-4 mb-4">
<div class="col-md-6"> <div class="col-md-6">
<!-- DIRECT CHAT --> <!-- DIRECT CHAT -->
<div class="card direct-chat direct-chat-warning"> <div class="card direct-chat direct-chat-warning">
@ -329,7 +329,8 @@ const page = "index2";
data-lte-toggle="card-collapse" data-lte-toggle="card-collapse"
> >
<i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"
></i>
</button> </button>
<button <button
type="button" type="button"
@ -622,7 +623,7 @@ const page = "index2";
<div class="col-md-6"> <div class="col-md-6">
<!-- USERS LIST --> <!-- USERS LIST -->
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Latest Members</h3> <h3 class="card-title">Latest Members</h3>
@ -636,7 +637,8 @@ const page = "index2";
data-lte-toggle="card-collapse" data-lte-toggle="card-collapse"
> >
<i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"
></i>
</button> </button>
<button <button
type="button" type="button"
@ -767,7 +769,7 @@ const page = "index2";
</div> </div>
<!-- /.card-body --> <!-- /.card-body -->
<div class="card-footer text-center"> <div class="card-footer text-center">
<a href="javascript:">View All Users</a> <a href="javascript:" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View All Users</a>
</div> </div>
<!-- /.card-footer --> <!-- /.card-footer -->
</div> </div>
@ -777,7 +779,7 @@ const page = "index2";
</div> </div>
<!--end::Row--> <!--end::Row-->
<!-- TABLE: LATEST ORDERS --> <!--begin::Latest Order Widget-->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Latest Orders</h3> <h3 class="card-title">Latest Orders</h3>
@ -815,7 +817,7 @@ const page = "index2";
<tbody> <tbody>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR9842</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
</td> </td>
<td>Call of Duty IV</td> <td>Call of Duty IV</td>
<td> <td>
@ -824,36 +826,24 @@ const page = "index2";
</span> </span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-1"></div>
class="sparkbar"
data-color="#00a65a"
data-height="20"
>
90,80,90,-70,61,-83,63
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR1848</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
</td> </td>
<td>Samsung Smart TV</td> <td>Samsung Smart TV</td>
<td> <td>
<span class="badge text-bg-warning">Pending</span> <span class="badge text-bg-warning">Pending</span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-2"></div>
class="sparkbar"
data-color="#f39c12"
data-height="20"
>
90,80,-90,70,61,-83,68
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR7429</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
</td> </td>
<td>iPhone 6 Plus</td> <td>iPhone 6 Plus</td>
<td> <td>
@ -862,54 +852,36 @@ const page = "index2";
</span> </span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-3"></div>
class="sparkbar"
data-color="#f56954"
data-height="20"
>
90,-80,90,70,-61,83,63
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR7429</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
</td> </td>
<td>Samsung Smart TV</td> <td>Samsung Smart TV</td>
<td> <td>
<span class="badge text-bg-info">Processing</span> <span class="badge text-bg-info">Processing</span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-4"></div>
class="sparkbar"
data-color="#00c0ef"
data-height="20"
>
90,80,-90,70,-61,83,63
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR1848</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
</td> </td>
<td>Samsung Smart TV</td> <td>Samsung Smart TV</td>
<td> <td>
<span class="badge text-bg-warning">Pending</span> <span class="badge text-bg-warning">Pending</span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-5"></div>
class="sparkbar"
data-color="#f39c12"
data-height="20"
>
90,80,-90,70,61,-83,68
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR7429</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
</td> </td>
<td>iPhone 6 Plus</td> <td>iPhone 6 Plus</td>
<td> <td>
@ -918,31 +890,19 @@ const page = "index2";
</span> </span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-6"></div>
class="sparkbar"
data-color="#f56954"
data-height="20"
>
90,-80,90,70,-61,83,63
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR9842</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
</td> </td>
<td>Call of Duty IV</td> <td>Call of Duty IV</td>
<td> <td>
<span class="badge text-bg-success">Shipped</span> <span class="badge text-bg-success">Shipped</span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-7"></div>
class="sparkbar"
data-color="#00a65a"
data-height="20"
>
90,80,90,-70,61,-83,63
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -1063,7 +1023,7 @@ const page = "index2";
United States of America United States of America
<span class="float-end text-danger"> <span class="float-end text-danger">
<i class="bi bi-arrow-down fs-7"></i> <i class="bi bi-arrow-down fs-7"></i>
12% 12%
</span> </span>
</a> </a>
</li> </li>
@ -1233,8 +1193,7 @@ const page = "index2";
<script <script
src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<script is:inline> <script is:inline>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
@ -1250,7 +1209,7 @@ const page = "index2";
// - MONTHLY SALES CHART - // - MONTHLY SALES CHART -
//----------------------- //-----------------------
var sales_chart_options = { const sales_chart_options = {
series: [ series: [
{ {
name: "Digital Goods", name: "Digital Goods",
@ -1297,9 +1256,9 @@ const page = "index2";
}, },
}; };
var sales_chart = new ApexCharts( const sales_chart = new ApexCharts(
document.querySelector("#sales-chart"), document.querySelector("#sales-chart"),
sales_chart_options sales_chart_options,
); );
sales_chart.render(); sales_chart.render();
@ -1307,11 +1266,80 @@ const page = "index2";
// - END MONTHLY SALES CHART - // - END MONTHLY SALES CHART -
//--------------------------- //---------------------------
function createSparklineChart(selector, data) {
const options = {
series: [{ data }],
chart: {
type: "line",
width: 150,
height: 30,
sparkline: {
enabled: true,
},
},
colors: ["var(--bs-primary)"],
stroke: {
width: 2,
},
tooltip: {
fixed: {
enabled: false,
},
x: {
show: false,
},
y: {
title: {
formatter: function (seriesName) {
return "";
},
},
},
marker: {
show: false,
},
},
};
const chart = new ApexCharts(document.querySelector(selector), options);
chart.render();
}
const table_sparkline_1_data = [
25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54,
];
const table_sparkline_2_data = [
12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 44,
];
const table_sparkline_3_data = [
15, 46, 21, 59, 33, 15, 34, 42, 56, 19, 64,
];
const table_sparkline_4_data = [
30, 56, 31, 69, 43, 35, 24, 32, 46, 29, 64,
];
const table_sparkline_5_data = [
20, 76, 51, 79, 53, 35, 54, 22, 36, 49, 64,
];
const table_sparkline_6_data = [
5, 36, 11, 69, 23, 15, 14, 42, 26, 19, 44,
];
const table_sparkline_7_data = [
12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 74,
];
createSparklineChart("#table-sparkline-1", table_sparkline_1_data);
createSparklineChart("#table-sparkline-2", table_sparkline_2_data);
createSparklineChart("#table-sparkline-3", table_sparkline_3_data);
createSparklineChart("#table-sparkline-4", table_sparkline_4_data);
createSparklineChart("#table-sparkline-5", table_sparkline_5_data);
createSparklineChart("#table-sparkline-6", table_sparkline_6_data);
createSparklineChart("#table-sparkline-7", table_sparkline_7_data);
//------------- //-------------
// - PIE CHART - // - PIE CHART -
//------------- //-------------
var pie_chart_options = { const pie_chart_options = {
series: [700, 500, 400, 600, 300, 100], series: [700, 500, 400, 600, 300, 100],
chart: { chart: {
type: "donut", type: "donut",
@ -1330,9 +1358,9 @@ const page = "index2";
], ],
}; };
var pie_chart = new ApexCharts( const pie_chart = new ApexCharts(
document.querySelector("#pie-chart"), document.querySelector("#pie-chart"),
pie_chart_options pie_chart_options,
); );
pie_chart.render(); pie_chart.render();

View File

@ -65,7 +65,7 @@ const page = "index3";
<div class="card-header border-0"> <div class="card-header border-0">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<h3 class="card-title">Online Store Visitors</h3> <h3 class="card-title">Online Store Visitors</h3>
<a href="javascript:void(0);">View Report</a> <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -100,7 +100,7 @@ const page = "index3";
</div> </div>
<!-- /.card --> <!-- /.card -->
<div class="card"> <div class="card mb-4">
<div class="card-header border-0"> <div class="card-header border-0">
<h3 class="card-title">Products</h3> <h3 class="card-title">Products</h3>
<div class="card-tools"> <div class="card-tools">
@ -157,7 +157,7 @@ const page = "index3";
</td> </td>
<td>$29 USD</td> <td>$29 USD</td>
<td> <td>
<small class="text-warning me-1"> <small class="text-info me-1">
<i class="bi bi-arrow-down"></i> <i class="bi bi-arrow-down"></i>
0.5% 0.5%
</small> </small>
@ -228,7 +228,7 @@ const page = "index3";
<div class="card-header border-0"> <div class="card-header border-0">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<h3 class="card-title">Sales</h3> <h3 class="card-title">Sales</h3>
<a href="javascript:void(0);">View Report</a> <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -298,7 +298,7 @@ const page = "index3";
</p> </p>
<p class="d-flex flex-column text-end"> <p class="d-flex flex-column text-end">
<span class="fw-bold"> <span class="fw-bold">
<i class="ion ion-android-arrow-up text-success"></i> 12% <i class="bi bi-graph-up-arrow text-success"></i> 12%
</span> </span>
<span class="text-secondary">CONVERSION RATE</span> <span class="text-secondary">CONVERSION RATE</span>
</p> </p>
@ -307,7 +307,7 @@ const page = "index3";
<div <div
class="d-flex justify-content-between align-items-center border-bottom mb-3" class="d-flex justify-content-between align-items-center border-bottom mb-3"
> >
<p class="text-warning fs-2"> <p class="text-info fs-2">
<svg <svg
height="32" height="32"
fill="none" fill="none"
@ -326,7 +326,7 @@ const page = "index3";
</p> </p>
<p class="d-flex flex-column text-end"> <p class="d-flex flex-column text-end">
<span class="fw-bold"> <span class="fw-bold">
<i class="ion ion-android-arrow-up text-warning"></i> 0.8% <i class="bi bi-graph-up-arrow text-info"></i> 0.8%
</span> </span>
<span class="text-secondary">SALES RATE</span> <span class="text-secondary">SALES RATE</span>
</p> </p>
@ -354,7 +354,7 @@ const page = "index3";
</p> </p>
<p class="d-flex flex-column text-end"> <p class="d-flex flex-column text-end">
<span class="fw-bold"> <span class="fw-bold">
<i class="ion ion-android-arrow-down text-danger"></i> <i class="bi bi-graph-down-arrow text-danger"></i>
1% 1%
</span> </span>
<span class="text-secondary">REGISTRATION RATE</span> <span class="text-secondary">REGISTRATION RATE</span>
@ -393,7 +393,7 @@ const page = "index3";
// IT'S ALL JUST JUNK FOR DEMO // IT'S ALL JUST JUNK FOR DEMO
// ++++++++++++++++++++++++++++++++++++++++++ // ++++++++++++++++++++++++++++++++++++++++++
var visitors_chart_options = { const visitors_chart_options = {
series: [ series: [
{ {
name: "High - 2023", name: "High - 2023",
@ -433,13 +433,13 @@ const page = "index3";
}, },
}; };
var visitors_chart = new ApexCharts( const visitors_chart = new ApexCharts(
document.querySelector("#visitors-chart"), document.querySelector("#visitors-chart"),
visitors_chart_options visitors_chart_options
); );
visitors_chart.render(); visitors_chart.render();
var sales_chart_options = { const sales_chart_options = {
series: [ series: [
{ {
name: "Net Profit", name: "Net Profit",
@ -502,7 +502,7 @@ const page = "index3";
}, },
}; };
var sales_chart = new ApexCharts( const sales_chart = new ApexCharts(
document.querySelector("#sales-chart"), document.querySelector("#sales-chart"),
sales_chart_options sales_chart_options
); );

View File

@ -56,7 +56,7 @@ const page = "simple";
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Bordered Table</h3> <h3 class="card-title">Bordered Table</h3>
</div> </div>
@ -72,7 +72,7 @@ const page = "simple";
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="align-middle">
<td>1.</td> <td>1.</td>
<td>Update software</td> <td>Update software</td>
<td> <td>
@ -86,7 +86,7 @@ const page = "simple";
</td> </td>
<td><span class="badge text-bg-danger">55%</span></td> <td><span class="badge text-bg-danger">55%</span></td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>2.</td> <td>2.</td>
<td>Clean database</td> <td>Clean database</td>
<td> <td>
@ -102,7 +102,7 @@ const page = "simple";
<span class="badge text-bg-warning">70%</span> <span class="badge text-bg-warning">70%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>3.</td> <td>3.</td>
<td>Cron job running</td> <td>Cron job running</td>
<td> <td>
@ -120,7 +120,7 @@ const page = "simple";
<span class="badge text-bg-primary">30%</span> <span class="badge text-bg-primary">30%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>4.</td> <td>4.</td>
<td>Fix and squish bugs</td> <td>Fix and squish bugs</td>
<td> <td>
@ -164,7 +164,7 @@ const page = "simple";
</div> </div>
<!-- /.card --> <!-- /.card -->
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Condensed Full Width Table</h3> <h3 class="card-title">Condensed Full Width Table</h3>
</div> </div>
@ -180,7 +180,7 @@ const page = "simple";
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="align-middle">
<td>1.</td> <td>1.</td>
<td>Update software</td> <td>Update software</td>
<td> <td>
@ -194,7 +194,7 @@ const page = "simple";
</td> </td>
<td><span class="badge text-bg-danger">55%</span></td> <td><span class="badge text-bg-danger">55%</span></td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>2.</td> <td>2.</td>
<td>Clean database</td> <td>Clean database</td>
<td> <td>
@ -210,7 +210,7 @@ const page = "simple";
<span class="badge text-bg-warning">70%</span> <span class="badge text-bg-warning">70%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>3.</td> <td>3.</td>
<td>Cron job running</td> <td>Cron job running</td>
<td> <td>
@ -228,7 +228,7 @@ const page = "simple";
<span class="badge text-bg-primary">30%</span> <span class="badge text-bg-primary">30%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>4.</td> <td>4.</td>
<td>Fix and squish bugs</td> <td>Fix and squish bugs</td>
<td> <td>
@ -255,7 +255,7 @@ const page = "simple";
</div> </div>
<!-- /.col --> <!-- /.col -->
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Simple Full Width Table</h3> <h3 class="card-title">Simple Full Width Table</h3>
@ -291,7 +291,7 @@ const page = "simple";
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="align-middle">
<td>1.</td> <td>1.</td>
<td>Update software</td> <td>Update software</td>
<td> <td>
@ -305,7 +305,7 @@ const page = "simple";
</td> </td>
<td><span class="badge text-bg-danger">55%</span></td> <td><span class="badge text-bg-danger">55%</span></td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>2.</td> <td>2.</td>
<td>Clean database</td> <td>Clean database</td>
<td> <td>
@ -321,7 +321,7 @@ const page = "simple";
<span class="badge text-bg-warning">70%</span> <span class="badge text-bg-warning">70%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>3.</td> <td>3.</td>
<td>Cron job running</td> <td>Cron job running</td>
<td> <td>
@ -339,7 +339,7 @@ const page = "simple";
<span class="badge text-bg-primary">30%</span> <span class="badge text-bg-primary">30%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>4.</td> <td>4.</td>
<td>Fix and squish bugs</td> <td>Fix and squish bugs</td>
<td> <td>
@ -364,7 +364,7 @@ const page = "simple";
</div> </div>
<!-- /.card --> <!-- /.card -->
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Striped Full Width Table</h3> <h3 class="card-title">Striped Full Width Table</h3>
</div> </div>
@ -380,7 +380,7 @@ const page = "simple";
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="align-middle">
<td>1.</td> <td>1.</td>
<td>Update software</td> <td>Update software</td>
<td> <td>
@ -394,7 +394,7 @@ const page = "simple";
</td> </td>
<td><span class="badge text-bg-danger">55%</span></td> <td><span class="badge text-bg-danger">55%</span></td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>2.</td> <td>2.</td>
<td>Clean database</td> <td>Clean database</td>
<td> <td>
@ -410,7 +410,7 @@ const page = "simple";
<span class="badge text-bg-warning">70%</span> <span class="badge text-bg-warning">70%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>3.</td> <td>3.</td>
<td>Cron job running</td> <td>Cron job running</td>
<td> <td>
@ -428,7 +428,7 @@ const page = "simple";
<span class="badge text-bg-primary">30%</span> <span class="badge text-bg-primary">30%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>4.</td> <td>4.</td>
<td>Fix and squish bugs</td> <td>Fix and squish bugs</td>
<td> <td>

View File

@ -57,7 +57,7 @@ const page = "cards";
<h5 class="mb-2">Abilities</h5> <h5 class="mb-2">Abilities</h5>
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row g-4 mb-4">
<div class="col-md-3"> <div class="col-md-3">
<div class="card card-primary collapsed-card"> <div class="card card-primary collapsed-card">
<div class="card-header"> <div class="card-header">
@ -158,7 +158,7 @@ const page = "cards";
<h5 class="mb-2">Card Outlined</h5> <h5 class="mb-2">Card Outlined</h5>
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row g-4 mb-4">
<div class="col-md-3"> <div class="col-md-3">
<div class="card card-outline card-primary collapsed-card"> <div class="card card-outline card-primary collapsed-card">
<div class="card-header"> <div class="card-header">
@ -259,7 +259,7 @@ const page = "cards";
<h5 class="mb-2">Card with <code>.text-bg-*</code></h5> <h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row g-4 mb-4">
<div class="col-md-3"> <div class="col-md-3">
<div class="card text-bg-primary collapsed-card"> <div class="card text-bg-primary collapsed-card">
<div class="card-header"> <div class="card-header">

View File

@ -126,7 +126,7 @@ const page = "small-box";
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z" d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a href="#" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>

View File

@ -12,6 +12,10 @@
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
line-height: 2.5rem; line-height: 2.5rem;
a {
text-decoration: none;
}
} }
} }
} }

View File

@ -187,7 +187,7 @@
.nav-arrow { .nav-arrow {
@include transition(transform $lte-transition-fn $lte-transition-speed); @include transition(transform $lte-transition-fn $lte-transition-speed);
transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"}; transform: translateY(-50%) #{"/*rtl:append:rotate(180deg)*/"};
animation-name: fadeIn; animation-name: fadeIn;
animation-duration: $lte-transition-speed; animation-duration: $lte-transition-speed;
animation-fill-mode: both; animation-fill-mode: both;
@ -244,7 +244,7 @@
> .nav-link { > .nav-link {
.nav-arrow { .nav-arrow {
transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"}; transform: translateY(-50%) rotate(90deg) #{"/*rtl:ignore*/"};
} }
} }
} }

View File

@ -11,6 +11,11 @@
background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100)); background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300)); border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
.callout-link {
font-weight: $lte-callout-link-font-weight;
color: var(--#{$prefix}callout-link-color);
}
h4 { h4 {
margin-bottom: .25rem; margin-bottom: .25rem;
} }
@ -30,5 +35,6 @@
--#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis); --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
--#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle); --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
--#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle); --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
--#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
} }
} }

View File

@ -172,6 +172,7 @@
} }
a { a {
text-decoration: none;
border-top: 3px solid transparent; border-top: 3px solid transparent;
&:hover { &:hover {

View File

@ -169,11 +169,16 @@
@include clearfix(); @include clearfix();
padding: 10px; padding: 10px;
margin: 0; margin: 0;
text-decoration: none;
border-bottom: 1px solid rgba($black, .2); border-bottom: 1px solid rgba($black, .2);
&:last-of-type { &:last-of-type {
border-bottom: 0; border-bottom: 0;
} }
a {
text-decoration: none;
}
} }
} }

View File

@ -204,6 +204,7 @@
border-bottom: 1px solid var(--#{$prefix}border-color-translucent); border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
a { a {
text-decoration: none;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
color: var(--#{$prefix}body-color) !important; color: var(--#{$prefix}body-color) !important;
background-color: var(--#{$prefix}body-bg) !important; background-color: var(--#{$prefix}body-bg) !important;

View File

@ -18,10 +18,10 @@
.progress { .progress {
height: 2px; height: 2px;
margin: 5px 0; margin: 5px 0;
background-color: rgba($black, .125); background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125);
.progress-bar { .progress-bar {
background-color: $white; background-color: var(--#{$lte-prefix}card-variant-color);
} }
} }
@ -62,14 +62,6 @@
white-space: nowrap; white-space: nowrap;
} }
@each $name, $color in $theme-colors {
.info-box {
.progress-bar {
background-color: color-contrast($color);
}
}
}
.info-box-more { .info-box-more {
display: block; display: block;
} }

View File

@ -58,6 +58,7 @@
// Link in header // Link in header
> a { > a {
font-weight: 600; font-weight: 600;
text-decoration: none;
} }
} }
// Item body and footer // Item body and footer

View File

@ -101,6 +101,10 @@ $lte-card-title-font-weight: $font-weight-normal !default;
// -------------------------------------------------------- // --------------------------------------------------------
$lte-progress-bar-border-radius: 1px !default; $lte-progress-bar-border-radius: 1px !default;
// CALLOUTS
// --------------------------------------------------------
$lte-callout-link-font-weight: $alert-link-font-weight !default;
// DIRECT CHAT // DIRECT CHAT
// -------------------------------------------------------- // --------------------------------------------------------
$lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default; $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;

View File

@ -18,6 +18,7 @@
a { a {
color: var(--#{$prefix}emphasis-color); color: var(--#{$prefix}emphasis-color);
text-decoration: none;
} }
} }

View File

@ -11,6 +11,7 @@
a { a {
color: var(--#{$prefix}secondary-color); color: var(--#{$prefix}secondary-color);
text-decoration: none;
} }
} }