Change color of map, change size of map on mobile, add favicon

config/app.php

@@ -185,7 +185,7 @@ return [
         /*
          * Package Service Providers...
          */
-        
+
         /*
          * Application Service Providers...
          */
@@ -215,6 +215,7 @@ return [
     'aliases' => Facade::defaultAliases()->merge([
         // 'ExampleClass' => App\Example\ExampleClass::class,
         'GeoIP' => \Torann\GeoIP\Facades\GeoIP::class,
+        'Vite' => \Illuminate\Support\Facades\Vite::class,
     ])->toArray(),
 
 ];

package.json

@@ -17,7 +17,7 @@
         "lodash": "^4.17.19",
         "postcss": "^8.4.14",
         "tailwindcss": "^3.1.0",
-        "vite": "^2.9.11"
+        "vite": "^2.9.18"
     },
     "dependencies": {
         "@coreui/vue": "^4.10.2",

resources/js/Pages/IkeaRoot.vue

@@ -53,15 +53,16 @@ const itemCode = ref(null);
 const googlemapbox = ref(null);
 const googlemapchart = ref(null);
 
-const gChartWidth = computed(() => screenWidth.value > 420 ? 400 : (screenWidth.value - 12 - 5));
-const gChartHeight = computed(() => gChartWidth.value == 400 ? 250 : (screenWidth.value *65/100) - 20);
+const gChartWidth = computed(() => screenWidth.value > 420 ? 400 : (screenWidth.value - 20 - 5));
+const gChartHeight = computed(() => gChartWidth.value == 400 ? 250 : (screenWidth.value *65/100) - 28);
 console.log('GCH',screenWidth.value, screenHeight.value, gChartWidth.value,gChartHeight.value);
 
 const options = {
   region: 150,
   colorAxis: {colors: ['#0000ff']},
   backgroundColor: '#81d4fa',
-  datalessRegionColor: '#f8bbd0',
+  datalessRegionColor: '#ffffff',
+  //datalessRegionColor: '#f8bbd0',
   //defaultColor: '#f5f5f5',
   width:  gChartWidth.value,
   height: gChartHeight.value,

resources/js/app.js

@@ -25,7 +25,7 @@ Object.keys(commons).forEach(key => Object.defineProperty(window, key, {
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
-    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'),import.meta.glob('./assets/**') ),
     setup({ el, app, props, plugin }) {
         return createApp({ render: () => h(app, props) })
             .use(plugin)
@@ -60,7 +60,7 @@ Inertia.on('finish', commons.authorization)
 Inertia.on('finish', () => {
     const { $flash } = usePage().props.value
     const { success, error, info, warning } = $flash
-    
+
     if (success) {
       Toast.fire({
         text: success,
@@ -68,14 +68,14 @@ Inertia.on('finish', () => {
         icon: 'success',
       })
     }
-    
+
     if (error) {
       Toast.fire({
         text: error,
         icon: 'error',
       })
     }
-    
+
     if (info) {
       Toast.fire({
         text: info,
@@ -83,7 +83,7 @@ Inertia.on('finish', () => {
         icon: 'info',
       })
     }
-    
+
     if (warning) {
       Toast.fire({
         text: warning,
@@ -91,4 +91,4 @@ Inertia.on('finish', () => {
         icon: 'warning',
       })
     }
-})
+})

resources/views/app.blade.php

@@ -12,7 +12,7 @@
 
     <!-- Icons -->
     <link rel="stylesheet" href="{{ url('/vendors/fontawesome/css/all.min.css') }}">
-
+    <link rel="shortcut icon" href="{{ asset('images/favicon.png') }}">
     <!-- Scripts -->
     <style>
         .gradient {

vite.config.js

@@ -16,6 +16,9 @@ export default defineConfig({
             },
         }),
     ],
+    build: {
+        assetsInlineLimit: 0
+    },
     resolve: {
         dedupe: ["vue"],
     }