admin-lte 4.0.0-rc4 → 4.0.0-rc7

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.
Files changed (81) hide show
  1. package/.browserslistrc +1 -0
  2. package/.claude/settings.local.json +27 -18
  3. package/CHANGELOG.md +143 -0
  4. package/CLAUDE.md +61 -88
  5. package/README.md +77 -20
  6. package/SECURITY.md +99 -0
  7. package/dist/UI/general.html +263 -72
  8. package/dist/UI/icons.html +94 -14
  9. package/dist/UI/timeline.html +108 -20
  10. package/dist/css/adminlte.css +162 -127
  11. package/dist/css/adminlte.css.map +1 -1
  12. package/dist/css/adminlte.min.css +2 -2
  13. package/dist/css/adminlte.min.css.map +1 -1
  14. package/dist/css/adminlte.rtl.css +162 -127
  15. package/dist/css/adminlte.rtl.css.map +1 -1
  16. package/dist/css/adminlte.rtl.min.css +2 -2
  17. package/dist/css/adminlte.rtl.min.css.map +1 -1
  18. package/dist/docs/browser-support.html +91 -13
  19. package/dist/docs/color-mode.html +96 -14
  20. package/dist/docs/components/main-header.html +111 -19
  21. package/dist/docs/components/main-sidebar.html +91 -13
  22. package/dist/docs/faq.html +91 -13
  23. package/dist/docs/how-to-contribute.html +91 -13
  24. package/dist/docs/introduction.html +97 -19
  25. package/dist/docs/javascript/accessibility.html +1055 -0
  26. package/dist/docs/javascript/card-widget.html +999 -0
  27. package/dist/docs/javascript/direct-chat.html +969 -0
  28. package/dist/docs/javascript/fullscreen.html +949 -0
  29. package/dist/docs/javascript/layout.html +975 -0
  30. package/dist/docs/javascript/pushmenu.html +1028 -0
  31. package/dist/docs/javascript/treeview.html +91 -13
  32. package/dist/docs/layout.html +93 -13
  33. package/dist/docs/license.html +91 -13
  34. package/dist/examples/lockscreen.html +23 -3
  35. package/dist/examples/login-v2.html +30 -5
  36. package/dist/examples/login.html +30 -5
  37. package/dist/examples/register-v2.html +30 -5
  38. package/dist/examples/register.html +30 -5
  39. package/dist/forms/general.html +114 -19
  40. package/dist/generate/theme.html +59 -15
  41. package/dist/index.html +127 -16
  42. package/dist/index2.html +195 -33
  43. package/dist/index3.html +138 -25
  44. package/dist/js/adminlte.js +179 -272
  45. package/dist/js/adminlte.js.map +1 -1
  46. package/dist/js/adminlte.min.js +3 -3
  47. package/dist/js/adminlte.min.js.map +1 -1
  48. package/dist/layout/collapsed-sidebar-without-hover.html +943 -0
  49. package/dist/layout/collapsed-sidebar.html +91 -12
  50. package/dist/layout/fixed-complete.html +93 -15
  51. package/dist/layout/fixed-footer.html +92 -13
  52. package/dist/layout/fixed-header.html +92 -13
  53. package/dist/layout/fixed-sidebar.html +93 -13
  54. package/dist/layout/layout-custom-area.html +102 -15
  55. package/dist/layout/layout-rtl.html +92 -13
  56. package/dist/layout/logo-switch.html +44 -11
  57. package/dist/layout/sidebar-mini.html +91 -12
  58. package/dist/layout/unfixed-sidebar.html +92 -13
  59. package/dist/tables/simple.html +163 -36
  60. package/dist/widgets/cards.html +106 -13
  61. package/dist/widgets/info-box.html +178 -30
  62. package/dist/widgets/small-box.html +95 -13
  63. package/index.html +1 -1
  64. package/package.json +28 -28
  65. package/release.md +75 -0
  66. package/src/scss/_accessibility.scss +44 -6
  67. package/src/scss/_app-footer.scss +9 -0
  68. package/src/scss/_app-sidebar.scss +55 -44
  69. package/src/scss/_bootstrap-variables.scss +1 -1
  70. package/src/scss/_cards.scss +6 -4
  71. package/src/scss/_dropdown.scss +5 -28
  72. package/src/scss/adminlte.scss +1 -1
  73. package/src/scss/pages/_login_and_register.scss +1 -1
  74. package/src/ts/accessibility.ts +22 -12
  75. package/src/ts/adminlte.ts +2 -14
  76. package/src/ts/card-widget.ts +4 -2
  77. package/src/ts/layout.ts +34 -16
  78. package/src/ts/push-menu.ts +238 -72
  79. package/src/ts/treeview.ts +19 -1
  80. package/src/ts/util/index.ts +10 -0
  81. package/README 2.md +0 -106
