Basic layout styling and component tweaks. Moved Bootstrap dependencies behind Webpack and CSS into Sass.
This commit is contained in:
Alex Hunt
parent
0ea2c0524a
commit
e7d1993a30
16
package.json
16
package.json
|
|
@ -11,7 +11,9 @@
|
|||
"author": "Alex Hunt",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.0.0-beta.2",
|
||||
"object-assign": "^4.1.1",
|
||||
"popper.js": "^1.12.6",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-redux": "^5.0.6",
|
||||
|
|
@ -23,11 +25,15 @@
|
|||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"clean-webpack-plugin": "^0.1.17",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"css-loader": "^0.28.7",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"manifest-revision-webpack-plugin": "^0.4.1",
|
||||
"node-sass": "^4.6.0",
|
||||
"postcss-loader": "^2.0.8",
|
||||
"precss": "^2.0.0",
|
||||
"sass-loader": "^6.0.6",
|
||||
"style-loader": "^0.19.0",
|
||||
"sync-exec": "^0.6.2",
|
||||
"webpack": "^3.8.1",
|
||||
"webpack-dev-server": "^2.9.3",
|
||||
"webpack-manifest-plugin": "^1.3.2"
|
||||
"webpack": "^3.8.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
/*@import "custom";*/
|
||||
@import "node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-color: rgba(211,211,211,1);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background: -webkit-linear-gradient(-15deg, #9b9b9b, #e8e8e8); /* For Safari 5.1 to 6.0 */
|
||||
background: -o-linear-gradient(-15deg, #9b9b9b, #e8e8e8); /* For Opera 11.1 to 12.0 */
|
||||
background: -moz-linear-gradient(-15deg, #9b9b9b, #e8e8e8); /* For Firefox 3.6 to 15 */
|
||||
background: linear-gradient(-15deg, #9b9b9b, #e8e8e8); /* Standard syntax */
|
||||
}
|
||||
|
||||
nav.navbar {
|
||||
background-color: rgba(10,10,10,1);
|
||||
background: -webkit-linear-gradient(0, #0f0f0f, #303030); /* For Safari 5.1 to 6.0 */
|
||||
background: -o-linear-gradient(0, #0f0f0f, #303030); /* For Opera 11.1 to 12.0 */
|
||||
background: -moz-linear-gradient(0, #0f0f0f, #303030); /* For Firefox 3.6 to 15 */
|
||||
background: linear-gradient(0, #0f0f0f, #303030); /* Standard syntax */
|
||||
box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
a.navbar-brand {
|
||||
margin-left: 2%;
|
||||
font-size: 1.8em;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #b7b7b7;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#wrapper > div {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#joyce_reader {
|
||||
overflow: hidden;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
background-color: rgba(256,256,256,0.5);
|
||||
border-left: 1px solid rgba(120,120,120,0.7);
|
||||
border-right: 1px solid rgba(120,120,120,0.7)
|
||||
}
|
||||
|
||||
#joyce_reader > div {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
background-color: rgba(250,250,250,.8);
|
||||
margin: -2.5% 1.2% 1.5% 3%;
|
||||
padding: 1%;
|
||||
border: 1px solid rgba(120,120,120,.6);
|
||||
border-radius: 0 0 5px 5px;
|
||||
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#content_window {
|
||||
height: 44em;
|
||||
background-color: rgba(250,250,250,.8);
|
||||
margin: 0 3% 1.5% 1.1%;
|
||||
padding: 2% 2%;
|
||||
border: 1px solid rgba(120,120,120,.6);
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#page {
|
||||
height: 100%;
|
||||
background-color: rgba(256,256,256,.8);
|
||||
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
|
||||
padding: 3% 8%;
|
||||
border: 1px solid rgba(120,120,120,.6);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#page h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#page h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#highlight_button > button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar_spacer {
|
||||
margin: 3% 0;
|
||||
border: 1px solid rgba(120,120,120,.6);
|
||||
}
|
||||
|
||||
.chapter_button > button {
|
||||
width: 100%;
|
||||
margin: 1% 0 1% 0;
|
||||
}
|
||||
|
|
@ -2,19 +2,14 @@
|
|||
<head>
|
||||
<title>Joyce</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
|
||||
<!-- <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"> -->
|
||||
<link rel="manifest" href="static/js/manifest.json">
|
||||
|
||||
<!-- TODO: Swap CDN Links for Bower / Yarn -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<link rel="icon" type="image/png" href="static/image/icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Reader Layout -->
|
||||
<div id="joyce_reader" class="container-fluid">
|
||||
<div id="wrapper">
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="{{asset_url_for('reader.js')}}"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
|
|
@ -7,19 +7,22 @@ const path = require('path');
|
|||
const rootAssetPath = './src/';
|
||||
|
||||
let pathsToClean = [
|
||||
'static/js/'
|
||||
'static/'
|
||||
]
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
reader: [
|
||||
rootAssetPath + 'reader'
|
||||
]
|
||||
rootAssetPath + 'reader',
|
||||
rootAssetPath + 'stylesheets/' + 'reader.scss'
|
||||
],
|
||||
// style: [
|
||||
// ]
|
||||
},
|
||||
output: {
|
||||
publicPath: "static/js/",
|
||||
filename: 'reader.[chunkhash].js',
|
||||
path: path.resolve(__dirname, 'static/js')
|
||||
path: path.resolve(__dirname, 'static/js/')
|
||||
},
|
||||
watch: true,
|
||||
watchOptions: {
|
||||
|
|
@ -27,21 +30,47 @@ module.exports = {
|
|||
ignored: /node_modules/
|
||||
},
|
||||
module : {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js)$/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['env', 'react']
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(scss)$/,
|
||||
use: [{
|
||||
loader: 'style-loader', // inject CSS to page
|
||||
}, {
|
||||
loader: 'css-loader', // translates CSS into CommonJS modules
|
||||
}, {
|
||||
loader: 'postcss-loader', // Run post css actions
|
||||
options: {
|
||||
plugins: [
|
||||
require('precss'),
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
}, {
|
||||
loader: 'sass-loader' // compiles SASS to CSS
|
||||
}]
|
||||
}
|
||||
]},
|
||||
plugins: [
|
||||
// TODO: Dev / Prod Config
|
||||
// new webpack.optimize.UglifyJsPlugin(),
|
||||
new ManifestRevisionPlugin(path.join('static/js', 'manifest.json'), {
|
||||
rootAssetPath: rootAssetPath
|
||||
}),
|
||||
new webpack.ProvidePlugin({
|
||||
$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
'window.jQuery': 'jquery',
|
||||
Popper: ['popper.js', 'default']
|
||||
}),
|
||||
new CleanWebpackPlugin(pathsToClean)
|
||||
],
|
||||
};
|
||||
Loading…
Reference in New Issue