Canvas Support

Bugs that I found in your code.

8 replies · opened May 6, 2023

Yyaniv_finkMay 6, 2023

Hi, I moved to another demo, just to compare it to my other bugs, I found,
this time I found the bugs and fixed them
I am running angular with typescript

  1. I had to move the file: style.css to the assets folder, I was getting warning in the console:
    Refused to apply style from.. 'because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
    as you can see here: https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type one of the solutions was to change the location of the folder to the vendor.

  2. in module.header, I add this lines:
    let elHeader = core.getVars.elHeader;
    if (!elHeader) {
    return;
    }

  3. in module.menu, I changed this lines:
    if (core.getVars.elHeader && core.getVars.elHeader.querySelectorAll('.container-fullwidth').length > 0 ) {
    document.querySelectorAll('.mega-menu:not(.mega-menu-full):not(.mega-menu-small) .mega-menu-content').forEach( el => el.style.width = headerWidth + 'px' );

    }

    document.querySelectorAll('.mega-menu:not(.mega-menu-full):not(.mega-menu-small) .mega-menu-content, .top-search-form').forEach( el => el.style.width = headerWidth + 'px' );

if (core.getVars.elHeader && core.getVars.elHeader.classList.contains('full-header') ) {
document.querySelectorAll('.mega-menu:not(.mega-menu-full):not(.mega-menu-small) .mega-menu-content').forEach(el => el.style.width = headerWidth + 'px');
}

if (core.getVars.elHeader && core.getVars.elHeader.classList.contains('floating-header') ) {
let floatingHeaderPadding = getComputedStyle(document.querySelector('#header')).getPropertyValue('--cnvs-header-floating-padding');
document.querySelectorAll('.mega-menu:not(.mega-menu-full):not(.mega-menu-small) .mega-menu-content').forEach(el => el.style.width = (headerWidth + (Number(floatingHeaderPadding.split('px')[0]) *2)) + 'px');
}

  1. also I find out that I need to add some js files besides the functions.js and quary.js, not sure where I suppose to learn about it, other than the console error... so you need to add it to the documentation - which JS is needed for each deomos.

  2. I don't understand why the generator limit me.. seems very stupid, since it suppose to make my life easy.

  3. The generator did not copy some important files:logo.png and logo-dark.png (as far as I remember)

SSemicolon WebSTAFFMay 7, 2023

Hello,

Thanks so much for taking out time and providing us with insights on this. But as we have mentioned, that Canvas is provided as a Static Template and not an Angular Template, so you will need to make some changes to the JS accordingly since the DOM works different in Angular.

  1. You get this warning because the Location of the style.css File in your Angular Project might be different and thus returning a 404 Error causing a MIME Error.

  2. This is already handled in the js/functions.js File using the headers: () => Function, so if there is no Header on the Page, the JS wont load.

  3. Thanks we will study more why this changed is required.

  4. You can read more about JS here: https://docs.semicolonweb.com/docs/getting-started/javascript/ . Additionally, the Demo Files that comes with the Package already includes the Additional JS/CSS Files if required and you will need to follow the default File Structure as implemented in the said HTML Files if there are any additional JS/CSS Files required. We have tested all the Files that comes with the Package and they work fine out of the box, so any additional changes or customizations that are required based on the JS Framework you use, must be done manually by you.

  5. 4 Generations per week. The Guidelines on the Package Generation page already mentions this. To prevent Server and License Abuse. People abuse the License everyday. So unfortunately, we have to limit for all. This is a Tool we provide for Free solely to our users which no other Template on the market provides. However, unfortunately, some users still choose to abuse. We don’t have any choice, unfortunately.

  6. Thanks for reporting this. This is happening because the img Tag only has src="images/logo@2x.png" or src="images/logo-dark@2x.png". We will work on this and fix this shortly.

Thanks again so much for the insights. We will continue improving Canvas and make the JS Codes better everyday with updates. So please let us know if you are facing any further issues. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else.

SSemicolon WebSTAFFMay 7, 2023

Hello,

Fixed the issue with Package Generator not generating logo.png or logo-dark.png Files.

Let us know if we can help you with anything else or if you find any further issues.

Yyaniv_finkMay 7, 2023

I am working now on the FAQ form, I noticed that the toggle is not working good, when it opened it opened un until certain point, and you can't view below it.
if there is no way to fix that, is there a way that I can disable the toggle script, I am not sure how to do it and which file responsible for that
because I like the design, and I get it that it most likely depends on the class names, but the script is not good, also the script is not always working, need to do refresh sometimes.

SSemicolon WebSTAFFMay 7, 2023

Hello,

Please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.

Additionally, you can also include the All JS Plugins by default replacing the js/functions.js File in the HTML with following:
[ch_pre]
[/ch_pre]

Also, the Toggles appear to be working perfectly fine here: https://canvastemplate.com/toggles-accordions.html .

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Yyaniv_finkMay 10, 2023

Hi, I got missing file
p://localhost:4200/assets/demos/landing/images/section/pricing-light.svg 404 (Not Found)

can you check, thank you.

SSemicolon WebSTAFFMay 12, 2023

Hello,

Apologies for the Inconveniences caused and Thanks for your Patience!

We have attached the File to this reply.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Yyaniv_finkMay 16, 2023

The name is difference, the error was about a file name pricing-light.svg, and you sent a file name: pricing-bg-light.svg
should I just change the name of the file?

SSemicolon WebSTAFFMay 16, 2023

Hello,

Yes, simply changing the name of the file will be fine. We have just checked the Package Files and there is no file named: pricing-light.svg in our codes. Would be great if you could let us know where you are getting this error so that we can fix this promptly and avoid future issues. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
Bugs that I found in your code. · Canvas Template Support