Create a layout that can be inserted on other pages.

[carlosdelfino]

I have a website for my course and I would like to use EmulsiV, but with my own examples. In addition to contributing with some improvements without interfering with the original proposal, such as PR #12.

I use Jekyll, which allows me to easily insert HTML snippets on pages on the site. So I can quickly insert the emulator into any post I make.

However, when doing this, most of the formatting is lost as can be seen in the image below.

[carlosdelfino]

I made some adjustments to the current layout and improved the display of the components when rendering the pages with Jekyll.

The changes can be found at gist https://gist.github.com/carlosdelfino/963a2b5ed815bffffb13c6b716cda644

The lines/bars that connect the components are still not very arranged.

[Guillaume-Savaton-ESEO]

In your stylesheet, the section.emulsiv element still has:

width: 100vw;
height: 100vh;

which means that it has the same size as the entire viewport.

More generally, in the stylesheet as well as in the JavaScript, the page layout is automatically adjusted with the assumption that the simulator fills the current viewport. See the resize function in view.js.

Even if you host emulsiV on your own server, I think that displaying the simulator in an iframe is still the most reliable technique in your situation. It will also prevent emulsiV from "polluting" your page with its CSS rules, element IDs and scripts.

[carlosdelfino]

Layouts in particular CSS and HTML are almost torture for me, I don't understand anything at all. I will see this adjustment.

About loading the script on the site itself, it is possible to load the examples, as they are loaded from the site where the scripts are.

An external parameter could then be added, something like a configuration block in the URL where you can pass the fixed list of examples. But I see that not very elegant.