Shift all the parts up a number.

part11/ElmHub.elm

@@ -3,7 +3,6 @@ module ElmHub (..) where
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
-import Html.Lazy exposing (..)
 import Http
 import Auth
 import Task exposing (Task)
@@ -74,20 +73,14 @@ viewSearchResults address results =
     |> Dict.values
     |> List.sortBy (.stars >> negate)
     |> filterResults
-    |> List.map (lazy3 SearchResult.view address DeleteById)
+    |> List.map (SearchResult.view address DeleteById)
 
 
 filterResults : List SearchResult.Model -> List SearchResult.Model
 filterResults results =
-  case results of
-    [] ->
-      []
-
-    result :: rest ->
-      if result.stars > 0 then
-        result :: (filterResults rest)
-      else
-        filterResults rest
+  -- TODO filter out repos with 0 stars
+  -- using a case-expression rather than List.filter
+  results
 
 
 onInput address wrap =

part11/ElmHub/Css.elm

@@ -1,14 +0,0 @@
-module ElmHub.Css (..) where
-
-import Css exposing (..)
-
-
-css =
-  stylesheet
-    [ ((.) "content")
-        [ width (px 960)
-        , margin2 zero auto
-        , padding (px 30)
-        , fontFamilies [ "Helvetica", "Arial", "serif" ]
-        ]
-    ]

part11/README.md

@@ -1,4 +1,4 @@
-Part 11
+Part 10
 =======
 
 ## Installation
@@ -15,9 +15,3 @@ to fail; in that case, just run `elm package install` again.)
 ```bash
 elm live Main.elm --open -- --output=elm.js
 ```
-
-## Compiling CSS
-
-```bash
-elm css Stylesheets.elm
-```

part11/SearchResult.elm

@@ -34,7 +34,13 @@ view address delete result =
     []
     [ span [ class "star-count" ] [ text (toString result.stars) ]
     , a
-        [ href ("https://github.com/" ++ result.name)
+        [ href
+            ("https://github.com/"
+              ++ (Debug.log
+                    "TODO we should not see this when typing in the search box!"
+                    result.name
+                 )
+            )
         , target "_blank"
         ]
         [ text result.name ]

part11/Stylesheets.elm

@@ -1,10 +0,0 @@
-module Stylesheets (..) where
-
-import Css.File exposing (..)
-import ElmHub.Css
-
-
-port files : CssFileStructure
-port files =
-  toFileStructure
-    [ ( "style.css", compile ElmHub.Css.css ) ]

part11/elm-package.json

@@ -12,8 +12,7 @@
         "evancz/elm-effects": "2.0.0 <= v < 3.0.0",
         "evancz/elm-html": "4.0.0 <= v < 5.0.0",
         "evancz/elm-http": "3.0.0 <= v < 4.0.0",
-        "evancz/start-app": "2.0.0 <= v < 3.0.0",
-        "rtfeldman/elm-css": "1.0.0 <= v < 2.0.0"
+        "evancz/start-app": "2.0.0 <= v < 3.0.0"
     },
     "elm-version": "0.16.0 <= v < 0.17.0"
 }

part11/style.css

@@ -1,6 +1,92 @@
+
 .content {
-    width: 960px;
-    margin: 0 auto;
-    padding: 30px;
-    font-family: Helvetica, Arial, serif;
+  width: 960px;
+  margin: 0 auto;
+  padding: 30px;
+  font-family: Helvetica, Arial, serif;
+}
+
+header {
+  position: relative;
+  padding: 6px 12px;
+  height: 36px;
+  background-color: rgb(96, 181, 204);
+}
+
+h1 {
+  color: white;
+  font-weight: normal;
+  margin: 0;
+}
+
+.tagline {
+  color: #eee;
+  position: absolute;
+  right: 16px;
+  top: 12px;
+  font-size: 24px;
+  font-style: italic;
+}
+
+.results {
+  list-style-image: url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png');
+  list-style-position: inside;
+  padding: 0;
+}
+
+.results li {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.star-count {
+  font-weight: bold;
+  margin-right: 16px;
+}
+
+a {
+  color: rgb(96, 181, 204);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.search-query {
+  padding: 8px;
+  font-size: 24px;
+  margin-bottom: 18px;
+  margin-top: 36px;
+}
+
+.search-button {
+  padding: 8px 16px;
+  font-size: 24px;
+  color: white;
+  border: 1px solid #ccc;
+  background-color: rgb(96, 181, 204);
+  margin-left: 12px
+}
+
+.search-button:hover {
+  color: rgb(96, 181, 204);
+  background-color: white;
+}
+
+.hide-result {
+  background-color: transparent;
+  border: 0;
+  font-weight: bold;
+  font-size: 18px;
+  margin-left: 18px;
+  cursor: pointer;
+}
+
+.hide-result:hover {
+  color: rgb(96, 181, 204);
+}
+
+button:focus, input:focus {
+  outline: none;
 }