Fix vpnDashboard CSS
diff --git a/views/ngXosViews/vpnDashboard/gulp/build.js b/views/ngXosViews/vpnDashboard/gulp/build.js
index 1ecffbd..b7de9e5 100644
--- a/views/ngXosViews/vpnDashboard/gulp/build.js
+++ b/views/ngXosViews/vpnDashboard/gulp/build.js
@@ -22,13 +22,17 @@
var inject = require('gulp-inject');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
+var mqpacker = require('css-mqpacker');
+var csswring = require('csswring');
var TEMPLATE_FOOTER = `}]);
angular.module('xos.vpnDashboard').run(function($location){$location.path('/')});
angular.bootstrap(angular.element('#xosVpnDashboard'), ['xos.vpnDashboard']);`;
module.exports = function(options){
-
+
// delete previous builded file
gulp.task('clean', function(){
return del(
@@ -37,6 +41,28 @@
);
});
+ // minify css
+ gulp.task('css', function () {
+ var processors = [
+ autoprefixer({browsers: ['last 1 version']}),
+ mqpacker,
+ csswring
+ ];
+
+ gulp.src([
+ `${options.css}**/*.css`,
+ `!${options.css}dev.css`
+ ])
+ .pipe(postcss(processors))
+ .pipe(gulp.dest(options.tmp + '/css/'));
+ });
+
+ gulp.task('copyCss', ['css'], function(){
+ return gulp.src([`${options.tmp}/css/*.css`])
+ .pipe(concat('xosVpnDashboard.css'))
+ .pipe(gulp.dest(options.static + 'css/'))
+ });
+
// compile and minify scripts
gulp.task('scripts', function() {
return gulp.src([
@@ -67,12 +93,15 @@
.pipe(replace(/<!-- bower:css -->(\n.*)*\n<!-- endbower --><!-- endcss -->/, ''))
.pipe(replace(/<!-- bower:js -->(\n.*)*\n<!-- endbower --><!-- endjs -->/, ''))
.pipe(replace(/ng-app=".*"\s/, ''))
+ // rewriting css path
+ // .pipe(replace(/(<link.*">)/, ''))
// injecting minified files
.pipe(
inject(
gulp.src([
options.static + 'js/vendor/xosVpnDashboardVendor.js',
- options.static + 'js/xosVpnDashboard.js'
+ options.static + 'js/xosVpnDashboard.js',
+ options.static + 'css/xosVpnDashboard.css'
]),
{ignorePath: '/../../../xos/core/xoslib'}
)
@@ -108,12 +137,14 @@
gulp.task('build', function() {
runSequence(
+ 'lint',
'templates',
'babel',
'scripts',
'wiredep',
'copyHtml',
+ 'copyCss',
'cleanTmp'
);
});
-};
\ No newline at end of file
+};
diff --git a/views/ngXosViews/vpnDashboard/gulpfile.js b/views/ngXosViews/vpnDashboard/gulpfile.js
index b2cdab8..a3523ee 100644
--- a/views/ngXosViews/vpnDashboard/gulpfile.js
+++ b/views/ngXosViews/vpnDashboard/gulpfile.js
@@ -5,6 +5,7 @@
var options = {
src: 'src/',
+ css: 'src/css/',
scripts: 'src/js/',
tmp: 'src/.tmp',
dist: 'dist/',
diff --git a/views/ngXosViews/vpnDashboard/karma.conf.js b/views/ngXosViews/vpnDashboard/karma.conf.js
index 83d3f63..dbd344a 100644
--- a/views/ngXosViews/vpnDashboard/karma.conf.js
+++ b/views/ngXosViews/vpnDashboard/karma.conf.js
@@ -26,6 +26,7 @@
// list of files / patterns to load in the browser
files: bowerComponents.concat([
+ 'src/css/**/*.css',
'../../static/js/xosApi.js',
'../../static/js/vendor/ngXosHelpers.js',
'src/js/**/*.js',
diff --git a/views/ngXosViews/vpnDashboard/src/css/dev.css b/views/ngXosViews/vpnDashboard/src/css/dev.css
deleted file mode 100644
index 4c504c9..0000000
--- a/views/ngXosViews/vpnDashboard/src/css/dev.css
+++ /dev/null
@@ -1,14 +0,0 @@
-#xosVpnDashboard{
- width: 70%;
- margin: auto;
-}
-.row {
- display: table-row;
-}
-.cell {
- display: table-cell;
- padding: 5px;
-}
-.header {
- font-weight: bold;
-}
diff --git a/views/ngXosViews/vpnDashboard/src/index.html b/views/ngXosViews/vpnDashboard/src/index.html
index b19740a..07f1017 100644
--- a/views/ngXosViews/vpnDashboard/src/index.html
+++ b/views/ngXosViews/vpnDashboard/src/index.html
@@ -3,7 +3,7 @@
<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.css" />
<!-- endbower --><!-- endcss -->
<!-- inject:css -->
-<link rel="stylesheet" href="/css/dev.css">
+<link rel="stylesheet" href="/css/vpnDashboard.css">
<!-- endinject -->
<div ng-app="xos.vpnDashboard" id="xosVpnDashboard">
diff --git a/views/ngXosViews/vpnDashboard/src/js/main.js b/views/ngXosViews/vpnDashboard/src/js/main.js
index a93f720..233051a 100644
--- a/views/ngXosViews/vpnDashboard/src/js/main.js
+++ b/views/ngXosViews/vpnDashboard/src/js/main.js
@@ -49,7 +49,7 @@
.then((vpns) => {
this.vpns = vpns;
for (var i = 0; i < this.vpns.length; i++) {
- var blob = new Blob([ this.vpns[i].script_text ], { type : 'text/plain' });
+ var blob = new Blob([this.vpns[i].script_text], {type: 'text/plain'});
this.vpns[i].script_text = (window.URL || window.webkitURL).createObjectURL( blob );
}
})
diff --git a/views/ngXosViews/vpnDashboard/src/templates/vpn-list.tpl.html b/views/ngXosViews/vpnDashboard/src/templates/vpn-list.tpl.html
index a8fa8f3..0c7635f 100644
--- a/views/ngXosViews/vpnDashboard/src/templates/vpn-list.tpl.html
+++ b/views/ngXosViews/vpnDashboard/src/templates/vpn-list.tpl.html
@@ -1,18 +1,18 @@
<div style="display: table;">
- <div class="row">
- <h1 class="cell">VPN List</h1>
+ <div class="vpn-row">
+ <h1 class="vpn-cell">VPN List</h1>
</div>
- <div class="row">
- <div class="cell header">ID</div>
- <div class="cell header">VPN Network</div>
- <div class="cell header">VPN Subnet</div>
- <div class="cell header">Script Link</div>
+ <div class="vpn-row">
+ <div class="vpn-cell vpn-header">ID</div>
+ <div class="vpn-cell vpn-header">VPN Network</div>
+ <div class="vpn-cell vpn-header">VPN Subnet</div>
+ <div class="vpn-cell vpn-header">Script Link</div>
</div>
- <div class="row" ng-repeat="vpn in vm.vpns">
- <div class="cell">{{ vpn.id }}</div>
- <div class="cell">{{ vpn.server_network }}</div>
- <div class="cell">{{ vpn.vpn_subnet }}</div>
- <div class="cell">
+ <div class="vpn-row" ng-repeat="vpn in vm.vpns">
+ <div class="vpn-cell">{{ vpn.id }}</div>
+ <div class="vpn-cell">{{ vpn.server_network }}</div>
+ <div class="vpn-cell">{{ vpn.vpn_subnet }}</div>
+ <div class="vpn-cell">
<a download="connect-{{ vpn.id }}.vpn" ng-href="{{ vpn.script_text }}">Script</a>
</div>
</div>