Add lots of styling

noodle.css

@@ -0,0 +1,60 @@
+body {
+  font-family: Sans;
+}
+
+h4 {
+  margin-bottom: 7px;
+}
+
+.table {
+  border-collapse: collapse;
+  margin-top: 25px;
+  width: 500px;
+}
+
+.table td {
+  padding-bottom: 5px;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+}
+
+.table a {
+  text-decoration: none;
+}
+
+.table a, .table a:visited, .table a:active, .table a:link {
+  color: #819FF7;
+}
+
+.table a:hover {
+  color: #045FB4;
+}
+
+.btns {
+  margin-top: 10px;
+}
+
+.btn {
+  text-decoration: none;
+  background-color: #eee;
+  color: #111;
+  padding: 3px 6px 3px 6px;
+  border: none;
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.input {
+  font-size: 14px;
+  margin-right: 5px;
+  padding-left: 5px;
+}
+
+.error {
+  background-color: #F78181;
+  padding: 5px;
+}
+
+.voters {
+  padding-left: 20px;
+}

src/Noodle/Views/Index.hs

@@ -2,17 +2,23 @@
 
 module Noodle.Views.Index where
 
-import Text.Blaze.Html5
-import Text.Blaze.Html5.Attributes
+import Text.Blaze.Html5 as H
+import Text.Blaze.Html5.Attributes as A
 import Text.Blaze.Html.Renderer.Text
 import Data.Monoid ((<>))
 
 render items = do
-  html $ do
-    body $ do
-      h2 "Index of polls"
-      a ! href "/polls/new" $ "New Poll"
-      ul $ do
+  H.html $ do
+    H.head $ do
+      H.title "Noodle - The doodle"
+      H.link ! A.rel "stylesheet" ! A.type_ "text/css" ! A.href "/noodle.css"
+    H.body $ do
+      H.h2 "Noodle - The doodle"
+      H.a ! A.class_ "btn" ! A.href "/polls/new" $ "New Poll"
+      H.table ! A.class_ "table" $ do
         mapM_ renderLn items
-  where renderLn i = li (a ! href ("/polls/" <> (stringValue (show $ fst i))) $
-                                toHtml (snd i))
+  where renderLn i = do
+          H.tr $ do
+            H.td $ do
+              H.a ! A.href ("/polls/" <> (H.stringValue (show $ fst i))) $
+                H.toHtml (snd i)

src/Noodle/Views/New.hs

@@ -9,10 +9,13 @@ import Data.Monoid ((<>))
 
 render errors = do
   H.html $ do
+    H.head $ do
+      H.title "Noodle - The doodle"
+      H.link ! A.rel "stylesheet" ! A.type_ "text/css" ! A.href "/noodle.css"
     H.body $ do
-      H.h3 "Create a poll"
+      H.h2 "Create a poll"
       mapM_ renderErrors errors
-      H.form ! A.method "post" ! A.action "/polls/" $ do
+      H.form ! A.class_ "form" ! A.method "post" ! A.action "/polls/" $ do
         H.table $ do
           H.tr $ do
             H.td $ do
@@ -24,7 +27,9 @@ render errors = do
               H.label "Description: "
             H.td $ do
               H.textarea ! A.name "desc" ! A.cols "50" ! A.rows "10" $ ""
-        H.input ! A.type_ "submit" ! A.value "Add Poll"
+        H.div ! A.class_ "btns" $ do
+          H.input ! A.class_ "btn" ! A.type_ "submit" ! A.value "Add Poll"
+          H.a ! A.class_ "btn" ! A.href "/polls" $ "Back"
   where renderErrors error = do
-          H.p ! A.style "color: red" $ error
+          H.p ! A.class_ "error" $ error
           H.br

src/Noodle/Views/Show.hs

@@ -8,24 +8,27 @@ import Text.Blaze.Html.Renderer.Text
 
 render (pollId, pollName, pollDesc) options voters errors = do
   H.html $ do
+    H.head $ do
+      H.title "Noodle - The doodle"
+      H.link ! A.rel "stylesheet" ! A.type_ "text/css" ! A.href "/noodle.css"
     H.body $ do
       H.h3 $ toHtml pollName
       mapM_ (\x-> do H.toHtml x; H.br) (lines pollDesc)
       H.h4 "Options"
       mapM_ renderErrors errors
       H.form ! A.method "post" ! A.action "/options/" $ do
-        H.input ! A.placeholder "add a option" ! A.name "name"
+        H.input ! A.class_ "input" ! A.placeholder "add a option" ! A.name "name"
         H.input ! A.type_ "hidden" ! A.value (H.stringValue (show pollId)) !
           A.name "id"
-        H.input ! A.type_ "submit" ! A.value "Add"
-      H.form ! A.method "post" ! A.enctype "application/json" !
+        H.input ! A.class_ "btn" ! A.type_ "submit" ! A.value "Add"
+      H.form ! A.method "post" !
         A.action (H.stringValue ("/polls/" ++ (show pollId) ++ "/vote/")) $ do
         H.table $ do
           mapM_ (renderLn) (zip options voters)
-        H.input ! A.placeholder "Vote as" ! A.name "name"
-        H.input ! A.type_ "submit" ! A.value "Vote"
+        H.input ! A.class_ "input" ! A.placeholder "Vote as" ! A.name "name"
+        H.input ! A.class_ "btn" ! A.type_ "submit" ! A.value "Vote"
       H.br
-      H.a ! A.href "/polls" $ "Back"
+      H.a ! A.class_ "btn" ! A.href "/polls" $ "Back"
   where renderLn ((id, name), (_, voters)) = do
           H.tr $ do
             H.td $ do
@@ -35,8 +38,8 @@ render (pollId, pollName, pollDesc) options voters errors = do
                 A.type_ "checkbox"
             H.td $ do
               H.b $ H.toHtml $ name
-            H.td $ do
+            H.td ! A.class_ "voters" $ do
               H.p $ H.toHtml $ unwords $ Prelude.map (\x -> x ++ ", ") voters
         renderErrors error = do
-          H.p ! A.style "color: red" $ error
+          H.p ! A.class_ "error" $ error
           H.br

src/main.hs

@@ -50,6 +50,8 @@ main = do
 
 scottySite = do
   S.scotty 3000 $ do
+    S.get "/noodle.css" $ do
+      S.file "noodle.css"
     S.get "/polls" $ do
       polls <- liftIO $ allPolls
       blaze $ Noodle.Views.Index.render $ pollNames $ polls