Add color to labels in dark mode (#70)

.gitignore

@@ -9,3 +9,4 @@ dist
 mango
 .env
 *.md
+public/css/uikit.css

gulpfile.js

@@ -1,6 +1,7 @@
 const gulp = require('gulp');
 const minify = require("gulp-babel-minify");
 const minifyCss = require('gulp-minify-css');
+const less = require('gulp-less');
 
 gulp.task('minify-js', () => {
 	return gulp.src('public/js/*.js')
@@ -10,6 +11,12 @@ gulp.task('minify-js', () => {
 		.pipe(gulp.dest('dist/js'));
 });
 
+gulp.task('less', () => {
+	return gulp.src('src/assets/*.less')
+		.pipe(less())
+		.pipe(gulp.dest('public/css'));
+});
+
 gulp.task('minify-css', () => {
 	return gulp.src('public/css/*.css')
 		.pipe(minifyCss())
@@ -26,4 +33,4 @@ gulp.task('favicon', () => {
 		.pipe(gulp.dest('dist'));
 });
 
-gulp.task('default', gulp.parallel('minify-js', 'minify-css', 'img', 'favicon'));
+gulp.task('default', gulp.parallel('minify-js', gulp.series('less', 'minify-css'), 'img', 'favicon'));

package.json

@@ -8,9 +8,14 @@
   "devDependencies": {
     "gulp": "^4.0.2",
     "gulp-babel-minify": "^0.5.1",
-    "gulp-minify-css": "^1.2.4"
+    "gulp-less": "^4.0.1",
+    "gulp-minify-css": "^1.2.4",
+    "less": "^3.11.3"
   },
   "scripts": {
     "uglify": "gulp"
+  },
+  "dependencies": {
+    "uikit": "^3.5.4"
   }
 }

public/js/download-manager.js

@@ -24,7 +24,9 @@ const loadConfig = () => {
 const remove = (id) => {
 	var url = base_url + 'api/admin/mangadex/queue/delete';
 	if (id !== undefined)
-		url += '?' + $.param({id: id});
+		url += '?' + $.param({
+			id: id
+		});
 	console.log(url);
 	$.ajax({
 			type: 'POST',
@@ -45,7 +47,9 @@ const remove = (id) => {
 const refresh = (id) => {
 	var url = base_url + 'api/admin/mangadex/queue/retry';
 	if (id !== undefined)
-		url += '?' + $.param({id: id});
+		url += '?' + $.param({
+			id: id
+		});
 	console.log(url);
 	$.ajax({
 			type: 'POST',
@@ -100,13 +104,15 @@ const load = () => {
 			$('#pause-resume-btn').text(btnText);
 			$('#pause-resume-btn').removeAttr('hidden');
 			const rows = data.jobs.map(obj => {
-			var cls = 'uk-label ';
+				var cls = 'label ';
+				if (obj.status === 'Pending')
+					cls += 'label-pending';
 				if (obj.status === 'Completed')
-				cls += 'uk-label-success';
+					cls += 'label-success';
 				if (obj.status === 'Error')
-				cls += 'uk-label-danger';
+					cls += 'label-danger';
 				if (obj.status === 'MissingPages')
-				cls += 'uk-label-warning';
+					cls += 'label-warning';
 
 				const info = obj.status_message.length > 0 ? '<span uk-icon="info"></span>' : '';
 				const statusSpan = `<span class="${cls}">${obj.status} ${info}</span>`;

src/assets/uikit.less

@@ -0,0 +1,33 @@
+@import "node_modules/uikit/src/less/uikit.theme.less";
+
+.label {
+    display: inline-block;
+    padding: @label-padding-vertical @label-padding-horizontal;
+    background: @label-background;
+    line-height: @label-line-height;
+    font-size: @label-font-size;
+    color: @label-color;
+    vertical-align: middle;
+    white-space: nowrap;
+    .hook-label;
+}
+
+.label-success {
+    background-color: @label-success-background;
+    color: @label-success-color;
+}
+
+.label-warning {
+    background-color: @label-warning-background;
+    color: @label-warning-color;
+}
+
+.label-danger {
+    background-color: @label-danger-background;
+    color: @label-danger-color;
+}
+
+.label-pending {
+    background-color: @global-secondary-background;
+    color: @global-inverse-color;
+}

src/views/components/head.ecr

@@ -4,7 +4,7 @@
   <title>Mango</title>
   <meta name="description" content="Mango - Manga Server and Web Reader">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
+  <link rel="stylesheet" href="<%= base_url %>css/uikit.css" />
   <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
   <link rel="icon" href="<%= base_url %>favicon.ico">
   <script defer src="<%= base_url %>js/fontawesome.min.js"></script>