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

Update style.css and some READMEs

Browse Source
This commit is contained in:
Richard Feldman
2016-03-25 21:56:40 -07:00
parent 6eb27596a8
commit 627786b8ea
23 changed files with 289 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
stages/0/Main.elm Normal file
View File

@@ -0,0 +1,86 @@
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 Normal file
View File

@@ -0,0 +1,17 @@
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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@@ -0,0 +1,17 @@
{
"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 Normal file
View File

@@ -0,0 +1,26 @@
<!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 Normal file
View File

@@ -0,0 +1,91 @@
.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;
}

1
stages/1/Main.elm
View File

@@ -2,7 +2,6 @@ module Main (..) where
import Html exposing (..) import Html exposing (..)
import Html.Attributes exposing (..) import Html.Attributes exposing (..)
import Html.Events exposing (..)
import StartApp.Simple as StartApp import StartApp.Simple as StartApp

4
stages/2/README.md
View File

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

6
stages/2/style.css
View File

@@ -40,15 +40,15 @@ h1 {
.star-count { .star-count {
font-weight: bold; font-weight: bold;
margin-right: 16px;
} }
.result-name { a {
color: rgb(96, 181, 204); color: rgb(96, 181, 204);
margin-left: 16px;
text-decoration: none; text-decoration: none;
} }
.result-name:hover{ a:hover {
text-decoration: underline; text-decoration: underline;
} }

4
stages/3/README.md
View File

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

6
stages/3/style.css
View File

@@ -40,15 +40,15 @@ h1 {
.star-count { .star-count {
font-weight: bold; font-weight: bold;
margin-right: 16px;
} }
.result-name { a {
color: rgb(96, 181, 204); color: rgb(96, 181, 204);
margin-left: 16px;
text-decoration: none; text-decoration: none;
} }
.result-name:hover{ a:hover {
text-decoration: underline; text-decoration: underline;
} }

4
stages/4/README.md
View File

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

6
stages/4/style.css
View File

@@ -40,15 +40,15 @@ h1 {
.star-count { .star-count {
font-weight: bold; font-weight: bold;
margin-right: 16px;
} }
.result-name { a {
color: rgb(96, 181, 204); color: rgb(96, 181, 204);
margin-left: 16px;
text-decoration: none; text-decoration: none;
} }
.result-name:hover{ a:hover {
text-decoration: underline; text-decoration: underline;
} }

8
stages/5/README.md
View File

@@ -4,7 +4,7 @@ Stage 5
## Installation ## Installation
```bash ```bash
$ elm package install elm package install
``` ```
(Answer `y` at the prompt. In rare cases a known issue can cause the download (Answer `y` at the prompt. In rare cases a known issue can cause the download
@@ -13,12 +13,12 @@ to fail; in that case, just run `elm package install` again.)
## Building ## Building
```bash ```bash
$ elm live Main.elm --open -- --output=elm.js elm live Main.elm --open -- --output=elm.js
``` ```
## Running Tests ## Running Tests
```bash ```bash
$ cd test cd test
$ elm test TestRunner.elm elm test TestRunner.elm
``` ```

6
stages/5/style.css
View File

@@ -40,15 +40,15 @@ h1 {
.star-count { .star-count {
font-weight: bold; font-weight: bold;
margin-right: 16px;
} }
.result-name { a {
color: rgb(96, 181, 204); color: rgb(96, 181, 204);
margin-left: 16px;
text-decoration: none; text-decoration: none;
} }
.result-name:hover{ a:hover {
text-decoration: underline; text-decoration: underline;
} }

10
stages/6/README.md
View File

@@ -4,7 +4,7 @@ Stage 5
## Installation ## Installation
```bash ```bash
$ elm package install elm package install
``` ```
(Answer `y` at the prompt. In rare cases a known issue can cause the download (Answer `y` at the prompt. In rare cases a known issue can cause the download
@@ -13,13 +13,13 @@ to fail; in that case, just run `elm package install` again.)
## Building ## Building
```bash ```bash
$ elm live Main.elm --open -- --output=elm.js elm live Main.elm --open -- --output=elm.js
``` ```
## Running Tests ## Running Tests
```bash ```bash
$ cd test cd test
$ elm package install elm package install
$ elm test TestRunner.elm elm test TestRunner.elm
``` ```

6
stages/6/style.css
View File

@@ -40,15 +40,15 @@ h1 {
.star-count { .star-count {
font-weight: bold; font-weight: bold;
margin-right: 16px;
} }
.result-name { a {
color: rgb(96, 181, 204); color: rgb(96, 181, 204);
margin-left: 16px;
text-decoration: none; text-decoration: none;
} }
.result-name:hover{ a:hover {
text-decoration: underline; text-decoration: underline;
} }

10
stages/7/README.md
View File

@@ -4,7 +4,7 @@ Stage 5
## Installation ## Installation
```bash ```bash
$ elm package install elm package install
``` ```
(Answer `y` at the prompt. In rare cases a known issue can cause the download (Answer `y` at the prompt. In rare cases a known issue can cause the download
@@ -13,13 +13,13 @@ to fail; in that case, just run `elm package install` again.)
## Building ## Building
```bash ```bash
$ elm live Main.elm --open -- --output=elm.js elm live Main.elm --open -- --output=elm.js
``` ```
## Running Tests ## Running Tests
```bash ```bash
$ cd test cd test
$ elm package install elm package install
$ elm test TestRunner.elm elm test TestRunner.elm
``` ```

6
stages/7/style.css
View File

@@ -40,15 +40,15 @@ h1 {
.star-count { .star-count {
font-weight: bold; font-weight: bold;
margin-right: 16px;
} }
.result-name { a {
color: rgb(96, 181, 204); color: rgb(96, 181, 204);
margin-left: 16px;
text-decoration: none; text-decoration: none;
} }
.result-name:hover{ a:hover {
text-decoration: underline; text-decoration: underline;
} }

10
stages/8/README.md
View File

@@ -4,7 +4,7 @@ Stage 5
## Installation ## Installation
```bash ```bash
$ elm package install elm package install
``` ```
(Answer `y` at the prompt. In rare cases a known issue can cause the download (Answer `y` at the prompt. In rare cases a known issue can cause the download
@@ -13,13 +13,13 @@ to fail; in that case, just run `elm package install` again.)
## Building ## Building
```bash ```bash
$ elm live Main.elm --open -- --output=elm.js elm live Main.elm --open -- --output=elm.js
``` ```
## Running Tests ## Running Tests
```bash ```bash
$ cd test cd test
$ elm package install elm package install
$ elm test TestRunner.elm elm test TestRunner.elm
``` ```

21
stages/8/style.css
View File

@@ -40,15 +40,15 @@ h1 {
.star-count { .star-count {
font-weight: bold; font-weight: bold;
margin-right: 16px;
} }
.result-name { a {
color: rgb(96, 181, 204); color: rgb(96, 181, 204);
margin-left: 16px;
text-decoration: none; text-decoration: none;
} }
.result-name:hover{ a:hover {
text-decoration: underline; text-decoration: underline;
} }
@@ -89,18 +89,3 @@ h1 {
button:focus, input:focus { button:focus, input:focus {
outline: none; outline: none;
} }
.expand-result {
padding: 4px 8px;
font-size: 16px;
color: white;
border: 1px solid #ccc;
background-color: rgb(96, 181, 204);
margin-left: 12px;
cursor: pointer;
}
.expand-result:hover {
color: rgb(96, 181, 204);
background-color: white;
}

6
stages/9/README.md
View File

@@ -4,7 +4,7 @@ Stage 5
## Installation ## Installation
```bash ```bash
$ elm package install elm package install
``` ```
(Answer `y` at the prompt. In rare cases a known issue can cause the download (Answer `y` at the prompt. In rare cases a known issue can cause the download
@@ -13,11 +13,11 @@ to fail; in that case, just run `elm package install` again.)
## Building ## Building
```bash ```bash
$ elm live Main.elm --open -- --output=elm.js elm live Main.elm --open -- --output=elm.js
``` ```
## Compiling CSS ## Compiling CSS
```bash ```bash
$ elm test css/Stylesheets.elm elm test css/Stylesheets.elm
``` ```

21
stages/9/style.css
View File

@@ -40,15 +40,15 @@ h1 {
.star-count { .star-count {
font-weight: bold; font-weight: bold;
margin-right: 16px;
} }
.result-name { a {
color: rgb(96, 181, 204); color: rgb(96, 181, 204);
margin-left: 16px;
text-decoration: none; text-decoration: none;
} }
.result-name:hover{ a:hover {
text-decoration: underline; text-decoration: underline;
} }
@@ -89,18 +89,3 @@ h1 {
button:focus, input:focus { button:focus, input:focus {
outline: none; outline: none;
} }
.expand-result {
padding: 4px 8px;
font-size: 16px;
color: white;
border: 1px solid #ccc;
background-color: rgb(96, 181, 204);
margin-left: 12px;
cursor: pointer;
}
.expand-result:hover {
color: rgb(96, 181, 204);
background-color: white;
}