Good theme update styling error

Hi,

Thought you should know that the top right icons are not horizontally aligned in the latest update to the Good admin dashboard.

Cheers

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (21)

For clarity: Search, notifications icon, etc are stacked horizontally.

Oh, also the sidebar is missing: https://preview.keenthemes.com/good/

Using Safari 15.4

Hi,

Could you please try to refresh your browser cache ? The new updates come with new layouts and styles. Also please try to reset the layout builder.

Regard.

Deleted comment

Hi,

Yes, that seems to have fixed it.
I've installed via Laravel and followed your instructions but I still have a few errors:

DevTools failed to load source map: Could not load content for http://homestead.test/backend/assets/plugins/global/sourcemaps/tiny-slider.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Does the webpack.mix.js need updating after the latest update?

It looks like the plugins.bundle.js file is missing references.

Thanks again

One other thing. I seem to have a few additional plugin bundles missing.
I'm getting this error:

GET http://homestead.test/backend/assets/plugins/custom/datatables/datatables.bundle.js net::ERR_ABORTED 404 (Not Found)

datatables.net does exist in my node_modules folder.

Thanks again in advance for your excellent customer support happy

Hi Toby,

Please try to update the webpack.mix.js with the latest version. You do not need to replace it, but you can copy the content and move it into your existing webpack config file.

Also please check if the folder here exists? It will generate the datatable bundle file.

resources/assets/core/plugins/custom/datatables

Thanks

Hi Faizal,

Thanks for getting back to me.
I don't have a webpack.mix.js file in the downloaded theme, only a webpack.config.js and the plugins/custom folder does not exist.

I used the webpack.mix.js from the documentation under: Server Side Integration -> Laravel

Is this up to date?

Thanks again

One thing I am wondering about is that I needed to change the root path of the assets from /resources/src to /resources/backend/src

I have updated paths where I can, for example in webpack/plugins/plugins.js the local path now reads @/backend/src/

Is this correct?

P.S. I have no errors from: npm run dev

Hi Tody,

That mean, does it work now?

No, still as above. No errors on build but missing resources/assets/core/plugins/custom folder and the following errors in browser

GET http://homestead.test/backend/assets/plugins/custom/vis-timeline/vis-timeline.bundle.css net::ERR_ABORTED 404 (Not Found)
admin:37 GET http://homestead.test/backend/assets/plugins/custom/datatables/datatables.bundle.css net::ERR_ABORTED 404 (Not Found)
DevTools failed to load source map: Could not load content for http://homestead.test/backend/assets/plugins/global/sourcemaps/tiny-slider.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
admin:8426 GET http://homestead.test/backend/assets/plugins/custom/datatables/datatables.bundle.js net::ERR_ABORTED 404 (Not Found)
admin:8427 GET http://homestead.test/backend/assets/plugins/custom/vis-timeline/vis-timeline.bundle.js net::ERR_ABORTED 404 (Not Found)
plugins.bundle.css:1 GET http://homestead.test/backend/assets/plugins/global/fonticon.ttf?8c99757ffa673e941699f68d7b9547b2 net::ERR_ABORTED 404 (Not Found)
widget-3.js?f405:11 Uncaught TypeError: $(...).DataTable is not a function
at initDatatable (widget-3.js?f405:11:30)
at Object.init (widget-3.js?f405:69:13)
at HTMLDocument.eval (widget-3.js?f405:83:21)
initDatatable @ widget-3.js?f405:11
init @ widget-3.js?f405:69
eval @ widget-3.js?f405:83
widget-1.js?3de3:23 Uncaught ReferenceError: vis is not defined
at initTimelineDay (widget-1.js?3de3:23:22)
at Object.init (widget-1.js?3de3:584:13)
at HTMLDocument.eval (widget-1.js?3de3:598:23)
initTimelineDay @ widget-1.js?3de3:23
init @ widget-1.js?3de3:584
eval @ widget-1.js?3de3:598
plugins.bundle.css:1 GET http://homestead.test/backend/assets/plugins/global/fonticon.woff?8c99757ffa673e941699f68d7b9547b2 net::ERR_ABORTED 404 (Not Found)
plugins.bundle.css:1 GET http://homestead.test/backend/assets/plugins/global/fonticon.woff2?8c99757ffa673e941699f68d7b9547b2 net::ERR_ABORTED 404 (Not Found)

Hey @Faizal,

Any ideas on this? I've noticed that the Laravel webpack suggested in the documentation doesn't seem to contain anything about the /plugins/custom folder. Can I copy things over manually?

Here are the steps to reproduce:

Install Laravel 9

Copy src across to /resources/backend

Copy tools/webpack to /resources/backend

Edit /resources/backend/src/sass/components/components.scss and change ../../../tools/node_modules/ to ~

