github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: reworked card-widget 

- renamed `data-lte-dismiss="card-remove"` to `data-lte-toggle="card-remove"`
- removed icon setter/replacer
- reworked button markup
pull/5186/head
REJack 2023-06-19 20:23:52 +02:00
parent 32e454f230
commit cf9e1f983a
26 changed files with 334 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/html/components/_head.astro
View File

@ -34,14 +34,14 @@ const cssPath = isRtl ? ".rtl" : "";
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Font Awesome)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css"
integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc="
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
integrity="sha256-BicZsQAhkGHIoR//IB2amPN5SrRb3fHB8tFsnqRAwnk="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Font Awesome)-->
>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />
<!--end::Required Plugin(AdminLTE)-->

114
src/html/components/dashboard/_sidenav.astro
View File

@ -39,10 +39,10 @@ const htmlPath = convertPathToHtml(path);
href="#"
class:list={["nav-link", mainPage === "dashboard" && "active"]}
>
<i class="nav-icon fa-solid fa-gauge-high"></i>
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -51,7 +51,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/index.html"}
class:list={["nav-link", page === "index" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
@ -60,7 +60,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/index2.html"}
class:list={["nav-link", page === "index2" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
@ -69,7 +69,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/index3.html"}
class:list={["nav-link", page === "index3" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
@ -80,10 +80,10 @@ const htmlPath = convertPathToHtml(path);
href="#"
class:list={["nav-link", mainPage === "widgets" && "active"]}
>
<i class="nav-icon fa-solid fa-box-open"></i>
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -92,7 +92,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/widgets/small-box.html"}
class:list={["nav-link", page === "small-box" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
@ -101,7 +101,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/widgets/info-box.html"}
class:list={["nav-link", page === "info-box" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
@ -110,7 +110,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/widgets/cards.html"}
class:list={["nav-link", page === "cards" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
@ -121,13 +121,13 @@ const htmlPath = convertPathToHtml(path);
href="#"
class:list={["nav-link", mainPage === "layout" && "active"]}
>
<i class="nav-icon fa-solid fa-copy"></i>
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3"
>6</span
>
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -139,7 +139,7 @@ const htmlPath = convertPathToHtml(path);
page === "unfixed-sidebar" && "active",
]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
@ -148,7 +148,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/layout/fixed-sidebar.html"}
class:list={["nav-link", page === "fixed-sidebar" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
@ -157,7 +157,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/layout/fixed-complete.html"}
class:list={["nav-link", page === "fixed-complete" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Complete</p>
</a>
</li>
@ -166,7 +166,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/layout/sidebar-mini.html"}
class:list={["nav-link", page === "sidebar-mini" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
@ -178,7 +178,7 @@ const htmlPath = convertPathToHtml(path);
page === "collapsed-sidebar" && "active",
]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
@ -187,7 +187,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/layout/logo-switch.html"}
class:list={["nav-link", page === "logo-switch" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
@ -196,7 +196,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/layout/layout-rtl.html"}
class:list={["nav-link", page === "layout-rtl" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
@ -209,10 +209,10 @@ const htmlPath = convertPathToHtml(path);
href="#"
class:list={["nav-link", mainPage === "ui-elements" && "active"]}
>
<i class="nav-icon fa-solid fa-tree"></i>
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -221,7 +221,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/UI/timeline.html"}
class:list={["nav-link", page === "timeline" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
@ -232,10 +232,10 @@ const htmlPath = convertPathToHtml(path);
href="#"
class:list={["nav-link", mainPage === "forms" && "active"]}
>
<i class="nav-icon fa-solid fa-pen-to-square"></i>
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -244,7 +244,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/forms/general.html"}
class:list={["nav-link", page === "general" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
@ -255,10 +255,10 @@ const htmlPath = convertPathToHtml(path);
href="#"
class:list={["nav-link", mainPage === "tables" && "active"]}
>
<i class="nav-icon fa-solid fa-table"></i>
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -267,7 +267,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/tables/simple.html"}
class:list={["nav-link", page === "simple" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
@ -277,22 +277,22 @@ const htmlPath = convertPathToHtml(path);
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Login & Register
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + "/examples/login.html"} class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Login v1</p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + "/examples/register.html"} class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Register v1</p>
</a>
</li>
@ -305,7 +305,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/docs/introduction.html"}
class:list={["nav-link", page === "introduction" && "active"]}
>
<i class="nav-icon fa-solid fa-download"></i>
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
@ -314,7 +314,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/docs/layout.html"}
class:list={["nav-link", page === "layout" && "active"]}
>
<i class="nav-icon fa-solid fa-grip"></i>
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
@ -323,7 +323,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/docs/color-mode.html"}
class:list={["nav-link", page === "color-mode" && "active"]}
>
<i class="nav-icon fa-solid fa-star-half-stroke"></i>
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
@ -332,10 +332,10 @@ const htmlPath = convertPathToHtml(path);
href="#"
class:list={["nav-link", mainPage === "components" && "active"]}
>
<i class="nav-icon fa-solid fa-swatchbook"></i>
<i class="nav-icon bi bi-palette2"></i>
<p>
Components
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -344,7 +344,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/docs/components/main-header.html"}
class:list={["nav-link", page === "main-header" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
@ -353,7 +353,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/docs/components/main-sidebar.html"}
class:list={["nav-link", page === "main-sidebar" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
@ -364,10 +364,10 @@ const htmlPath = convertPathToHtml(path);
href="#"
class:list={["nav-link", mainPage === "javascript" && "active"]}
>
<i class="nav-icon fa-solid fa-swatchbook"></i>
<i class="nav-icon bi bi-palette2"></i>
<p>
Javascript
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -376,7 +376,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/docs/javascript/treeview.html"}
class:list={["nav-link", page === "treeview" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
@ -387,7 +387,7 @@ const htmlPath = convertPathToHtml(path);
href={htmlPath + "/docs/browser-support.html"}
class:list={["nav-link", page === "browser-support" && "active"]}
>
<i class="nav-icon fa-solid fa-edge"></i>
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
@ -395,49 +395,49 @@ const htmlPath = convertPathToHtml(path);
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-dot-circle"></i>
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-dot-circle"></i>
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-dot-circle"></i>
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
@ -445,7 +445,7 @@ const htmlPath = convertPathToHtml(path);
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
@ -453,7 +453,7 @@ const htmlPath = convertPathToHtml(path);
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
@ -461,19 +461,19 @@ const htmlPath = convertPathToHtml(path);
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle text-danger"></i>
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle text-warning"></i>
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle text-info"></i>
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>

26
src/html/components/dashboard/_topbar.astro
View File

@ -11,7 +11,7 @@ const distPath = path;
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="fa-solid fa-bars"></i>
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block">
@ -28,7 +28,7 @@ const distPath = path;
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fa-solid fa-search"></i>
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
@ -36,7 +36,7 @@ const distPath = path;
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="fa-regular fa-comments"></i>
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
@ -54,12 +54,12 @@ const distPath = path;
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="fa-solid fa-star"></i></span
><i class="bi bi-star-fill"></i></span
>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -80,12 +80,12 @@ const distPath = path;
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="fa-solid fa-star"></i>
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -106,12 +106,12 @@ const distPath = path;
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="fa-solid fa-star"></i>
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -126,24 +126,24 @@ const distPath = path;
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="fa-regular fa-bell"></i>
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-users me-2"></i> 8 friend requests
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-file me-2"></i> 3 new reports
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>

14
src/html/components/docs/color-mode.mdx
View File

@ -7,7 +7,7 @@
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"
><i class="fa-solid fa-bars"></i
><i class="bi bi-list"></i
></a>
</li>
<li class="nav-item d-none d-md-block">
@ -46,9 +46,9 @@
data-bs-theme-value="light"
aria-pressed="false"
>
<i class="fa-regular fa-sun me-2"></i>
<i class="bi bi-sun-fill me-2"></i>
Light
<i class="fa-solid fa-check ms-auto d-none"></i>
<i class="bi bi-check-lg ms-auto d-none"></i>
</button>
</li>
<li>
@ -58,9 +58,9 @@
data-bs-theme-value="dark"
aria-pressed="false"
>
<i class="fa-solid fa-moon me-2"></i>
<i class="bi bi-moon-fill me-2"></i>
Dark
<i class="fa-solid fa-check ms-auto d-none"></i>
<i class="bi bi-check-lg ms-auto d-none"></i>
</button>
</li>
<li>
@ -70,9 +70,9 @@
data-bs-theme-value="auto"
aria-pressed="true"
>
<i class="fa-solid fa-circle-half-stroke me-2"></i>
<i class="bi bi-circle-fill-half-stroke me-2"></i>
Auto
<i class="fa-solid fa-check ms-auto d-none"></i>
<i class="bi bi-check-lg ms-auto d-none"></i>
</button>
</li>
</ul>

26
src/html/components/docs/components/main-header.mdx
View File

@ -7,7 +7,7 @@
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="fa-solid fa-bars"></i>
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block">
@ -23,14 +23,14 @@
<!-- Navbar Search -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fa-solid fa-search"></i>
<i class="bi bi-search"></i>
</a>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="fa-regular fa-comments"></i>
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
@ -48,12 +48,12 @@
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger">
<i class="fa-solid fa-star"></i>
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -74,12 +74,12 @@
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="fa-solid fa-star"></i>
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -100,12 +100,12 @@
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="fa-solid fa-star"></i>
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -118,24 +118,24 @@
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="fa-regular fa-bell"></i>
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-users me-2"></i> 8 friend requests
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-file me-2"></i> 3 new reports
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>

20
src/html/components/docs/components/main-sidebar.mdx
View File

@ -34,22 +34,22 @@ The sidebar used in this page to the left provides an example of what your sideb
<li class="nav-header">Nav Header</li>
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Treeview
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2 (Badge)
<span
@ -62,7 +62,7 @@ The sidebar used in this page to the left provides an example of what your sideb
</li>
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
@ -70,29 +70,29 @@ The sidebar used in this page to the left provides an example of what your sideb
</li>
<li class="nav-item">
<a href="./index.html" class="nav-link active">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1 Active</p>
</a>
</li>
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Treeview Menu Open
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="./index.html" class="nav-link active">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Level 2 Active</p>
</a>
</li>
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>

22
src/html/pages/UI/timeline.astro
View File

@ -66,12 +66,12 @@ const page = "timeline";
<!-- timeline item -->
<div>
<i
class="timeline-icon fa-solid fa-envelope text-bg-primary"
class="timeline-icon bi bi-envelope text-bg-primary"
>
</i>
<div class="timeline-item">
<span class="time">
<i class="fa-solid fa-clock"></i> 12:05
<i class="bi bi-clock-fill"></i> 12:05
</span>
<h3 class="timeline-header">
<a href="#">Support Team</a> sent you an email
@ -93,11 +93,11 @@ const page = "timeline";
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="timeline-icon fa-solid fa-user text-bg-success">
<i class="timeline-icon bi bi-person text-bg-success">
</i>
<div class="timeline-item">
<span class="time">
<i class="fa-solid fa-clock"></i> 5 mins ago
<i class="bi bi-clock-fill"></i> 5 mins ago
</span>
<h3 class="timeline-header no-border">
<a href="#">Sarah Young</a> accepted your friend request
@ -108,12 +108,12 @@ const page = "timeline";
<!-- timeline item -->
<div>
<i
class="timeline-icon fa-solid fa-comments text-bg-warning"
class="timeline-icon bi bi-chat-text-fill text-bg-warning"
>
</i>
<div class="timeline-item">
<span class="time">
<i class="fa-solid fa-clock"></i> 27 mins ago
<i class="bi bi-clock-fill"></i> 27 mins ago
</span>
<h3 class="timeline-header">
<a href="#">Jay White</a> commented on your post
@ -136,11 +136,11 @@ const page = "timeline";
<!-- /.timeline-label -->
<!-- timeline item -->
<div>
<i class="timeline-icon fa-solid fa-camera text-bg-primary">
<i class="timeline-icon bi bi-camera text-bg-primary">
</i>
<div class="timeline-item">
<span class="time">
<i class="fa-solid fa-clock"></i> 2 days ago
<i class="bi bi-clock-fill"></i> 2 days ago
</span>
<h3 class="timeline-header">
<a href="#">Mina Lee</a> uploaded new photos
@ -168,11 +168,11 @@ const page = "timeline";
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="timeline-icon fa-solid fa-video text-bg-info"></i>
<i class="timeline-icon bi bi-camera-film text-bg-info"></i>
<div class="timeline-item">
<span class="time">
<i class="fa-solid fa-clock"></i> 5 days ago
<i class="bi bi-clock-fill"></i> 5 days ago
</span>
<h3 class="timeline-header">
@ -196,7 +196,7 @@ const page = "timeline";
<!-- END timeline item -->
<div>
<i
class="timeline-icon fa-solid fa-clock text-bg-secondary"
class="timeline-icon bi bi-clock-fill text-bg-secondary"
>
</i>
</div>

14
src/html/pages/docs/color-mode.astro
View File

@ -78,7 +78,7 @@ const page = "color-mode";
class="nav-link"
data-lte-toggle="sidebar"
href="#"
role="button"><i class="fa-solid fa-bars"></i></a
role="button"><i class="bi bi-list"></i></a
>
</li>
<li class="nav-item d-none d-md-block">
@ -119,9 +119,9 @@ const page = "color-mode";
data-bs-theme-value="light"
aria-pressed="false"
>
<i class="fa-regular fa-sun me-2"></i>
<i class="bi bi-sun-fill me-2"></i>
Light
<i class="fa-solid fa-check ms-auto d-none"></i>
<i class="bi bi-check-lg ms-auto d-none"></i>
</button>
</li>
<li>
@ -131,9 +131,9 @@ const page = "color-mode";
data-bs-theme-value="dark"
aria-pressed="false"
>
<i class="fa-solid fa-moon me-2"></i>
<i class="bi bi-moon-fill me-2"></i>
Dark
<i class="fa-solid fa-check ms-auto d-none"></i>
<i class="bi bi-check-lg ms-auto d-none"></i>
</button>
</li>
<li>
@ -143,10 +143,10 @@ const page = "color-mode";
data-bs-theme-value="auto"
aria-pressed="true"
>
<i class="fa-solid fa-circle-half-stroke me-2"
<i class="bi bi-circle-fill-half-stroke me-2"
></i>
Auto
<i class="fa-solid fa-check ms-auto d-none"></i>
<i class="bi bi-check-lg ms-auto d-none"></i>
</button>
</li>
</ul>

26
src/html/pages/docs/components/main-header.astro
View File

@ -87,7 +87,7 @@ const distPath = path;
href="#"
role="button"
>
<i class="fa-solid fa-bars"></i>
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block">
@ -108,14 +108,14 @@ const distPath = path;
href="#"
role="button"
>
<i class="fa-solid fa-search"></i>
<i class="bi bi-search"></i>
</a>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="fa-regular fa-comments"></i>
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div
@ -135,12 +135,12 @@ const distPath = path;
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger">
<i class="fa-solid fa-star"></i>
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -161,12 +161,12 @@ const distPath = path;
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="fa-solid fa-star"></i>
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -187,12 +187,12 @@ const distPath = path;
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="fa-solid fa-star"></i>
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
@ -207,7 +207,7 @@ const distPath = path;
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="fa-regular fa-bell"></i>
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div
@ -218,20 +218,20 @@ const distPath = path;
>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span
>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-users me-2"></i> 8 friend requests
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">
12 hours
</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-file me-2"></i> 3 new reports
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">
2 days
</span>

8
src/html/pages/examples/login.astro
View File

@ -29,7 +29,7 @@ const htmlPath = "..";
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email" />
<div class="input-group-text">
<span class="fa-solid fa-envelope"></span>
<span class="bi bi-envelope"></span>
</div>
</div>
<div class="input-group mb-3">
@ -39,7 +39,7 @@ const htmlPath = "..";
placeholder="Password"
/>
<div class="input-group-text">
<span class="fa-solid fa-lock"></span>
<span class="bi bi-lock-fill"></span>
</div>
</div>
<!--begin::Row-->
@ -71,10 +71,10 @@ const htmlPath = "..";
<div class="social-auth-links text-center mb-3 d-grid gap-2">
<p>- OR -</p>
<a href="#" class="btn btn-primary">
<i class="fa-brands fa-facebook me-2"></i> Sign in using Facebook
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-danger">
<i class="fa-brands fa-google-plus me-2"></i> Sign in using Google+
<i class="bi bi-google me-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->

10
src/html/pages/examples/register.astro
View File

@ -29,13 +29,13 @@ const htmlPath = "..";
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Full Name" />
<div class="input-group-text">
<span class="fa-solid fa-user"></span>
<span class="bi bi-person"></span>
</div>
</div>
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email" />
<div class="input-group-text">
<span class="fa-solid fa-envelope"></span>
<span class="bi bi-envelope"></span>
</div>
</div>
<div class="input-group mb-3">
@ -45,7 +45,7 @@ const htmlPath = "..";
placeholder="Password"
/>
<div class="input-group-text">
<span class="fa-solid fa-lock"></span>
<span class="bi bi-lock-fill"></span>
</div>
</div>
<!--begin::Row-->
@ -77,10 +77,10 @@ const htmlPath = "..";
<div class="social-auth-links text-center mb-3 d-grid gap-2">
<p>- OR -</p>
<a href="#" class="btn btn-primary">
<i class="fa-brands fa-facebook me-2"></i> Sign in using Facebook
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-danger">
<i class="fa-brands fa-google-plus me-2"></i> Sign in using Google+
<i class="bi bi-google me-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->

20
src/html/pages/index.astro
View File

@ -92,7 +92,7 @@ const page = "index";
></path>
</svg>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
More info <i class="bi bi-link-45deg"></i>
</a>
</div>
<!--end::Small Box Widget 1-->
@ -118,7 +118,7 @@ const page = "index";
></path>
</svg>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
More info <i class="bi bi-link-45deg"></i>
</a>
</div>
<!--end::Small Box Widget 2-->
@ -144,7 +144,7 @@ const page = "index";
></path>
</svg>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
More info <i class="bi bi-link-45deg"></i>
</a>
</div>
<!--end::Small Box Widget 3-->
@ -177,7 +177,7 @@ const page = "index";
></path>
</svg>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
More info <i class="bi bi-link-45deg"></i>
</a>
</div>
<!--end::Small Box Widget 4-->
@ -217,7 +217,8 @@ const page = "index";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
@ -225,14 +226,14 @@ const page = "index";
title="Contacts"
data-lte-toggle="chat-pane"
>
<i class="fa-solid fa-comments"></i>
<i class="bi bi-chat-text-fill"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
@ -519,7 +520,8 @@ const page = "index";
class="btn btn-primary btn-sm"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-plus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
</div>
</div>

76
src/html/pages/index2.astro
View File

@ -63,7 +63,7 @@ const page = "index2";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon text-bg-primary shadow-sm">
<i class="fa-solid fa-cog"></i>
<i class="bi bi-gear-fill"></i>
</span>
<div class="info-box-content">
@ -81,7 +81,7 @@ const page = "index2";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon text-bg-danger shadow-sm">
<i class="fa-solid fa-thumbs-up"></i>
<i class="bi bi-hand-thumbs-up-fill"></i>
</span>
<div class="info-box-content">
@ -100,7 +100,7 @@ const page = "index2";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon text-bg-success shadow-sm">
<i class="fa-solid fa-shopping-cart"></i>
<i class="bi bi-cart-fill"></i>
</span>
<div class="info-box-content">
@ -115,7 +115,7 @@ const page = "index2";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon text-bg-warning shadow-sm">
<i class="fa-solid fa-users"></i>
<i class="bi bi-people-fill"></i>
</span>
<div class="info-box-content">
@ -143,7 +143,8 @@ const page = "index2";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<div class="btn-group">
<button
@ -151,7 +152,7 @@ const page = "index2";
class="btn btn-tool dropdown-toggle"
data-bs-toggle="dropdown"
>
<i class="fa-solid fa-wrench"></i>
<i class="bi bi-wrench"></i>
</button>
<div
class="dropdown-menu dropdown-menu-end"
@ -169,9 +170,9 @@ const page = "index2";
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
@ -255,7 +256,7 @@ const page = "index2";
<div class="col-md-3 col-6">
<div class="text-center border-end">
<span class="text-success">
<i class="fa-solid fa-caret-up"></i> 17%
<i class="bi bi-caret-up-fill"></i> 17%
</span>
<h5 class="fw-bold mb-0">$35,210.43</h5>
<span class="text-uppercase">TOTAL REVENUE</span>
@ -266,7 +267,7 @@ const page = "index2";
<div class="col-md-3 col-6">
<div class="text-center border-end">
<span class="text-info">
<i class="fa-solid fa-caret-left"></i> 0%
<i class="bi bi-caret-left-fill"></i> 0%
</span>
<h5 class="fw-bold mb-0">$10,390.90</h5>
<span class="text-uppercase">TOTAL COST</span>
@ -276,7 +277,7 @@ const page = "index2";
<div class="col-md-3 col-6">
<div class="text-center border-end">
<span class="text-success">
<i class="fa-solid fa-caret-up"></i> 20%
<i class="bi bi-caret-up-fill"></i> 20%
</span>
<h5 class="fw-bold mb-0">$24,813.53</h5>
<span class="text-uppercase">TOTAL PROFIT</span>
@ -286,7 +287,7 @@ const page = "index2";
<div class="col-md-3 col-6">
<div class="text-center">
<span class="text-danger">
<i class="fa-solid fa-caret-down"></i> 18%
<i class="bi bi-caret-down-fill"></i> 18%
</span>
<h5 class="fw-bold mb-0">1200</h5>
<span class="text-uppercase">GOAL COMPLETIONS</span>
@ -327,7 +328,8 @@ const page = "index2";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
@ -335,14 +337,14 @@ const page = "index2";
title="Contacts"
data-lte-toggle="chat-pane"
>
<i class="fa-solid fa-comments"></i>
<i class="bi bi-chat-text-fill"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
@ -633,14 +635,15 @@ const page = "index2";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
@ -785,14 +788,15 @@ const page = "index2";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
@ -971,7 +975,7 @@ const page = "index2";
<!-- Info Boxes Style 2 -->
<div class="info-box mb-3 text-bg-warning">
<span class="info-box-icon">
<i class="fa-solid fa-tag"></i>
<i class="bi bi-tag-fill"></i>
</span>
<div class="info-box-content">
@ -983,7 +987,7 @@ const page = "index2";
<!-- /.info-box -->
<div class="info-box mb-3 text-bg-success">
<span class="info-box-icon">
<i class="fa-regular fa-heart"></i>
<i class="bi bi-heart-fill"></i>
</span>
<div class="info-box-content">
@ -995,7 +999,7 @@ const page = "index2";
<!-- /.info-box -->
<div class="info-box mb-3 text-bg-danger">
<span class="info-box-icon">
<i class="fa-solid fa-cloud-download-alt"></i>
<i class="bi bi-cloud-download"></i>
</span>
<div class="info-box-content">
@ -1007,7 +1011,7 @@ const page = "index2";
<!-- /.info-box -->
<div class="info-box mb-3 text-bg-info">
<span class="info-box-icon">
<i class="fa-regular fa-comment"></i>
<i class="bi bi-chat-fill"></i>
</span>
<div class="info-box-content">
@ -1028,14 +1032,15 @@ const page = "index2";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
@ -1057,7 +1062,7 @@ const page = "index2";
<a href="#" class="nav-link">
United States of America
<span class="float-end text-danger">
<i class="fa-solid fa-arrow-down fs-7"></i>
<i class="bi bi-arrow-down fs-7"></i>
12%
</span>
</a>
@ -1066,7 +1071,7 @@ const page = "index2";
<a href="#" class="nav-link">
India
<span class="float-end text-success">
<i class="fa-solid fa-arrow-up fs-7"></i> 4%
<i class="bi bi-arrow-up fs-7"></i> 4%
</span>
</a>
</li>
@ -1074,7 +1079,7 @@ const page = "index2";
<a href="#" class="nav-link">
China
<span class="float-end text-info">
<i class="fa-solid fa-arrow-left fs-7"></i> 0%
<i class="bi bi-arrow-left fs-7"></i> 0%
</span>
</a>
</li>
@ -1095,14 +1100,15 @@ const page = "index2";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

36
src/html/pages/index3.astro
View File

@ -76,7 +76,7 @@ const page = "index3";
</p>
<p class="ms-auto d-flex flex-column text-end">
<span class="text-success">
<i class="fa-solid fa-arrow-up"></i> 12.5%
<i class="bi bi-arrow-up"></i> 12.5%
</span>
<span class="text-secondary">Since last week</span>
</p>
@ -89,11 +89,11 @@ const page = "index3";
<div class="d-flex flex-row justify-content-end">
<span class="me-2">
<i class="fa-solid fa-square text-primary"></i> This Week
<i class="bi bi-square-fill text-primary"></i> This Week
</span>
<span>
<i class="fa-solid fa-square text-secondary"></i> Last Week
<i class="bi bi-square-fill text-secondary"></i> Last Week
</span>
</div>
</div>
@ -105,10 +105,10 @@ const page = "index3";
<h3 class="card-title">Products</h3>
<div class="card-tools">
<a href="#" class="btn btn-tool btn-sm">
<i class="fa-solid fa-download"></i>
<i class="bi bi-download"></i>
</a>
<a href="#" class="btn btn-tool btn-sm">
<i class="fa-solid fa-bars"></i>
<i class="bi bi-list"></i>
</a>
</div>
</div>
@ -135,14 +135,14 @@ const page = "index3";
<td>$13 USD</td>
<td>
<small class="text-success me-1">
<i class="fa-solid fa-arrow-up"></i>
<i class="bi bi-arrow-up"></i>
12%
</small>
12,000 Sold
</td>
<td>
<a href="#" class="text-secondary">
<i class="fa-solid fa-search"></i>
<i class="bi bi-search"></i>
</a>
</td>
</tr>
@ -158,14 +158,14 @@ const page = "index3";
<td>$29 USD</td>
<td>
<small class="text-warning me-1">
<i class="fa-solid fa-arrow-down"></i>
<i class="bi bi-arrow-down"></i>
0.5%
</small>
123,234 Sold
</td>
<td>
<a href="#" class="text-secondary">
<i class="fa-solid fa-search"></i>
<i class="bi bi-search"></i>
</a>
</td>
</tr>
@ -181,14 +181,14 @@ const page = "index3";
<td>$1,230 USD</td>
<td>
<small class="text-danger me-1">
<i class="fa-solid fa-arrow-down"></i>
<i class="bi bi-arrow-down"></i>
3%
</small>
198 Sold
</td>
<td>
<a href="#" class="text-secondary">
<i class="fa-solid fa-search"></i>
<i class="bi bi-search"></i>
</a>
</td>
</tr>
@ -205,14 +205,14 @@ const page = "index3";
<td>$199 USD</td>
<td>
<small class="text-success me-1">
<i class="fa-solid fa-arrow-up"></i>
<i class="bi bi-arrow-up"></i>
63%
</small>
87 Sold
</td>
<td>
<a href="#" class="text-secondary">
<i class="fa-solid fa-search"></i>
<i class="bi bi-search"></i>
</a>
</td>
</tr>
@ -239,7 +239,7 @@ const page = "index3";
</p>
<p class="ms-auto d-flex flex-column text-end">
<span class="text-success">
<i class="fa-solid fa-arrow-up"></i> 33.1%
<i class="bi bi-arrow-up"></i> 33.1%
</span>
<span class="text-secondary">Since Past Year</span>
</p>
@ -252,11 +252,11 @@ const page = "index3";
<div class="d-flex flex-row justify-content-end">
<span class="me-2">
<i class="fa-solid fa-square text-primary"></i> This year
<i class="bi bi-square-fill text-primary"></i> This year
</span>
<span>
<i class="fa-solid fa-square text-secondary"></i> Last year
<i class="bi bi-square-fill text-secondary"></i> Last year
</span>
</div>
</div>
@ -268,10 +268,10 @@ const page = "index3";
<h3 class="card-title">Online Store Overview</h3>
<div class="card-tools">
<a href="#" class="btn btn-sm btn-tool">
<i class="fa-solid fa-download"></i>
<i class="bi bi-download"></i>
</a>
<a href="#" class="btn btn-sm btn-tool">
<i class="fa-solid fa-bars"></i>
<i class="bi bi-list"></i>
</a>
</div>
</div>

7
src/html/pages/layout/collapsed-sidebar.astro
View File

@ -70,15 +70,16 @@ const page = "collapsed-sidebar";
data-lte-toggle="card-collapse"
title="Collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

7
src/html/pages/layout/fixed-complete.astro
View File

@ -69,15 +69,16 @@ const page = "fixed-complete";
data-lte-toggle="card-collapse"
title="Collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

7
src/html/pages/layout/fixed-sidebar.astro
View File

@ -69,15 +69,16 @@ const page = "fixed-sidebar";
data-lte-toggle="card-collapse"
title="Collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

7
src/html/pages/layout/layout-rtl.astro
View File

@ -69,15 +69,16 @@ const isRtl = true;
data-lte-toggle="card-collapse"
title="Collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

29
src/html/pages/layout/logo-switch.astro
View File

@ -59,49 +59,49 @@ const htmlPath = convertPathToHtml(path);
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow fa-solid fa-angle-right"></i>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-dot-circle"></i>
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-dot-circle"></i>
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-dot-circle"></i>
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
@ -109,7 +109,7 @@ const htmlPath = convertPathToHtml(path);
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
@ -117,7 +117,7 @@ const htmlPath = convertPathToHtml(path);
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
@ -172,15 +172,16 @@ const htmlPath = convertPathToHtml(path);
data-lte-toggle="card-collapse"
title="Collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

7
src/html/pages/layout/sidebar-mini.astro
View File

@ -68,15 +68,16 @@ const page = "sidebar-mini";
data-lte-toggle="card-collapse"
title="Collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

7
src/html/pages/layout/unfixed-sidebar.astro
View File

@ -68,15 +68,16 @@ const page = "unfixed-sidebar";
data-lte-toggle="card-collapse"
title="Collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

39
src/html/pages/widgets/cards.astro
View File

@ -69,7 +69,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-plus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -92,7 +93,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -113,9 +115,9 @@ const page = "cards";
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -138,7 +140,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-maximize"
>
<i class="fa-solid fa-expand"></i>
<i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
</button>
</div>
<!-- /.card-tools -->
@ -167,7 +170,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-plus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -190,7 +194,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -211,9 +216,9 @@ const page = "cards";
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -236,7 +241,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-maximize"
>
<i class="fa-solid fa-expand"></i>
<i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
</button>
</div>
<!-- /.card-tools -->
@ -265,7 +271,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-plus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -288,7 +295,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-minus"></i>
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -309,9 +317,9 @@ const page = "cards";
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
data-lte-toggle="card-remove"
>
<i class="fa-solid fa-times"></i>
<i class="bi bi-x-lg"></i>
</button>
</div>
<!-- /.card-tools -->
@ -334,7 +342,8 @@ const page = "cards";
class="btn btn-tool"
data-lte-toggle="card-maximize"
>
<i class="fa-solid fa-expand"></i>
<i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
</button>
</div>
<!-- /.card-tools -->

32
src/html/pages/widgets/info-box.astro
View File

@ -59,7 +59,7 @@ const page = "info-box";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon text-bg-primary shadow-sm">
<i class="fa-solid fa-cog"></i>
<i class="bi bi-gear-fill"></i>
</span>
<div class="info-box-content">
@ -78,7 +78,7 @@ const page = "info-box";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon text-bg-success shadow-sm">
<i class="fa-solid fa-shopping-cart"></i>
<i class="bi bi-cart-fill"></i>
</span>
<div class="info-box-content">
@ -97,7 +97,7 @@ const page = "info-box";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon text-bg-warning shadow-sm">
<i class="fa-solid fa-users"></i>
<i class="bi bi-people-fill"></i>
</span>
<div class="info-box-content">
@ -113,7 +113,7 @@ const page = "info-box";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon text-bg-danger shadow-sm">
<i class="fa-solid fa-thumbs-up"></i>
<i class="bi bi-hand-thumbs-up-fill"></i>
</span>
<div class="info-box-content">
@ -139,7 +139,7 @@ const page = "info-box";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box shadow-none">
<span class="info-box-icon text-bg-primary shadow-sm">
<i class="fa-solid fa-cog"></i>
<i class="bi bi-gear-fill"></i>
</span>
<div class="info-box-content">
@ -158,7 +158,7 @@ const page = "info-box";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box shadow-sm">
<span class="info-box-icon text-bg-success shadow-sm">
<i class="fa-solid fa-shopping-cart"></i>
<i class="bi bi-cart-fill"></i>
</span>
<div class="info-box-content">
@ -177,7 +177,7 @@ const page = "info-box";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box shadow">
<span class="info-box-icon text-bg-warning shadow-sm">
<i class="fa-solid fa-users"></i>
<i class="bi bi-people-fill"></i>
</span>
<div class="info-box-content">
@ -193,7 +193,7 @@ const page = "info-box";
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box shadow-lg">
<span class="info-box-icon text-bg-danger shadow-sm">
<i class="fa-solid fa-thumbs-up"></i>
<i class="bi bi-hand-thumbs-up-fill"></i>
</span>
<div class="info-box-content">
@ -215,7 +215,7 @@ const page = "info-box";
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box text-bg-primary">
<span class="info-box-icon">
<i class="fa-regular fa-bookmark"></i>
<i class="bi bi-bookmark-fill"></i>
</span>
<div class="info-box-content">
@ -237,7 +237,7 @@ const page = "info-box";
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box text-bg-success">
<span class="info-box-icon">
<i class="fa-regular fa-thumbs-up"></i>
<i class="bi bi-hand-thumbs-up"></i>
</span>
<div class="info-box-content">
@ -259,7 +259,7 @@ const page = "info-box";
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box text-bg-warning">
<span class="info-box-icon">
<i class="fa-regular fa-calendar-alt"></i>
<i class="bi bi-calendar3"></i>
</span>
<div class="info-box-content">
@ -281,7 +281,7 @@ const page = "info-box";
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box text-bg-danger">
<span class="info-box-icon">
<i class="fa-solid fa-comments"></i>
<i class="bi bi-chat-text-fill"></i>
</span>
<div class="info-box-content">
@ -310,7 +310,7 @@ const page = "info-box";
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box text-bg-primary bg-gradient">
<span class="info-box-icon">
<i class="fa-regular fa-bookmark"></i>
<i class="bi bi-bookmark-fill"></i>
</span>
<div class="info-box-content">
@ -332,7 +332,7 @@ const page = "info-box";
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box text-bg-success bg-gradient">
<span class="info-box-icon">
<i class="fa-regular fa-thumbs-up"></i>
<i class="bi bi-hand-thumbs-up"></i>
</span>
<div class="info-box-content">
@ -354,7 +354,7 @@ const page = "info-box";
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box text-bg-warning bg-gradient">
<span class="info-box-icon">
<i class="fa-regular fa-calendar-alt"></i>
<i class="bi bi-calendar3"></i>
</span>
<div class="info-box-content">
@ -376,7 +376,7 @@ const page = "info-box";
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box text-bg-danger bg-gradient">
<span class="info-box-icon">
<i class="fa-solid fa-comments"></i>
<i class="bi bi-chat-text-fill"></i>
</span>
<div class="info-box-content">

8
src/html/pages/widgets/small-box.astro
View File

@ -77,7 +77,7 @@ const page = "small-box";
></path>
</svg>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
More info <i class="bi bi-link-45deg"></i>
</a>
</div>
</div>
@ -102,7 +102,7 @@ const page = "small-box";
></path>
</svg>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
More info <i class="bi bi-link-45deg"></i>
</a>
</div>
</div>
@ -127,7 +127,7 @@ const page = "small-box";
></path>
</svg>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
More info <i class="bi bi-link-45deg"></i>
</a>
</div>
</div>
@ -159,7 +159,7 @@ const page = "small-box";
></path>
</svg>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
More info <i class="bi bi-link-45deg"></i>
</a>
</div>
</div>

21
src/scss/_cards.scss
View File

@ -45,20 +45,41 @@
display: none;
}
[data-lte-icon="maximize"] {
display: none;
}
.card-header,
.card-footer {
@include border-radius(0 !important);
}
}
&:not(.maximized-card) {
[data-lte-icon="minimize"] {
display: none;
}
}
// collapsed mode
&.collapsed-card {
[data-lte-icon="collapse"] {
display: none;
}
.card-body,
.card-footer {
display: none;
}
}
&:not(.collapsed-card) {
[data-lte-icon="expand"] {
display: none;
}
}
.nav.flex-column {
> li {
margin: 0;

63
src/ts/card-widget.ts
View File

@ -31,40 +31,33 @@ const CLASS_NAME_EXPANDING = 'expanding-card'
const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
const CLASS_NAME_MAXIMIZED = 'maximized-card'
const SELECTOR_DATA_REMOVE = '[data-lte-dismiss="card-remove"]'
const SELECTOR_DATA_REMOVE = '[data-lte-toggle="card-remove"]'
const SELECTOR_DATA_COLLAPSE = '[data-lte-toggle="card-collapse"]'
const SELECTOR_DATA_MAXIMIZE = '[data-lte-toggle="card-maximize"]'
const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
const SELECTOR_CARD_HEADER = '.card-header'
const SELECTOR_CARD_BODY = '.card-body'
const SELECTOR_CARD_FOOTER = '.card-footer'
const Default = {
animationSpeed: 500,
collapseTrigger: SELECTOR_DATA_COLLAPSE,
removeTrigger: SELECTOR_DATA_REMOVE,
maximizeTrigger: SELECTOR_DATA_MAXIMIZE,
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
maximizeIcon: 'fa-expand',
minimizeIcon: 'fa-compress'
}
type Config = {
animationSpeed: number;
collapseTrigger: string;
removeTrigger: string;
maximizeTrigger: string;
collapseIcon: string;
expandIcon: string;
maximizeIcon: string;
minimizeIcon: string;
}
const Default: Config = {
animationSpeed: 500,
collapseTrigger: SELECTOR_DATA_COLLAPSE,
removeTrigger: SELECTOR_DATA_REMOVE,
maximizeTrigger: SELECTOR_DATA_MAXIMIZE
}
class CardWidget {
_element: HTMLElement
_parent: HTMLElement | undefined
_clone: HTMLElement | undefined
_config: Config
constructor(element: HTMLElement, config: Config) {
this._element = element
this._parent = element.closest(SELECTOR_CARD) as HTMLElement | undefined
@ -98,13 +91,6 @@ class CardWidget {
}, this._config.animationSpeed)
}
const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`)
if (icon) {
icon.classList.remove(this._config.collapseIcon)
icon.classList.add(this._config.expandIcon)
}
this._element?.dispatchEvent(event)
}
@ -130,13 +116,6 @@ class CardWidget {
}, this._config.animationSpeed)
}
const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`)
if (icon) {
icon.classList.add(this._config.collapseIcon)
icon.classList.remove(this._config.expandIcon)
}
this._element?.dispatchEvent(event)
}
@ -163,15 +142,8 @@ class CardWidget {
const event = new Event(EVENT_MAXIMIZED)
if (this._parent) {
const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
if (maxElm) {
maxElm.classList.add(this._config.minimizeIcon)
maxElm.classList.remove(this._config.maximizeIcon)
}
this._parent.style.height = `${this._parent.scrollHeight}px`
this._parent.style.width = `${this._parent.scrollWidth}px`
this._parent.style.height = `${this._parent.offsetHeight}px`
this._parent.style.width = `${this._parent.offsetWidth}px`
this._parent.style.transition = 'all .15s'
setTimeout(() => {
@ -198,14 +170,9 @@ class CardWidget {
const event = new Event(EVENT_MINIMIZED)
if (this._parent) {
const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
if (minElm) {
minElm.classList.add(this._config.maximizeIcon)
minElm.classList.remove(this._config.minimizeIcon)
}
this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;`
this._parent.style.height = 'auto'
this._parent.style.width = 'auto'
this._parent.style.transition = 'all .15s'
setTimeout(() => {
const htmlTag = document.querySelector('html')