cerchez07/elm-0.19-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shift things back around.

Browse Source
This commit is contained in:
Richard Feldman
2016-03-25 22:22:32 -07:00
parent 627786b8ea
commit 817f897944
8 changed files with 10 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
stages/0/Main.elm
View File

@@ -1,86 +0,0 @@
module Main (..) where
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import StartApp.Simple as StartApp
main =
StartApp.start
{ view = view
, update = update
, model = initialModel
}
type alias Model =
{ query : String
, results : List SearchResult
}
type alias SearchResult =
{ id : ResultId
, name : String
, stars : Int
}
type alias ResultId =
Int
initialModel : Model
initialModel =
{ query = "tutorial"
, results =
[ { id = 1
, name = "TheSeamau5/elm-checkerboardgrid-tutorial"
, stars = 66
}
, { id = 2
, name = "grzegorzbalcerek/elm-by-example"
, stars = 41
}
, { id = 3
, name = "sporto/elm-tutorial-app"
, stars = 35
}
, { id = 4
, name = "jvoigtlaender/Elm-Tutorium"
, stars = 10
}
, { id = 5
, name = "sporto/elm-tutorial-assets"
, stars = 7
}
]
}
view address model =
div
[ class "content" ]
[ header
[]
[ h1 [] [ text "ElmHub" ]
, span [ class "tagline" ] [ text "“Like GitHub, but for Elm things.”" ]
]
, ul
[ class "results" ]
[{- TODO use model.results and viewSearchResults to display results -}]
]
viewSearchResult result =
li
[]
[ span [ class "star-count" ] [ text (toString result.stars) ]
-- TODO replace the following span with a link that opens in a new window!
, text result.name
]
update action model =
model

17
stages/0/README.md
View File

@@ -1,17 +0,0 @@
Stage 1
=======
## Installation
```bash
elm package install
```
(Answer `y` at the prompt. In rare cases a known issue can cause the download
to fail; in that case, just run `elm package install` again.)
## Building
```bash
elm live Main.elm --open -- --output=elm.js
```

BIN
stages/0/elm-hub.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

17
stages/0/elm-package.json
View File

@@ -1,17 +0,0 @@
{
"version": "1.0.0",
"summary": "Like GitHub, but for Elm stuff.",
"repository": "https://github.com/rtfeldman/elm-workshop.git",
"license": "BSD-3-Clause",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "3.0.0 <= v < 4.0.0",
"evancz/elm-effects": "2.0.0 <= v < 3.0.0",
"evancz/elm-html": "4.0.0 <= v < 5.0.0",
"evancz/start-app": "2.0.0 <= v < 3.0.0"
},
"elm-version": "0.16.0 <= v < 0.17.0"
}

26
stages/0/index.html
View File

@@ -1,26 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ElmHub</title>
<script type="text/javascript" src="elm.js"></script>
<!-- Uncomment the below line to enable elm-reactor support. -->
<!-- <script type="text/javascript" src="/_reactor/debug.js"></script> -->
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="elm-hub.png">
</head>
<body>
</body>
<script type="text/javascript">
var app = Elm.fullscreen(Elm.Main, {});
// Uncomment this line and comment out the above to enable elm-reactor support.
// var app = Elm.fullscreenDebug("ElmHub", "ElmHub.elm");
</script>
</html>

91
stages/0/style.css
View File

@@ -1,91 +0,0 @@
.content {
width: 960px;
margin: 0 auto;
padding: 30px;
font-family: Helvetica, Arial, serif;
}
header {
position: relative;
padding: 6px 12px;
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;
}

18
stages/1/Main.elm
View File

@@ -30,6 +30,10 @@ type alias ResultId =
Int Int
{- See https://developer.github.com/v3/search/#example -}
initialModel : Model initialModel : Model
initialModel = initialModel =
{ query = "tutorial" { query = "tutorial"
@@ -58,13 +62,14 @@ initialModel =
} }
view address model = view : Address Action -> Model -> Html
view model =
div div
[ class "content" ] [ class "content" ]
[ header [ header
[] []
[ h1 [] [ text "ElmHub" ] [ -- TODO add the equivalent of <h1>ElmHub</h1> right before the tagline
, span [ class "tagline" ] [ text "“Like GitHub, but for Elm things.”" ] span [ class "tagline" ] [ text "“Like GitHub, but for Elm things.”" ]
] ]
, ul , ul
[ class "results" ] [ class "results" ]
@@ -72,14 +77,11 @@ view address model =
] ]
viewSearchResult : SearchResult -> Html
viewSearchResult result = viewSearchResult result =
li li
[] []
[ span [ class "star-count" ] [ text (toString result.stars) ] [ span [ class "star-count" ] [ text (toString result.stars) ]
-- TODO replace the following span with a link that opens in a new window! -- TODO replace the following with a link that opens in a new window!
, text result.name , text result.name
] ]
update action model =
model

4
stages/2/Main.elm
View File

@@ -4,10 +4,6 @@ import Html exposing (..)
import Html.Attributes exposing (..) import Html.Attributes exposing (..)
import Html.Events exposing (..) import Html.Events exposing (..)
import StartApp.Simple as StartApp import StartApp.Simple as StartApp
import Task exposing (Task)
import Effects exposing (Effects)
import Json.Decode exposing (Decoder, (:=))
import Json.Encode
import Signal exposing (Address) import Signal exposing (Address)