package/dist/widgets/info-box.html CHANGED
@@ -4,12 +4,14 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Widgets - Info Box</title>
7
+
7
8
  <!--begin::Accessibility Meta Tags-->
8
9
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
10
  <meta name="color-scheme" content="light dark" />
10
11
  <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
12
  <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
13
  <!--end::Accessibility Meta Tags-->
14
+
13
15
  <!--begin::Primary Meta Tags-->
14
16
  <meta name="title" content="AdminLTE 4 | Widgets - Info Box" />
15
17
  <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
22
24
  content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
23
25
  />
24
26
  <!--end::Primary Meta Tags-->
27
+
25
28
  <!--begin::Accessibility Features-->
26
29
  <!-- Skip links will be dynamically added by accessibility.js -->
27
30
  <meta name="supported-color-schemes" content="light dark" />
28
31
  <link rel="preload" href="../css/adminlte.css" as="style" />
29
32
  <!--end::Accessibility Features-->
33
+
30
34
  <!--begin::Fonts-->
31
35
  <link
32
36
  rel="stylesheet"
@@ -34,9 +38,10 @@
34
38
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
35
39
  crossorigin="anonymous"
36
40
  media="print"
37
- onload="this.media='all'"
41
+ onload="this.media = 'all'"
38
42
  />
39
43
  <!--end::Fonts-->
44
+
40
45
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
41
46
  <link
42
47
  rel="stylesheet"
@@ -44,6 +49,7 @@
44
49
  crossorigin="anonymous"
45
50
  />
46
51
  <!--end::Third Party Plugin(OverlayScrollbars)-->
52
+
47
53
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
48
54
  <link
49
55
  rel="stylesheet"
@@ -51,13 +57,14 @@
51
57
  crossorigin="anonymous"
52
58
  />
53
59
  <!--end::Third Party Plugin(Bootstrap Icons)-->
60
+
54
61
  <!--begin::Required Plugin(AdminLTE)-->
55
62
  <link rel="stylesheet" href="../css/adminlte.css" />
56
63
  <!--end::Required Plugin(AdminLTE)-->
57
64
  </head>
58
65
  <!--end::Head-->
59
66
  <!--begin::Body-->
60
- <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
67
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
61
68
  <!--begin::App Wrapper-->
62
69
  <div class="app-wrapper">
63
70
  <!--begin::Header-->
@@ -71,10 +78,15 @@
71
78
  <i class="bi bi-list"></i>
72
79
  </a>
73
80
  </li>
74
- <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
75
- <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
81
+ <li class="nav-item d-none d-md-block">
82
+ <a href="#" class="nav-link">Home</a>
83
+ </li>
84
+ <li class="nav-item d-none d-md-block">
85
+ <a href="#" class="nav-link">Contact</a>
86
+ </li>
76
87
  </ul>
77
88
  <!--end::Start Navbar Links-->
89
+
78
90
  <!--begin::End Navbar Links-->
79
91
  <ul class="navbar-nav ms-auto">
80
92
  <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
84
96
  </a>
85
97
  </li>
86
98
  <!--end::Navbar Search-->
99
+
87
100
  <!--begin::Messages Dropdown Menu-->
88
101
  <li class="nav-item dropdown">
89
102
  <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
173
186
  </div>
174
187
  </li>
175
188
  <!--end::Messages Dropdown Menu-->
