More styling, adding intro section

llbit · May 8, 2016 · 9c967ea · 9c967ea
1 parent bbf3ba2
commit 9c967ea
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 10 deletions.
diff --git a/UkkonenVisualization.elm b/UkkonenVisualization.elm
@@ -11,6 +11,7 @@ import Graphics.Element exposing (..)
 import Graphics.Input exposing (..)
 import Graphics.Input.Field exposing (..)
 import Json.Encode as Json
+import Markdown
 import String exposing (..)
 import Window
 import UkkonenTree exposing (..)
@@ -170,20 +171,35 @@ update action model =
             model
 
 
+introText : Html
+introText =
+    Markdown.toHtml """
+[Ukkonen's algorithm](#) is a method for constructing the [suffix tree](#) of a string in linear time. Suffix trees are useful because they can efficiently answer many questions about a string, such as how many times a given substring occurs within the string. Enter an input string below and you'll be able to watch step-by-step as Ukkonen's algorithm builds a suffix tree.
+
+I was inspired to build this visualization after reading [this great explanation](#) of Ukkonen's algorithm. I'd recommend reading that for an overview of how the algorithm works. Also helpful is the explanation given in [this paper](#).
+
+This page was created using [Elm](#) and [d3](#).
+"""
+
+
 view : Model -> Html
 view model =
     let
         leftButtonEnabled = model.currentStep > 0
 
         rightButtonEnabled = model.currentStep < (Array.length model.steps) - 1
     in
-        section
+        div
             [ id "visualization" ]
-            [ h1 [] [ text "A Visualization of Ukkonen's Algorithm" ]
-            , div
-                [ id "input-string" ]
-                [ inputField model.inputField |> width 400 |> fromElement
-                , span [ id "input-button-wrapper" ] [ visualizeButton |> width 150 |> fromElement ]
+            [ div
+                [ id "heading" ]
+                [ h1 [] [ text "Visualization of Ukkonen's Algorithm" ]
+                , introText
+                , div
+                    [ id "input-string" ]
+                    [ inputField model.inputField |> width 400 |> fromElement
+                    , span [ id "input-button-wrapper" ] [ visualizeButton |> width 150 |> fromElement ]
+                    ]
                 ]
             , div
                 [ id "steps-wrapper" ]

diff --git a/elm-package.json b/elm-package.json
@@ -10,6 +10,7 @@
     "dependencies": {
        "elm-lang/core": "3.0.0 <= v < 4.0.0",
        "evancz/elm-html": "4.0.2 <= v < 5.0.0",
+       "evancz/elm-markdown": "2.0.1 <= v < 3.0.0",
        "sgraf812/elm-intdict": "1.4.0 <= v < 1.5.0"
     },
     "elm-version": "0.16.0 <= v < 0.17.0"

diff --git a/index.html b/index.html
@@ -1,16 +1,18 @@
 <html>
   <head>
     <meta charset=utf-8 />
-    <title>A Visualization of Ukkonen's Algorithm</title>
+    <title>Visualization of Ukkonen's Algorithm</title>
     <script src="elm.js"></script>
     <style>
       body {
         font-family: sans-serif;
-        color: 
+        margin: 0;
+        color: #444444;
       }
 
       h1, h2 {
         font-weight: normal;
+        margin: 0;
       }
 
       button {
@@ -39,6 +41,22 @@
         text-decoration: none;
       }
 
+      #heading {
+        background-color: #F9F9F9;
+        padding: 20px;
+        border-bottom: 1px solid #999999;
+      }
+
+      #heading h1 {
+        display: inline;
+        border-bottom: 1px solid #999999;
+        padding-bottom: 2px;
+      }
+
+      #heading p {
+        width: 760px;
+      }
+
       #steps-wrapper svg {
         float: left;
       }
@@ -50,17 +68,19 @@
       #input-string {
         width: 565px;
         height: 50px;
+        margin-top: 10px;
       }
 
       #side-box {
         float: left;
         width: 300px;
-        background-color: #EEEEEE;
+        background-color: #F9F9F9;
         -webkit-border-radius: 4;
         -moz-border-radius: 4;
         border-radius: 4px;
-        margin-bottom: -20px;
         padding: 20px;
+        margin: 20px 0 0 20px;
+        border: 1px solid #999999;
       }
 
       #narrative h2 {