PeterCxy/worker-pastebin
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

basic style for the home component

Browse source 
at least it looks okay now. let's implement all the other stuff later
This commit is contained in:
Peter Cai 2020-02-17 21:14:05 +08:00
parent 9663de2e5e
commit 8fccf114f5
No known key found for this signature in database
GPG key ID: 71F5FB4E4F3FD54F
8 changed files with 248 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

187
package-lock.json generated
View file

@ -2012,6 +2012,38 @@
"randomfill": "^1.0.3"
}
},
"css-loader": {
"version": "3.4.2",
"resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.4.2.tgz?cache=0&sync_timestamp=1578676111891&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-loader%2Fdownload%2Fcss-loader-3.4.2.tgz",
"integrity": "sha1-0/2zNYtD8jO3hQHF7XscbaYTMgI=",
"dev": true,
"requires": {
"camelcase": "^5.3.1",
"cssesc": "^3.0.0",
"icss-utils": "^4.1.1",
"loader-utils": "^1.2.3",
"normalize-path": "^3.0.0",
"postcss": "^7.0.23",
"postcss-modules-extract-imports": "^2.0.0",
"postcss-modules-local-by-default": "^3.0.2",
"postcss-modules-scope": "^2.1.1",
"postcss-modules-values": "^3.0.0",
"postcss-value-parser": "^4.0.2",
"schema-utils": "^2.6.0"
},
"dependencies": {
"schema-utils": {
"version": "2.6.4",
"resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.6.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-2.6.4.tgz",
"integrity": "sha1-on779uTnhonZGHLuPM+lfXvdD1M=",
"dev": true,
"requires": {
"ajv": "^6.10.2",
"ajv-keywords": "^3.4.1"
}
}
}
},
"css-select": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@ -2030,6 +2062,12 @@
"integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
"dev": true
},
"cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/cssesc/download/cssesc-3.0.0.tgz",
"integrity": "sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4=",
"dev": true
},
"cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@ -3537,6 +3575,15 @@
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
"dev": true
},
"icss-utils": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz",
"integrity": "sha1-IRcLU3ie4nRHwvR91oMIFAP5pGc=",
"dev": true,
"requires": {
"postcss": "^7.0.14"
}
},
"ieee754": {
"version": "1.1.13",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@ -3565,6 +3612,12 @@
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
"dev": true
},
"indexes-of": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/indexes-of/download/indexes-of-1.0.1.tgz",
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
"dev": true
},
"infer-owner": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@ -4039,6 +4092,12 @@
"brorand": "^1.0.1"
}
},
"mime": {
"version": "2.4.4",
"resolved": "https://registry.npm.taobao.org/mime/download/mime-2.4.4.tgz",
"integrity": "sha1-vXuRE1/GsBzePpuuM9ZZtj2IV+U=",
"dev": true
},
"mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@ -4554,6 +4613,83 @@
"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
"dev": true
},
"postcss": {
"version": "7.0.26",
"resolved": "https://registry.npm.taobao.org/postcss/download/postcss-7.0.26.tgz?cache=0&sync_timestamp=1577751092087&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-7.0.26.tgz",
"integrity": "sha1-XtYVz8qzW6m7uCQUpPqI6hBClYc=",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"dev": true
}
}
},
"postcss-modules-extract-imports": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-2.0.0.tgz",
"integrity": "sha1-gYcZoa4doyX5gyRGsBE27rSTzX4=",
"dev": true,
"requires": {
"postcss": "^7.0.5"
}
},
"postcss-modules-local-by-default": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/postcss-modules-local-by-default/download/postcss-modules-local-by-default-3.0.2.tgz",
"integrity": "sha1-6KZWG+kUqvPAUodjd1JMqQ27eRU=",
"dev": true,
"requires": {
"icss-utils": "^4.1.1",
"postcss": "^7.0.16",
"postcss-selector-parser": "^6.0.2",
"postcss-value-parser": "^4.0.0"
}
},
"postcss-modules-scope": {
"version": "2.1.1",
"resolved": "https://registry.npm.taobao.org/postcss-modules-scope/download/postcss-modules-scope-2.1.1.tgz?cache=0&sync_timestamp=1574936968130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-scope%2Fdownload%2Fpostcss-modules-scope-2.1.1.tgz",
"integrity": "sha1-M9T8lGYC616TVcQWXWihBydonbo=",
"dev": true,
"requires": {
"postcss": "^7.0.6",
"postcss-selector-parser": "^6.0.0"
}
},
"postcss-modules-values": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/postcss-modules-values/download/postcss-modules-values-3.0.0.tgz",
"integrity": "sha1-W1AA1uuuKbQlUwG0o6VFdEI+fxA=",
"dev": true,
"requires": {
"icss-utils": "^4.0.0",
"postcss": "^7.0.6"
}
},
"postcss-selector-parser": {
"version": "6.0.2",
"resolved": "https://registry.npm.taobao.org/postcss-selector-parser/download/postcss-selector-parser-6.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-selector-parser%2Fdownload%2Fpostcss-selector-parser-6.0.2.tgz",
"integrity": "sha1-k0z3mdAWyDQRhZ4J3Oyt4BKG7Fw=",
"dev": true,
"requires": {
"cssesc": "^3.0.0",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
},
"postcss-value-parser": {
"version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-4.0.2.tgz",
"integrity": "sha1-SCKCwJpCcG0fyaBptz9E7Ag5Hck=",
"dev": true
},
"pretty-error": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz",
@ -5399,6 +5535,28 @@
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
"dev": true
},
"style-loader": {
"version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/style-loader/download/style-loader-1.1.3.tgz",
"integrity": "sha1-noJuacaDxNm/nbkk+F6auzDV4gA=",
"dev": true,
"requires": {
"loader-utils": "^1.2.3",
"schema-utils": "^2.6.4"
},
"dependencies": {
"schema-utils": {
"version": "2.6.4",
"resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.6.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-2.6.4.tgz",
"integrity": "sha1-on779uTnhonZGHLuPM+lfXvdD1M=",
"dev": true,
"requires": {
"ajv": "^6.10.2",
"ajv-keywords": "^3.4.1"
}
}
}
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@ -5619,6 +5777,12 @@
"set-value": "^2.0.1"
}
},
"uniq": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/uniq/download/uniq-1.0.1.tgz",
"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
"dev": true
},
"unique-filename": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
@ -5722,6 +5886,29 @@
}
}
},
"url-loader": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/url-loader/download/url-loader-3.0.0.tgz?cache=0&sync_timestamp=1574768599602&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Furl-loader%2Fdownload%2Furl-loader-3.0.0.tgz",
"integrity": "sha1-nx8Rs3Gs9uUe0VpQ22NeAu7Bg2g=",
"dev": true,
"requires": {
"loader-utils": "^1.2.3",
"mime": "^2.4.4",
"schema-utils": "^2.5.0"
},
"dependencies": {
"schema-utils": {
"version": "2.6.4",
"resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.6.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-2.6.4.tgz",
"integrity": "sha1-on779uTnhonZGHLuPM+lfXvdD1M=",
"dev": true,
"requires": {
"ajv": "^6.10.2",
"ajv-keywords": "^3.4.1"
}
}
}
},
"use": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

