3

I want to make two div's float side by side using Obelisk. For this I used the information from this post, How to place div side by side and for this solution classes have to be declared in css. Following the advice of this tutorial (https://github.com/hansroland/reflex-dom-inbits/blob/master/tutorial.md), more specifically the part about mainWidgetWithHead, I put the commands in a different file. The problem is, however, that I can't find where the css-file should be stored in order to get accessed by the program.

I tried to put it in several places within the automatically generated directory by "ob init", but I always end up with an empty css-file when I load it in my browser.

Below you can see a minimal example of the frontend function used in frontend/src/Frontend.hs.

frontend :: Frontend (R FrontendRoute)
frontend = Frontend
    { _frontend_head = prerender_ (text "Loading..") headElement
    , _frontend_body = prerender_ (text "Loading...") bodyElement
    }

headElement :: MonadWidget t m => m ()
headElement = do
    el "title" $ text "Title"
    styleSheet "/css/cssTest.css"
        where
            styleSheet link = elAttr "link" (Map.fromList [
                    ("rel", "stylesheet"),
                    ("type", "text/css"),
                    ("href", link)
                ]) $ return ()

bodyElement :: MonadWidget t m => m ()
bodyElement = elClass "div" "container" $ do
    elClass "div" "fixed" $ do
        el "h2" $ text "Button enabled / disabled"
    elClass "div" "flex-item" $ do
        el "h2" $ text "Second paragraph next to it."

This error message is consequently given, no matter where I put the css-file: Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://127.0.0.1:8000/css/cssTest.css"

Sridhar Ratnakumar
  • 81,433
  • 63
  • 146
  • 187
Emiel Lanckriet
  • 95
  • 2
  • 12

1 Answers1

4

You should store all of the static assets your site needs live in the static directory created by ob init. this is especially important for mobile builds.

The other thing you need to do is refer to those assets like the following:

styleSheet $ static @"css/cssTest.css"
             ^^^^^^^^

assuming you've turned on TypeApplications, which is the default in the obelisk skeleton.

SingleNegationElimination
  • 151,563
  • 33
  • 264
  • 304
  • I get the following error using this solution: Could not deduce (StaticFile "css/cssTest.css") arising from a use of 'static'. Also {-# LANGUAGE TypeApplications #-} is used. – Emiel Lanckriet Aug 16 '19 at 19:39
  • @EmielLanckriet for `StaticFile "foo/bar"` to be derived, the file needs to be in `static/foo/bar` in your projects root at the time you started `ob run` or when built the project. If that's still not working, i'll need more information such as your `default.nix`. – SingleNegationElimination Aug 22 '19 at 00:29
  • 1
    The problem seems to solved by deleting the '/' in "/css/cssTest", using this post (https://stackoverflow.com/questions/57548236/staticfile-error-when-using-ob-and-reflex-to-import-css-file). – Emiel Lanckriet Aug 22 '19 at 17:01