feat: reworked layout-fixed & added layout-fixed-complete
This commit is contained in:
REJack
@@ -124,7 +124,7 @@ const htmlPath = convertPathToHtml(path);
|
||||
<i class="nav-icon fa-solid fa-copy"></i>
|
||||
<p>
|
||||
Layout Options
|
||||
<span class="nav-badge badge text-bg-secondary opacity-75 me-3"
|
||||
<span class="nav-badge badge text-bg-secondary me-3"
|
||||
>6</span
|
||||
>
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
@@ -140,7 +140,7 @@ const htmlPath = convertPathToHtml(path);
|
||||
]}
|
||||
>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Unfixed Sidebar</p>
|
||||
<p>Default Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
@@ -152,6 +152,15 @@ const htmlPath = convertPathToHtml(path);
|
||||
<p>Fixed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/fixed-complete.html"}
|
||||
class:list={["nav-link", page === "fixed-complete" && "active"]}
|
||||
>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Fixed Complete</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/sidebar-mini.html"}
|
||||
|
||||
@@ -53,7 +53,7 @@ The sidebar used in this page to the left provides an example of what your sideb
|
||||
<p>
|
||||
Level 2 (Badge)
|
||||
<span
|
||||
class="nav-badge badge text-bg-secondary opacity-75 me-3"
|
||||
class="nav-badge badge text-bg-secondary me-3"
|
||||
>
|
||||
6
|
||||
</span>
|
||||
|
||||
208
src/html/pages/layout/fixed-complete.astro
Normal file
208
src/html/pages/layout/fixed-complete.astro
Normal file
@@ -0,0 +1,208 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Fixed Complete";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "fixed-complete";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path}/>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed-complete sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Sidenav path={path} mainPage={mainPage} page={page}/>
|
||||
<div class="app-main-wrapper">
|
||||
<Topbar path={path}/>
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h3 class="mb-0">Fixed Complete <small>(Sidebar, Header & Footer)</small></h3>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Fixed Layout
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
title="Collapse"
|
||||
>
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-dismiss="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
|
||||
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
|
||||
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
|
||||
aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
|
||||
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
||||
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
|
||||
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
|
||||
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
|
||||
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis.
|
||||
</p>
|
||||
<p>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
|
||||
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
|
||||
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At
|
||||
accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt
|
||||
justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero
|
||||
voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
|
||||
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
||||
</p>
|
||||
<p>
|
||||
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
|
||||
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
|
||||
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
|
||||
aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
|
||||
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
||||
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
|
||||
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
|
||||
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
|
||||
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
|
||||
<div class="app-content-bottom-area">
|
||||
<div class="row">
|
||||
<div class="col-12 text-end">
|
||||
<button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--end::App Main-->
|
||||
<Footer/>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path}/>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
Reference in New Issue
Block a user