Browse Source

[NETLIFY TEST] Update logo-switch.astro (#5164)

* Update logo-switch.astro

* Update README.md

* convertPathToHtml bug fix

* Create index.html

* css-lint fixed
pull/5186/head
Daniel 1 year ago committed by REJack
parent
commit
6b33ce3367
  1. 1
      README.md
  2. 12
      index.html
  3. 99
      src/html/pages/layout/logo-switch.astro
  4. 8
      src/scss/_app-content.scss
  5. 2
      src/scss/_app-main.scss
  6. 4
      src/scss/_compact-mode.scss
  7. 23
      src/utils/index.js

1
README.md

@ -5,6 +5,7 @@
[![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte) [![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte)
[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
[![Discord Invite](https://img.shields.io/badge/discord-join%20now-green)](https://discord.gg/jfdvjwFqfz) [![Discord Invite](https://img.shields.io/badge/discord-join%20now-green)](https://discord.gg/jfdvjwFqfz)
[![Netlify Status](https://api.netlify.com/api/v1/badges/1277b36b-08f3-43fa-826a-4b4d24614b3c/deploy-status)](https://app.netlify.com/sites/lambent-praline-f80030/deploys)
**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 5](https://getbootstrap.com/)** framework and also the JavaScript plugins. **AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 5](https://getbootstrap.com/)** framework and also the JavaScript plugins.
Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.

12
index.html

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>AdminLTE v4</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<script>window.location.href = './dist/pages/index.html'</script>
</body>
</html>

99
src/html/pages/layout/logo-switch.astro

@ -22,29 +22,112 @@ const htmlPath = convertPathToHtml(path);
<!--begin::App Wrapper--> <!--begin::App Wrapper-->
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar path={path} /> <Topbar path={path} />
<!-- Sidebar Container --> <!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark"> <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand"> <div class="sidebar-brand">
<!--begin::Brand Link-->
<a href={htmlPath + "/index.html"} class="brand-link logo-switch"> <a href={htmlPath + "/index.html"} class="brand-link logo-switch">
<!--begin::Brand Image Small-->
<img <img
src={path + "/assets/img/AdminLTELogo.png"} src={path + "/assets/img/AdminLTELogo.png"}
alt="AdminLTE Logo Small" alt="AdminLTE Logo Small"
class="brand-image-xl logo-xs opacity-75 shadow" class="brand-image-xl logo-xs opacity-75 shadow"
/> />
<!--end::Brand Image Small-->
<!--begin::Brand Image Large-->
<img <img
src={path + "/assets/img/AdminLTEFullLogo.png"} src={path + "/assets/img/AdminLTEFullLogo.png"}
alt="AdminLTE Logo Large" alt="AdminLTE Logo Large"
class="brand-image-xs logo-xl opacity-75" class="brand-image-xs logo-xl opacity-75"
/> />
<!--end::Brand Image Large-->
</a> </a>
<!--end::Brand Link-->
</div> </div>
<!-- Sidebar --> <!-- Sidebar -->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper"> <div class="sidebar-wrapper">
<nav class="mt-2"> <nav class="mt-2">
<!-- nav-links --> <!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<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>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<p>
Level 1
<i class="nav-arrow fa-solid fa-angle-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>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<p>
Level 2
<i class="nav-arrow fa-solid fa-angle-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>
<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>
<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>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
<p>Level 1</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav> </nav>
</div> </div>
<!--end::Sidebar Wrapper-->
</aside> </aside>
<!--end::Sidebar-->
<!--begin::App Main--> <!--begin::App Main-->
<main class="app-main"> <main class="app-main">
<!--begin::App Content Header--> <!--begin::App Content Header-->

8
src/scss/_app-content.scss

@ -39,8 +39,8 @@
.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl), .app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) { .app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
padding-top: $grid-gutter-width * 0.625; padding-top: $grid-gutter-width * .625;
padding-bottom: $grid-gutter-width * 0.625; padding-bottom: $grid-gutter-width * .625;
} }
.app-content-bottom-area { .app-content-bottom-area {
@ -49,8 +49,8 @@
.app-content-top-area { .app-content-top-area {
border-bottom: $lte-app-footer-border-top; border-bottom: $lte-app-footer-border-top;
& + .app-main { + .app-main {
padding-top: $grid-gutter-width * 0.5; padding-top: $grid-gutter-width * .5;
} }
} }

2
src/scss/_app-main.scss

@ -2,7 +2,7 @@
position: relative; position: relative;
grid-area: #{$lte-prefix}app-main; grid-area: #{$lte-prefix}app-main;
max-width: 100vw; max-width: 100vw;
padding-bottom: $grid-gutter-width * 0.5; padding-bottom: $grid-gutter-width * .5;
@include transition($lte-transition-speed $lte-transition-fn); @include transition($lte-transition-speed $lte-transition-fn);
.app-content-header { .app-content-header {

4
src/scss/_compact-mode.scss

@ -1,8 +1,8 @@
.compact-mode { .compact-mode {
.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl), .app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) { .app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
padding-top: $grid-gutter-width * 0.425; padding-top: $grid-gutter-width * .425;
padding-bottom: $grid-gutter-width * 0.425; padding-bottom: $grid-gutter-width * .425;
} }
.app-content-top-area-sm, .app-content-top-area-sm,
.app-content-bottom-area-sm { .app-content-bottom-area-sm {

23
src/utils/index.js

@ -1,11 +1,28 @@
function convertPathToHtml(path) { function convertPathToHtml(path) {
let htmlpath = '' let count = 0
let htmlPath = ''
while (path.startsWith('../')) { while (path.startsWith('../')) {
count++
path = path.slice(3) path = path.slice(3)
htmlpath += htmlpath.length < 2 ? '.' : '/..'
} }
return htmlpath if (count === 2) {
htmlPath = '.'
}
if (count === 3) {
htmlPath = '..'
}
if (count === 4) {
htmlPath = '../..'
}
if (count === 5) {
htmlPath = '../../..'
}
return htmlPath
} }
export { convertPathToHtml } export { convertPathToHtml }

Loading…
Cancel
Save