Website

Check-in [04f406f1bd]
Login
Overview
Comment:Improve UI of playground.
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 04f406f1bdfaab7332b3ed19fbece843a127f613cb7e00956dcb72655ea64491
User & Date: robin.hansen on 2020-11-06 00:24:55
Other Links: manifest | tags
Context
2020-11-09
05:49
Began work on landing page content. check-in: d1bedbb50f user: robin.hansen tags: trunk
2020-11-06
00:24
Improve UI of playground. check-in: 04f406f1bd user: robin.hansen tags: trunk
2020-11-05
23:10
Clear result when switching lessons. check-in: 4003931997 user: robin.hansen tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Modified playground/src/Playground.elm from [2868db87f0] to [56eaff41d4].

105
106
107
108
109
110
111
112


113


114
115
116





117
118
119


120

121
122
123






124
125
126
127
128
129
130









131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

-- VIEW


view : Model -> Html Msg
view model =
    Html.div
        [ Attributes.style "height" "100vh"


        ]


        [ Html.h1
            []
            [ Html.text "Playground" ]





        , Html.div
            [ Attributes.style "height" "100%" ]
            [ Html.div


                [ Attributes.style "height" "50%" ]

                [ Html.textarea
                    [ Attributes.style "width" "50vw"
                    , Attributes.style "height" "100%"






                    , Events.onInput EditSource
                    , Attributes.value model.source
                    ]
                    []
                , Html.span
                    []
                    [ Html.text model.result ]









                ]
            , Html.div
                []
                [ lessonSwitcher model
                , Html.button
                    [ Events.onClick <| Compile model.source ]
                    [ Html.text "Run" ]
                ]
            ]
        ]


lessonSwitcher : Model -> Html Msg
lessonSwitcher model =
    Html.select







|
>
>

>
>
|
|
|
>
>
>
>
>

|
<
>
>
|
>
|
|
|
>
>
>
>
>
>
|
|
|
|
|
<
<
>
>
>
>
>
>
>
>
>

<
<
<
<
<
|
<







105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145


146
147
148
149
150
151
152
153
154
155





156

157
158
159
160
161
162
163

-- VIEW


view : Model -> Html Msg
view model =
    Html.div
        [ Attributes.style "height" "100%"
        , Attributes.style "display" "flex"
        , Attributes.style "flex-direction" "column"
        ]
        [ Html.div
            []
            [ Html.h1
                []
                [ Html.text "Playground" ]
            , lessonSwitcher model
            , Html.button
                [ Events.onClick <| Compile model.source ]
                [ Html.text "Run" ]
            ]
        , Html.div
            [ Attributes.style "display" "flex"

            , Attributes.style "justify-content" "space-between"
            , Attributes.style "flex-grow" "1"
            , Attributes.style "height" "100%"
            ]
            [ Html.textarea
                [ Attributes.style "width" "100%"
                , Attributes.style "height" "100%"
                , Attributes.style "padding" "8px"
                , Attributes.style "font-size" "16px"
                , Attributes.style "font-family" "monospace"
                , Attributes.style "margin-right" "8px"
                , Attributes.style "overflow-y" "scroll"
                , Attributes.style "resize" "none"
                , Events.onInput EditSource
                , Attributes.value model.source
                ]
                []
            , Html.div


                [ Attributes.style "width" "100%"
                , Attributes.style "height" "100%"
                , Attributes.style "padding" "8px"
                , Attributes.style "background-color" "#000000"
                , Attributes.style "color" "#ffffff"
                , Attributes.style "white-space" "pre"
                , Attributes.style "font-size" "16px"
                , Attributes.style "font-family" "monospace"
                , Attributes.style "overflow" "scroll"
                ]





                [ Html.text model.result ]

            ]
        ]


lessonSwitcher : Model -> Html Msg
lessonSwitcher model =
    Html.select

Modified playground/src/playground.html from [2bd1dc49f4] to [fb65cddede].

1
2
3
4
5











6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="./playground.js" async deferred></script>











    </head>
    <body>
        <div id="elm-app"></div>
    </body>
</html>





>
>
>
>
>
>
>
>
>
>
>





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="./playground.js" async deferred></script>
        <style>
            * {
                box-sizing: border-box;
            }

            body {
                height: calc(100vh - 16px);
                margin: 0;
                padding: 8px;
            }
        </style>
    </head>
    <body>
        <div id="elm-app"></div>
    </body>
</html>