Commits: 8
Embed simplest, roestte, and spiral examples
index 5dd325d..f789f82 100644
--- a/index.txt
+++ b/index.txt
@@ -36,6 +36,10 @@ Setup the development environment
=
=| counter
=
+Embedded simplest example:
+
+| simplest
+
=Embedded fill the screen example:
=
=| fill-the-screen
@@ -64,8 +68,16 @@ Embeded transformations example:
=
=| transformations
=
-Embeded nested-transformations example:
+Embedded nested-transformations example:
=
=| nested-transformations
=
+Embedded rosette example:
+
+| rosette
+
+Embedded spiral example:
+
+| spiral
+
=Finito!index 0d3eb5a..d450539 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -18,6 +18,9 @@ import Mark.Custom
=import NestedTransformations
=import PolarCoordinates
=import Result.Extra as Result
+import RosetteTypedTransformations
+import Simplest
+import Spiral
=import Transformations
=
=
@@ -187,6 +190,24 @@ options =
= ]
= |> Element.map CounterMsg
=
+ simplestBlock : Mark.Custom.Block Model Styling Msg
+ simplestBlock =
+ Mark.Custom.block "simplest" simplestView
+
+ simplestView : Styling -> Model -> Element Msg
+ simplestView style model =
+ Simplest.ui
+ |> Element.el
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+
= fillTheScreenBlock : Mark.Custom.Block Model Styling Msg
= fillTheScreenBlock =
= Mark.Custom.block "fill-the-screen" fillTheScreenView
@@ -331,10 +352,45 @@ options =
= , Border.width 2
= ]
= |> Element.map PolarCoordinatesMsg
+
+ rosetteBlock : Mark.Custom.Block Model Styling Msg
+ rosetteBlock =
+ Mark.Custom.block "rosette" rosetteView
+
+ rosetteView : Styling -> Model -> Element Msg
+ rosetteView style model =
+ RosetteTypedTransformations.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+
+ spiralBlock : Mark.Custom.Block Model Styling Msg
+ spiralBlock =
+ Mark.Custom.block "spiral" spiralView
+
+ spiralView : Styling -> Model -> Element Msg
+ spiralView style model =
+ Spiral.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
= in
= { default
= | blocks =
= counterBlock
+ :: simplestBlock
= :: fillTheScreenBlock
= :: lineBlock
= :: gradientBlock
@@ -343,5 +399,7 @@ options =
= :: nestedTransformationsBlock
= :: cartesianCoordinatesBlock
= :: polarCoordinatesBlock
+ :: rosetteBlock
+ :: spiralBlock
= :: Mark.defaultBlocks
= }index dcd20c1..2ae161e 100644
--- a/src/RosetteTypedTransformations.elm
+++ b/src/RosetteTypedTransformations.elm
@@ -1,4 +1,4 @@
-module RosetteTypedTransformations exposing (main)
+module RosetteTypedTransformations exposing (main, ui)
=
=import Element
=import Svg
@@ -10,77 +10,82 @@ main =
= [ Element.width Element.fill
= , Element.height Element.fill
= ]
- (Element.html
- (Svg.svg
- [ Svg.Attributes.viewBox "-100 -100 200 200" ]
- [ Svg.defs []
- [ Svg.linearGradient
- [ Svg.Attributes.id "blue-pink-gradient"
- , Svg.Attributes.x1 "0"
- , Svg.Attributes.y1 "0"
- , Svg.Attributes.x2 "1"
- , Svg.Attributes.y2 "0"
- , Svg.Attributes.gradientUnits "userSpaceOnUse"
+ ui
+
+
+ui =
+ Element.html
+ (Svg.svg
+ [ Svg.Attributes.height "400"
+ , Svg.Attributes.viewBox "-100 -100 200 200"
+ ]
+ [ Svg.defs []
+ [ Svg.linearGradient
+ [ Svg.Attributes.id "blue-pink-gradient"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x2 "1"
+ , Svg.Attributes.y2 "0"
+ , Svg.Attributes.gradientUnits "userSpaceOnUse"
+ ]
+ [ Svg.stop
+ [ Svg.Attributes.stopColor "blue"
+ , Svg.Attributes.offset "0"
= ]
- [ Svg.stop
- [ Svg.Attributes.stopColor "blue"
- , Svg.Attributes.offset "0"
- ]
- []
- , Svg.stop
- [ Svg.Attributes.stopColor "pink"
- , Svg.Attributes.offset "1"
- ]
- []
+ []
+ , Svg.stop
+ [ Svg.Attributes.stopColor "pink"
+ , Svg.Attributes.offset "1"
= ]
+ []
= ]
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 0
- , Scale 100 1
- ]
+ ]
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 0
+ , Scale 100 1
= ]
- []
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 72
- , Scale 100 1
- ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 72
+ , Scale 100 1
= ]
- []
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 144
- , Scale 100 1
- ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 144
+ , Scale 100 1
= ]
- []
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 216
- , Scale 100 1
- ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 216
+ , Scale 100 1
= ]
- []
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 288
- , Scale 100 1
- ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 288
+ , Scale 100 1
= ]
- []
= ]
- )
+ []
+ ]
= )
=
=index 9686d17..ae4d919 100644
--- a/src/Simplest.elm
+++ b/src/Simplest.elm
@@ -1,5 +1,6 @@
-module Simplest exposing (main)
+module Simplest exposing (main, ui)
=
+import Element
=import Svg
=import Svg.Attributes
=
@@ -8,10 +9,15 @@ main =
= Svg.svg [ Svg.Attributes.style "background: pink" ]
= [ Svg.line
= [ Svg.Attributes.x1 "0"
- , Svg.Attributes.x2 "1"
+ , Svg.Attributes.x2 "20"
= , Svg.Attributes.y1 "0"
= , Svg.Attributes.y2 "0"
= , Svg.Attributes.stroke "black"
+ , Svg.Attributes.strokeWidth <| String.fromInt <| 5
= ]
= []
= ]
+
+
+ui =
+ Element.html mainindex f2e2aa0..09c888e 100644
--- a/src/Spiral.elm
+++ b/src/Spiral.elm
@@ -1,4 +1,4 @@
-module Spiral exposing (main)
+module Spiral exposing (main, ui)
=
=import Element
=import Svg
@@ -6,6 +6,14 @@ import Svg.Attributes
=
=
=main =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ ui
+
+
+ui =
= let
= defs =
= Svg.defs []
@@ -30,15 +38,12 @@ main =
= ]
= ]
= in
- Element.layout
- [ Element.width Element.fill
- , Element.height Element.fill
- ]
- (Element.html
- (Svg.svg
- [ Svg.Attributes.viewBox "-100 -100 200 200" ]
- (defs :: spiral 500)
- )
+ Element.html
+ (Svg.svg
+ [ Svg.Attributes.height "400"
+ , Svg.Attributes.viewBox "-100 -100 200 200"
+ ]
+ (defs :: spiral 500)
= )
=
=(Re-) implement title, note and emphasize blocks for markup
Title has subtitles (lines following the first one). Note and emphasize are visually separated from the normal content.
index 1a452ee..67d6710 100644
--- a/index.txt
+++ b/index.txt
@@ -1,3 +1,50 @@
+| title
+ Software Garden
+
+ ⚘
+
+ A functional programming workshop for non-programmers
+
+
+
+| header
+ Before the course begins
+
+| header
+ Setup
+
+| note
+ This setup instructions are based on an assumption that you are using a Mac.
+
+ If you are using Linux or BSD, then you probably know how to install stuff.
+
+ If you are using anything else, then... well, good luck.
+
+ The rest of the instructions should work with any platform.
+
+
+We will need
+
+| list
+ - a text editor (I use Atom)
+ - and the Elm programming language
+
+
+| header
+ Installing Elm
+
+To install the Elm programming language, go to it's website:
+
+| emphasize
+ [elm-lang.org](http://elm-lang.org/)
+
+
+and follow the installation instructions.
+
+
+
+
+
=| header
= To do:
=
@@ -22,22 +69,3 @@ Groups and transformations
= Spiral (recursion)
=
=Tree
-
-
-| header
- Before the course begins
-
-Setup the development environment
-
-| list
- - Elm
- - Node.js
-
-
-| counter
-
-Embeded transformations example:
-
-| transformations
-
-Finito!index b7a1bc1..41b9ce4 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -5,6 +5,7 @@ import Counter
=import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
+import Element.Font as Font
=import Element.Input as Input
=import Html exposing (Html)
=import Http
@@ -74,7 +75,7 @@ view model =
= |> Element.column
= [ Element.centerX
= , Element.centerY
- , Background.color (Element.rgb 0.7 0 0)
+ , Background.color colors.maroon
= , Element.padding 40
= , Element.spacing 20
= ]
@@ -131,12 +132,80 @@ type alias Options =
= Mark.Options Model Styling Msg
=
=
+colors =
+ { maroon = Element.rgb 0.7 0 0
+ , gray = Element.rgb 0.8 0.8 0.8
+ , pink = Element.rgb 1 0.6 0.6
+ }
+
+
=options : Options
=options =
= let
= default =
= Mark.default
=
+ emphasizeBlock : Mark.Custom.Block Model Styling Msg
+ emphasizeBlock =
+ Mark.Custom.section "emphasize" emphasizeView
+
+ emphasizeView : List (Element Msg) -> Styling -> Model -> Element Msg
+ emphasizeView elements style model =
+ elements
+ |> Element.column
+ [ Element.spacing 30
+ , Font.bold
+ , Font.size 30
+ , Font.center
+ , Element.paddingXY 0 40
+ ]
+
+ titleBlock : Mark.Custom.Block Model Styling Msg
+ titleBlock =
+ Mark.Custom.section "title" titleView
+
+ titleView : List (Element Msg) -> Styling -> Model -> Element Msg
+ titleView elements style model =
+ case elements of
+ title :: subtitles ->
+ let
+ titleElement =
+ Element.el
+ [ Font.center
+ , Font.size 60
+ , Font.extraBold
+ , Element.width Element.fill
+ ]
+ title
+ in
+ Element.column
+ [ Element.spacing 30
+ , Font.bold
+ , Font.size 30
+ , Font.center
+ , Element.paddingXY 0 80
+ ]
+ (titleElement :: subtitles)
+
+ [] ->
+ Element.none
+
+ noteBlock : Mark.Custom.Block Model Styling Msg
+ noteBlock =
+ Mark.Custom.section "note" noteView
+
+ noteView : List (Element Msg) -> Styling -> Model -> Element Msg
+ noteView elements style model =
+ Element.column
+ [ Element.padding 20
+ , Element.spacing 10
+ , Border.width 1
+ , Border.color colors.gray
+ , Border.rounded 5
+ , Font.italic
+ ]
+ elements
+
= counterBlock : Mark.Custom.Block Model Styling Msg
= counterBlock =
= Mark.Custom.block "counter" counterView
@@ -150,7 +219,7 @@ options =
= ]
= |> Element.el
= [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.color colors.pink
= , Border.rounded 5
= , Border.width 2
= ]
@@ -169,7 +238,7 @@ options =
= ]
= |> Element.el
= [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.color colors.pink
= , Border.rounded 5
= , Border.width 2
= ]
@@ -177,7 +246,10 @@ options =
= in
= { default
= | blocks =
- counterBlock
+ titleBlock
+ :: emphasizeBlock
+ :: noteBlock
+ :: counterBlock
= :: transformationsBlock
= :: Mark.defaultBlocks
= }Embed tree example
The embedded example is toggled by clicking on the element
index f789f82..96e0265 100644
--- a/index.txt
+++ b/index.txt
@@ -80,4 +80,8 @@ Embedded spiral example:
=
=| spiral
=
+Embedded tree example:
+
+| tree
+
=Finito!index d450539..689e5cb 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -7,6 +7,7 @@ import Counter
=import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
+import Element.Events
=import Element.Input as Input
=import FillTheScreen
=import Gradient
@@ -22,6 +23,7 @@ import RosetteTypedTransformations
=import Simplest
=import Spiral
=import Transformations
+import Tree
=
=
=main =
@@ -44,6 +46,7 @@ type alias Model =
= , nestedTransformations : NestedTransformations.Model
= , cartesianCoordinates : CartesianCoordinates.Model
= , polarCoordinates : PolarCoordinates.Model
+ , tree : Maybe Tree.Model
= }
=
=
@@ -54,6 +57,8 @@ type Msg
= | NestedTransformationsMsg NestedTransformations.Msg
= | CartesianCoordinatesMsg CartesianCoordinates.Msg
= | PolarCoordinatesMsg PolarCoordinates.Msg
+ | ToggleTree (Maybe Tree.Model)
+ | TreeMsg Tree.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
@@ -64,6 +69,9 @@ init flags =
= , nestedTransformations = NestedTransformations.init
= , cartesianCoordinates = CartesianCoordinates.init
= , polarCoordinates = PolarCoordinates.init
+ , tree = Nothing
+
+ --, tree = Tree.init () |> Tuple.first
= }
= , Http.get
= { url = "/index.txt"
@@ -151,10 +159,32 @@ update msg model =
= , Cmd.none
= )
=
+ ToggleTree tree ->
+ ( { model | tree = tree }, Cmd.none )
+
+ TreeMsg m ->
+ case model.tree of
+ Just tree ->
+ Tree.update m tree
+ |> (\( newTree, treeCmd ) ->
+ ( { model | tree = Just newTree }
+ , Cmd.map TreeMsg treeCmd
+ )
+ )
+
+ Nothing ->
+ ( model, Cmd.none )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
- Sub.none
+ case model.tree of
+ Nothing ->
+ Sub.none
+
+ Just tree ->
+ Tree.subscriptions tree
+ |> Sub.map TreeMsg
=
=
=type alias Styling =
@@ -386,6 +416,48 @@ options =
= , Border.rounded 5
= , Border.width 2
= ]
+
+ treeBlock : Mark.Custom.Block Model Styling Msg
+ treeBlock =
+ Mark.Custom.block "tree" treeView
+
+ treeView : Styling -> Model -> Element Msg
+ treeView style model =
+ let
+ content =
+ case model.tree of
+ Nothing ->
+ Element.text "Click Here to Display Tree"
+ |> List.singleton
+ |> Element.paragraph
+ [ Element.centerY ]
+ |> Element.el
+ [ Element.centerX
+ , Element.height <| Element.minimum 300 <| Element.fill
+ , Element.Events.onClick
+ (Tree.init ()
+ |> Tuple.first
+ |> Just
+ |> ToggleTree
+ )
+ ]
+
+ Just tree ->
+ tree
+ |> Tree.ui
+ |> Element.map TreeMsg
+ |> Element.el
+ [ Element.centerX
+ , Element.height <| Element.minimum 300 <| Element.fill
+ , Element.Events.onClick (ToggleTree Nothing)
+ ]
+ in
+ content
+ |> Element.el
+ [ Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
= in
= { default
= | blocks =
@@ -401,5 +473,6 @@ options =
= :: polarCoordinatesBlock
= :: rosetteBlock
= :: spiralBlock
+ :: treeBlock
= :: Mark.defaultBlocks
= }index cde6818..44e7a9a 100644
--- a/src/Tree.elm
+++ b/src/Tree.elm
@@ -1,9 +1,17 @@
-module Tree exposing (main)
+module Tree exposing
+ ( Model
+ , Msg
+ , init
+ , main
+ , subscriptions
+ , ui
+ , update
+ )
=
=import Browser
=import Browser.Events
=import Dict exposing (Dict)
-import Element
+import Element exposing (Element)
=import Html exposing (Html)
=import Json.Decode exposing (Decoder)
=import List.Extra as List
@@ -81,6 +89,15 @@ init () =
=
=view : Model -> Html Msg
=view model =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ (ui model)
+
+
+ui : Model -> Element Msg
+ui model =
= let
= gradients : List (Svg Msg)
= gradients =
@@ -123,20 +140,15 @@ view model =
= )
= ]
= in
- Element.layout
- [ Element.width Element.fill
- , Element.height Element.fill
- ]
- (Element.html <|
- svg
- [ viewBox "-1000 -1000 2000 2000"
- , height "100%"
- , width "100%"
- ]
- [ defs [] gradients
- , tree
- ]
- )
+ Element.html <|
+ svg
+ [ viewBox "-1000 -1000 2000 2000"
+ , height "100%"
+ , width "100%"
+ ]
+ [ defs [] gradients
+ , tree
+ ]
=
=
=update : Msg -> Model -> ( Model, Cmd Msg )Embed view box example
index 96e0265..1a106ac 100644
--- a/index.txt
+++ b/index.txt
@@ -84,4 +84,8 @@ Embedded tree example:
=
=| tree
=
+Embedded view box example:
+
+| view-box
+
=Finito!index 689e5cb..b88bb06 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -24,6 +24,7 @@ import Simplest
=import Spiral
=import Transformations
=import Tree
+import ViewBox
=
=
=main =
@@ -47,6 +48,7 @@ type alias Model =
= , cartesianCoordinates : CartesianCoordinates.Model
= , polarCoordinates : PolarCoordinates.Model
= , tree : Maybe Tree.Model
+ , viewBox : ViewBox.Model
= }
=
=
@@ -59,6 +61,7 @@ type Msg
= | PolarCoordinatesMsg PolarCoordinates.Msg
= | ToggleTree (Maybe Tree.Model)
= | TreeMsg Tree.Msg
+ | ViewBoxMsg ViewBox.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
@@ -70,8 +73,7 @@ init flags =
= , cartesianCoordinates = CartesianCoordinates.init
= , polarCoordinates = PolarCoordinates.init
= , tree = Nothing
-
- --, tree = Tree.init () |> Tuple.first
+ , viewBox = ViewBox.init
= }
= , Http.get
= { url = "/index.txt"
@@ -175,6 +177,9 @@ update msg model =
= Nothing ->
= ( model, Cmd.none )
=
+ ViewBoxMsg m ->
+ ( { model | viewBox = ViewBox.update m model.viewBox }, Cmd.none )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
@@ -458,6 +463,25 @@ options =
= , Border.rounded 5
= , Border.width 2
= ]
+
+ viewBoxBlock : Mark.Custom.Block Model Styling Msg
+ viewBoxBlock =
+ Mark.Custom.block "view-box" viewBoxView
+
+ viewBoxView : Styling -> Model -> Element Msg
+ viewBoxView style model =
+ model.viewBox
+ |> ViewBox.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+ |> Element.map ViewBoxMsg
= in
= { default
= | blocks =
@@ -474,5 +498,6 @@ options =
= :: rosetteBlock
= :: spiralBlock
= :: treeBlock
+ :: viewBoxBlock
= :: Mark.defaultBlocks
= }index de064d5..fadec31 100644
--- a/src/ViewBox.elm
+++ b/src/ViewBox.elm
@@ -1,10 +1,8 @@
=module ViewBox exposing
- ( Flags
- , Model
+ ( Model
= , Msg
= , init
= , main
- , subscriptions
= , ui
= , update
= , view
@@ -22,18 +20,13 @@ import Svg.Attributes exposing (..)
=
=
=main =
- Browser.element
+ Browser.sandbox
= { init = init
= , view = view
= , update = update
- , subscriptions = subscriptions
= }
=
=
-type alias Flags =
- ()
-
-
=type alias Model =
= { left : Float
= , top : Float
@@ -47,15 +40,13 @@ type Msg
= | Resize Float Float
=
=
-init : Flags -> ( Model, Cmd Msg )
-init () =
- ( { left = 0
- , top = 0
- , width = 400
- , height = 400
- }
- , Cmd.none
- )
+init : Model
+init =
+ { left = 0
+ , top = 0
+ , width = 400
+ , height = 400
+ }
=
=
=view : Model -> Html.Html Msg
@@ -77,19 +68,14 @@ view model =
= ]
=
=
-update : Msg -> Model -> ( Model, Cmd Msg )
+update : Msg -> Model -> Model
=update msg model =
= case msg of
= Move left top ->
- ( { model | left = left, top = top }, Cmd.none )
+ { model | left = left, top = top }
=
= Resize width height ->
- ( { model | width = width, height = height }, Cmd.none )
-
-
-subscriptions : Model -> Sub Msg
-subscriptions model =
- Sub.none
+ { model | width = width, height = height }
=
=
=ui model =
@@ -107,11 +93,14 @@ ui model =
= , Element.padding 30
= ]
= [ Element.el
- [ Element.height Element.fill
- , Element.width Element.fill
+ [ Element.height <| Element.maximum 500 Element.fill
+ , Element.width <| Element.maximum 500 Element.fill
= ]
= (Element.html <|
- svg [ viewBox "0 0 1000 1000" ]
+ svg
+ [ viewBox "0 0 1000 1000"
+ , Svg.Attributes.style "width: 100%; height: 100%"
+ ]
= [ g [] world
= , rect
= [ x (String.fromFloat model.left)
@@ -126,8 +115,8 @@ ui model =
= ]
= )
= , Element.el
- [ Element.height Element.fill
- , Element.width Element.fill
+ [ Element.height <| Element.maximum 170 Element.fill
+ , Element.width <| Element.maximum 170 Element.fill
= ]
= (Element.html <|
= svg
@@ -136,7 +125,7 @@ ui model =
= |> String.join " "
= |> viewBox
= , preserveAspectRatio "none"
- , Svg.Attributes.style "width: 100; height: 100%"
+ , Svg.Attributes.style "width: 100%; height: 100%"
= ]
= [ g [] world
= , rectUnify styles of grid examples
index d9b0f00..7441ca2 100644
--- a/src/CartesianCoordinates.elm
+++ b/src/CartesianCoordinates.elm
@@ -66,12 +66,14 @@ update msg model =
=ui : Model -> Element Msg
=ui model =
= Element.column
- [ Element.width (Element.maximum 600 Element.fill)
+ [ Element.width Element.fill
= , Element.centerX
- , Element.spacing 20
+ , Element.spacing 30
+ , Element.padding 30
= ]
= [ Element.el
- [ Element.width Element.fill
+ [ Element.height Element.fill
+ , Element.width Element.fill
= ]
= <|
= Element.html <|index b88bb06..c295c9b 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -360,6 +360,7 @@ options =
= |> CartesianCoordinates.ui
= |> Element.el
= [ Element.centerX
+ , Element.width Element.fill
= ]
= |> Element.el
= [ Element.centerX
@@ -379,6 +380,7 @@ options =
= |> PolarCoordinates.ui
= |> Element.el
= [ Element.centerX
+ , Element.width Element.fill
= ]
= |> Element.el
= [ Element.centerXindex fa27050..27129df 100644
--- a/src/NestedTransformations.elm
+++ b/src/NestedTransformations.elm
@@ -101,6 +101,7 @@ ui model =
= ]
= [ Element.el
= [ Element.width Element.fill
+ , Element.paddingEach { top = 0, right = 30, bottom = 0, left = 30 }
= ]
= (Element.html element)
= , Element.row [ Element.width Element.fill ]index 0c519ab..0bcd917 100644
--- a/src/Transformations.elm
+++ b/src/Transformations.elm
@@ -86,14 +86,12 @@ ui model =
= [ Element.width Element.fill
= ]
= (Element.html element)
- , Element.row [ Element.width Element.fill ]
- [ Element.el
- [ Background.color (Element.rgb 1 0.8 0.8)
- , Element.padding 10
- , Element.width Element.fill
- ]
- (transformationsUI transformations)
+ , Element.el
+ [ Background.color (Element.rgb 1 0.8 0.8)
+ , Element.padding 10
+ , Element.width Element.fill
= ]
+ (transformationsUI transformations)
= ]
=
= shape =Fix embedded tree style
index c295c9b..b4f72e0 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -431,16 +431,23 @@ options =
= treeView : Styling -> Model -> Element Msg
= treeView style model =
= let
+ height =
+ 500
+
= content =
= case model.tree of
= Nothing ->
= Element.text "Click Here to Display Tree"
= |> List.singleton
= |> Element.paragraph
- [ Element.centerY ]
+ [ Element.centerY
+ ]
= |> Element.el
= [ Element.centerX
- , Element.height <| Element.minimum 300 <| Element.fill
+ , Element.height <|
+ Element.minimum height <|
+ Element.maximum height <|
+ Element.fill
= , Element.Events.onClick
= (Tree.init ()
= |> Tuple.first
@@ -455,7 +462,11 @@ options =
= |> Element.map TreeMsg
= |> Element.el
= [ Element.centerX
- , Element.height <| Element.minimum 300 <| Element.fill
+ , Element.height <|
+ Element.minimum height <|
+ Element.maximum height <|
+ Element.fill
+ , Element.width Element.fill
= , Element.Events.onClick (ToggleTree Nothing)
= ]
= in