CSS not rendering properly

[p32929]

Hello, I actually have ported https://github.com/mcaubrey/pomodoro into electron. The sources can be found here: https://github.com/p32929/PotatoTimer/

But my app doesn't seem to be that smooth and fast. So, I thought of trying out a boilerplate that will do all the enhancements for me. Thus, I came to Boron.

I really wished it would work, but the CSS doesn't seem to show properly. This is how it should actually look:

but this is how it looks:

Anything I'm doing wrong?

[alchaplinsky]

@p32929 So, bozon provides a scaffold generator for a new project bozon new [project_name]. In order for it to build your app correctly, you can not organize your code in free form. You should follow file structure provided by bozon.

[p32929]

Yes, I did create a new project using bozon new projectname. The links above are not bozon scaffolded source. they are just normal electron apps which I'm trying to convert into bozon. but the CSS are not working properly. its showing the app as the screenshot mentioned above

[alchaplinsky]

Unfortunately, I can't tell you what is wrong, without seeing the actual code that does not work as expected.

[p32929]

Sorry, my bad. Here's the source code link: https://github.com/p32929/BozonPomoTest

[alchaplinsky]

@p32929 So, from what I see, most of the application window issues are not css-related. You also need to update src/main/index.js file to match behavior, defined here. Some of the obviouse changes needed:

1. Define fixed window size and make it non-maximizable:

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  backgroundColor: '#ffffff',
  transparent: false,
  icon: image,
  maximizable: false
})

2. Remove menu from a window:

   mainWindow.setMenu(null)

As for the rest of the styling issues, there is a bunch of CSS manipulations in this script https://github.com/p32929/PotatoTimer/blob/master/js/script.js, which is using jQuery. And jQuery is not installed in your https://github.com/p32929/BozonPomoTest so it simply does not work and you see this broken UI :)

I'd suggest you to debug JS errors and fix your code. You can launch your application with devTools by adding this line to your main/index.js:

mainWindow.webContents.openDevTools({ mode: 'detach' })

[p32929]

Just wanted to mention, I did exactly what you mentioned. But still, its not rendering the app properly. The updated sources are committed into the repo. If you want to see, you may... :)

[alchaplinsky]

@p32929 Bozon bundles all your assets with webpack to builds directory. So you need to require all the assets you need into your renderer/index.js. And include this js file into your html, keeping in mind that built app file structure is a bit different from that you have in src directory.

just change this line https://github.com/p32929/BozonPomoTest/blob/master/src/renderer/index.html#L158 to:

<script src="index.js" type="text/javascript"></script>

And add require('application.css'); to your src/renderer/javascripts/index.js.

And it should work :)

[p32929]

Finally! Thanks! Really appreciate it :)