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
stages/0/Main.elm
+86
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
stages/0/README.md
+17
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
```
stages/0/elm-hub.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

stages/0/elm-package.json
+17
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"
}
stages/0/index.html
+26
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>
stages/0/style.css
+91
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;
}
stages/1/Main.elm
-1
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
stages/2/README.md
+2 -2
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
``` ```
stages/2/style.css
+3 -3
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;
} }
stages/3/README.md
+2 -2
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
``` ```
stages/3/style.css
+3 -3
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;
} }
stages/4/README.md
+2 -2
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
``` ```
stages/4/style.css
+3 -3
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;
} }
stages/5/README.md
+4 -4
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
``` ```
stages/5/style.css
+3 -3
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;
} }
stages/6/README.md
+5 -5
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
``` ```
stages/6/style.css
+3 -3
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;
} }
stages/7/README.md
+5 -5
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
``` ```
stages/7/style.css
+3 -3
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;
} }
stages/8/README.md
+5 -5
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
``` ```
stages/8/style.css
+3 -18
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;
}
stages/9/README.md
+3 -3
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
``` ```
stages/9/style.css
+3 -18
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;
}