Our powerful JS Calendar component


Post by ilyaskohistani »

Hello Everyone,
We just moved from trial version to licensed version. we need to import sass files and add our custom theme. when using sass files, i face many issues:
1_ math.div() has been deprecated and gives error had to change it in all files with calc().
2_ all fonts are not included in sass file, had to copy it from CSS files.
3_ after fixing fonts and deprecated parts, i now can't see icons used in calendar it just show me the CSS content code instead of icons.
4_ another toolbar appear at the end of the page, look at the second picture?
I was not able to solve this part and i didn't expect these sass files to have this many problems, i need a solution. thanks!
I also wonder what would happen if we upgrade our bryntum version then i have to do all this process again. it is so unusual. please tell me a solution that i can prevent this process each time that we upgrade our bryntum.

Attachments
What is this toolbar here?
What is this toolbar here?
Screenshot 2022-10-24 171503.png (107.83 KiB) Viewed 372 times
You can see that. but other icons have been fixed since i added fa-solid-900.woff2 font file and load it.
You can see that. but other icons have been fixed since i added fa-solid-900.woff2 font file and load it.
Screenshot 2022-10-24 155207.png (121.93 KiB) Viewed 377 times

Post by Animal »

This all seems like the CSS is not properly built.

The toolbar at the bottom of the sidebar should be hidden by this rule:

Screenshot 2022-10-25 at 06.22.14.png
Screenshot 2022-10-25 at 06.22.14.png (27.47 KiB) Viewed 365 times

How are you building the CSS? SASS recommends using math.div: https://sass-lang.com/documentation/breaking-changes/slash-div

There is other CSS in your page which seems to have global effects. Your toolbar buttons look misaligned. They do not looks like that with no other CSS in the page.

This icons should be styled using rules like this:

Screenshot 2022-10-25 at 06.29.19.png
Screenshot 2022-10-25 at 06.29.19.png (124.18 KiB) Viewed 365 times

Is some part if the build quoting that character \f101 so that the content ends up as \\f101? Take a look at the DOM


Post by ilyaskohistani »

Hey Animal,
Thank you for replying. We are using node-sass for processing sass files. Unfortunately Math.Div gives me an error. i tried to use SASS npm package but it was giving me a warning that Math.div is deprecated. I ended up replacing it with Calc() in all SASS files manually.
I was able to remove the bottom of sidebar by adding this part in config file.

        sidebar:{
          bbar:false,
         }

Icons content were ended up as \\f101. I solved it by changing

"#{$fa-var-times}"
 to 
 #{'"' + $fa-var-times + '"'}

everywhere in sass files.

I am not sure if this is the ideal we it should be done. Also, i hope removing bottom of sidebar doesn't effect on responsiveness. Is there an easier way to prevent all this process or i have to do it every time i install/upgrade bryntum?


Post by Animal »

None of this should be necessary. All that conversion you are doing is not sustainable. We need to find out why the SASS tool is not doing its job correctly.


Post by ilyaskohistani »

Thank you for all the helps!
You were right, The issue was with sass package that i had. We were using node-sass, and sass-loader packages and are not working properly. I had to use sass with sass-loader package, sass package will properly load our sass files.


Post Reply