fixing css

[mf59816]

Hi, I am only posting this because you may have information on to what extent this is even supposed to work (the source code sais "unfinished").

I got the whole thing built and running, but the only thing I see is the two numbers in the upper left. Inspection shows that all the cells are rendered, but they all remain white.

If you think this should work, it's ok if you close this ticket and I'll know. :-)

Either way, I will try to find our more, and give more details.

[mf59816]

update: the colouring of the pixels is fine, only their size seems to be 0.

this can't be too hard to fix, right?

I'll be right back!

[mf59816]

Adding this to index.html solved my problem:

<style>
  .pixel-white {
      background: white;
      height: 5px;
      width: 5px;
      position: relative;
      display: inline-block;
  }
  .pixel-red {
      background: red;
      height: 5px;
      width: 5px;
      position: relative;
      display: inline-block;
  }
</style>

I first tried to do this:

diff --git a/example/Example.hs b/example/Example.hs
index 50ba1fd..48280ad 100644
--- a/example/Example.hs
+++ b/example/Example.hs
@@ -88,7 +88,7 @@ renderRow w r =
 renderPixelM = memo renderPixel

 renderPixel :: IntMap JSString -> Int -> VNode
-renderPixel r c = div (cls (r IM.! c)) noChildren
+renderPixel r c = div (cls (r IM.! c)) (mkChildren [textDiv ("." :: String)])

which compiled fine, but dropped this on the browser console:

JavaScript exception: ReferenceError: x is not defined 

I guess this will be more helpful once I have read more of the library code?

How would you change the file Example.hs in order for either the dot or the css properties to appear in the running application?

Thanks! :-)

[arianvp]

Hey! This repo is quite unfinished inddeed, but it's nice to hear someone is experimenting with it :)

I'll go have a look at that reference error tonight. See what's up. Is that patch of Example.hs the only thing you changed?

[mf59816]

there are two things that i changed, which are only loosely related:

1. data/example.css is not published with the js-executable, so the pixels will have 0 length and height, and the result is quite disappointing. i only figured that out after i had added the missing css code to index.html after installation. this wasn't really a solution, as every new cabal install would overwrite the change. i guess I could write a cabal Setup.hs that moves example.css to the directory with the index.html and all, but I am wondering if there is some more built-in way to do that?
2. I changed the "noChildren" to "mkChildren mostly to give the pixel divs non-zero extension. I had to build up some courage to go and fiddle with css I guess. :-) Anyway I am interested in the error just out of curiosity: Assume I have a good reason to want a - in every pixel, how do I achieve that? And why doesn't the above approach work?

looking forward to seeing more of this!

cheers..

[arianvp]

@mf59816 I think I've fixed the undefined variable issue in 0db15f0. Does stuff work now as expected?

[mf59816]

yes, that works now. thanks!

that leaves open the (unrelated) question of how to get cabal to copy example.css copied into the jsexe-directory. if i have the time, i will write a custom setup.hs that does that. if there is a better way, please yell.

thanks for fixing this! (-: