Skip to content

Commit 01aefe5

Browse files
puikinshclaude
puikinsh
and
claude
committed
Release 4.0.0-rc4: Updated dependencies and refined mobile image fix
- Updated 8 npm packages to latest versions including TypeScript, Astro, and linting tools - Refined mobile image loading solution by removing JavaScript runtime fix in favor of HTML-level path generation - All images now use relative paths generated at build time for optimal compatibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent a9e3a52 commit 01aefe5

File tree

82 files changed

+1195
-1521
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+1195
-1521
lines changed

‎CHANGELOG.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [4.0.0-rc4] - 2025-07-10
11+
12+
### Updated
13+
- **Dependencies:** Updated 8 packages to latest versions
14+
- @rollup/plugin-typescript: 12.1.3 → 12.1.4
15+
- @typescript-eslint/eslint-plugin: 8.35.1 → 8.36.0
16+
- @typescript-eslint/parser: 8.35.1 → 8.36.0
17+
- astro: 5.10.0 → 5.11.0
18+
- eslint: 9.30.0 → 9.30.1
19+
- prettier: 3.5.3 → 3.6.2
20+
- rollup: 4.44.0 → 4.44.2
21+
- stylelint: 16.21.0 → 16.21.1
22+
1023
### Fixed
1124
- **Windows Build Compatibility:** Fixed npm scripts to work cross-platform by replacing Unix-specific shell commands with `shx`
1225
- Updated `copy-assets` script to use `shx mkdir` and `shx cp` commands
@@ -17,6 +30,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1730
- Updated accessibility CSS to use `transition: none` and `opacity: 1` instead of `display: block`
1831
- Maintains WCAG 2.1 AA compliance while ensuring modals work properly in TeamViewer sessions
1932
- Added specific transform overrides for modal dialogs in reduced motion mode
33+
- **Mobile Sidebar Scrolling:** Fixed sidebar closing unexpectedly when scrolling on mobile devices
34+
- Updated touch event handling to differentiate between tap and scroll gestures
35+
- Added proper overflow properties to sidebar wrapper for mobile viewport
36+
- Sidebar now remains open during scroll operations on touch devices
37+
- Resolves issue where scrolling in sidebar would immediately close it on mobile browsers
38+
- **Image Path Resolution:** Fixed mobile image loading by using relative paths in HTML
39+
- **Root Cause:** Absolute paths like `/assets/img/user.jpg` caused 404 errors on mobile
40+
- **Solution:** Generate relative image paths in Astro components based on page location
41+
- **Result:** Images now load correctly on all devices and deployment scenarios
2042

2143
## [4.0.0-rc3] - 2025-06-24
2244

