Side-by-side cell output placement

[quantarion]

I don't like having the cell output positioned either above or below the cell itself. For me, the output should be part of the document, while the cells contain the code that generates it. I also prefer to see the code and the result simultaneously whenever possible. Since Pluto leaves a lot of horizontal space unused, the solution I implemented arranges the cell and its output side by side. This way, scrolling is synchronized for both the cell and the output, keeping them aligned for as long as either is visible.

I did it using pure CSS with no modifications to the source code, making it easy to use and maintain: simply paste the code below into the first cell and run it. For some reason, you'll need to run it twice.

using HypertextLiteral ; @htl """
<style>

main
{
	margin: 0 !important;
	max-width: 100%;
} 

#pluto-nav {
	opacity: 0;
	transition: opacity 0.3s ease; 
}

#pluto-nav:hover {
	opacity: 1;
}


pluto-cell {
  display: flex; 
  flex-flow: row;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 34px;
  align-items: flex-start;
}

pluto-input { 
  order: 1;
  width: 50%;
  position: sticky;
  top: 0;
}

pluto-shoulder, pluto-trafficlight
{
  margin-bottom: 5px;
}

pluto-output {
  order: 2;
  width: 50%;
  position: sticky;
  top: 0;
}

pluto-runarea {
    order: 3;
    width: 95%;
  	padding-left: 17px;
}

pluto-runarea {
	bottom: -17px;
}

</style>
"""

This is how it looks like

Keep in mind that this is a somewhat crude prototype meant to test the idea.

Let me know what you think!

P.S. Inspired by #205

[disberd]

You don't seem to actually interpolate julia variables inside the css style, so you can even simplify this by using directly the html"" string literal/macro rather than relying on @htl from HypertextLiteral.

This would also make the css be applied when the notebook is started (without having to wait for the specific cell to be executed) if I remember correctly

[quantarion]

Thanks! I'm a newbie at both Julia/Pluto and HTML/CSS. Here's the new version:

html"""
<style>

main
{
	margin: 0 !important;
	max-width: 100%;
} 

#pluto-nav {
	opacity: 0;
	transition: opacity 0.3s ease; 
}

#pluto-nav:hover {
	opacity: 1;
}


pluto-cell {
  display: flex; 
  flex-flow: row;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 34px;
  align-items: flex-start;
}

pluto-input { 
  order: 1;
  width: 50%;
  position: sticky;
  top: 0;
}

pluto-shoulder, pluto-trafficlight
{
  margin-bottom: 5px;
}

pluto-output {
  order: 2;
  width: 50%;
  position: sticky;
  top: 0;
}

pluto-runarea {
    order: 3;
    width: 95%;
  	padding-left: 17px;
	bottom: -17px;
}

</style>
"""