Css revamp (#21)

* trying out debounce with textInput, but debounce causes form inptut to reset

* working on CSS revamp (working off of debounce branch)

* fixed existing compilation issues

* extraced css to metajelo-ui-css-classes repo

* fixes for pulling in css

* extracting styles for: record, production, location, identifier

* CSS for sustainability and identifiers

* basic metadata fields

* resource type css

* resource metadata source and formats

* removing extraneous textInput/urlInput args

* institution contact and policy; all text now extracted to CSS

.gitignore

@@ -12,7 +12,8 @@ generated-docs/
 .purs*
 .psa*
 .spago/
-
+css
+metajelo-ui-css-classes
 prod/
 prod/css
 

README.md

@@ -5,7 +5,14 @@
 Web tools to display
 [metajelo](https://github.com/labordynamicsinstitute/metajelo) packages.
 
-# Usage
+# Styling with CSS
+
+By default, CSS files are retrieved from a [separate repository](https://github.com/labordynamicsinstitute/metajelo-ui-css-classes) using `scripts/getcss`; the file `css/style.css` contains some default styles used in our examples.
+Feel free to include it, or modify it (renaming the file is also possible):
+
+```html
+<link rel="stylesheet" href="css/style.css">
+```
 
 # Building
 

package.json

@@ -5,10 +5,11 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "testbrowser": "../scripts/testbrowser",
-    "clean": "rimraf output .cache .psci_modules .pulp-cache .spago dist prod testdist",
+    "clean": "rimraf output .cache .psci_modules .pulp-cache .spago dist prod testdist metajelo-ui-css-classes",
     "build": "spago build",
     "debug": "./scripts/debug",
     "prod": "./scripts/prod",
+    "getcss": "./scripts/getcss",
     "parcel": "parcel build --public-url ./ prod/index.html",
     "start": "spago build && parcel --no-hmr --public-url ./ static/index.html",
     "watch": "spago build && parcel watch static/index.html"

packages.dhall

@@ -220,7 +220,7 @@ let additions =
           mkPackage
             [ "prelude", "concur-core", "concur-react" ]
             "https://github.com/labordynamicsinstitute/metajelo-ui-css-classes.git"
-            "v0.0.2"
+            "v0.1.0"
       , naturals =
           mkPackage
             [ "enums", "maybe", "prelude" ]

scripts/dist_build_commands.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-npm install && \
+npm install && npm run getcss && \
 (npm run build && npm run prod) && \
 (cd tests && npm run testbrowser)
 

scripts/getcss

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+
+git clone --depth 1 https://github.com/labordynamicsinstitute/metajelo-ui-css-classes.git
+cp -R metajelo-ui-css-classes/uicss css
+
+# rm -fr metajelo-ui-css-classes

src/Metajelo/FormUtil.purs

@@ -3,7 +3,7 @@ module Metajelo.FormUtil where
 import Prelude (class Bounded, class Eq, class Ord, class Show, Void, bind, discard, join, map, max, not, pure, show, ($), (+), (-), (<), (<#>), (<$), (<$>), (<<<), (<>))
 
 import Concur.Core (Widget)
-import Concur.Core.FRP (Signal, display, loopS, step)
+import Concur.Core.FRP (Signal, debounce, display, loopS, step)
 import Concur.React (HTML)
 import Concur.React.DOM as D
 import Concur.React.Props as P
@@ -129,27 +129,32 @@ labelSig widg props sigIn = D.div_ props do
   display widg
   sigIn
 
-textInput' :: D.El' -> String -> CtrlSignal HTML String
-textInput' tag label initVal = labelSig' tag label [] $ sig initVal
+textInputWidget :: String -> Widget HTML String
+textInputWidget txt =
+  D.input [P.value txt, P.unsafeTargetValue <$> P.onChange]
+
+-- TODO: remove the first two arguments from textInput', textInput, and urlInput
+textInput' :: CtrlSignal HTML String
+textInput' initVal = sig initVal
   where
     sig :: String -> Signal HTML String
     sig txt = step txt do
-      newTxt <- D.input [P.value txt, P.unsafeTargetValue <$> P.onChange]
+      newTxt <- textInputWidget txt
       pure $ sig newTxt
+    -- sig txt = debounce 500.0 txt textInputWidget
 
 -- | Reasonable defaults for filtering input text
 textFilter :: Signal HTML String -> Signal HTML (Maybe NonEmptyString)
 textFilter txtSig = do
   txt <- txtSig
   pure $ fromString $ trim txt
 
-textInput :: D.El' -> String -> CtrlSignal HTML (Maybe NonEmptyString)
-textInput tag label iVal = textFilter $ textInput' tag label
-  (foldf toString iVal)
+textInput :: CtrlSignal HTML (Maybe NonEmptyString)
+textInput iVal = textFilter $ textInput' (foldf toString iVal)
 
-urlInput :: D.El' -> String -> CtrlSignal HTML (Either String URL)
-urlInput tag label iVal = do
-  txtMay :: Maybe NonEmptyString <- textInput tag label (fromString prevTxt)
+urlInput :: CtrlSignal HTML (Either String URL)
+urlInput iVal = do
+  txtMay :: Maybe NonEmptyString <- textInput (fromString prevTxt)
   urlEi <- pure $ case txtMay of
     Nothing -> Left prevErr
     Just txt -> parsePublicURL $ toString txt

src/Metajelo/Forms/InstitutionContact.purs

@@ -15,7 +15,7 @@ import Data.Newtype (class Newtype)
 import Formless as F
 import Metajelo.FormUtil (CtrlSignal, IdentityField, MKFState, MKValidators, errorDisplay, formSaveButton, initFormState, labelSig', menu)
 import Metajelo.Types as M
-import Metajelo.UI.CSS.ClassProps as MC
+import Metajelo.CSS.UI.ClassProps as MC
 import Metajelo.Validation as V
 import Metajelo.View (contactWidg)
 import Text.Email.Validate (EmailAddress, toString)
@@ -62,13 +62,13 @@ validators = InstContactForm {
 contactForm :: FState -> Widget HTML M.InstitutionContact
 contactForm fstate = do
   query <- D.div' [
-      D.div' [D.text "Email"]
-    , D.input [
-        P.defaultValue $ F.getInput proxies.email1 fstate.form
+    D.input [
+        MC.contactEmail
+      , P.defaultValue $ F.getInput proxies.email1 fstate.form
       , (F.setValidate proxies.email1 <<< P.unsafeTargetValue) <$> P.onChange
       ]
     , errorDisplay $ F.getError proxies.email1 fstate.form
-    , D.div' [D.text "Contact type: ",  menu fstate.form proxies.contactType]
+    , D.span_ [MC.contactType] $ menu fstate.form proxies.contactType
     , D.div' [ F.submit <$ formSaveButton fstate]
     ]
   res <- F.eval query fstate
@@ -79,8 +79,7 @@ contactForm fstate = do
       pure {emailAddress: form.email1, contactType: form.contactType}
 
 contactSignal :: CtrlSignal HTML (Maybe M.InstitutionContact)
-contactSignal instContactMay =
-  labelSig' D.h2' "Institution Contact" [MC.institutionContact] $
+contactSignal instContactMay = D.div_ [MC.institutionContact] do
     sig instContactMay
     where
       sig icMay = step icMay do