kdmoncat: Help link and styling fixes. #383

Author: sjoerdvisscher

halogen-kdmoncat/src/View/KDMonCat/App.purs

@@ -17,7 +17,7 @@ import Effect.Class (class MonadEffect, liftEffect)
 import Global (encodeURIComponent)
 import Halogen as H
 import Halogen.HTML hiding (map, head, i, prop, title)
-import Halogen.HTML.Properties (classes, value, readOnly, href, type_, InputType(InputText), ref, title)
+import Halogen.HTML.Properties (classes, value, readOnly, href, type_, InputType(InputText), ref, target, title)
 import Halogen.HTML.Events (onValueInput, onClick, onMouseDown)
 import Halogen.Query.Input (RefLabel(..))
 import View.ReactiveInput as ReactiveInput
@@ -105,7 +105,11 @@ render _ st = div [ classes [ ClassName "kdmoncat-app" ] ]
       , div [ classes [ ClassName "fieldset" ]] $
         [ label_ [ text "Whole" ], input [ type_ InputText, value termTypeStr, readOnly true ] ]
         <> (selectionType # maybe [] \s -> [ label_ [ text "Selection" ], input [ type_ InputText, value s, readOnly true ] ])
-      , h2_ [ text "Pixels"]
+      , h2_ [ text "Pixels"
+            , a [ href "https://hackmd.io/PUj5yVt8R4mxz8jH0TNNQQ"
+                , target "_blank"
+                , attr (AttrName "style") "float: right"]
+                [ text "help" ] ]
       , textarea [ value st.input.pixels, onValueInput (Just <<< UpdatePixels), ref (RefLabel "pixels") ]
       , div_ pixelButtons
       , h2_ [ text "Context"]
@@ -122,7 +126,7 @@ render _ st = div [ classes [ ClassName "kdmoncat-app" ] ]
     ]
     , h2_ [ text "Term view" ]
     , footer_ $ inferredType # either (const []) (\{ term } -> [slot _term unit Term.termView { term, selection: selectionPath } \_ -> Nothing])
-    , a [ href "https://statebox.org" ] []
+    , a [ href "https://statebox.org", target "_blank" ] []
   ]
   where
     bricksInput :: Bricks.Input

studio/html/kdmoncat.css

@@ -14,6 +14,10 @@
   width: 25vw;
   margin: -10px 0 0 20px;
 }
+.kdmoncat-app aside button {
+  --button-height: 2rem;
+  --button-horizontal-padding: 0.7rem;
+}
 .kdmoncat-app h2 {
   font-size: 1.2em;
   font-weight: 600;
@@ -32,6 +36,7 @@
   margin-bottom: 2em;
   background: var(--hiq-color-gray-7);
 }
+code { white-space: pre-wrap; }
 
 /* generic bricks css */
 .kdmoncat-bricks {
@@ -71,6 +76,7 @@
   fill: var(--hiq-color-gray-9);
   font-size: .4px;
   font-weight: bold;
+  font-family: sans-serif;
   transition: fill 0.3s;
 }
 .kdmoncat-bricks.show-wires .inner-box {

studio/package-lock.json

@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@statebox/stbx-js": "0.0.31",
-    "@statebox/style": "0.0.8",
+    "@statebox/style": "0.0.9",
     "dagre": "^0.8.4",
     "firebase": "^7.9.1",
     "firebaseui": "^4.4.0"

studio/package.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@statebox/stbx-js": "0.0.31",
-    "@statebox/style": "0.0.8",
+    "@statebox/style": "0.0.9",
     "dagre": "^0.8.4"
   }
 }