189
+
176
190
  <!--begin::Notifications Dropdown Menu-->
177
191
  <li class="nav-item dropdown">
178
192
  <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
201
215
  </div>
202
216
  </li>
203
217
  <!--end::Notifications Dropdown Menu-->
218
+
204
219
  <!--begin::Fullscreen Toggle-->
205
220
  <li class="nav-item">
206
221
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
209
224
  </a>
210
225
  </li>
211
226
  <!--end::Fullscreen Toggle-->
227
+
212
228
  <!--begin::User Menu Dropdown-->
213
229
  <li class="nav-item dropdown user-menu">
214
230
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,17 +253,23 @@
237
253
  <li class="user-body">
238
254
  <!--begin::Row-->
239
255
  <div class="row">
240
- <div class="col-4 text-center"><a href="#">Followers</a></div>
241
- <div class="col-4 text-center"><a href="#">Sales</a></div>
242
- <div class="col-4 text-center"><a href="#">Friends</a></div>
256
+ <div class="col-4 text-center">
257
+ <a href="#">Followers</a>
258
+ </div>
259
+ <div class="col-4 text-center">
260
+ <a href="#">Sales</a>
261
+ </div>
262
+ <div class="col-4 text-center">
263
+ <a href="#">Friends</a>
264
+ </div>
243
265
  </div>
244
266
  <!--end::Row-->
245
267
  </li>
246
268
  <!--end::Menu Body-->
247
269
  <!--begin::Menu Footer-->
248
270
  <li class="user-footer">
249
- <a href="#" class="btn btn-default btn-flat">Profile</a>
250
- <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
271
+ <a href="#" class="btn btn-outline-secondary">Profile</a>
272
+ <a href="#" class="btn btn-outline-danger float-end">Sign out</a>
251
273
  </li>
252
274
  <!--end::Menu Footer-->
253
275
  </ul>
@@ -360,7 +382,7 @@
360
382
  <i class="nav-icon bi bi-clipboard-fill"></i>
361
383
  <p>
362
384
  Layout Options
363
- <span class="nav-badge badge text-bg-secondary me-3">6</span>
385
+ <span class="nav-badge badge text-bg-secondary me-3">7</span>
364
386
  <i class="nav-arrow bi bi-chevron-right"></i>
365
387
  </p>
366
388
  </a>
@@ -413,6 +435,12 @@
413
435
  <p>Sidebar Mini <small>+ Collapsed</small></p>
414
436
  </a>
415
437
  </li>
438
+ <li class="nav-item">
439
+ <a href="../layout/collapsed-sidebar-without-hover.html" class="nav-link">
440
+ <i class="nav-icon bi bi-circle"></i>
441
+ <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
442
+ </a>
443
+ </li>
416
444
  <li class="nav-item">
417
445
  <a href="../layout/logo-switch.html" class="nav-link">
418
446
  <i class="nav-icon bi bi-circle"></i>
@@ -490,6 +518,7 @@
490
518
  </li>
491
519
  </ul>
492
520
  </li>
521
+
493
522
  <li class="nav-header">EXAMPLES</li>
494
523
  <li class="nav-item">
495
524
  <a href="#" class="nav-link">
@@ -554,6 +583,7 @@
554
583
  </li>
555
584
  </ul>
556
585
  </li>
586
+
557
587
  <li class="nav-header">DOCUMENTATIONS</li>
558
588
  <li class="nav-item">
559
589
  <a href="../docs/introduction.html" class="nav-link">
@@ -605,12 +635,48 @@
605
635
  </p>
606
636
  </a>
607
637
  <ul class="nav nav-treeview">
638
+ <li class="nav-item">
639
+ <a href="../docs/javascript/layout.html" class="nav-link">
640
+ <i class="nav-icon bi bi-circle"></i>
641
+ <p>Layout</p>
642
+ </a>
643
+ </li>
644
+ <li class="nav-item">
645
+ <a href="../docs/javascript/pushmenu.html" class="nav-link">
646
+ <i class="nav-icon bi bi-circle"></i>
647
+ <p>PushMenu</p>
648
+ </a>
649
+ </li>
608
650
  <li class="nav-item">
