Canvas Support

Issues with version 6.0.2

3 replies · opened Jun 18, 2020

BBMacm1Jun 18, 2020

I've now switched my project to v6.0.2 and noticed a couple of issues.

I've noticed the below bugs in the SCSS compared to the raw CSS you provided in the samples. Can I confirm that your samples generate css from the scss or are they separately derived?

1). _widgets.scss on line 31-34 targeting > h4 uses the wrong variable for font-size, it is currently set to the variable for weight. it should be $widget-title-font-size not $widget-title-font-weight

2). When compiling the feature box - Background in the _feature-box.scss on line 378 the targeting for &-icon is incorrect. The resultant output comes out as .fbox-bg.fbox-center.fbox-icon when it should be .fbox-bg.fbox-center .fbox-icon (with a space). This means the feature box margin-top is not being set.

3). On the movers demo the form boxes are set to display:none and hence not appearing. This seems to be due to line 285 in _tabs.scss which sets .tab-content:not(:first-child) to display: none;

On the JS side of things:

4). Why has plugins.js being reintroduced after being culled in favor of lazy loading plugins when required from functions.js? surely this is a step backwards to v5.* should the demo's not be reflective of the new way of doing things?

SSemicolon WebSTAFFJun 19, 2020

Hello,

Apologies about the Inconveniences caused!

The CSS/SCSS are separately derived but very constantly check for issues. We will be moving towards SASS entirely in the coming months and generate CSS only from the SASS to avoid any inconsistencies.

  1. & 2. We will check this out shortly and release an Update and provide you with the Updated Files.

  2. Please consider replacing it with the following code:


.tabs .tab-content:not(:first-child) {
	display: none;
}
  1. Until v6.0.1, there were 2 Options to include the JavaScripts. However, in the Last Week, we heavily tested some of the JS Codes and after receiving some User Feedback, we had decided that AJAX Loading of the JS Plugins were not for everybody, especially for beginners. Additionally, some of Our users also wanted to include the JS using Webpack/Gulp, so the AJAX Loading was not a very viable option for them.

Also, there were some caveats of using AJAX Lazy Loading for the JS Files, as they didn’t load properly when the Website was loading using iFrames, this was the issue we detected in our Live Previews when loading directly from the Item Page: https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123 along with some Caching Issues. So we decided, it was best to include the JS completely on the Page using the js/plugins.js File (as in the Previous Versions < v5.x of Canvas). But this is optional. The JS Files can still be included using AJAX or individually (for Advanced Users) by simply removing the js/plugins.min.js File and then leave it to the js/functions.js File to do all the Processing Work or simply include the js/plugins.*.js manually. So the users have the Option to choose between these 3 options: http://docs.semicolonweb.com/docs/getting-started/javascript/ without running into issues with any of them.

You can still continue to use the AJAX Style Loading for the JS Files by simply using:

Everything will work fine.

Hope this Helps!

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

BBMacm1Jun 19, 2020

Thanks guys, very detailed explanation on point 4. Having seen the documentation this makes complete sense. I will most likely move my implementation into webpack as I have a separate project as part of this solution that is already using webpack.

Thanks

SSemicolon WebSTAFFJun 20, 2020

Hello,

Very Happy to help!

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