3
package.json
View file

@ -20,6 +20,7 @@
"babel-loader": "^8.0.6",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.5.1",
"css-loader": "^3.4.2",
"fast-xml-parser": "^3.16.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0",
@ -27,6 +28,8 @@
"raw-loader": "^4.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"style-loader": "^1.1.3",
"url-loader": "^3.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
}

BIN
src/web/assets/spikes.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

14
src/web/home.coffee Normal file
View file

@ -0,0 +1,14 @@
import React from "react"
import "./styles/home.css"
class Home extends React.Component
constructor: (props) ->
super props
render: ->
<div className="content-wrapper">
<div className="content">
</div>
</div>
export default Home

6
src/web/index.coffee
View file

@ -1,9 +1,9 @@
import React from "react"
import ReactDOM from "react-dom"
import "./styles/index.css"
import Home from "./home"
elem = document.createElement "div"
document.body.appendChild elem
ReactDOM.render <div>
<h1>Hello, world</h1>
</div>, elem
ReactDOM.render <Home/>, elem

28
src/web/styles/home.css Normal file
View file

@ -0,0 +1,28 @@
.content-wrapper {
width: 100vw;
padding-top: 100px;
padding-bottom: 100px;
background-image: url('../assets/spikes.png');
background-repeat: repeat;
text-align: center;
}
.content {
display: inline-block;
background-color: #FFFFFF;
width: 1000px;
height: 600px;
box-shadow: 0 2px 5px 5px rgba(0, 0, 0, 0.15);
border-radius: 20px;
}
/*
* 800 = 600 + 200
*/
@media screen and ( min-height: 800px ) {
.content-wrapper {
max-height: 100vh;
padding-top: calc((100vh - 600px) / 2);
padding-bottom: calc((100vh - 600px) / 2);
}
}

4
src/web/styles/index.css Normal file
View file

@ -0,0 +1,4 @@
body, html {
margin: 0px;
padding: 0px;
}

10
webpack.config.web.js
View file

@ -5,7 +5,7 @@ var path = require("path")
module.exports = {
target: "web",
entry: "./index-web.js",
mode: "production",
mode: "development",
output: {
path: path.resolve(__dirname, "./worker"),
filename: "web.js"
@ -26,6 +26,14 @@ module.exports = {
],
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif)$/,
use: [ 'url-loader' ]
},
{
test: /\.coffee$/,
use: [ 'babel-loader', 'coffee-loader' ]