Why opened page with AdminLTE looks broken?

General Web Dev
#1

Hello,
I make site In laravel 9 with Inertiajs/vuejs 3 based on https://github.com/ColorlibHQ/AdminLTE (dark mode).
I removed all jquery and use vuejs only. it works ok for for, but when I open site
is looks broken, like brokwnot all styles were loaded,

Please try enter to login into adminarea by url :

https://bi-currencies.my-demo-apps.tk/admin/currencies

credentials are in Login form

and pages looks like : https://prnt.sc/TCjBh0SefUMO

But if to refresh page with “CTRL+R” pages looks ok, in dark mode.

Any ideas why so and how that can be fixed?

Thanks!

#2

Do you have Redis or some cache enabled? If so maybe try without the cache and see if the styles load the first time.

2 Likes
#3

This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?

#4

Does your webpack config do css compilation and then load many libraries? Maybe play with the order of these or temporarily disable them 1 by 1 to see if any are causing this issue.

Regards,
Steve

#5

More Details :
Adminare is based on https://github.com/ColorlibHQ/AdminLTE template(with “bootstrap”: “^4.6.0”).
Frontend is based on custom https://technext.github.io/space/v1.0.0/ template (with Bootstrap v5.0.1 )

I have the same design issue when I switch from admin area
frontend page https://bi-currencies.my-demo-apps.tk/home

I see this problem of other browsers of my Kubuntu 20 too.

Maybe problem is that that I use too different templates, but actually I use different layouts, so in


app/Http/Middleware/HandleInertiaRequests.php :

    public function rootView(Request $request)
    {
        if ($request->segment(1) == 'user') {
            return 'layouts/user';
        }
        if ($request->segment(1) == 'admin') {
            return 'layouts/adminlte'; // TODO
        }

        return 'layouts/frontend'; // Current request is front-end
    }

This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?
Frontend template resources/views/layouts/frontend.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>

    <link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">

    <link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght@300;400;500;700;900&amp;display=swap"
          rel="stylesheet">

    <!-- Styles -->


    @routes

    <!-- Scripts -->

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="/css/theme.css">

    <script src="/vendors/@popperjs/popper.min.js"></script>
    <script src="/vendors/bootstrap/bootstrap.min.js"></script>
    <script src="/vendors/is/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="/vendors/fontawesome/all.min.js"></script>

    <script src="{{ mix('js/app.js') }}" defer></script>

</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
@inertia
</body>
</html>

and admin template resources/views/layouts/adminlte.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>

        <!-- Google Font: Source Sans Pro -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">

        <!-- Styles -->

        <link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
        <link rel="stylesheet" href="/css/fontawesome_all.min.css">

        <link rel="stylesheet" href="/css/adminlte.min.css">
        <link rel="stylesheet" href="/css/admin_custom.css">

        @routes

        <!-- Scripts -->
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script src="/js/Chart.bundle.js"></script>

        <script src="/js/OverlayScrollbars.min.js"></script>

        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
        @inertia
    </body>
</html>

1 common resources/js/app.js :

require('./bootstrap');

window.Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: false,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

require('@fortawesome/fontawesome-free/js/all.min.js');

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import mitt from 'mitt';
window.emitter = mitt();


const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

import Multiselect from '@vueform/multiselect'

import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";


const app =  createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('inertia-link', Link)
            .component('Paginate', Paginate)
            .component('file-upload', VueUploadComponent)

            .mixin({ methods: { route } })
            .component('multiselect', Multiselect)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

also in admin/settings page I added “Clear Cache” button, clicking on it next commands are run :

        \Artisan::call('config:cache');
        \Artisan::call('route:cache');
        \Artisan::call('cache:clear');
        \Artisan::call('route:cache');
        \Artisan::call('route:clear');
        \Artisan::call('view:clear');
        \Artisan::call('clear-compiled');

but clearing cache did not help with this problem.
Can it be that reason of this problem that I have 1 common resources/js/app.js both for admin area and frontend part?

#6

  1. I tried one of prior versions before I added frontend part : it has the same issue with first time page opened and broken design.
    So I suppose that is some different problem, but not conflict with custom frontend design.

  2. I uploaded the project at public https://github.com/sergeynilov/BiCurrencies repository.
    Could you please install it and take a look ?
    Just common laravel app with common install steps.

Thanks!