jfmengels/elm-review
1
1
Fork 0
mirror of https://github.com/jfmengels/elm-review.git synced 2024-12-26 03:04:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve example visual (a bit)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
example/Main.elm
View File

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

12
example/index.html
View File

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