Copy devDependencies and dependencies sections from theme/tools/package.json and paste them into /package.json - Make sure to leave laravel-mix in devDependancies

Run npm install - which returns error: ERESOLVE unable to resolve dependency tree

Run npm install --force

Copy webpack.mix.js content from documentation to /webpack.mix.js

Replace resources/ with resources/backend/

Replace public/assets with public/backend/assets

Run npm run dev

Could it be these lines in webpack.mix.js as resources/backend/src/plugins/custom doesn't exist?

// Raw plugins
(glob.sync(`resources/backend/src/plugins/custom/**/*.js.json`) || []).forEach(
(file) => {
let filePaths = JSON.parse(fs.readFileSync(file, "utf-8"));
const fileName = path.basename(file).replace(".js.json", "");
mix.scripts(
filePaths,
`public/backend/assets/plugins/custom/${fileName}/${fileName}.bundle.js`
);
}
);

There is a resources/backend/src/webpack/plugins/custom but none of the child folders contain any files with a *.js.json extension.

Sorry to pester you on this but it feels like I'm close and I'm keen to use this theme in my project.

Thanks again

Hi Toby,

The error says that the file seems does not to exist. Please check the config file for the import vis-timeline plugin here.
Please check the import file inside.
backend/assets/plugins/custom/vis-timeline/vis-timeline.json

Thanks

Hi,

Thanks for getting back to me.
I do not have a backend/assets/plugins/custom folder.
Is the copy missing from the Laravel webpack code in your documentation?

Hi,

Sorry for the inconvenience. In that case, could you please try to remove this code block from the webpack.config.js file? Then rerun the "npm run dev".

(glob.sync(`resources/backend/src/plugins/custom/**/*.js.json`) || []).forEach(
...

Thanks

Thanks for your reply, I have removed the code

// Raw plugins
// (glob.sync(`resources/backend/src/plugins/custom/**/*.js.json`) || []).forEach(
// (file) => {
// let filePaths = JSON.parse(fs.readFileSync(file, "utf-8"));
// const fileName = path.basename(file).replace(".js.json", "");
// mix.scripts(
// filePaths,
// `public/backend/assets/plugins/custom/${fileName}/${fileName}.bundle.js`
// );
// }
// );

Still no backend/assets/plugins/custom folder sad

I have noticed that the following function is included in the webpack.config.js that came with the theme but does not appear in the Laravel webpack file from your documentation

function importExtraPlugins() {
// Optional: Import datatables.net
extraPlugins.push(new MergeIntoSingle({
files: {
'plugins/custom/datatables/datatables.bundle.js': [
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/datatables.net-bs5/js/dataTables.bootstrap5.js",
path.relative('./', demoPath) + "/src/js/vendors/plugins/datatables.init.js",
"node_modules/jszip/dist/jszip.min.js",
"node_modules/pdfmake/build/pdfmake.min.js",
"node_modules/pdfmake/build/vfs_fonts.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
"node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
"node_modules/datatables.net-buttons/js/buttons.flash.js",
"node_modules/datatables.net-buttons/js/buttons.html5.js",
"node_modules/datatables.net-buttons/js/buttons.print.js",
"node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js",
"node_modules/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
"node_modules/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
"node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
"node_modules/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
"node_modules/datatables.net-responsive/js/dataTables.responsive.min.js",
"node_modules/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
"node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
"node_modules/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
"node_modules/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
"node_modules/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
"node_modules/datatables.net-scroller/js/dataTables.scroller.min.js",
"node_modules/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
"node_modules/datatables.net-select/js/dataTables.select.min.js",
"node_modules/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
"node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.js",
],
'plugins/custom/datatables/pdfmake.min.js.map': [
'node_modules/pdfmake/build/pdfmake.min.js.map',
],
'plugins/custom/datatables/datatables.bundle.css': [
"node_modules/datatables.net-bs5/css/dataTables.bootstrap5.css",
"node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
"node_modules/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css",
"node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css",
"node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css",
"node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
"node_modules/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css",
"node_modules/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css",
"node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css",
"node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.css",
],

// fullcalendar
'plugins/custom/fullcalendar/fullcalendar.bundle.js': [
'node_modules/fullcalendar/main.js',
'node_modules/fullcalendar/locales-all.min.js',
],
'plugins/custom/fullcalendar/fullcalendar.bundle.css': [
'node_modules/fullcalendar/main.min.css',
],
},
}));
}

Could this be why the files are not being copied?
I've tried adding it in with the correct paths but it didn't work either

OK, it's been a week with no fix. I think it might be time to seek a refund and look for another admin theme

Deleted comment

Hi Toby,

Sorry for the inconvenience. How was the issue going? I saw you posted something.

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(