Tim/CryptoAssist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added basic HTML page

Browse Source
This commit is contained in:
Tim Stallard 2017-02-20 14:40:25 +00:00
parent 5779d4ac37
commit 39457fd4e8
5 changed files with 120 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
client/src/index.html
View File

@ -1 +1,44 @@
Hello World! <html>
<head>
<title>Cryptography Assistant</title>
</head>
<body>
<div id="header">
Header will go here
</div>
<div id="blocks">
<div class="block">
<div class="inputs">
<div id="input1">Input 1</div>
<div id="input2">Input 2</div>
</div>
<div class="main">
<div>
<div class="title">Test Block</div>
<div class="content">Custom code will go here</div>
</div>
</div>
<div class="output">
Output
</div>
</div>
</div>
<div id="workspace">
<div class="block">
<div class="inputs">
<div id="input1">Input 1</div>
<div id="input2">Input 2</div>
</div>
<div class="main">
<div>
<div class="title">Test Block</div>
<div class="content">Custom code will go here</div>
</div>
</div>
<div class="output">
Output
</div>
</div>
</div>
</body>
</html>

2
client/src/index.js
View File

@ -1 +1 @@
alert("Hello World 2"); require("./styles.scss");

54
client/src/styles.scss Normal file
View File

@ -0,0 +1,54 @@
html, body{
margin: 0;
border: 0;
font-family: sans-serif;
}
body{
display: flex;
flex-direction: column;
}
.block{
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
.inputs{
display: flex;
flex-direction: row;
>div{
border: 1px solid black;
flex-grow: 1;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
}
.main{
flex-grow: 1;
display: flex;
>div{
margin: auto;
>.title{
text-align: center;
}
}
}
>.output{
border: 1px solid black;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
}
#workspace{
position: relative;
.block{
position: absolute;
top: 40px;
left: 40px;
}
}

16
client/webpack.config.js
View File

@ -12,5 +12,21 @@ module.exports = {
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: "./index.html" template: "./index.html"
}) })
],
module: {
rules: [
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}
] ]
}
} }
//SASS code from https://github.com/jtangelder/sass-loader licensed under MIT, see https://github.com/jtangelder/sass-loader/blob/master/LICENSE

4
package.json
View File

@ -18,7 +18,11 @@
}, },
"homepage": "https://github.com/TimStallard/CryptoAssist#readme", "homepage": "https://github.com/TimStallard/CryptoAssist#readme",
"devDependencies": { "devDependencies": {
"css-loader": "^0.26.1",
"html-webpack-plugin": "^2.28.0", "html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"sass-loader": "^6.0.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1", "webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0" "webpack-dev-server": "^2.3.0"
} }