609
651
  <a href="../docs/javascript/treeview.html" class="nav-link">
610
652
  <i class="nav-icon bi bi-circle"></i>
611
653
  <p>Treeview</p>
612
654
  </a>
613
655
  </li>
656
+ <li class="nav-item">
657
+ <a href="../docs/javascript/card-widget.html" class="nav-link">
658
+ <i class="nav-icon bi bi-circle"></i>
659
+ <p>Card Widget</p>
660
+ </a>
661
+ </li>
662
+ <li class="nav-item">
663
+ <a href="../docs/javascript/direct-chat.html" class="nav-link">
664
+ <i class="nav-icon bi bi-circle"></i>
665
+ <p>Direct Chat</p>
666
+ </a>
667
+ </li>
668
+ <li class="nav-item">
669
+ <a href="../docs/javascript/fullscreen.html" class="nav-link">
670
+ <i class="nav-icon bi bi-circle"></i>
671
+ <p>Fullscreen</p>
672
+ </a>
673
+ </li>
674
+ <li class="nav-item">
675
+ <a href="../docs/javascript/accessibility.html" class="nav-link">
676
+ <i class="nav-icon bi bi-circle"></i>
677
+ <p>Accessibility</p>
678
+ </a>
679
+ </li>
614
680
  </ul>
615
681
  </li>
616
682
  <li class="nav-item">
@@ -637,6 +703,7 @@
637
703
  <p>License</p>
638
704
  </a>
639
705
  </li>
706
+
640
707
  <li class="nav-header">MULTI LEVEL EXAMPLE</li>
641
708
  <li class="nav-item">
642
709
  <a href="#" class="nav-link">
@@ -702,6 +769,7 @@
702
769
  <p>Level 1</p>
703
770
  </a>
704
771
  </li>
772
+
705
773
  <li class="nav-header">LABELS</li>
706
774
  <li class="nav-item">
707
775
  <a href="#" class="nav-link">
@@ -736,7 +804,9 @@
736
804
  <div class="container-fluid">
737
805
  <!--begin::Row-->
738
806
  <div class="row">
739
- <div class="col-sm-6"><h3 class="mb-0">Info Box</h3></div>
807
+ <div class="col-sm-6">
808
+ <h3 class="mb-0">Info Box</h3>
809
+ </div>
740
810
  <div class="col-sm-6">
741
811
  <ol class="breadcrumb float-sm-end">
742
812
  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -761,6 +831,7 @@
761
831
  <span class="info-box-icon text-bg-primary shadow-sm">
762
832
  <i class="bi bi-gear-fill"></i>
763
833
  </span>
834
+
764
835
  <div class="info-box-content">
765
836
  <span class="info-box-text">CPU Traffic</span>
766
837
  <span class="info-box-number">
@@ -773,11 +844,13 @@
773
844
  <!-- /.info-box -->
774
845
  </div>
775
846
  <!-- /.col -->
847
+
776
848
  <div class="col-12 col-sm-6 col-md-3">
777
849
  <div class="info-box">
778
850
  <span class="info-box-icon text-bg-success shadow-sm">
779
851
  <i class="bi bi-cart-fill"></i>
780
852
  </span>
853
+
781
854
  <div class="info-box-content">
782
855
  <span class="info-box-text">Sales</span>
783
856
  <span class="info-box-number">760</span>
@@ -787,13 +860,16 @@
787
860
  <!-- /.info-box -->
788
861
  </div>
789
862
  <!-- /.col -->
863
+
790
864
  <!-- fix for small devices only -->
791
865
  <!-- <div class="clearfix hidden-md-up"></div> -->
866
+
792
867
  <div class="col-12 col-sm-6 col-md-3">
793
868
  <div class="info-box">
794
869
  <span class="info-box-icon text-bg-warning shadow-sm">
795
870
  <i class="bi bi-people-fill"></i>
796
871
  </span>
872
+
797
873
  <div class="info-box-content">
798
874
  <span class="info-box-text">New Members</span>
799
875
  <span class="info-box-number">2,000</span>