‎README 2.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# [AdminLTE - Bootstrap 5 Admin Dashboard](https://adminlte.io)
2+
3+
[![npm version](https://img.shields.io/npm/v/admin-lte/latest.svg)](https://www.npmjs.com/package/admin-lte)
4+
[![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
5+
[![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte)
6+
[![Discord Invite](https://img.shields.io/badge/discord-join%20now-green)](https://discord.gg/jfdvjwFqfz)
7+
[![Netlify Status](https://api.netlify.com/api/v1/badges/1277b36b-08f3-43fa-826a-4b4d24614b3c/deploy-status)](https://app.netlify.com/sites/adminlte-v4/deploys)
8+
9+
**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 5](https://getbootstrap.com/)** framework and also the JavaScript plugins.
10+
Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.
11+
12+
## What's New in v4.0.0-rc3
13+
14+
**Production Deployment & Cross-Platform Compatibility** - This release resolves critical production deployment issues:
15+
16+
- **Fixed Production Builds** - Resolved CSS/JS path issues, sidebar navigation, and image loading in all deployment scenarios
17+
- **Smart Path Resolution** - Automatic relative path calculation works for root deployment, sub-folders, and CDN hosting
18+
- **RTL CSS Fix** - Eliminated rtlcss interference with standard LTR production builds
19+
- **Updated Dependencies** - Bootstrap 5.3.7, Bootstrap Icons 1.13.1, OverlayScrollbars 2.11.0
20+
- **Zero Console Errors** - Fixed all CDN integrity mismatches and runtime issues
21+
- **FTP/Static Host Ready** - Perfect compatibility with traditional hosting and modern static platforms
22+
23+
**Key Improvements:**
24+
- ✅ Development and production environments now behave identically
25+
- ✅ Images, CSS, and JavaScript load correctly in any deployment structure
26+
- ✅ Sidebar navigation displays properly with badges and arrow indicators
27+
- ✅ All CDN resources load without console errors
28+
- ✅ Complete production build included in repository for easy deployment
29+
30+
See the [CHANGELOG.md](CHANGELOG.md) for complete details.
31+
32+
## Looking for Premium Templates?
33+
34+
AdminLTE.io just opened a new premium templates page. Hand picked to ensure the best quality and the most affordable
35+
prices. Visit <https://adminlte.io/premium> for more information.
36+
37+
!["AdminLTE Presentation"](https://adminlte.io/AdminLTE3.png "AdminLTE Presentation")
38+
39+
**AdminLTE** has been carefully coded with clear comments in all of its JS, SCSS and HTML files.
40+
SCSS has been used to increase code customizability.
41+
42+
## Quick start
43+
44+
### Development
45+
46+
To start developing with AdminLTE:
47+
48+
1. **Install dependencies:** `npm install`
49+
2. **Start development server:** `npm start` *(opens browser at http://localhost:3000)*
50+
3. **Start coding!** Files auto-compile and refresh on changes
51+
52+
### Production Build
53+
54+
To build for production:
55+
56+
1. **Full production build:** `npm run production` *(includes linting and optimization)*
57+
2. **Quick build:** `npm run build` *(faster for development/testing)*
58+
59+
### Available Scripts
60+
61+
- `npm start` - Start development server with file watching
62+
- `npm run build` - Build all assets for development
63+
- `npm run production` - Full production build with linting and bundlewatch
64+
- `npm run lint` - Run all linters (JS, CSS, docs, lockfile)
65+
- `npm run css` - Build CSS only
66+
- `npm run js` - Build JavaScript only
67+
68+
## Browser Support
69+
70+
AdminLTE supports all modern browsers with the latest Bootstrap 5.3.7:
71+
- Chrome (latest)
72+
- Firefox (latest)
73+
- Safari (latest)
74+
- Edge (latest)
75+
76+
## Contributing
77+
78+
- Highly welcome.
79+
- For your extra reference check [AdminLTE v4 Contribution Guide](https://github.com/ColorlibHQ/AdminLTE#contributing)
80+
- First thing first, you should have bit knowledge about NodeJS.
81+
- Github Knowledge.
82+
- Install NodeJS LTS version.
83+
- Clone this Repository to your machine and change to `master` branch.
84+
- Go to Cloned Folder.
85+
- In cli/bash run `npm install` it will install dependency from `package.json`.
86+
- After installation completes, run `npm start`
87+
- Cool, Send your changes in PR to `master` branch.
88+
89+
## Sponsorship
90+
91+
Support AdminLTE development by becoming a sponsor.
92+
[Github Sponsors](https://github.com/sponsors/danny007in) or
93+
[PayPal](https://www.paypal.me/daniel007in)
94+
95+
## License
96+
97+
AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](https://opensource.org/licenses/MIT).
98+
AdminLTE.io reserves the right to change the license of future releases.
99+
100+
## Image Credits
101+
102+
- [Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
103+
- [Graphicsfuel](https://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
104+
- [Pickaface](https://pickaface.net/)
105+
- [Unsplash](https://unsplash.com/)
106+
- [Uifaces](http://uifaces.com/)

‎dist/UI/general.html‎

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
<div class="d-flex">
9797
<div class="flex-shrink-0">
9898
<img
99-
src="/assets/img/user1-128x128.jpg"
99+
src="../assets/img/user1-128x128.jpg"
100100
alt="User Avatar"
101101
class="img-size-50 rounded-circle me-3"
102102
/>
@@ -122,7 +122,7 @@ <h3 class="dropdown-item-title">
122122
<div class="d-flex">
123123
<div class="flex-shrink-0">
124124
<img
125-
src="/assets/img/user8-128x128.jpg"
125+
src="../assets/img/user8-128x128.jpg"
126126
alt="User Avatar"
127127
class="img-size-50 rounded-circle me-3"
128128
/>
@@ -148,7 +148,7 @@ <h3 class="dropdown-item-title">
148148
<div class="d-flex">
149149
<div class="flex-shrink-0">
150150
<img
151-
src="/assets/img/user3-128x128.jpg"
151+
src="../assets/img/user3-128x128.jpg"
152152
alt="User Avatar"
153153
class="img-size-50 rounded-circle me-3"
154154
/>
@@ -213,7 +213,7 @@ <h3 class="dropdown-item-title">
213213
<li class="nav-item dropdown user-menu">
214214
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
215215
<img
216-
src="/assets/img/user2-160x160.jpg"
216+
src="../assets/img/user2-160x160.jpg"
217217
class="user-image rounded-circle shadow"
218218
alt="User Image"
219219
/>
@@ -223,7 +223,7 @@ <h3 class="dropdown-item-title">
223223
<!--begin::User Image-->
224224
<li class="user-header text-bg-primary">
225225
<img
226-
src="/assets/img/user2-160x160.jpg"
226+
src="../assets/img/user2-160x160.jpg"
227227
class="rounded-circle shadow"
228228
alt="User Image"
229229
/>
@@ -267,7 +267,7 @@ <h3 class="dropdown-item-title">
267267
<a href="../index.html" class="brand-link">
268268
<!--begin::Brand Image-->
269269
<img
270-
src="/assets/img/AdminLTELogo.png"
270+
src="../assets/img/AdminLTELogo.png"
271271
alt="AdminLTE Logo"
272272
class="brand-image opacity-75 shadow"
273273
/>
@@ -1897,31 +1897,7 @@ <h5 class="card-title placeholder-glow">
18971897
}
18981898
});
18991899
</script>
1900-
<!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
1901-
<script>
1902-
document.addEventListener('DOMContentLoaded', () => {
1903-
// Find the link tag for the main AdminLTE CSS file.
1904-
const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
1905-
if (!cssLink) {
1906-
return; // Exit if the link isn't found
1907-
}
1908-
1909-
// Extract the base path from the CSS href.
1910-
// e.g., from "../css/adminlte.css", we get "../"
1911-
// e.g., from "./css/adminlte.css", we get "./"
1912-
const cssHref = cssLink.getAttribute('href');
1913-
const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
1914-
1915-
// Find all images with absolute paths and fix them.
1916-
document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
1917-
const originalSrc = img.getAttribute('src');
1918-
if (originalSrc) {
1919-
const relativeSrc = originalSrc.slice(1); // Remove leading '/'
1920-
img.src = deploymentPath + relativeSrc;
1921-
}
1922-
});
1923-
});
1924-
</script>
1900+
<!--end::OverlayScrollbars Configure-->
19251901
<!--begin::Bootstrap Tooltips-->
19261902
<script>
19271903
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');

‎dist/UI/icons.html‎

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
<div class="d-flex">
9797
<div class="flex-shrink-0">
9898
<img
99-
src="/assets/img/user1-128x128.jpg"
99+
src="../assets/img/user1-128x128.jpg"
100100
alt="User Avatar"
101101
class="img-size-50 rounded-circle me-3"
102102
/>
@@ -122,7 +122,7 @@ <h3 class="dropdown-item-title">
122122
<div class="d-flex">
123123
<div class="flex-shrink-0">
124124
<img
125-
src="/assets/img/user8-128x128.jpg"
125+
src="../assets/img/user8-128x128.jpg"
126126
alt="User Avatar"
127127
class="img-size-50 rounded-circle me-3"
128128
/>
@@ -148,7 +148,7 @@ <h3 class="dropdown-item-title">
148148
<div class="d-flex">
149149
<div class="flex-shrink-0">
150150
<img
151-
src="/assets/img/user3-128x128.jpg"
151+
src="../assets/img/user3-128x128.jpg"
152152
alt="User Avatar"
153153
class="img-size-50 rounded-circle me-3"
154154
/>
@@ -213,7 +213,7 @@ <h3 class="dropdown-item-title">
213213
<li class="nav-item dropdown user-menu">
214214
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
215215
<img
216-
src="/assets/img/user2-160x160.jpg"
216+
src="../assets/img/user2-160x160.jpg"
217217
class="user-image rounded-circle shadow"
218218
alt="User Image"
219219
/>
@@ -223,7 +223,7 @@ <h3 class="dropdown-item-title">
223223
<!--begin::User Image-->
224224
<li class="user-header text-bg-primary">
225225
<img
226-
src="/assets/img/user2-160x160.jpg"
226+
src="../assets/img/user2-160x160.jpg"
227227
class="rounded-circle shadow"
228228
alt="User Image"
229229
/>
@@ -267,7 +267,7 @@ <h3 class="dropdown-item-title">
267267
<a href="../index.html" class="brand-link">
268268
<!--begin::Brand Image-->
269269
<img
270-
src="/assets/img/AdminLTELogo.png"
270+
src="../assets/img/AdminLTELogo.png"
271271
alt="AdminLTE Logo"
272272
class="brand-image opacity-75 shadow"
273273
/>
@@ -838,31 +838,7 @@ <h3 class="dropdown-item-title">
838838
}
839839
});
840840
</script>
841-
<!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
842-
<script>
843-
document.addEventListener('DOMContentLoaded', () => {
844-
// Find the link tag for the main AdminLTE CSS file.
845-
const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
846-
if (!cssLink) {
847-
return; // Exit if the link isn't found
848-
}
849-
850-
// Extract the base path from the CSS href.
851-
// e.g., from "../css/adminlte.css", we get "../"
852-
// e.g., from "./css/adminlte.css", we get "./"
853-
const cssHref = cssLink.getAttribute('href');
854-
const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
855-
856-
// Find all images with absolute paths and fix them.
857-
document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
858-
const originalSrc = img.getAttribute('src');
859-
if (originalSrc) {
860-
const relativeSrc = originalSrc.slice(1); // Remove leading '/'
861-
img.src = deploymentPath + relativeSrc;
862-
}
863-
});
864-
});
865-
</script>
841+
<!--end::OverlayScrollbars Configure-->
866842
<!--end::Script-->
867843
</body>
868844
<!--end::Body-->

0 commit comments

Comments
 (0)