Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github
Light
Dark
System
Ask  Question

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


T
Toby Kilroy 3 years ago
Design
21 Answers
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)

user
Faizal Author2 years ago

Hi Toby,

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

Thanks


T
Toby Kilroy 2 years ago

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


user
Faizal Author3 years ago

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


T
Toby Kilroy 2 years ago

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?


user
Faizal Author2 years ago

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


T
Toby Kilroy 2 years ago

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


T
Toby Kilroy 2 years ago

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


T
Toby Kilroy 3 years ago

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


T
Toby Kilroy 3 years ago

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


user
Faizal Author3 years ago

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


T
Toby Kilroy 3 years ago

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


T
Toby Kilroy 3 years ago

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?


T
Toby Kilroy 3 years ago

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


user
Faizal Author3 years ago

Hi Tody,

That mean, does it work now?


T
Toby Kilroy 3 years ago

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


GET net::ERR_ABORTED 404 (Not Found)
admin:37 GET net::ERR_ABORTED 404 (Not Found)
DevTools failed to load source map: Could not load content for HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
admin:8426 GET net::ERR_ABORTED 404 (Not Found)
admin:8427 GET net::ERR_ABORTED 404 (Not Found)
plugins.bundle.css:1 GET 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 net::ERR_ABORTED 404 (Not Found)
plugins.bundle.css:1 GET net::ERR_ABORTED 404 (Not Found)


T
Toby Kilroy 3 years ago

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?


T
Toby Kilroy 3 years ago

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


GET 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


T
Toby Kilroy 3 years ago

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 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


T
Toby Kilroy 3 years ago

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

Using Safari 15.4


user
Sean Author3 years ago

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.


T
Toby Kilroy 3 years ago

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


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  :(