Move SCSS into components

package.json

@@ -74,6 +74,7 @@
 		"jest": "^28.1.0",
 		"jest-environment-jsdom": "^28.1.0",
 		"jest-serializer-vue": "^2.0.2",
+		"jest-transform-stub": "^2.0.0",
 		"mockdate": "^3.0.5",
 		"regenerator-runtime": "^0.13.9"
 	},
@@ -101,7 +102,8 @@
 		"testEnvironment": "jsdom",
 		"transform": {
 			"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-			"^.+\\.vue$": "<rootDir>/node_modules/@vue/vue2-jest"
+			"^.+\\.vue$": "<rootDir>/node_modules/@vue/vue2-jest",
+			".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
 		},
 		"transformIgnorePatterns": [
 			"/node_modules/(?!(.*vue-material-design-icons)|(uuid))"

src/App.vue

@@ -108,3 +108,41 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss">
+/**
+ * Since CSS variables can't be used in media queries (yet, see e.g.
+ * https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries),
+ * and var(--breakpoint-mobile) can be used with server v25 upwards only anyway,
+ * we have to redefine the value here.
+ */
+$breakpoint-mobile: 1024px;
+
+// Adjust app-navigation-toggle position
+#app-navigation-vue .app-navigation-toggle {
+	top: 12px !important;
+	right: -15px !important;
+
+	@media only screen and (max-width: $breakpoint-mobile) {
+		right: 0 !important;
+	}
+}
+
+// Hack for https://github.com/nextcloud/nextcloud-vue/issues/1384
+body {
+	min-height: 100%;
+	height: auto;
+}
+
+</style>
+
+<style lang="scss" scoped>
+.app-content {
+	background-color: var(--color-background-dark) !important;
+
+	> div {
+		box-sizing: border-box;
+		padding-bottom: 75px;
+	}
+}
+</style>

src/components/AppNavigation/CalendarSharee.vue

@@ -30,7 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 			<AccountMultiple v-if="sharee.isGroup"
 				:size="18"
 				class="avatar" />
-			<div v-else-if="sharee.isCircle" class="avatar icon-circle" />
+			<div v-else-if="sharee.isCircle" class="avatar icon-circles" />
 			<Avatar v-else
 				:user="sharee.id"
 				:display-name="sharee.displayName"

src/views/AppContent/Calendar.vue

@@ -51,6 +51,7 @@ import Header from '../../components/Header.vue'
 import DeleteCompletedModal from '../../components/DeleteCompletedModal.vue'
 import LoadCompletedButton from '../../components/LoadCompletedButton.vue'
 import TaskDragContainer from '../../components/TaskDragContainer.vue'
+import './task-list.scss'
 
 import { translatePlural as n } from '@nextcloud/l10n'
 

src/views/AppContent/General.vue

@@ -48,6 +48,7 @@ import Header from '../../components/Header.vue'
 import LoadCompletedButton from '../../components/LoadCompletedButton.vue'
 import TaskDragContainer from '../../components/TaskDragContainer.vue'
 import { isTaskInList, isParentInList } from '../../store/storeHelper.js'
+import './task-list.scss'
 
 import { mapGetters } from 'vuex'
 

src/views/AppContent/Week.vue

@@ -43,6 +43,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 import Header from '../../components/Header.vue'
 import TaskDragContainer from '../../components/TaskDragContainer.vue'
 import { isTaskInList } from '../../store/storeHelper.js'
+import './task-list.scss'
 
 import { translate as t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'

src/views/AppContent/task-list.scss

@@ -0,0 +1,78 @@
+/**
+ * Since CSS variables can't be used in media queries (yet, see e.g.
+ * https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries),
+ * and var(--breakpoint-mobile) can be used with server v25 upwards only anyway,
+ * we have to redefine the value here.
+ */
+$breakpoint-mobile: 1024px;
+
+.app-content .task-list {
+	width: 100%;
+	padding: 0 15px;
+
+	@media only screen and (max-width: $breakpoint-mobile) {
+		padding: 0;
+	}
+
+	.grouped-tasks {
+		position: relative;
+		padding-top: 2px;
+
+		> ol {
+			filter: drop-shadow(0 0 1px var(--color-box-shadow));
+			z-index: 1;
+
+			&:hover {
+				z-index: 10;
+			}
+
+			&.completed {
+				margin-top: 12px;
+			}
+		}
+	}
+
+	.heading {
+		display: flex;
+		align-items: center;
+		margin-top: 20px !important;
+
+		@media only screen and (max-width: $breakpoint-mobile) {
+			padding-left: 15px;
+		}
+
+		&--hiddentasks {
+			margin-bottom: 0;
+
+			.heading__title {
+				display: inline-block;
+				padding-right: 16px;
+				background-position: right center;
+				cursor: pointer;
+				&:hover {
+					opacity: .7;
+				}
+			}
+		}
+
+		&__title {
+			font-weight: bold;
+			font-size: 16px;
+			word-wrap: break-word;
+			opacity: .5;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+
+		}
+
+		&__icon-bullet {
+			width: 14px;
+			min-width: 14px;
+			height: 14px;
+			border: none;
+			border-radius: 50%;
+			margin-right: 8px;
+		}
+	}
+}

src/views/AppNavigation.vue

@@ -459,6 +459,15 @@ export default {
 <style lang="scss" scoped>
 $color-error: #e9322d;
 
+.app-navigation li {
+	&.dnd-hover,
+	&.sortable-ghost {
+		background-color: var(--color-primary-light);
+		box-shadow: 0 0 3px var(--color-primary);
+		z-index: 1000;
+	}
+}
+
 .collection::v-deep {
 	&.collection--edit {
 		.app-navigation-entry-link {

templates/main.php

@@ -1,4 +1,3 @@
 <?php
 
 	script('tasks', 'tasks-main');
-	style('tasks', 'tasks');