From 20b97f753565696592b4af368265cc2792024a63 Mon Sep 17 00:00:00 2001 From: Thomas ten Cate Date: Thu, 25 Oct 2018 17:57:11 +0200 Subject: [PATCH] Switch building the app entirely to webpack See #34 --- app/Gruntfile.js | 37 ----------------------- app/css/{style.css => index.scss} | 22 +++++++++----- app/index.html | 2 -- app/js/index.js | 2 ++ app/package.json | 20 +++++++------ app/webpack.config.js | 49 +++++++++++++++++++++++++++++-- 6 files changed, 73 insertions(+), 59 deletions(-) delete mode 100644 app/Gruntfile.js rename app/css/{style.css => index.scss} (97%) diff --git a/app/Gruntfile.js b/app/Gruntfile.js deleted file mode 100644 index 95bd880..0000000 --- a/app/Gruntfile.js +++ /dev/null @@ -1,37 +0,0 @@ -module.exports = function(grunt) { - - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - webpack: { - dist: require('./webpack.config.js'), - }, - cssmin: { - dist: { - src: ['css/style.css'], - dest: 'dist/style.min.css', - }, - }, - imagemin: { - dist: { - src: ['images/sprites.png'], - dest: 'dist/sprites.png', - }, - options: { - optimizationLevel: 7, - }, - }, - copy: { - dist: { - src: 'index.html', - dest: 'dist/index.html', - }, - }, - }); - - grunt.loadNpmTasks('grunt-contrib-copy'); - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-imagemin'); - grunt.loadNpmTasks('grunt-webpack'); - - grunt.registerTask('default', ['webpack', 'cssmin', 'imagemin', 'copy']); -}; diff --git a/app/css/style.css b/app/css/index.scss similarity index 97% rename from app/css/style.css rename to app/css/index.scss index 0a6e689..38f76e3 100644 --- a/app/css/style.css +++ b/app/css/index.scss @@ -25,18 +25,22 @@ input, button { outline: 0; } -input[type="text"] { +input[type="text"], input:not([type]) { border: 1px solid transparent; background-color: transparent; color: inherit; font: inherit; } -input[type="text"]:not(:disabled):not(:focus):hover { +input[type="text"]:not(:disabled):not(:focus):hover, +input:not([type]):not(:disabled):not(:focus):hover, +{ border-color: #444; } -input[type="text"]:focus { +input[type="text"]:focus, +input:not([type]):focus, +{ color: #ccc; border-color: #666; background-color: #111; @@ -45,7 +49,9 @@ input[type="text"]:focus { 1px 1px 2px rgba(0, 0, 0, 1.0) inset; } -input[type="text"].ng-invalid { +input[type="text"].ng-invalid, +input:not([type]).ng-invalid, +{ border-color: #c44; } @@ -449,7 +455,7 @@ h1 a { } .closebutton { - content: '\u00d7'; + content: '\00d7'; font-weight: bold; width: 16px; height: 16px; @@ -649,7 +655,7 @@ h1 a { display: block; width: 15px; height: 15px; - background-image: url(sprites.png); + background-image: url(../images/sprites.png); border: 0; background-color: transparent; opacity: 0.4; @@ -909,7 +915,7 @@ h2:first-child { display: inline-block; width: 15px; height: 15px; - background: url(sprites.png); + background: url(../images/sprites.png); opacity: 0.7; transition: opacity 0.2s linear; } @@ -1056,7 +1062,7 @@ h2:first-child { margin: 1px 0; color: #000; background-color: #666; - background-image: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, transparent 100%), url(sprites.png); + background-image: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, transparent 100%), url(../images/sprites.png); background-position: 0 0, -61px -16px; border-radius: 2px; box-shadow: diff --git a/app/index.html b/app/index.html index d08b046..0d22e6f 100644 --- a/app/index.html +++ b/app/index.html @@ -4,7 +4,6 @@ jfxr -
@@ -194,7 +193,6 @@

Output

-