Build/webpack shared config

package.json

@@ -17,13 +17,13 @@
 	"license": "agpl",
 	"private": true,
 	"scripts": {
-		"dev": "NODE_ENV=development webpack --config webpack.dev.js",
-		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js",
-		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.js",
+		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.js",
+		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
+		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
-		"stylelint": "stylelint **/*.css **/*.scss **/*.vue",
-		"stylelint:fix": "stylelint **/*.css **/*.scss **/*.vue --fix",
+		"stylelint": "stylelint src",
+		"stylelint:fix": "stylelint src --fix",
 		"test": "jest",
 		"test:coverage": "jest --coverage"
 	},
@@ -72,6 +72,7 @@
 		"@nextcloud/browserslist-config": "^1.0.0",
 		"@nextcloud/eslint-config": "^2.0.0",
 		"@nextcloud/eslint-plugin": "^1.4.0",
+		"@nextcloud/webpack-vue-config": "^1.1.0",
 		"@vue/test-utils": "^1.0.3",
 		"acorn": "^7.3.1",
 		"babel-eslint": "^10.1.0",
@@ -107,7 +108,7 @@
 		"webpack": "^4.44.0",
 		"webpack-cli": "^3.3.12",
 		"webpack-dev-server": "^3.11.0",
-		"webpack-merge": "^4.2.2"
+		"webpack-merge": "^5.0.9"
 	},
 	"jest": {
 		"moduleFileExtensions": [

src/components/ActivityEntry.vue

@@ -154,6 +154,7 @@ export default {
 	.visualdiff ins {
 		color: green;
 	}
+
 	.visualdiff del {
 		color: darkred;
 	}

src/components/Controls.vue

@@ -291,6 +291,8 @@ export default {
 
 <style lang="scss" scoped>
 	.controls {
+		display: flex;
+
 		.board-title {
 			display: flex;
 			align-items: center;
@@ -318,20 +320,12 @@ export default {
 	}
 
 	#app-navigation-toggle-custom {
+		position: static;
 		width: 44px;
 		height: 44px;
 		cursor: pointer;
 		opacity: 1;
 		display: inline-block !important;
-		position: fixed;
-	}
-
-	.controls {
-		display: flex;
-	}
-
-	#app-navigation-toggle-custom {
-		position: static;
 	}
 
 	.board-actions {
@@ -350,6 +344,7 @@ export default {
 			background-color: transparent;
 		}
 	}
+
 	.filter--item {
 		input + label {
 			display: block;
@@ -366,11 +361,13 @@ export default {
 			}
 		}
 	}
+
 	.filter {
 		width: 250px;
 		max-height: 80vh;
 		overflow: auto;
 	}
+
 	.filter h3 {
 		margin-top: 0px;
 		margin-bottom: 5px;

src/components/board/Board.vue

@@ -131,7 +131,7 @@ export default {
 
 <style lang="scss" scoped>
 
-	@import "../../css/animations.scss";
+	@import '../../css/animations.scss';
 
 	$board-spacing: 15px;
 	$stack-spacing: 10px;

src/components/board/DeletedTabSidebar.vue

@@ -89,6 +89,12 @@ export default {
 		li {
 			display: flex;
 			height: 44px;
+
+			&:hover, &:active, &.focus {
+				button {
+					opacity: 1;
+				}
+			}
 		}
 
 		span {
@@ -119,12 +125,5 @@ export default {
 			background-color: transparent;
 			opacity: 0.5;
 		}
-		li {
-			&:hover, &:active, &.focus {
-				button {
-					opacity: 1;
-				}
-			}
-		}
 	}
 </style>

src/components/board/SharingTabSidebar.vue

@@ -178,20 +178,25 @@ export default {
 	#shareWithList {
 		margin-bottom: 20px;
 	}
+
 	#shareWithList li {
 		display: flex;
 		align-items: center;
 	}
+
 	.username {
 		padding: 12px 9px;
 		flex-grow: 1;
 	}
+
 	.board-owner-label {
 		opacity: .7;
 	}
+
 	.avatarLabel {
 		padding: 6px
 	}
+
 	.avatardiv {
 		background-color: #f5f5f5;
 		border-radius: 16px;

src/components/board/Stack.vue

@@ -295,6 +295,7 @@ export default {
 			border: none;
 		}
 	}
+
 	.stack .smooth-dnd-container.vertical {
 		margin-top: 3px;
 	}
@@ -307,6 +308,7 @@ export default {
 	.slide-top-leave-active {
 		transition: all 100ms ease;
 	}
+
 	.slide-top-enter, .slide-top-leave-to {
 		transform: translateY(-10px);
 		opacity: 0;

src/components/card/CardSidebar.vue

@@ -501,12 +501,14 @@ export default {
 </script>
 
 <style>
-	@import "~easymde/dist/easymde.min.css";
+	@import '~easymde/dist/easymde.min.css';
+
 	.vue-easymde, .CodeMirror {
 		border: none;
 		margin: 0;
 		padding: 0;
 	}
+
 	.editor-preview,
 	.editor-statusbar {
 		display: none;
@@ -615,7 +617,7 @@ export default {
 		min-height: 100px;
 
 		&::v-deep {
-			@import "./../../css/markdown";
+			@import './../../css/markdown';
 		}
 
 		&::v-deep input {

src/components/card/CardSidebarTabComments.vue

@@ -115,5 +115,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import "../../css/comments";
+	@import '../../css/comments';
 </style>

src/components/card/CommentForm.vue

@@ -173,7 +173,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import "../../css/comments";
+	@import '../../css/comments';
 
 	.atwho-wrap {
 		width: 100%;

src/components/card/CommentItem.vue

@@ -172,7 +172,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import "../../css/comments";
+	@import '../../css/comments';
 
 	.reply {
 		border-left: 3px solid var(--color-primary-element);
@@ -195,6 +195,7 @@ export default {
 			margin: 0;
 		}
 	}
+
 	.comment--content::v-deep a {
 		text-decoration: underline;
 	}

src/components/cards/AvatarList.vue

@@ -143,6 +143,7 @@ export default {
 			}
 		}
 	}
+
 	.avatar-list {
 		float: right;
 		display: inline-flex;
@@ -153,22 +154,22 @@ export default {
 			width: 36px;
 			height: 36px;
 			box-sizing: content-box !important;
+			margin-right: -12px;
+			transition: margin-right 0.2s ease-in-out;
+
 			&.icon-more {
 				width: 32px;
 				height: 32px;
 				opacity: .5;
 				background-color: var(--color-background-dark) !important;
 				cursor: pointer;
 			}
-			& {
-				margin-right: -12px;
-				transition: margin-right 0.2s ease-in-out;
-			}
 		}
 		&:hover div:nth-child(n+2) /deep/ .avatardiv {
 			margin-right: 1px;
 		}
 	}
+
 	.popovermenu {
 		display: block;
 		margin: 40px -6px;