Add part0
This commit is contained in:
Richard Feldman
23
part0/Main.elm
Normal file
23
part0/Main.elm
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
module Main exposing (..)
|
||||||
|
|
||||||
|
import Html exposing (..)
|
||||||
|
import Html.Attributes exposing (..)
|
||||||
|
|
||||||
|
|
||||||
|
elmHubHeader =
|
||||||
|
header []
|
||||||
|
[ -- TODO wrap the following text in an <h1>
|
||||||
|
text "ElmHub"
|
||||||
|
, span [ class "tagline" ]
|
||||||
|
[{- TODO put some text in here that says:
|
||||||
|
"Like GitHub, but for Elm things."
|
||||||
|
-}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
main =
|
||||||
|
div [ class "content" ]
|
||||||
|
[ -- TODO put the header here
|
||||||
|
ul [ class "results" ] []
|
||||||
|
]
|
||||||
25
part0/README.md
Normal file
25
part0/README.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
Part 1
|
||||||
|
======
|
||||||
|
|
||||||
|
The instructor will paste notes from the lesson, including code examples from
|
||||||
|
Q&A, in [this document](https://docs.google.com/document/d/1ApuSOk9DP0YsQrxhW7-WE8UOEAV4PPnLDDeqUOL2o5k/edit?usp=sharing).
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
elm-package install
|
||||||
|
```
|
||||||
|
|
||||||
|
(Answer `y` when prompted.)
|
||||||
|
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
```bash
|
||||||
|
elm-live Main.elm --open --output=elm.js
|
||||||
|
```
|
||||||
|
|
||||||
|
## References
|
||||||
|
* [html-to-elm](http://mbylstra.github.io/html-to-elm/) - paste in HTML, get elm-html code
|
||||||
|
* [elm-html documentation](http://package.elm-lang.org/packages/elm-lang/html/latest)
|
||||||
|
* [record syntax](http://elm-lang.org/docs/syntax#records) (e.g. `{ foo = 1, bar = 2 }`)
|
||||||
BIN
part0/elm-hub.png
Normal file
BIN
part0/elm-hub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
15
part0/elm-package.json
Normal file
15
part0/elm-package.json
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"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": "4.0.5 <= v < 5.0.0",
|
||||||
|
"elm-lang/html": "1.1.0 <= v < 2.0.0"
|
||||||
|
},
|
||||||
|
"elm-version": "0.17.0 <= v < 0.18.0"
|
||||||
|
}
|
||||||
20
part0/index.html
Normal file
20
part0/index.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>ElmHub</title>
|
||||||
|
<script type="text/javascript" src="elm.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.Main.fullscreen();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
101
part0/style.css
Normal file
101
part0/style.css
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
|
||||||
|
.content {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background-color: #FF9632;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user