use latest imba version
While at it upgrade all dependencies and move some styles into their respective files.
This commit is contained in:
Alexander Alemayhu
parent
c9f2bb8d0f
commit
a79ab9c6fb
14
package.json
14
package.json
|
|
@ -21,18 +21,18 @@
|
|||
"homepage": "http://imba.io",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/somebee/hello-world-imba.git"
|
||||
"url": "git://github.com/imba/hello-world-imba.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"css-loader": "^3.2.0",
|
||||
"css-loader": "^3.6.0",
|
||||
"express": "^4.17.1",
|
||||
"imba": "^1.5.2",
|
||||
"style-loader": "^1.0.0",
|
||||
"webpack": "^4.39.3",
|
||||
"webpack-dev-server": "^3.8.0"
|
||||
"imba": "^2.0.0-alpha.95",
|
||||
"style-loader": "^1.2.1",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack-cli": "^3.3.7"
|
||||
"webpack-cli": "^3.3.12"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,16 +11,37 @@ var store = {
|
|||
]
|
||||
}
|
||||
|
||||
css header, footer
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 10px 6px;
|
||||
background: #e8e8e8;
|
||||
|
||||
css .vbox d: flex fld: column jc: center ai: stretch
|
||||
|
||||
tag App
|
||||
|
||||
css button -webkit-appearance: none
|
||||
bg: #4a95eb bg@hover: #3a8eef fs: 13px d: flex
|
||||
ai: center jc: center bd: 0px
|
||||
p: 2px 10px rd: 2px c: white
|
||||
m: 0px 4px fl: 0 0 auto h: 24px
|
||||
css input d: block p: 0px 12px bg: transparent
|
||||
bd: none fs: inherit w: 50px h: 24px
|
||||
fl: 1 1 auto
|
||||
|
||||
def addItem
|
||||
data:items.push(title: data:title)
|
||||
data:title = ""
|
||||
data.items.push(title: $title.value)
|
||||
$title.value = ""
|
||||
|
||||
def render
|
||||
<self.{vbox}>
|
||||
<header>
|
||||
<input[data:title] placeholder="New..." :keyup.enter.addItem>
|
||||
<button :tap.addItem> 'Add item'
|
||||
<List list=data:items>
|
||||
<input$title placeholder="New..." @keyup.enter.addItem()>
|
||||
<button @click.addItem()> 'Add item'
|
||||
<List list=data.items>
|
||||
|
||||
Imba.mount <App[store]>
|
||||
imba.mount <App data=store>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
export tag List
|
||||
|
||||
css .completed td: line-through
|
||||
css ul m: 0 p: 0
|
||||
list-style: none inside none
|
||||
fl: 1 1 auto
|
||||
css li p: 8px 12px d: flex fld: row
|
||||
jc: flex-start ai: center
|
||||
bdb: 1px solid whitesmoke
|
||||
|
||||
prop list
|
||||
|
||||
def completeItem item
|
||||
console.log "clicked,{item:completed}"
|
||||
item:completed = !item:completed
|
||||
console.log "clicked,{item.completed}"
|
||||
item.completed = !item.completed
|
||||
|
||||
def render
|
||||
<self>
|
||||
<ul> for item in list
|
||||
<li .completed=(item:completed) :tap.completeItem(item)> item:title
|
||||
<li .completed=(item.completed) @click.completeItem(item)> item.title
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
var express = require 'express'
|
||||
var server = express()
|
||||
import express from 'express'
|
||||
const server = express()
|
||||
|
||||
server.use(express.static('./dist'))
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ server.get '/' do |req,res|
|
|||
|
||||
return res.send html.toString
|
||||
|
||||
var port = process:env.PORT or 8080
|
||||
var port = process.env.PORT or 8080
|
||||
|
||||
var server = server.listen(port) do
|
||||
server.listen(port) do
|
||||
console.log 'server is running on port ' + port
|
||||
|
|
|
|||
|
|
@ -21,78 +21,6 @@ body {
|
|||
background: white;
|
||||
}
|
||||
|
||||
.vbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
body,div,form,header,footer,section,input,button,nav,aside,article {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div,section,input,ul,main,article,.grow {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
padding: 0px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-appearance: none;
|
||||
background: #4a95eb;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
margin: 0px 4px;
|
||||
flex: 0 0 auto;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #3a8eef;
|
||||
}
|
||||
|
||||
header,footer {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 10px 6px;
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none inside none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.completed {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue