#6 Make it a bit pretty 💄

astroash · Oct 19, 2017 · 8d72ab3 · 8d72ab3
1 parent 5412304
commit 8d72ab3
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 18 deletions.
diff --git a/Main.elm b/Main.elm
@@ -39,12 +39,20 @@ update msg model =
 
 view : Model -> Html Msg
 view model =
-    div []
-        [ input [ onInput ChangeSearch ] []
-        , ul [] (List.map liMaker <| wordSearcher model)
+    div [ class "pokeFont" ]
+        [ h1 [ class "tc" ] [ text "Search for your Pokémon!" ]
+        , div [ class "w-100" ]
+            [ input [ class "pokeFont center db w-75 w-50-m w-33-l f3 pa2", onInput ChangeSearch ] []
+            , ul [ class "pa0 center db w-75 w-50-m w-33-l f5 mt3" ] (List.map liMaker <| wordSearcher model)
+            ]
+        , img [ class "ash absolute", src "http://satoshipedia.altervista.org/wp-content/uploads/2015/12/ash_ketchum-467.png", alt "Ash with pokeball" ] []
         ]
 
 
+
+-- <img class="ash" alt="Ash with pokeball" src="http://satoshipedia.altervista.org/wp-content/uploads/2015/12/ash_ketchum-467.png">
+
+
 pokeRegex : String -> Regex
 pokeRegex searchTerm =
     caseInsensitive <| regex <| Debug.log "regex" <| " " ++ searchTerm ++ "[a-z-]*"
@@ -66,4 +74,4 @@ wordSearcher model =
 
 liMaker : String -> Html Msg
 liMaker pokemon =
-    li [] [ text pokemon ]
+    li [ class "list boringFont" ] [ text pokemon ]
diff --git a/elm.js b/elm.js
@@ -12558,7 +12558,11 @@ var _user$project$Pokemon$pokeString = '\nAbomasnow\nAbra\nAbsol\nAccelgor\nAegi
 var _user$project$Main$liMaker = function (pokemon) {
 	return A2(
 		_elm_lang$html$Html$li,
-		{ctor: '[]'},
+		{
+			ctor: '::',
+			_0: _elm_lang$html$Html_Attributes$class('list boringFont'),
+			_1: {ctor: '[]'}
+		},
 		{
 			ctor: '::',
 			_0: _elm_lang$html$Html$text(pokemon),
@@ -12626,27 +12630,84 @@ var _user$project$Main$ChangeSearch = function (a) {
 var _user$project$Main$view = function (model) {
 	return A2(
 		_elm_lang$html$Html$div,
-		{ctor: '[]'},
+		{
+			ctor: '::',
+			_0: _elm_lang$html$Html_Attributes$class('pokeFont'),
+			_1: {ctor: '[]'}
+		},
 		{
 			ctor: '::',
 			_0: A2(
-				_elm_lang$html$Html$input,
+				_elm_lang$html$Html$h1,
 				{
 					ctor: '::',
-					_0: _elm_lang$html$Html_Events$onInput(_user$project$Main$ChangeSearch),
+					_0: _elm_lang$html$Html_Attributes$class('tc'),
 					_1: {ctor: '[]'}
 				},
-				{ctor: '[]'}),
+				{
+					ctor: '::',
+					_0: _elm_lang$html$Html$text('Search for your Pokémon!'),
+					_1: {ctor: '[]'}
+				}),
 			_1: {
 				ctor: '::',
 				_0: A2(
-					_elm_lang$html$Html$ul,
-					{ctor: '[]'},
-					A2(
-						_elm_lang$core$List$map,
-						_user$project$Main$liMaker,
-						_user$project$Main$wordSearcher(model))),
-				_1: {ctor: '[]'}
+					_elm_lang$html$Html$div,
+					{
+						ctor: '::',
+						_0: _elm_lang$html$Html_Attributes$class('w-100'),
+						_1: {ctor: '[]'}
+					},
+					{
+						ctor: '::',
+						_0: A2(
+							_elm_lang$html$Html$input,
+							{
+								ctor: '::',
+								_0: _elm_lang$html$Html_Attributes$class('pokeFont center db w-75 w-50-m w-33-l f3 pa2'),
+								_1: {
+									ctor: '::',
+									_0: _elm_lang$html$Html_Events$onInput(_user$project$Main$ChangeSearch),
+									_1: {ctor: '[]'}
+								}
+							},
+							{ctor: '[]'}),
+						_1: {
+							ctor: '::',
+							_0: A2(
+								_elm_lang$html$Html$ul,
+								{
+									ctor: '::',
+									_0: _elm_lang$html$Html_Attributes$class('pa0 center db w-75 w-50-m w-33-l f5 mt3'),
+									_1: {ctor: '[]'}
+								},
+								A2(
+									_elm_lang$core$List$map,
+									_user$project$Main$liMaker,
+									_user$project$Main$wordSearcher(model))),
+							_1: {ctor: '[]'}
+						}
+					}),
+				_1: {
+					ctor: '::',
+					_0: A2(
+						_elm_lang$html$Html$img,
+						{
+							ctor: '::',
+							_0: _elm_lang$html$Html_Attributes$class('ash absolute'),
+							_1: {
+								ctor: '::',
+								_0: _elm_lang$html$Html_Attributes$src('http://satoshipedia.altervista.org/wp-content/uploads/2015/12/ash_ketchum-467.png'),
+								_1: {
+									ctor: '::',
+									_0: _elm_lang$html$Html_Attributes$alt('Ash with pokeball'),
+									_1: {ctor: '[]'}
+								}
+							}
+						},
+						{ctor: '[]'}),
+					_1: {ctor: '[]'}
+				}
 			}
 		});
 };

diff --git a/index.html b/index.html
@@ -1,11 +1,15 @@
 <!DOCTYPE HTML>
 <html>
-
 <head>
   <meta charset="UTF-8">
   <title>Syntax workshop</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="text/javascript" src="/elm.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.8.1/tachyons.min.css" />
+  <link rel="stylesheet"
+   href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.8.1/tachyons.min.css" />
+  <link rel="stylesheet"
+   href="style.css" />
+   <link href="https://fonts.googleapis.com/css?family=Press+Start+2P|PT+Sans" rel="stylesheet">
 </head>
 
 <body>