@@ -803,11 +879,13 @@
803
879
  <!-- /.info-box -->
804
880
  </div>
805
881
  <!-- /.col -->
882
+
806
883
  <div class="col-12 col-sm-6 col-md-3">
807
884
  <div class="info-box">
808
885
  <span class="info-box-icon text-bg-danger shadow-sm">
809
886
  <i class="bi bi-hand-thumbs-up-fill"></i>
810
887
  </span>
888
+
811
889
  <div class="info-box-content">
812
890
  <span class="info-box-text">Likes</span>
813
891
  <span class="info-box-number">41,410</span>
@@ -819,9 +897,13 @@
819
897
  <!-- /.col -->
820
898
  </div>
821
899
  <!--end::Row-->
900
+
822
901
  <!-- =========================================================== -->
823
902
  <h5 class="mb-2">
824
- Info Box With Custom Shadows <small> <i>Using Bootstrap's Shadow Utility</i> </small>
903
+ Info Box With Custom Shadows
904
+ <small>
905
+ <i>Using Bootstrap's Shadow Utility</i>
906
+ </small>
825
907
  </h5>
826
908
  <!--begin::Row-->
827
909
  <div class="row">
@@ -830,6 +912,7 @@
830
912
  <span class="info-box-icon text-bg-primary shadow-sm">
831
913
  <i class="bi bi-gear-fill"></i>
832
914
  </span>
915
+
833
916
  <div class="info-box-content">
834
917
  <span class="info-box-text">CPU Traffic</span>
835
918
  <span class="info-box-number">
@@ -842,11 +925,13 @@
842
925
  <!-- /.info-box -->
843
926
  </div>
844
927
  <!-- /.col -->
928
+
845
929
  <div class="col-12 col-sm-6 col-md-3">
846
930
  <div class="info-box shadow-sm">
847
931
  <span class="info-box-icon text-bg-success shadow-sm">
848
932
  <i class="bi bi-cart-fill"></i>
849
933
  </span>
934
+
850
935
  <div class="info-box-content">
851
936
  <span class="info-box-text">Sales</span>
852
937
  <span class="info-box-number">760</span>
@@ -856,13 +941,16 @@
856
941
  <!-- /.info-box -->
857
942
  </div>
858
943
  <!-- /.col -->
944
+
859
945
  <!-- fix for small devices only -->
860
946
  <!-- <div class="clearfix hidden-md-up"></div> -->
947
+
861
948
  <div class="col-12 col-sm-6 col-md-3">
862
949
  <div class="info-box shadow">
863
950
  <span class="info-box-icon text-bg-warning shadow-sm">
864
951
  <i class="bi bi-people-fill"></i>
865
952
  </span>
953
+
866
954
  <div class="info-box-content">
867
955
  <span class="info-box-text">New Members</span>
868
956
  <span class="info-box-number">2,000</span>
@@ -872,11 +960,13 @@
872
960
  <!-- /.info-box -->
873
961
  </div>
874
962
  <!-- /.col -->
963
+
875
964
  <div class="col-12 col-sm-6 col-md-3">
876
965
  <div class="info-box shadow-lg">
877
966
  <span class="info-box-icon text-bg-danger shadow-sm">
878
967
  <i class="bi bi-hand-thumbs-up-fill"></i>
879
968
  </span>
969
+
880
970
  <div class="info-box-content">
881
971
  <span class="info-box-text">Likes</span>
882
972
  <span class="info-box-number">41,410</span>
@@ -888,17 +978,24 @@
888
978
  <!-- /.col -->
889
979
  </div>
890
980
  <!--end::Row-->
981
+
891
982
  <!-- =========================================================== -->
892
983
  <h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
893
984
  <!--begin::Row-->
894
985
  <div class="row">
895
986
  <div class="col-md-3 col-sm-6 col-12">
896
987
  <div class="info-box text-bg-primary">
897
- <span class="info-box-icon"> <i class="bi bi-bookmark-fill"></i> </span>
988
+ <span class="info-box-icon">
989
+ <i class="bi bi-bookmark-fill"></i>
990
+ </span>
991
+
898
992
  <div class="info-box-content">
