Improve example visual (a bit)

This commit is contained in:
Jeroen Engels 2017-01-15 22:57:03 +01:00
parent 27225b40fb
commit c6ab2b4b8a
2 changed files with 28 additions and 7 deletions

View File

@ -5,7 +5,7 @@ import Ast
import Ast.Expression exposing (..)
import Ast.Statement exposing (..)
import Html exposing (Html, p, div, li, ul, pre, textarea, text)
import Html.Attributes exposing (id)
import Html.Attributes exposing (id, class)
import Html.Events exposing (..)
import Json.Decode as JD
import Lint
@ -116,14 +116,23 @@ lint source =
view : String -> Html Msg
view model =
div [ id "wrapper" ]
[ textarea
[ id "left"
, on "input" (JD.map Replace targetValue)
[ div [ id "left" ]
[ p [ class "title" ] [ text "Source code" ]
, textarea
[ id "input"
, on "input" (JD.map Replace targetValue)
]
[ text model ]
, div []
[ p [ class "title" ] [ text "Linting errors" ]
, div [ id "lint" ]
[ lint model
]
]
]
[ text model ]
, div [ id "right" ]
[ p [ id "ast" ] [ tree <| Ast.parse model ]
, p [ id "lint" ] [ lint model ]
[ p [ class "title" ] [ text "AST" ]
, p [ id "ast" ] [ tree <| Ast.parse model ]
]
]

View File

@ -1,6 +1,10 @@
<html>
<head>
<title>elm-lint</title>
<meta charset="UTF-8">
<meta name="description" content="An online Elm linter.">
<style>
</script>
textarea {
font-family: monospace;
width: 100%;
@ -25,6 +29,11 @@
#left {
flex: 0 0 40%;
}
#input {
flex: 1;
width: 100%;
height: 60%;
}
#right {
flex: 1;
}
@ -34,5 +43,8 @@
#lint {
border: solid 1px;
}
.title {
font-weight: bold;
}
</style>
</html>