improved ui layout

Author: chfin

annotation-tool/src/App/Tabs/Export.purs

@@ -60,7 +60,7 @@ exportComponent =
 
         tikzStrOrErr = Right $ tikzReduction tikzStandalone $ evalGraph true true model.reduction
       in
-        HH.div [ class_ "content-np tab" ]
+        HH.div [ class_ "content-np tab pure-form" ]
           [ if validationIsOk val then
               HH.text ""
             else
@@ -70,14 +70,14 @@ exportComponent =
               Right jsonStr ->
                 HH.div_
                   [ HH.div [ class_ "pure-g" ]
-                      [ HH.div [ class_ "pure-u-3-5" ]
+                      [ HH.label [ class_ "pure-u-3-5" ]
                           [ HH.input
                               [ HP.type_ $ HP.InputCheckbox
                               , HP.checked pretty
                               , HE.onChange \_ -> TogglePretty
                               , HP.id "prettyJSON"
                               ]
-                          , HH.label [ HP.for "prettyJSON" ] [ HH.text " pretty" ]
+                          , HH.text " pretty"
                           ]
                       , HH.button
                           [ class_ "pure-button pure-u-1-5"
@@ -122,14 +122,14 @@ exportComponent =
               Right tikzStr ->
                 HH.div_
                   [ HH.div [ class_ "pure-g" ]
-                      [ HH.div [ class_ "pure-u-3-5" ]
+                      [ HH.label [ class_ "pure-u-3-5" ]
                           [ HH.input
                               [ HP.type_ $ HP.InputCheckbox
                               , HP.checked tikzStandalone
                               , HE.onChange \_ -> ToggleTikzStandalone
                               , HP.id "tikzStandalone"
                               ]
-                          , HH.label [ HP.for "prettyJSON" ] [ HH.text " standalone document" ]
+                          , HH.text " standalone document"
                           ]
                       , HH.button
                           [ class_ "pure-button pure-u-1-5"

annotation-tool/src/App/Tabs/SVG.purs

@@ -68,17 +68,17 @@ svgComponent = H.mkComponent
   render :: SVGState -> _
   render { modelInfo, settings, showSurface } = HH.div_
     [ HH.div [ class_ "content-np tab pure-form pure-g" ]
-        [ HH.div [ class_ "pure-u-4-5" ]
+        [ HH.label [ class_ "pure-u-4-5" ]
             [ HH.input
                 [ HP.type_ $ HP.InputCheckbox
                 , HP.checked showSurface
                 , HE.onChange \_ -> SVGToggleSurface
                 , HP.id "showSurface"
                 ]
-            , HH.label [ HP.for "showSurface" ] [ HH.text " show full surface below graph" ]
+            , HH.text " show full surface below graph"
             ]
         , HH.button
-            [ class_ "pure-button pure-button-primary pure-u-1-5"
+            [ class_ "pure-button pure-button-primary pure-u-1-5 center"
             , HE.onClick \_ -> SVGDownload
             ]
             [ HH.text "Download" ]

annotation-tool/src/App/Tabs/Settings.purs

@@ -27,32 +27,33 @@ settingsComponent = H.mkComponent { initialState, render, eval: H.mkEval H.defau
 
   render { settings } =
     HH.div [ class_ "content-np tab pure-form" ]
-      [ HH.p_
-          [ HH.input
-              [ HP.type_ $ HP.InputCheckbox
-              , HP.checked settings.flatHori
-              , HE.onChange \_ -> SettingsToggleFlatHori
-              , HP.id "flatHori"
+      [ HH.div [ class_ "pure-g" ]
+          [ HH.label [ class_ "pure-u-1-5" ]
+              [ HH.input
+                  [ HP.type_ $ HP.InputCheckbox
+                  , HP.checked settings.flatHori
+                  , HE.onChange \_ -> SettingsToggleFlatHori
+                  ]
+              , HH.text " render horis flat"
               ]
-          , HH.label [ HP.for "flatHori" ] [ HH.text " render horis flat" ]
-          ]
-      , HH.p_
-          [ HH.input
-              [ HP.type_ $ HP.InputCheckbox
-              , HP.checked settings.showAllEdges
-              , HE.onChange \_ -> SettingsToggleShowAllEdges
-              , HP.id "showAllEdges"
+
+          , HH.label [ class_ "pure-u-1-5" ]
+              [ HH.input
+                  [ HP.type_ $ HP.InputCheckbox
+                  , HP.checked settings.showAllEdges
+                  , HE.onChange \_ -> SettingsToggleShowAllEdges
+                  ]
+              , HH.text " show all edges"
               ]
-          , HH.label [ HP.for "showAllEdges" ] [ HH.text " show all edges" ]
-          ]
-      , HH.p_
-          [ HH.input
-              [ HP.type_ $ HP.InputCheckbox
-              , HP.checked settings.showScore
-              , HE.onChange \_ -> SettingsToggleShowScore
-              , HP.id "showScore"
+
+          , HH.label [ class_ "pure-u-1-5" ]
+              [ HH.input
+                  [ HP.type_ $ HP.InputCheckbox
+                  , HP.checked settings.showScore
+                  , HE.onChange \_ -> SettingsToggleShowScore
+                  ]
+              , HH.text " show score"
               ]
-          , HH.label [ HP.for "showScore" ] [ HH.text " show score" ]
           ]
       , HH.p [ class_ "pure-g" ]
           [ HH.label [ class_ "pure-u-1-5", HP.for "xscale" ] [ HH.text $ "horizontal zoom: " <> show settings.xscale ]