899
993
  <span class="info-box-text">Bookmarks</span>
900
994
  <span class="info-box-number">41,410</span>
901
- <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
995
+
996
+ <div class="progress">
997
+ <div class="progress-bar" style="width: 70%"></div>
998
+ </div>
902
999
  <span class="progress-description"> 70% Increase in 30 Days </span>
903
1000
  </div>
904
1001
  <!-- /.info-box-content -->
@@ -908,11 +1005,17 @@
908
1005
  <!-- /.col -->
909
1006
  <div class="col-md-3 col-sm-6 col-12">
910
1007
  <div class="info-box text-bg-success">
911
- <span class="info-box-icon"> <i class="bi bi-hand-thumbs-up"></i> </span>
1008
+ <span class="info-box-icon">
1009
+ <i class="bi bi-hand-thumbs-up"></i>
1010
+ </span>
1011
+
912
1012
  <div class="info-box-content">
913
1013
  <span class="info-box-text">Likes</span>
914
1014
  <span class="info-box-number">41,410</span>
915
- <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
1015
+
1016
+ <div class="progress">
1017
+ <div class="progress-bar" style="width: 70%"></div>
1018
+ </div>
916
1019
  <span class="progress-description"> 70% Increase in 30 Days </span>
917
1020
  </div>
918
1021
  <!-- /.info-box-content -->
@@ -922,11 +1025,17 @@
922
1025
  <!-- /.col -->
923
1026
  <div class="col-md-3 col-sm-6 col-12">
924
1027
  <div class="info-box text-bg-warning">
925
- <span class="info-box-icon"> <i class="bi bi-calendar3"></i> </span>
1028
+ <span class="info-box-icon">
1029
+ <i class="bi bi-calendar3"></i>
1030
+ </span>
1031
+
926
1032
  <div class="info-box-content">
927
1033
  <span class="info-box-text">Events</span>
928
1034
  <span class="info-box-number">41,410</span>
929
- <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
1035
+
1036
+ <div class="progress">
1037
+ <div class="progress-bar" style="width: 70%"></div>
1038
+ </div>
930
1039
  <span class="progress-description"> 70% Increase in 30 Days </span>
931
1040
  </div>
932
1041
  <!-- /.info-box-content -->
@@ -936,11 +1045,17 @@
936
1045
  <!-- /.col -->
937
1046
  <div class="col-md-3 col-sm-6 col-12">
938
1047
  <div class="info-box text-bg-danger">
939
- <span class="info-box-icon"> <i class="bi bi-chat-text-fill"></i> </span>
1048
+ <span class="info-box-icon">
1049
+ <i class="bi bi-chat-text-fill"></i>
1050
+ </span>
1051
+
940
1052
  <div class="info-box-content">
941
1053
  <span class="info-box-text">Comments</span>
942
1054
  <span class="info-box-number">41,410</span>
943
- <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
1055
+
1056
+ <div class="progress">
1057
+ <div class="progress-bar" style="width: 70%"></div>
1058
+ </div>
944
1059
  <span class="progress-description"> 70% Increase in 30 Days </span>
945
1060
  </div>
946
1061
  <!-- /.info-box-content -->
@@ -950,17 +1065,24 @@
950
1065
  <!-- /.col -->
951
1066
  </div>
952
1067
  <!--end::Row-->
1068
+
953
1069
  <!-- =========================================================== -->
954
1070
  <h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
955
1071
  <!--begin::Row-->
956
1072
  <div class="row">
957
1073
  <div class="col-md-3 col-sm-6 col-12">
958
1074
  <div class="info-box text-bg-primary bg-gradient">
959
- <span class="info-box-icon"> <i class="bi bi-bookmark-fill"></i> </span>
1075
+ <span class="info-box-icon">
1076
+ <i class="bi bi-bookmark-fill"></i>
1077
+ </span>
1078
+
960
1079
  <div class="info-box-content">
961
1080
  <span class="info-box-text">Bookmarks</span>
962
1081
  <span class="info-box-number">41,410</span>
