6.0 vite v2

Author: George

package.json

@@ -2,7 +2,7 @@
   "name": "admin",
   "version": "2.0.0",
   "description": "Web starter package suitable for admin applications.",
-  "main": "index.js",
+  "main": "public/index.js",
   "type": "module",
   "scripts": {
     "preview": "php -S 0.0.0.0:8080 -t public",
@@ -52,6 +52,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.1",
     "expose-loader": "^5.0.0",
+    "bootstrap-sass": "^3.4.3",
     "file-loader": "^6.2.0",
     "less": "^4.3.0",
     "mini-css-extract-plugin": "^2.9.0",

src/Admin/templates/admin/admin-list.html.twig

@@ -160,6 +160,7 @@
     const storeSettingsUrl = '{{ path('setting::setting-store', {identifier: identifier}) }}';
     const getSettingsUrl = '{{ path('setting::setting-view', {identifier: identifier}) }}';
 </script>
-<script src="{{ asset('js/table_settings.js') }}" defer></script>
-<script src="{{ asset('js/admin.js') }}" defer></script>
+{#<script src="{{ asset('js/table_settings.js') }}" defer></script>#}
+{#<script src="{{ asset('js/admin.js') }}" defer></script>#}
+<script src="{{ asset('index.js') }}" defer></script>
 {% endblock %}

src/App/assets/js/components/_scrollbar.js

@@ -1,4 +1,4 @@
-import * as $ from 'jquery';
+import $ from 'jquery';
 import PerfectScrollbar from 'perfect-scrollbar';
 
 export default (function () {

src/App/assets/js/components/_search.js

@@ -1,4 +1,4 @@
-import * as $ from 'jquery';
+import $ from 'jquery';
 
 export default (function () {
   $('.search-toggle').on('click', e => {

src/App/assets/js/components/_sidebar.js

@@ -1,4 +1,4 @@
-import * as $ from 'jquery';
+import $ from 'jquery';
 
 export default (function () {
   // Sidebar links

src/App/assets/js/components/_sparkline.js

@@ -1,4 +1,4 @@
-import * as $ from 'jquery';
+import $ from 'jquery';
 import 'jquery-sparkline';
 import { debounce } from 'lodash';
 import { COLORS } from './_colors.js';

src/App/assets/js/index.js

@@ -5,7 +5,7 @@ import './components/_scrollbar';
 import './components/_search';
 import './components/_sidebar';
 import './components/_main';
+import '../scss/index.scss'
 
 import 'bootstrap/dist/js/bootstrap.bundle';
-import '../scss/index.scss'
 window.$ = window.jQuery = require('jquery');

src/App/assets/scss/components/forms.scss

@@ -1,3 +1,6 @@
+@use "./../settings/baseColors";
+@use "./../settings/materialColors";
+
 .checkbox label {
   display: inline-block;
   vertical-align: middle;
@@ -16,9 +19,9 @@
   top: 50%;
   transform: translateY(-50%);
   margin-left: -12px;
-  border: 1px solid $grey-300;
+  border: 1px solid baseColors.$grey-300;
   border-radius: 3px;
-  background-color: $md-white;
+  background-color: materialColors.$md-white;
   -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
   -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
   transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
@@ -36,7 +39,7 @@
   top: 50%;
   transform: translateY(-50%);
   margin-left: -12px;
-  color: $grey-500;
+  color: baseColors.$grey-500;
 }
 
 .checkbox input[type="checkbox"] {
@@ -61,7 +64,7 @@
 }
 
 .checkbox input[type="checkbox"]:disabled + label::before {
-  background-color: $grey-400;
+  background-color: baseColors.$grey-400;
   cursor: not-allowed;
 }
 
@@ -74,48 +77,48 @@
 }
 
 .checkbox-primary input[type="checkbox"]:checked + label::before {
-  background-color: $default-primary;
-  border-color: $default-primary;
+  background-color: baseColors.$default-primary;
+  border-color: baseColors.$default-primary;
 }
 
 .checkbox-primary input[type="checkbox"]:checked + label::after {
   color: #fff;
 }
 
 .checkbox-danger input[type="checkbox"]:checked + label::before {
-  background-color: $default-danger;
-  border-color: $default-danger;
+  background-color: baseColors.$default-danger;
+  border-color: baseColors.$default-danger;
 }
 
 .checkbox-danger input[type="checkbox"]:checked + label::after {
-  color: $md-white;
+  color: materialColors.$md-white;
 }
 
 .checkbox-info input[type="checkbox"]:checked + label::before {
-  background-color: $default-info;
-  border-color: $default-info;
+  background-color: baseColors.$default-info;
+  border-color: baseColors.$default-info;
 }
 
 .checkbox-info input[type="checkbox"]:checked + label::after {
-  color: $md-white;
+  color: materialColors.$md-white;
 }
 
 .checkbox-warning input[type="checkbox"]:checked + label::before {
-  background-color: $default-warning;
-  border-color: $default-warning;
+  background-color: baseColors.$default-warning;
+  border-color: baseColors.$default-warning;
 }
 
 .checkbox-warning input[type="checkbox"]:checked + label::after {
-  color: $md-white;
+  color: materialColors.$md-white;
 }
 
 .checkbox-success input[type="checkbox"]:checked + label::before {
-  background-color: $default-success;
-  border-color: $default-success;
+  background-color: baseColors.$default-success;
+  border-color: baseColors.$default-success;
 }
 
 .checkbox-success input[type="checkbox"]:checked + label::after {
-  color: $md-white;
+  color: materialColors.$md-white;
 }
 
 .radio {

src/App/assets/scss/components/pageContainer.scss

@@ -10,17 +10,20 @@
 // ---------------------------------------------------------
 // @Page Container
 // ---------------------------------------------------------
+@use "./../settings/baseColors";
+@use "./../settings/breakpoints";
+@use "./../tools/mixins/mediaQueriesRanges";
 
 .page-container {
   min-height: 100vh;
-  padding-left: $offscreen-size;
+  padding-left: baseColors.$offscreen-size;
   transition: all 0.2s ease;
 
-  @include between($breakpoint-md, $breakpoint-xl) {
-    padding-left: $collapsed-size;
+  @include mediaQueriesRanges.between(breakpoints.$breakpoint-md, breakpoints.$breakpoint-xl) {
+    padding-left: baseColors.$collapsed-size;
   }
 
-  @include to($breakpoint-md) {
+  @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
     padding-left: 0;
   }
 }
@@ -33,7 +36,7 @@
   padding: 85px 20px 20px;
   min-height: calc(100vh - 61px);
 
-  @include to($breakpoint-md) {
+  @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
     padding: 85px 5px 5px;
   }
 }
@@ -47,19 +50,19 @@
 // ---------------------------------------------------------
 
 .full-container {
-  left: $offscreen-size;
-  min-height: calc(100vh - #{$header-height});
+  left: baseColors.$offscreen-size;
+  min-height: calc(100vh - #{baseColors.$header-height});
   position: absolute;
   right: 0;
-  top: $header-height;
+  top: baseColors.$header-height;
   transition: all 0.2s ease;
 
-  @include between($breakpoint-md, $breakpoint-xl) {
+  @include mediaQueriesRanges.between(breakpoints.$breakpoint-md, breakpoints.$breakpoint-xl) {
     left: 0;
-    padding-left: $collapsed-size;
+    padding-left: baseColors.$collapsed-size;
   }
 
-  @include to($breakpoint-md) {
+  @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
     left: 0;
   }
 }
@@ -70,26 +73,26 @@
 
 .is-collapsed {
   .page-container {
-    padding-left: $collapsed-size;
+    padding-left: baseColors.$collapsed-size;
 
-    @include to($breakpoint-md) {
+    @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
       padding-left: 0;
     }
 
-    @include between($breakpoint-md, $breakpoint-xl) {
-      padding-left: $offscreen-size;
+    @include mediaQueriesRanges.between(breakpoints.$breakpoint-md, breakpoints.$breakpoint-xl) {
+      padding-left: baseColors.$offscreen-size;
     }
   }
 
   .full-container {
-    left: $collapsed-size;
+    left: baseColors.$collapsed-size;
 
-    @include to($breakpoint-md) {
+    @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
       left: 0;
     }
 
-    @include between($breakpoint-md, $breakpoint-xl) {
-      left: $offscreen-size;
+    @include mediaQueriesRanges.between(breakpoints.$breakpoint-md, breakpoints.$breakpoint-xl) {
+      left: baseColors.$offscreen-size;
       padding-left: 0;
     }
   }