CS-381/MiniLogo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add styling and headings.

Browse Source
This commit is contained in:
Danila Fedorin 2019-02-01 20:39:34 -08:00
parent 91a294a56d
commit cdbd0be256
3 changed files with 45 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -3,6 +3,7 @@
<title>MiniLogo Simulator</title> <title>MiniLogo Simulator</title>
<script src="minilogo.js"></script> <script src="minilogo.js"></script>
<script src="http://unpkg.com/elm-canvas/elm-canvas.js"></script> <script src="http://unpkg.com/elm-canvas/elm-canvas.js"></script>
<link rel="stylesheet" href="minilogo.css">
</head> </head>
<body> <body>
<div id="elm-container"> <div id="elm-container">

37
minilogo.scss Normal file
View File

@ -0,0 +1,37 @@
@import url('https://fonts.googleapis.com/css?family=Raleway');
$default-shadow: 0px 0px 5px rgba(0, 0, 0, .25);
body {
background-color: rgb(247, 248, 249);
font-family: Raleway, sans-serif;
}
h1, h2 {
text-align: center;
}
div.logo-container {
display: flex;
flex-direction: row;
justify-content: center;
}
div.logo-pane {
flex-grow: 1;
flex-basis: 50%;
padding: 10px;
}
textarea {
width: 100%;
max-width: 500px;
height: 500px;
border: none;
padding: 10px;
}
textarea, canvas {
display: block;
margin: auto;
box-shadow: $default-shadow;
}

11
src/Main.elm
View File

@ -1,4 +1,4 @@
import Html exposing (Html, div, text, textarea) import Html exposing (Html, div, text, textarea, h1, h2)
import Html.Attributes exposing (class) import Html.Attributes exposing (class)
import Html.Events exposing (onInput) import Html.Events exposing (onInput)
import Browser exposing (element) import Browser exposing (element)
@ -320,9 +320,12 @@ view m =
<| Result.withDefault (Err "Couldn't parse program") <| Result.withDefault (Err "Couldn't parse program")
<| Result.map (\prg -> evaluateAll prg [] initialState) (run parseProg m.programText) <| Result.map (\prg -> evaluateAll prg [] initialState) (run parseProg m.programText)
in in
div [ class "logo-container" ] div []
[ div [ class "logo-pane" ] [ textarea [ onInput UpdateText ] [ text m.programText ] ] [ h1 [] [ text "MiniLogo Functional Evaluator" ]
, div [ class "logo-pane" ] [ canvas dat ] , div [ class "logo-container" ]
[ div [ class "logo-pane" ] [ h2 [] [ text "MiniLogo" ], textarea [ onInput UpdateText ] [ text m.programText ] ]
, div [ class "logo-pane" ] [ h2 [] [ text "Output" ], canvas dat ]
]
] ]
update : Msg -> Model -> (Model, Cmd Msg) update : Msg -> Model -> (Model, Cmd Msg)