963
- <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
1082
+
1083
+ <div class="progress">
1084
+ <div class="progress-bar" style="width: 70%"></div>
1085
+ </div>
964
1086
  <span class="progress-description"> 70% Increase in 30 Days </span>
965
1087
  </div>
966
1088
  <!-- /.info-box-content -->
@@ -970,11 +1092,17 @@
970
1092
  <!-- /.col -->
971
1093
  <div class="col-md-3 col-sm-6 col-12">
972
1094
  <div class="info-box text-bg-success bg-gradient">
973
- <span class="info-box-icon"> <i class="bi bi-hand-thumbs-up"></i> </span>
1095
+ <span class="info-box-icon">
1096
+ <i class="bi bi-hand-thumbs-up"></i>
1097
+ </span>
1098
+
974
1099
  <div class="info-box-content">
975
1100
  <span class="info-box-text">Likes</span>
976
1101
  <span class="info-box-number">41,410</span>
977
- <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
1102
+
1103
+ <div class="progress">
1104
+ <div class="progress-bar" style="width: 70%"></div>
1105
+ </div>
978
1106
  <span class="progress-description"> 70% Increase in 30 Days </span>
979
1107
  </div>
980
1108
  <!-- /.info-box-content -->
@@ -984,11 +1112,17 @@
984
1112
  <!-- /.col -->
985
1113
  <div class="col-md-3 col-sm-6 col-12">
986
1114
  <div class="info-box text-bg-warning bg-gradient">
987
- <span class="info-box-icon"> <i class="bi bi-calendar3"></i> </span>
1115
+ <span class="info-box-icon">
1116
+ <i class="bi bi-calendar3"></i>
1117
+ </span>
1118
+
988
1119
  <div class="info-box-content">
989
1120
  <span class="info-box-text">Events</span>
990
1121
  <span class="info-box-number">41,410</span>
991
- <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
1122
+
1123
+ <div class="progress">
1124
+ <div class="progress-bar" style="width: 70%"></div>
1125
+ </div>
992
1126
  <span class="progress-description"> 70% Increase in 30 Days </span>
993
1127
  </div>
994
1128
  <!-- /.info-box-content -->
@@ -998,11 +1132,17 @@
998
1132
  <!-- /.col -->
999
1133
  <div class="col-md-3 col-sm-6 col-12">
1000
1134
  <div class="info-box text-bg-danger bg-gradient">
1001
- <span class="info-box-icon"> <i class="bi bi-chat-text-fill"></i> </span>
1135
+ <span class="info-box-icon">
1136
+ <i class="bi bi-chat-text-fill"></i>
1137
+ </span>
1138
+
1002
1139
  <div class="info-box-content">
1003
1140
  <span class="info-box-text">Comments</span>
1004
1141
  <span class="info-box-number">41,410</span>
1005
- <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
1142
+
1143
+ <div class="progress">
1144
+ <div class="progress-bar" style="width: 70%"></div>
1145
+ </div>
1006
1146
  <span class="progress-description"> 70% Increase in 30 Days </span>
1007
1147
  </div>
1008
1148
  <!-- /.info-box-content -->
@@ -1025,7 +1165,7 @@
1025
1165
  <!--end::To the end-->
1026
1166
  <!--begin::Copyright-->
1027
1167
  <strong>
1028
- Copyright &copy; 2014-2025&nbsp;
1168
+ Copyright &copy; 2014-2026&nbsp;
1029
1169
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1030
1170
  </strong>
1031
1171
  All rights reserved.
@@ -1062,7 +1202,15 @@
1062
1202
  };
1063
1203
  document.addEventListener('DOMContentLoaded', function () {
1064
1204
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1065
- if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1205
+
1206
+ // Disable OverlayScrollbars on mobile devices to prevent touch interference
1207
+ const isMobile = window.innerWidth <= 992;
1208
+
1209
+ if (
1210
+ sidebarWrapper &&
1211
+ OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
1212
+ !isMobile
1213
+ ) {
1066
1214
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1067
1215
  scrollbars: {
1068
1216
  theme: Default.scrollbarTheme,