adminator-admin-dashboard 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +162 -0
- package/LICENSE +21 -0
- package/README.md +376 -0
- package/RELEASE_NOTES.md +92 -0
- package/dist/1e59d2330b4c6deb84b3.ttf +0 -0
- package/dist/20fd1704ea223900efa9.woff2 +0 -0
- package/dist/29b39089170885ae2967.woff +0 -0
- package/dist/404.html +24 -0
- package/dist/500.html +24 -0
- package/dist/55b07f26c86c8e3d3754.svg +1 -0
- package/dist/8b43027f47b20503057d.eot +0 -0
- package/dist/9bad94440d49256265a5.eot +0 -0
- package/dist/9fad440d8ee7a949a9a9.svg +1 -0
- package/dist/assets/c1e38fd9e0e74ba58f7a2b77ef29fdd3.svg +2671 -0
- package/dist/assets/f0fc8c798eac5636249c4ea287832422.svg +362 -0
- package/dist/assets/static/fonts/icons/fontawesome/FontAwesome.otf +0 -0
- package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot +0 -0
- package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.svg +2671 -0
- package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf +0 -0
- package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff +0 -0
- package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2 +0 -0
- package/dist/assets/static/fonts/icons/themify/themify.eot +0 -0
- package/dist/assets/static/fonts/icons/themify/themify.svg +362 -0
- package/dist/assets/static/fonts/icons/themify/themify.ttf +0 -0
- package/dist/assets/static/fonts/icons/themify/themify.woff +0 -0
- package/dist/assets/static/images/404.png +0 -0
- package/dist/assets/static/images/500.png +0 -0
- package/dist/assets/static/images/bg.jpg +0 -0
- package/dist/assets/static/images/datatables/sort_asc.png +0 -0
- package/dist/assets/static/images/datatables/sort_asc_disabled.png +0 -0
- package/dist/assets/static/images/datatables/sort_both.png +0 -0
- package/dist/assets/static/images/datatables/sort_desc.png +0 -0
- package/dist/assets/static/images/datatables/sort_desc_disabled.png +0 -0
- package/dist/assets/static/images/logo-circle.svg +7 -0
- package/dist/assets/static/images/logo-gradient.svg +13 -0
- package/dist/assets/static/images/logo-outline.svg +7 -0
- package/dist/assets/static/images/logo.png +0 -0
- package/dist/assets/static/images/logo.svg +5 -0
- package/dist/basic-table.html +715 -0
- package/dist/blank.html +522 -0
- package/dist/buttons.html +467 -0
- package/dist/calendar.html +692 -0
- package/dist/charts.html +681 -0
- package/dist/chat.html +730 -0
- package/dist/compose.html +643 -0
- package/dist/datatable.html +1009 -0
- package/dist/eda8b94308c6f538f04a.ttf +0 -0
- package/dist/email.html +992 -0
- package/dist/f691f37e57f04c152e23.woff +0 -0
- package/dist/forms.html +760 -0
- package/dist/google-maps.html +530 -0
- package/dist/index.html +1090 -0
- package/dist/main.js +61239 -0
- package/dist/main.js.map +1 -0
- package/dist/signin.html +107 -0
- package/dist/signup.html +104 -0
- package/dist/test.html +91 -0
- package/dist/ui.html +931 -0
- package/dist/vector-maps.html +529 -0
- package/package.json +112 -0
- package/src/404.html +24 -0
- package/src/500.html +24 -0
- package/src/assets/scripts/app.js +644 -0
- package/src/assets/scripts/charts/chartJS/index.js +148 -0
- package/src/assets/scripts/charts/easyPieChart/index.js +200 -0
- package/src/assets/scripts/charts/index.js +3 -0
- package/src/assets/scripts/charts/sparkline/index.js +208 -0
- package/src/assets/scripts/chat/index.js +11 -0
- package/src/assets/scripts/components/Chart.js +1390 -0
- package/src/assets/scripts/components/Sidebar.js +241 -0
- package/src/assets/scripts/constants/colors.js +274 -0
- package/src/assets/scripts/datatable/index.js +379 -0
- package/src/assets/scripts/datepicker/index.js +302 -0
- package/src/assets/scripts/email/index.js +25 -0
- package/src/assets/scripts/fullcalendar/index.js +86 -0
- package/src/assets/scripts/googleMaps/index.js +93 -0
- package/src/assets/scripts/index.js +18 -0
- package/src/assets/scripts/masonry/index.js +14 -0
- package/src/assets/scripts/popover/index.js +109 -0
- package/src/assets/scripts/scrollbar/index.js +10 -0
- package/src/assets/scripts/search/index.js +15 -0
- package/src/assets/scripts/sidebar/index.js +140 -0
- package/src/assets/scripts/skycons/index.js +52 -0
- package/src/assets/scripts/ui/index.js +412 -0
- package/src/assets/scripts/utils/date.js +242 -0
- package/src/assets/scripts/utils/dom.js +349 -0
- package/src/assets/scripts/utils/index.js +45 -0
- package/src/assets/scripts/utils/theme.js +105 -0
- package/src/assets/scripts/vectorMaps/index.js +277 -0
- package/src/assets/static/fonts/icons/fontawesome/FontAwesome.otf +0 -0
- package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot +0 -0
- package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.svg +2671 -0
- package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf +0 -0
- package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff +0 -0
- package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2 +0 -0
- package/src/assets/static/fonts/icons/themify/themify.eot +0 -0
- package/src/assets/static/fonts/icons/themify/themify.svg +362 -0
- package/src/assets/static/fonts/icons/themify/themify.ttf +0 -0
- package/src/assets/static/fonts/icons/themify/themify.woff +0 -0
- package/src/assets/static/images/404.png +0 -0
- package/src/assets/static/images/500.png +0 -0
- package/src/assets/static/images/bg.jpg +0 -0
- package/src/assets/static/images/datatables/sort_asc.png +0 -0
- package/src/assets/static/images/datatables/sort_asc_disabled.png +0 -0
- package/src/assets/static/images/datatables/sort_both.png +0 -0
- package/src/assets/static/images/datatables/sort_desc.png +0 -0
- package/src/assets/static/images/datatables/sort_desc_disabled.png +0 -0
- package/src/assets/static/images/logo-circle.svg +7 -0
- package/src/assets/static/images/logo-gradient.svg +13 -0
- package/src/assets/static/images/logo-outline.svg +7 -0
- package/src/assets/static/images/logo.png +0 -0
- package/src/assets/static/images/logo.svg +5 -0
- package/src/assets/styles/index.scss +801 -0
- package/src/assets/styles/spec/components/easyPieChart.scss +11 -0
- package/src/assets/styles/spec/components/footer.scss +4 -0
- package/src/assets/styles/spec/components/forms.scss +288 -0
- package/src/assets/styles/spec/components/index.scss +9 -0
- package/src/assets/styles/spec/components/loader.scss +46 -0
- package/src/assets/styles/spec/components/masonry.scss +1 -0
- package/src/assets/styles/spec/components/pageContainer.scss +255 -0
- package/src/assets/styles/spec/components/progressBar.scss +6 -0
- package/src/assets/styles/spec/components/sidebar.scss +642 -0
- package/src/assets/styles/spec/components/topbar.scss +455 -0
- package/src/assets/styles/spec/generic/base.scss +102 -0
- package/src/assets/styles/spec/generic/index.scss +1 -0
- package/src/assets/styles/spec/index.scss +4 -0
- package/src/assets/styles/spec/screens/chat.scss +147 -0
- package/src/assets/styles/spec/screens/email.scss +108 -0
- package/src/assets/styles/spec/screens/index.scss +2 -0
- package/src/assets/styles/spec/settings/baseColors.scss +103 -0
- package/src/assets/styles/spec/settings/borders.scss +6 -0
- package/src/assets/styles/spec/settings/breakpoints.scss +26 -0
- package/src/assets/styles/spec/settings/fonts.scss +4 -0
- package/src/assets/styles/spec/settings/index.scss +4 -0
- package/src/assets/styles/spec/settings/materialColors.scss +550 -0
- package/src/assets/styles/spec/tools/index.scss +1 -0
- package/src/assets/styles/spec/tools/mixins/clearfix.scss +15 -0
- package/src/assets/styles/spec/tools/mixins/index.scss +3 -0
- package/src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss +58 -0
- package/src/assets/styles/spec/tools/mixins/placeholder.scss +10 -0
- package/src/assets/styles/spec/utils/colors.scss +33 -0
- package/src/assets/styles/spec/utils/index.scss +2 -0
- package/src/assets/styles/spec/utils/layout/helpers/border.scss +78 -0
- package/src/assets/styles/spec/utils/layout/helpers/flex.scss +220 -0
- package/src/assets/styles/spec/utils/layout/helpers/index.scss +11 -0
- package/src/assets/styles/spec/utils/layout/helpers/layout.scss +137 -0
- package/src/assets/styles/spec/utils/layout/helpers/lists.scss +23 -0
- package/src/assets/styles/spec/utils/layout/helpers/margin.scss +266 -0
- package/src/assets/styles/spec/utils/layout/helpers/objects.scss +91 -0
- package/src/assets/styles/spec/utils/layout/helpers/padding.scss +147 -0
- package/src/assets/styles/spec/utils/layout/helpers/positions.scss +118 -0
- package/src/assets/styles/spec/utils/layout/helpers/pseudo.scss +6 -0
- package/src/assets/styles/spec/utils/layout/helpers/sizes.scss +157 -0
- package/src/assets/styles/spec/utils/layout/helpers/typography.scss +127 -0
- package/src/assets/styles/spec/utils/layout/index.scss +3 -0
- package/src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss +25 -0
- package/src/assets/styles/spec/utils/layout/mixins/index.scss +2 -0
- package/src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss +28 -0
- package/src/assets/styles/spec/utils/layout/utils/center.scss +54 -0
- package/src/assets/styles/spec/utils/layout/utils/gap.scss +229 -0
- package/src/assets/styles/spec/utils/layout/utils/index.scss +5 -0
- package/src/assets/styles/spec/utils/layout/utils/layers.scss +5 -0
- package/src/assets/styles/spec/utils/layout/utils/peers.scss +35 -0
- package/src/assets/styles/utils/mobile.scss +954 -0
- package/src/assets/styles/utils/theme.css +97 -0
- package/src/assets/styles/vendor/datepicker.scss +183 -0
- package/src/assets/styles/vendor/font-awesome.css +2337 -0
- package/src/assets/styles/vendor/fullcalendar.scss +217 -0
- package/src/assets/styles/vendor/index.scss +8 -0
- package/src/assets/styles/vendor/jquery.datatables.scss +162 -0
- package/src/assets/styles/vendor/perfectScrollbar.scss +4 -0
- package/src/assets/styles/vendor/sparkline.scss +6 -0
- package/src/assets/styles/vendor/themify-icons.css +1081 -0
- package/src/basic-table.html +725 -0
- package/src/blank.html +532 -0
- package/src/buttons.html +477 -0
- package/src/calendar.html +702 -0
- package/src/charts.html +691 -0
- package/src/chat.html +740 -0
- package/src/compose.html +653 -0
- package/src/datatable.html +1019 -0
- package/src/email.html +1002 -0
- package/src/forms.html +770 -0
- package/src/google-maps.html +540 -0
- package/src/index.html +1100 -0
- package/src/signin.html +107 -0
- package/src/signup.html +104 -0
- package/src/test.html +96 -0
- package/src/ui.html +941 -0
- package/src/vector-maps.html +539 -0
- package/webpack.config.js +3 -0
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
# CLAUDE.md
|
|
2
|
+
|
|
3
|
+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
4
|
+
|
|
5
|
+
## Development Commands
|
|
6
|
+
|
|
7
|
+
### Core Development
|
|
8
|
+
- `npm start` - Start development server with hot reload (available at http://localhost:4000)
|
|
9
|
+
- `npm run dev` - Start development server with webpack dashboard
|
|
10
|
+
- `npm run build` - Build for production (optimized)
|
|
11
|
+
- `npm run release:minified` - Build production with minification
|
|
12
|
+
- `npm run release:unminified` - Build production without minification
|
|
13
|
+
- `npm run preview` - Preview production build locally
|
|
14
|
+
|
|
15
|
+
### Code Quality
|
|
16
|
+
- `npm run lint` - Run all linters (JavaScript + SCSS)
|
|
17
|
+
- `npm run lint:js` - Lint JavaScript files using ESLint 9.x flat config
|
|
18
|
+
- `npm run lint:scss` - Lint SCSS files using Stylelint
|
|
19
|
+
|
|
20
|
+
### Utility Commands
|
|
21
|
+
- `npm run clean` - Clean the dist directory
|
|
22
|
+
|
|
23
|
+
## Project Architecture
|
|
24
|
+
|
|
25
|
+
### Technology Stack
|
|
26
|
+
- **Build System**: Webpack 5.99.9 with modern configuration
|
|
27
|
+
- **JavaScript**: ES6+ with Babel transpilation, ESLint 9.x flat config
|
|
28
|
+
- **CSS**: Sass/SCSS with PostCSS processing, Bootstrap 5.3.7
|
|
29
|
+
- **Frontend Framework**: **100% jQuery-free** vanilla JavaScript with modern class-based architecture
|
|
30
|
+
- **Theme System**: CSS variables-based dark/light mode system
|
|
31
|
+
|
|
32
|
+
### Core Application Structure
|
|
33
|
+
The application follows a modular class-based architecture:
|
|
34
|
+
|
|
35
|
+
**Main Application Class** (`src/assets/scripts/app.js`):
|
|
36
|
+
- `AdminatorApp` - Main application controller with component management
|
|
37
|
+
- Handles initialization, mobile optimizations, and global event coordination
|
|
38
|
+
- Component registry system for managing feature modules
|
|
39
|
+
|
|
40
|
+
**Core Components**:
|
|
41
|
+
- `Sidebar` (`src/assets/scripts/components/Sidebar.js`) - Navigation sidebar logic
|
|
42
|
+
- `ChartComponent` (`src/assets/scripts/components/Chart.js`) - Chart rendering and theme integration
|
|
43
|
+
- `Theme` (`src/assets/scripts/utils/theme.js`) - Theme management with localStorage persistence
|
|
44
|
+
|
|
45
|
+
**Utility Modules**:
|
|
46
|
+
- `DOM` (`src/assets/scripts/utils/dom.js`) - DOM manipulation helpers
|
|
47
|
+
- `DateUtils` (`src/assets/scripts/utils/date.js`) - Date handling with Day.js integration
|
|
48
|
+
|
|
49
|
+
### Dark Mode System
|
|
50
|
+
The project features a comprehensive dark mode implementation:
|
|
51
|
+
|
|
52
|
+
**Theme Toggle Integration**:
|
|
53
|
+
- Automatically injects theme toggle into navigation if missing
|
|
54
|
+
- Detects OS preference on first visit
|
|
55
|
+
- Persists theme choice in localStorage
|
|
56
|
+
- Real-time theme switching without page reload
|
|
57
|
+
|
|
58
|
+
**Component Theme Awareness**:
|
|
59
|
+
- Chart.js integration with dynamic color schemes
|
|
60
|
+
- FullCalendar dark mode support
|
|
61
|
+
- Vector maps with theme-specific palettes
|
|
62
|
+
- All UI components use CSS variables for theming
|
|
63
|
+
|
|
64
|
+
**CSS Variables Architecture**:
|
|
65
|
+
- Semantic color variables (e.g., `--c-bkg-body`, `--c-text-base`)
|
|
66
|
+
- Component-specific theme variables
|
|
67
|
+
- Automatic contrast and accessibility considerations
|
|
68
|
+
|
|
69
|
+
### Mobile Optimization
|
|
70
|
+
The application includes extensive mobile enhancements:
|
|
71
|
+
|
|
72
|
+
**Responsive Features**:
|
|
73
|
+
- Full-width search overlay for mobile
|
|
74
|
+
- Enhanced dropdown behavior with overlay management
|
|
75
|
+
- Touch-friendly interactions
|
|
76
|
+
- Viewport-based responsive breakpoints
|
|
77
|
+
|
|
78
|
+
**Mobile-Specific Behavior**:
|
|
79
|
+
- Prevents horizontal scrolling on mobile
|
|
80
|
+
- Auto-focus management for form inputs
|
|
81
|
+
- Gesture-based navigation support
|
|
82
|
+
|
|
83
|
+
### File Organization
|
|
84
|
+
```
|
|
85
|
+
src/
|
|
86
|
+
├── assets/
|
|
87
|
+
│ ├── scripts/ # JavaScript modules
|
|
88
|
+
│ │ ├── components/ # Reusable UI components
|
|
89
|
+
│ │ ├── utils/ # Utility functions
|
|
90
|
+
│ │ ├── charts/ # Chart initialization modules
|
|
91
|
+
│ │ ├── fullcalendar/ # Calendar integration
|
|
92
|
+
│ │ └── app.js # Main application entry point
|
|
93
|
+
│ ├── styles/ # SCSS stylesheets
|
|
94
|
+
│ │ ├── spec/ # Custom component styles
|
|
95
|
+
│ │ └── vendor/ # Third-party plugin styles
|
|
96
|
+
│ └── static/ # Static assets (fonts, images)
|
|
97
|
+
├── *.html # HTML template pages
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Build Configuration
|
|
101
|
+
**Webpack Setup**:
|
|
102
|
+
- Modern flat ESLint configuration
|
|
103
|
+
- Sass compilation with PostCSS processing
|
|
104
|
+
- Source map generation for development
|
|
105
|
+
- Production optimization with minification
|
|
106
|
+
- Hot module replacement for development
|
|
107
|
+
|
|
108
|
+
**Development Server**:
|
|
109
|
+
- Webpack dev server on port 4000
|
|
110
|
+
- Live reload and hot module replacement
|
|
111
|
+
- Proxy configuration for API endpoints
|
|
112
|
+
|
|
113
|
+
## Working with This Codebase
|
|
114
|
+
|
|
115
|
+
### Adding New Components
|
|
116
|
+
1. Create component class in `src/assets/scripts/components/`
|
|
117
|
+
2. Register component in `AdminatorApp.init()` method
|
|
118
|
+
3. Add component-specific styles in `src/assets/styles/spec/components/`
|
|
119
|
+
4. Ensure theme compatibility using CSS variables
|
|
120
|
+
|
|
121
|
+
### Modifying Themes
|
|
122
|
+
- Theme logic is centralized in `src/assets/scripts/utils/theme.js`
|
|
123
|
+
- CSS variables are defined in `src/assets/styles/utils/theme.css`
|
|
124
|
+
- Chart.js theme integration is automatic via `Chart.defaults` configuration
|
|
125
|
+
|
|
126
|
+
### Testing Changes
|
|
127
|
+
- Always run `npm run lint` before committing
|
|
128
|
+
- Test both light and dark themes
|
|
129
|
+
- Verify mobile responsiveness at various breakpoints
|
|
130
|
+
- Check component integration via browser developer tools
|
|
131
|
+
|
|
132
|
+
### Development Workflow
|
|
133
|
+
1. Run `npm start` for development server
|
|
134
|
+
2. Use `npm run dev` for enhanced debugging with webpack dashboard
|
|
135
|
+
3. Lint code with `npm run lint` before commits
|
|
136
|
+
4. Build production assets with `npm run build`
|
|
137
|
+
5. Preview production build with `npm run preview`
|
|
138
|
+
|
|
139
|
+
### Key Dependencies
|
|
140
|
+
- **Bootstrap 5.3.7**: UI framework and CSS components (JS components replaced with vanilla alternatives)
|
|
141
|
+
- **Chart.js 4.5.0**: Interactive charts with theme support (replaces jQuery Sparkline)
|
|
142
|
+
- **FullCalendar 6.1.17**: Calendar component with dark mode
|
|
143
|
+
- **Day.js 1.11.13**: Lightweight date manipulation
|
|
144
|
+
- **Perfect Scrollbar 1.5.6**: Custom scrollbar implementation
|
|
145
|
+
- **Masonry Layout 4.2.2**: Grid layouts (vanilla JS compatible)
|
|
146
|
+
|
|
147
|
+
### Removed jQuery Dependencies
|
|
148
|
+
**Successfully removed all jQuery dependencies (~600KB bundle reduction):**
|
|
149
|
+
- ❌ `jquery` (3.7.1) - Replaced with vanilla JS DOM manipulation
|
|
150
|
+
- ❌ `jquery-sparkline` (2.4.0) - Replaced with Chart.js mini charts
|
|
151
|
+
- ❌ `bootstrap-datepicker` (1.10.0) - Replaced with HTML5 date inputs + vanilla JS
|
|
152
|
+
- ❌ `datatables` (1.10.18) - Replaced with vanilla JS table component
|
|
153
|
+
- ❌ `easy-pie-chart` (2.1.7) - Replaced with vanilla JS SVG pie charts
|
|
154
|
+
- ❌ `jvectormap` (2.0.4) - Replaced with vanilla JS SVG world map
|
|
155
|
+
|
|
156
|
+
### Modern Vanilla JS Implementations
|
|
157
|
+
- **Sparkline Charts**: Chart.js-based mini charts with theme support
|
|
158
|
+
- **Pie Charts**: Custom SVG-based circular progress indicators
|
|
159
|
+
- **Data Tables**: Full-featured table with sorting, pagination, and search
|
|
160
|
+
- **Date Pickers**: Enhanced HTML5 date inputs with custom styling
|
|
161
|
+
- **Vector Maps**: SVG-based world map with markers and interactions
|
|
162
|
+
- **Bootstrap 5 Components**: Vanilla JS implementations of modals, dropdowns, popovers, tooltips, and accordions
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Aigars Silkalns
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,376 @@
|
|
|
1
|
+
# Adminator Bootstrap 5 Admin Template v2.7.0
|
|
2
|
+
|
|
3
|
+
**Adminator** is a responsive Bootstrap 5 Admin Template built with modern development tools. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets.
|
|
4
|
+
|
|
5
|
+
🚀 **Latest Update (v2.7.0)**: **100% jQuery-Free** - Complete removal of jQuery dependency (~600KB bundle reduction) with modern vanilla JavaScript implementation.
|
|
6
|
+
|
|
7
|
+
⚡ **Performance Benefits**: Faster load times, smaller bundle size, modern ES6+ code, and zero jQuery overhead.
|
|
8
|
+
|
|
9
|
+
📚 **[Complete Documentation](https://puikinsh.github.io/Adminator-admin-dashboard/)** - Detailed setup guides, API reference, and examples
|
|
10
|
+
|
|
11
|
+
Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
|
|
12
|
+
|
|
13
|
+
# Preview
|
|
14
|
+
|
|
15
|
+
### Screenshots
|
|
16
|
+
|
|
17
|
+
**Light Mode:**
|
|
18
|
+

|
|
19
|
+
|
|
20
|
+
**Dark Mode:**
|
|
21
|
+

|
|
22
|
+
|
|
23
|
+
### Demo Site: [Here](https://colorlib.com/polygon/adminator/index.html)
|
|
24
|
+
|
|
25
|
+
## TOC
|
|
26
|
+
- [What's New in v2.7.0](#whats-new-in-v270)
|
|
27
|
+
- [Getting Started](#getting-started)
|
|
28
|
+
- [Prerequisites](#prerequisites)
|
|
29
|
+
- [Installing & Local Development](#installing--local-development)
|
|
30
|
+
- [Adminator for other platforms and frameworks](#adminator-for-other-platforms-and-frameworks)
|
|
31
|
+
- [Files/Folder Structure](#filesfolders-structure)
|
|
32
|
+
- [Deployment](#deployment)
|
|
33
|
+
- [Built With](#built-with)
|
|
34
|
+
- [Changelog](#changelog)
|
|
35
|
+
- [Authors](#authors)
|
|
36
|
+
- [License](#license)
|
|
37
|
+
|
|
38
|
+
## What's New in v2.7.0
|
|
39
|
+
|
|
40
|
+
🚀 **jQuery-Free Release** - Complete removal of jQuery dependency with modern vanilla JavaScript:
|
|
41
|
+
|
|
42
|
+
### 💥 Major Performance Improvements
|
|
43
|
+
- **⚡ ~600KB Bundle Reduction**: Eliminated jQuery and all jQuery-dependent plugins
|
|
44
|
+
- **🚀 Faster Load Times**: Native DOM manipulation for optimal performance
|
|
45
|
+
- **📦 Smaller Bundle Size**: Significantly reduced JavaScript payload
|
|
46
|
+
- **🌟 Modern ES6+ Code**: Class-based architecture with modern JavaScript features
|
|
47
|
+
|
|
48
|
+
### 🔄 jQuery Replacements (Zero Breaking Changes)
|
|
49
|
+
- **📊 Chart.js**: Replaced jQuery Sparkline with Chart.js mini charts
|
|
50
|
+
- **📅 HTML5 Date Pickers**: Enhanced native date inputs with Day.js support
|
|
51
|
+
- **📋 Vanilla DataTables**: Custom table component with sorting and pagination
|
|
52
|
+
- **🎨 SVG Pie Charts**: Pure JavaScript circular progress indicators
|
|
53
|
+
- **🗺️ Vector Maps**: JavaScript-based world map with markers and interactions
|
|
54
|
+
- **💬 Vanilla Popovers**: Lightweight alternatives to Bootstrap JS components
|
|
55
|
+
|
|
56
|
+
### 🛠️ Technical Achievements
|
|
57
|
+
- **🎯 100% Vanilla JavaScript**: No jQuery dependency anywhere in the codebase
|
|
58
|
+
- **♻️ Component Architecture**: Modern class-based components (Sidebar, Charts, etc.)
|
|
59
|
+
- **🔧 Enhanced DOM Utilities**: jQuery-like functionality using native JavaScript
|
|
60
|
+
- **📱 Mobile Optimized**: Touch-friendly interactions and responsive behavior
|
|
61
|
+
- **🌙 Theme Integration**: All new components fully support dark/light mode switching
|
|
62
|
+
|
|
63
|
+
### 🌙 Previous Updates (v2.6.0 - Dark Mode System)
|
|
64
|
+
|
|
65
|
+
### 🎨 Dark Mode Features
|
|
66
|
+
- **🌗 Smart Theme Toggle**: Bootstrap-based switch with sun/moon icons and intuitive labels
|
|
67
|
+
- **🔄 OS Preference Detection**: Automatically detects and applies your preferred color scheme
|
|
68
|
+
- **💾 Persistent Storage**: Remembers your theme choice across browser sessions
|
|
69
|
+
- **⚡ Instant Switching**: Real-time theme updates without page reload
|
|
70
|
+
- **🎯 Component Integration**: All charts, calendars, maps, and UI elements are theme-aware
|
|
71
|
+
|
|
72
|
+
### 🛠️ Technical Implementation
|
|
73
|
+
- **🎨 CSS Variables Architecture**: Comprehensive color system with semantic naming
|
|
74
|
+
- **📊 Chart.js Integration**: Dynamic color schemes for all chart types
|
|
75
|
+
- **🗓️ FullCalendar Support**: Dark-mode aware calendar with proper contrast
|
|
76
|
+
- **🗺️ Vector Maps**: Custom color palettes for both light and dark themes
|
|
77
|
+
- **🎪 Component Compatibility**: Theme support across all interactive elements
|
|
78
|
+
|
|
79
|
+
### 🚀 Previous Updates (v2.5.0)
|
|
80
|
+
- **Latest Dependencies**: All 22+ dependencies updated to latest versions
|
|
81
|
+
- **Modern Build Tools**: webpack 5.99.9, webpack-dev-server 5.2.2
|
|
82
|
+
- **ESLint 9.x**: Migrated to modern flat config format
|
|
83
|
+
- **Enhanced CSS**: Latest Sass (1.89.2), PostCSS (8.5.6), Bootstrap (5.3.7)
|
|
84
|
+
- **Updated Components**: Chart.js 4.5.0, FullCalendar 6.1.17
|
|
85
|
+
- **Zero Vulnerabilities**: Complete security audit with all packages secure
|
|
86
|
+
|
|
87
|
+
## Getting Started
|
|
88
|
+
|
|
89
|
+
In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below. Prebuilt static assets can be found under [releases](https://github.com/puikinsh/Adminator-admin-dashboard/releases).
|
|
90
|
+
|
|
91
|
+
#### Prerequisites
|
|
92
|
+
- **Node.js 18.12.0 or higher** (tested with Node.js 23.11.0)
|
|
93
|
+
- **npm** (included with Node.js) or **Yarn**
|
|
94
|
+
- **Git**
|
|
95
|
+
|
|
96
|
+
#### Installing & Local Development
|
|
97
|
+
|
|
98
|
+
Start by typing the following commands in your terminal in order to get **Adminator** full package on your machine and starting a local development server with live reload feature.
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
# Clone the repository
|
|
102
|
+
git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
|
|
103
|
+
|
|
104
|
+
# Navigate to the project directory
|
|
105
|
+
cd adminator
|
|
106
|
+
|
|
107
|
+
# Install dependencies
|
|
108
|
+
npm install
|
|
109
|
+
|
|
110
|
+
# Start development server (available at http://localhost:4000)
|
|
111
|
+
npm start
|
|
112
|
+
|
|
113
|
+
# Alternative: Start with webpack dashboard
|
|
114
|
+
npm run dev
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
#### Development Commands
|
|
118
|
+
|
|
119
|
+
```bash
|
|
120
|
+
# Development server with hot reload
|
|
121
|
+
npm start
|
|
122
|
+
|
|
123
|
+
# Development server with dashboard
|
|
124
|
+
npm run dev
|
|
125
|
+
|
|
126
|
+
# Build for production (optimized)
|
|
127
|
+
npm run build
|
|
128
|
+
|
|
129
|
+
# Build for production (unminified)
|
|
130
|
+
npm run release:unminified
|
|
131
|
+
|
|
132
|
+
# Build for production (minified)
|
|
133
|
+
npm run release:minified
|
|
134
|
+
|
|
135
|
+
# Preview production build
|
|
136
|
+
npm run preview
|
|
137
|
+
|
|
138
|
+
# Lint JavaScript files
|
|
139
|
+
npm run lint:js
|
|
140
|
+
|
|
141
|
+
# Lint SCSS files
|
|
142
|
+
npm run lint:scss
|
|
143
|
+
|
|
144
|
+
# Run all linters
|
|
145
|
+
npm run lint
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## 🌙 Dark Mode Usage
|
|
149
|
+
|
|
150
|
+
Adminator now includes a comprehensive dark mode system that works out of the box:
|
|
151
|
+
|
|
152
|
+
### **Automatic Setup**
|
|
153
|
+
- Dark mode is automatically initialized on page load
|
|
154
|
+
- Detects your OS preference (light/dark) on first visit
|
|
155
|
+
- Remembers your choice across browser sessions
|
|
156
|
+
|
|
157
|
+
### **Theme Toggle**
|
|
158
|
+
- Look for the **Light/Dark** toggle switch in the header navigation
|
|
159
|
+
- Click to instantly switch between light and dark themes
|
|
160
|
+
- Visual feedback with sun ☀️ and moon 🌙 icons
|
|
161
|
+
|
|
162
|
+
### **For Developers**
|
|
163
|
+
|
|
164
|
+
📚 **[Complete Theme API Documentation →](https://puikinsh.github.io/Adminator-admin-dashboard/api/theme-api)**
|
|
165
|
+
|
|
166
|
+
**Using the Theme API:**
|
|
167
|
+
```javascript
|
|
168
|
+
// Get current theme
|
|
169
|
+
const currentTheme = Theme.current(); // 'light' or 'dark'
|
|
170
|
+
|
|
171
|
+
// Switch themes programmatically
|
|
172
|
+
Theme.toggle();
|
|
173
|
+
|
|
174
|
+
// Set specific theme
|
|
175
|
+
Theme.apply('dark');
|
|
176
|
+
|
|
177
|
+
// Listen for theme changes
|
|
178
|
+
window.addEventListener('adminator:themeChanged', (event) => {
|
|
179
|
+
console.log('Theme changed to:', event.detail.theme);
|
|
180
|
+
});
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
**CSS Variables for Custom Styling:**
|
|
184
|
+
```css
|
|
185
|
+
.my-component {
|
|
186
|
+
background: var(--c-bkg-card);
|
|
187
|
+
color: var(--c-text-base);
|
|
188
|
+
border: 1px solid var(--c-border);
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
**Available CSS Variables:**
|
|
193
|
+
- `--c-bkg-body` - Main background
|
|
194
|
+
- `--c-bkg-card` - Card backgrounds
|
|
195
|
+
- `--c-text-base` - Primary text color
|
|
196
|
+
- `--c-text-muted` - Secondary text color
|
|
197
|
+
- `--c-border` - Border colors
|
|
198
|
+
- `--c-primary` - Primary brand color
|
|
199
|
+
|
|
200
|
+
📖 **[View Complete CSS Variables Reference →](https://puikinsh.github.io/Adminator-admin-dashboard/customization/theme-system)**
|
|
201
|
+
|
|
202
|
+
## Documentation
|
|
203
|
+
|
|
204
|
+
📚 **[Complete Documentation Site](https://puikinsh.github.io/Adminator-admin-dashboard/)** - Comprehensive guides and API reference
|
|
205
|
+
|
|
206
|
+
### Quick Links:
|
|
207
|
+
- 🚀 **[Installation Guide](https://puikinsh.github.io/Adminator-admin-dashboard/getting-started/installation)** - Complete setup instructions
|
|
208
|
+
- 🌙 **[Theme System](https://puikinsh.github.io/Adminator-admin-dashboard/customization/theme-system)** - Dark mode and theming
|
|
209
|
+
- 🔧 **[API Reference](https://puikinsh.github.io/Adminator-admin-dashboard/api/theme-api)** - JavaScript API documentation
|
|
210
|
+
- 💡 **[Examples](https://puikinsh.github.io/Adminator-admin-dashboard/examples/theme-integration)** - Integration examples
|
|
211
|
+
|
|
212
|
+
## Adminator for other platforms and frameworks
|
|
213
|
+
* [Adminator right to left](https://github.com/mortezakarimi/Adminator-admin-dashboard-rtl) - Adminator modified to work with right to left languages like Persian and Arabic
|
|
214
|
+
|
|
215
|
+
## Files/Folders Structure
|
|
216
|
+
|
|
217
|
+
Here is a brief explanation of the template folder structure and some of its main files usage:
|
|
218
|
+
|
|
219
|
+
```
|
|
220
|
+
└── src # Contains all template source files.
|
|
221
|
+
│ └── assets # Contains JS, CSS, images and icon fonts.
|
|
222
|
+
│ │ └── scripts # Contains all JavaScript files.
|
|
223
|
+
│ │ │ └── charts # Chart.js, Sparkline & Pie Chart plugins init.
|
|
224
|
+
│ │ │ └── chat # All chat app JS code.
|
|
225
|
+
│ │ │ └── constants # Template constant values like color values.
|
|
226
|
+
│ │ │ └── datatable # Date table plugin init.
|
|
227
|
+
│ │ │ └── datepicker # Bootstrap datepicker init.
|
|
228
|
+
│ │ │ └── email # All email app code.
|
|
229
|
+
│ │ │ └── fullcalendar # Fullcalendar plugin init.
|
|
230
|
+
│ │ │ └── googleMaps # Google maps API integration code.
|
|
231
|
+
│ │ │ └── masonry # Masonry layout code.
|
|
232
|
+
│ │ │ └── popover # Bootstrap popover plugin init.
|
|
233
|
+
│ │ │ └── scrollbar # Perfect scrollbar plugin init.
|
|
234
|
+
│ │ │ └── search # Topbar toggle search init.
|
|
235
|
+
│ │ │ └── sidebar # Sidebar JS code.
|
|
236
|
+
│ │ │ └── skycons # Animated icons plugin init.
|
|
237
|
+
│ │ │ └── utils # Basic utils used for proper rendering.
|
|
238
|
+
│ │ │ └── vectorMaps # Vector maps plugin init.
|
|
239
|
+
│ │ │ └── app.js # Main application entry point.
|
|
240
|
+
│ │ │
|
|
241
|
+
│ │ └── static # Contains the non-code files.
|
|
242
|
+
│ │ │ └── fonts # Contains icon fonts.
|
|
243
|
+
│ │ │ └── images # Contains all template images/svg.
|
|
244
|
+
│ │ │
|
|
245
|
+
│ │ └── styles # Contains all SCSS files.
|
|
246
|
+
│ │ └── spec # Contains custom SCSS files.
|
|
247
|
+
│ │ │ └── components # Contains all template components.
|
|
248
|
+
│ │ │ └── generic # Contains basic scaffolding styles.
|
|
249
|
+
│ │ │ └── screens # Contains views specific styles.
|
|
250
|
+
│ │ │ └── settings # Contains all template variables.
|
|
251
|
+
│ │ │ └── tools # Contains all mixins.
|
|
252
|
+
│ │ │ └── utils # Contains helper classes.
|
|
253
|
+
│ │ │ └── index.scss # Indicator file.
|
|
254
|
+
│ │ │
|
|
255
|
+
│ │ └── vendor # Contains all plugin files & custom styles.
|
|
256
|
+
│ │ └── index.scss # Main style entry point.
|
|
257
|
+
│ │
|
|
258
|
+
│ └── *.html # All HTML template pages.
|
|
259
|
+
└── webpack # Contains Webpack configuration.
|
|
260
|
+
│ └── plugins # Contains all Webpack plugins config.
|
|
261
|
+
│ └── rules # Contains Webpack loaders config.
|
|
262
|
+
│ └── config.js # Main Webpack configuration.
|
|
263
|
+
│ └── devServer.js # Development server configuration.
|
|
264
|
+
│ └── manifest.js # Build system constants.
|
|
265
|
+
│
|
|
266
|
+
└── .babelrc # Babel ES6 transpiler configuration.
|
|
267
|
+
└── .editorconfig # Code editor consistency settings.
|
|
268
|
+
└── eslint.config.mjs # ESLint 9.x flat configuration.
|
|
269
|
+
└── .gitattributes # Git attributes configuration.
|
|
270
|
+
└── .gitignore # Git ignore patterns.
|
|
271
|
+
└── .stylelintrc.json # SCSS/CSS linting configuration.
|
|
272
|
+
└── browserslist # Supported browsers configuration.
|
|
273
|
+
└── CHANGELOG.md # Version history and updates.
|
|
274
|
+
└── package.json # Node.js package configuration.
|
|
275
|
+
└── README.md # This documentation file.
|
|
276
|
+
└── webpack.config.js # Webpack entry configuration.
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
## Deployment
|
|
280
|
+
|
|
281
|
+
In deployment process, you have several commands:
|
|
282
|
+
|
|
283
|
+
1. **Production Build** - Generate optimized assets for production:
|
|
284
|
+
```bash
|
|
285
|
+
npm run build
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
2. **Production Preview** - Preview the production build locally:
|
|
289
|
+
```bash
|
|
290
|
+
npm run preview
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
3. **Custom Builds**:
|
|
294
|
+
```bash
|
|
295
|
+
# Unminified production build (for debugging)
|
|
296
|
+
npm run release:unminified
|
|
297
|
+
|
|
298
|
+
# Minified production build (smallest size)
|
|
299
|
+
npm run release:minified
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
The built files will be available in the `dist/` directory.
|
|
303
|
+
|
|
304
|
+
## Built With
|
|
305
|
+
|
|
306
|
+
### Core Framework & Build Tools
|
|
307
|
+
- [Bootstrap 5.3.7](http://getbootstrap.com/) - Modern CSS framework
|
|
308
|
+
- [Webpack 5.99.9](https://webpack.js.org/) - Module bundler and build tool
|
|
309
|
+
- [Babel 7.27.x](https://babeljs.io/) - JavaScript transpiler
|
|
310
|
+
- [Sass 1.89.2](http://sass-lang.com/) - CSS preprocessor
|
|
311
|
+
- [PostCSS 8.5.6](http://postcss.org/) - CSS transformations
|
|
312
|
+
- [ESLint 9.29.0](https://eslint.org/) - JavaScript linting (flat config)
|
|
313
|
+
- [Stylelint 16.21.0](https://stylelint.io/) - CSS/SCSS linting
|
|
314
|
+
|
|
315
|
+
### UI Components & Charts
|
|
316
|
+
- [Chart.js 4.5.0](http://www.chartjs.org/) - Modern charting library
|
|
317
|
+
- [FullCalendar 6.1.17](https://fullcalendar.io/) - Interactive calendar
|
|
318
|
+
- [DataTables](https://datatables.net/) - Advanced table functionality
|
|
319
|
+
- [Easy Pie Chart](http://rendro.github.io/easy-pie-chart/) - Animated pie charts
|
|
320
|
+
- [Perfect Scrollbar 1.5.6](https://github.com/utatti/perfect-scrollbar) - Custom scrollbars
|
|
321
|
+
|
|
322
|
+
### JavaScript Libraries
|
|
323
|
+
- **[Chart.js 4.5.0](http://www.chartjs.org/)** - Modern charting library (replaces jQuery Sparkline)
|
|
324
|
+
- **[jsvectormap 1.6.0](https://github.com/themustafaomar/jsvectormap)** - Interactive vector maps (replaces jVectorMap)
|
|
325
|
+
- [Lodash 4.17.21](https://lodash.com/) - Utility library
|
|
326
|
+
- [Day.js 1.11.13](https://day.js.org/) - Modern 2KB date library (replaces Moment.js)
|
|
327
|
+
- [Masonry 4.2.2](https://masonry.desandro.com/) - Grid layouts
|
|
328
|
+
- **100% Vanilla JavaScript** - No jQuery dependency
|
|
329
|
+
|
|
330
|
+
### Icons & Fonts
|
|
331
|
+
- [Font Awesome](http://fontawesome.io/) - Icon library
|
|
332
|
+
- [Themify Icons](https://themify.me/themify-icons) - Additional icons
|
|
333
|
+
- [Roboto Font](https://fonts.google.com/specimen/Roboto) - Google Fonts
|
|
334
|
+
|
|
335
|
+
### Additional Plugins
|
|
336
|
+
- **HTML5 Date Inputs** - Enhanced native date pickers (replaces Bootstrap Datepicker)
|
|
337
|
+
- [Skycons](https://darkskyapp.github.io/skycons/) - Animated weather icons
|
|
338
|
+
- [Load Google Maps API](https://github.com/yuanqing/load-google-maps-api) - Maps integration
|
|
339
|
+
|
|
340
|
+
## Changelog
|
|
341
|
+
|
|
342
|
+
See [CHANGELOG.md](CHANGELOG.md) for detailed version history.
|
|
343
|
+
|
|
344
|
+
📚 **[Online Documentation](https://puikinsh.github.io/Adminator-admin-dashboard/)** includes comprehensive guides for all features.
|
|
345
|
+
|
|
346
|
+
#### Latest Release: V 2.7.0 (2025-07-09)
|
|
347
|
+
- **🚀 100% jQuery-Free** - Complete removal of jQuery dependency (~600KB reduction)
|
|
348
|
+
- **⚡ Modern Vanilla JavaScript** - Class-based architecture with ES6+ features
|
|
349
|
+
- **📊 Chart.js Integration** - Replaced jQuery Sparkline with Chart.js
|
|
350
|
+
- **📅 HTML5 Date Pickers** - Enhanced native inputs with Day.js support
|
|
351
|
+
- **🗺️ SVG Vector Maps** - Pure JavaScript world maps with theme support
|
|
352
|
+
- **🎯 Zero Breaking Changes** - All functionality preserved with better performance
|
|
353
|
+
|
|
354
|
+
#### Previous Releases
|
|
355
|
+
- **V 2.6.0**: Complete Dark Mode System with theme switching
|
|
356
|
+
- **V 2.5.0**: Updated all dependencies, ESLint 9.x, zero vulnerabilities
|
|
357
|
+
- **V 2.1.0**: Upgraded all dependencies
|
|
358
|
+
- **V 2.0.0**: Upgrade to Bootstrap 5
|
|
359
|
+
- **V 1.1.0**: Upgrade to webpack 5
|
|
360
|
+
- **V 1.0.0**: Initial Release
|
|
361
|
+
|
|
362
|
+
## Authors
|
|
363
|
+
[Colorlib](https://colorlib.com)
|
|
364
|
+
|
|
365
|
+
## More info
|
|
366
|
+
- [Bootstrap Dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)
|
|
367
|
+
- [Bootstrap Templates](https://colorlib.com/wp/free-bootstrap-templates/)
|
|
368
|
+
- [HTML Templates](https://colorlib.com/wp/free-html-website-templates/)
|
|
369
|
+
- [Free Admin Dashboards](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)
|
|
370
|
+
- [Website Templates](https://colorlib.com/wp/templates/)
|
|
371
|
+
- [Free CSS Templates](https://colorlib.com/wp/free-css-website-templates/)
|
|
372
|
+
- [WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/)
|
|
373
|
+
|
|
374
|
+
## License
|
|
375
|
+
|
|
376
|
+
Adminator is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.
|
package/RELEASE_NOTES.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# 🚀 Adminator v2.7.0 - jQuery-Free Release
|
|
2
|
+
|
|
3
|
+
## 📋 Overview
|
|
4
|
+
This major release completely removes jQuery dependency from the Adminator admin dashboard while maintaining all functionality and improving performance. The project now uses modern vanilla JavaScript with Bootstrap 5.3.7.
|
|
5
|
+
|
|
6
|
+
## ✨ Major Changes
|
|
7
|
+
|
|
8
|
+
### 🗑️ Removed jQuery Dependencies (600KB+ bundle reduction)
|
|
9
|
+
- ❌ **jQuery Core** (3.7.1) → ✅ **Vanilla JavaScript**
|
|
10
|
+
- ❌ **jQuery Sparkline** (2.4.0) → ✅ **Chart.js 4.5.0** mini charts
|
|
11
|
+
- ❌ **Bootstrap Datepicker** (1.10.0) → ✅ **HTML5 date inputs** + vanilla JS
|
|
12
|
+
- ❌ **DataTables** (1.10.18) → ✅ **Custom vanilla JS** table component
|
|
13
|
+
- ❌ **Easy Pie Chart** (2.1.7) → ✅ **Custom SVG** pie charts
|
|
14
|
+
- ❌ **jVectorMap** (2.0.4) → ✅ **JSVectorMap 1.6.0** (jQuery-free)
|
|
15
|
+
|
|
16
|
+
### 🔧 New Vanilla JavaScript Components
|
|
17
|
+
- **Bootstrap 5 Components**: Modals, dropdowns, popovers, tooltips, accordions
|
|
18
|
+
- **Enhanced Data Tables**: Sorting, pagination, search functionality
|
|
19
|
+
- **Interactive Charts**: Chart.js-based sparklines with theme support
|
|
20
|
+
- **Vector Maps**: Interactive world maps with markers and tooltips
|
|
21
|
+
- **Date Pickers**: HTML5 date inputs with enhanced UX
|
|
22
|
+
- **Theme System**: Improved dark/light mode with CSS variables
|
|
23
|
+
|
|
24
|
+
### 📱 Mobile Enhancements
|
|
25
|
+
- Full-width search overlay for mobile devices
|
|
26
|
+
- Enhanced dropdown behavior with overlay management
|
|
27
|
+
- Touch-friendly interactions and gestures
|
|
28
|
+
- Viewport-based responsive breakpoints
|
|
29
|
+
- Prevents horizontal scrolling on mobile
|
|
30
|
+
|
|
31
|
+
### 🎨 Bootstrap 5 Migration
|
|
32
|
+
- **Updated to Bootstrap 5.3.7** from Bootstrap 4
|
|
33
|
+
- **Fixed deprecated classes**: `sr-only` → `visually-hidden`
|
|
34
|
+
- **Updated data attributes**: `data-toggle` → `data-bs-toggle`
|
|
35
|
+
- **Enhanced UI components**: New examples and improved styling
|
|
36
|
+
- **Better accessibility**: Proper ARIA attributes and keyboard navigation
|
|
37
|
+
|
|
38
|
+
## 🚀 Performance Improvements
|
|
39
|
+
- **Bundle size reduction**: ~600KB smaller JavaScript bundle
|
|
40
|
+
- **Faster page loads**: Eliminated jQuery dependency
|
|
41
|
+
- **Modern ES6+**: Class-based architecture with better maintainability
|
|
42
|
+
- **Optimized builds**: Webpack 5.99.9 with modern optimizations
|
|
43
|
+
|
|
44
|
+
## 📦 New Features
|
|
45
|
+
- **Theme Toggle**: Automatic injection with OS preference detection
|
|
46
|
+
- **Comprehensive Documentation**: Updated CLAUDE.md with full architecture guide
|
|
47
|
+
- **Mobile-First Design**: Enhanced mobile experience across all components
|
|
48
|
+
- **Dark Mode**: Complete dark mode implementation with CSS variables
|
|
49
|
+
|
|
50
|
+
## 🔧 Technical Details
|
|
51
|
+
- **Build System**: Webpack 5.99.9 with hot module replacement
|
|
52
|
+
- **JavaScript**: ES6+ with Babel transpilation, ESLint 9.x flat config
|
|
53
|
+
- **CSS**: Sass/SCSS with PostCSS processing
|
|
54
|
+
- **Frontend**: 100% jQuery-free vanilla JavaScript
|
|
55
|
+
- **Theme System**: CSS variables-based dark/light mode
|
|
56
|
+
|
|
57
|
+
## 📖 Documentation
|
|
58
|
+
- Complete architecture documentation in `CLAUDE.md`
|
|
59
|
+
- Development commands and workflow guidelines
|
|
60
|
+
- Component integration examples
|
|
61
|
+
- Mobile optimization techniques
|
|
62
|
+
|
|
63
|
+
## 🔗 Demo
|
|
64
|
+
- **Live Demo**: https://puikinsh.github.io/Adminator-admin-dashboard/
|
|
65
|
+
- **Development Server**: `npm start` (http://localhost:4000)
|
|
66
|
+
|
|
67
|
+
## 💻 Quick Start
|
|
68
|
+
```bash
|
|
69
|
+
# Install dependencies
|
|
70
|
+
npm install
|
|
71
|
+
|
|
72
|
+
# Start development server
|
|
73
|
+
npm start
|
|
74
|
+
|
|
75
|
+
# Build for production
|
|
76
|
+
npm run build
|
|
77
|
+
|
|
78
|
+
# Run linters
|
|
79
|
+
npm run lint
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## 🎯 What's Next
|
|
83
|
+
This release establishes a modern, maintainable foundation for the Adminator admin dashboard. All functionality has been preserved while significantly improving performance and developer experience.
|
|
84
|
+
|
|
85
|
+
## 🙏 Acknowledgments
|
|
86
|
+
- Original design by [Colorlib](https://colorlib.com)
|
|
87
|
+
- jQuery removal and modernization completed with comprehensive testing
|
|
88
|
+
- Bootstrap 5 migration with full backward compatibility
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
**Full Changelog**: https://github.com/puikinsh/Adminator-admin-dashboard/compare/v2.6.1...v2.7.0
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/404.html
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
|
6
|
+
<title>404</title>
|
|
7
|
+
<script defer="defer" src="main.js"></script></head>
|
|
8
|
+
<body class="app">
|
|
9
|
+
<div class="pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30">
|
|
10
|
+
<div class="mR-60">
|
|
11
|
+
<img alt="#" src="assets/static/images/404.png">
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="d-f jc-c fxd-c">
|
|
15
|
+
<h1 class="mB-30 fw-900 lh-1 c-red-500" style="font-size: 60px;">404</h1>
|
|
16
|
+
<h3 class="mB-10 fsz-lg c-grey-900 tt-c">Oops Page Not Found</h3>
|
|
17
|
+
<p class="mB-30 fsz-def c-grey-700">The page you are looking for does not exist or has been moved.</p>
|
|
18
|
+
<div>
|
|
19
|
+
<a href="index.html" type="primary" class="btn btn-primary">Go to Home</a>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|