diff --git a/resources/assets/javascripts/bootstrap/courseware.js b/resources/assets/javascripts/bootstrap/courseware.js
index d24bd4db39262c16205d2a6988203be48a044747..d50331f8ea562dbd911cb769e50eafa73f9aa0f8 100644
--- a/resources/assets/javascripts/bootstrap/courseware.js
+++ b/resources/assets/javascripts/bootstrap/courseware.js
@@ -1,6 +1,6 @@
STUDIP.domReady(() => {
if (document.getElementById('courseware-shelf-app')) {
- STUDIP.Vue.load().then(({ createApp }) => {
+ STUDIP.loadChunk('courseware').then(({ createApp }) => {
import(
/* webpackChunkName: "courseware-shelf-app" */
'@/vue/courseware-shelf-app.js'
@@ -11,7 +11,7 @@ STUDIP.domReady(() => {
}
if (document.getElementById('courseware-index-app')) {
- STUDIP.Vue.load().then(({ createApp }) => {
+ STUDIP.loadChunk('courseware').then(({ createApp }) => {
import(
/* webpackChunkName: "courseware-index-app" */
'@/vue/courseware-index-app.js'
@@ -22,7 +22,7 @@ STUDIP.domReady(() => {
}
if (document.getElementById('courseware-activities-app')) {
- STUDIP.Vue.load().then(({ createApp }) => {
+ STUDIP.loadChunk('courseware').then(({ createApp }) => {
import(
/* webpackChunkName: "courseware-activities-app" */
'@/vue/courseware-activities-app.js'
@@ -33,7 +33,7 @@ STUDIP.domReady(() => {
}
if (document.getElementById('courseware-tasks-app')) {
- STUDIP.Vue.load().then(({ createApp }) => {
+ STUDIP.loadChunk('courseware').then(({ createApp }) => {
import(
/* webpackChunkName: "courseware-tasks-app" */
'@/vue/courseware-tasks-app.js'
@@ -44,7 +44,7 @@ STUDIP.domReady(() => {
}
if (document.getElementById('courseware-content-bookmark-app')) {
- STUDIP.Vue.load().then(({ createApp }) => {
+ STUDIP.loadChunk('courseware').then(({ createApp }) => {
import(
/* webpackChunkName: "courseware-content-bookmark-app" */
'@/vue/courseware-content-bookmark-app.js'
@@ -55,7 +55,7 @@ STUDIP.domReady(() => {
}
if (document.getElementById('courseware-admin-app')) {
- STUDIP.Vue.load().then(({ createApp }) => {
+ STUDIP.loadChunk('courseware').then(({ createApp }) => {
import(
/* webpackChunkName: "courseware-content-bookmark-app" */
'@/vue/courseware-admin-app.js'
@@ -66,7 +66,7 @@ STUDIP.domReady(() => {
}
if (document.getElementById('courseware-public-app')) {
- STUDIP.Vue.load().then(({ createApp }) => {
+ STUDIP.loadChunk('courseware').then(({ createApp }) => {
import(
/* webpackChunkName: "courseware-public-app" */
'@/vue/courseware-public-app.js'
@@ -77,7 +77,7 @@ STUDIP.domReady(() => {
}
if (document.getElementById('courseware-content-releases-app')) {
- STUDIP.Vue.load().then(({ createApp }) => {
+ STUDIP.loadChunk('courseware').then(({ createApp }) => {
import(
/* webpackChunkName: "courseware-content-releases-app" */
'@/vue/courseware-content-releases-app.js'
diff --git a/resources/assets/javascripts/chunk-loader.js b/resources/assets/javascripts/chunk-loader.js
index d2da2a7b14453ceec5d02a63c799c33e0b126611..dcd95cc63df3934e4ebdf17736ba3fa31e249269 100644
--- a/resources/assets/javascripts/chunk-loader.js
+++ b/resources/assets/javascripts/chunk-loader.js
@@ -9,10 +9,10 @@ export const loadScript = function (script_name) {
};
export const loadChunk = (function () {
- var mathjax_promise = null;
+ let mathjax_promise = null;
return function (chunk) {
- var promise = null;
+ let promise = null;
switch (chunk) {
case 'code-highlight':
@@ -24,6 +24,16 @@ export const loadChunk = (function () {
});
break;
+ case 'courseware':
+ promise = Promise.all([
+ STUDIP.loadChunk('vue'),
+ import(
+ /* webpackChunkName: "courseware" */
+ './chunks/courseware'
+ ),
+ ]).then(([Vue]) => Vue);
+ break;
+
case 'chartist':
promise = import(
/* webpackChunkName: "chartist" */
diff --git a/resources/assets/javascripts/chunks/courseware.js b/resources/assets/javascripts/chunks/courseware.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e555568c19b87706effd87cd54828d36f12193e
--- /dev/null
+++ b/resources/assets/javascripts/chunks/courseware.js
@@ -0,0 +1 @@
+import "../../stylesheets/scss/courseware.scss";
diff --git a/resources/assets/stylesheets/mixins.scss b/resources/assets/stylesheets/mixins.scss
index a9dd78d0d081b1163d6d2ab4f87089592276edd6..a7bb714cafa3454c84fd184d7f783e881a9daef4 100644
--- a/resources/assets/stylesheets/mixins.scss
+++ b/resources/assets/stylesheets/mixins.scss
@@ -1,6 +1,8 @@
$image-path: "../images" !default;
$icon-path: "#{$image-path}/icons" !default;
+@import "scss/variables";
+
@import "mixins/misc";
@import "mixins/colors";
@import "mixins/studip";
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 141bce98a00f50f4fffef78a8b5cfd8bc1fdb388..b854bef5c0591446af84da8c26fa47bf6106c42e 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -1,7 +1,7 @@
-@import "courseware_gradients.scss";
-
-
/* definitions */
+@use '../mixins.scss' as *;
+@import './drag-handle.scss';
+@import "courseware_gradients.scss";
$companion-types: (
default: basic,
diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss
index 72ff2e7c01c370de64399fc51c224452c35dd0da..6d0454af0cf3970b17dacd81b22d8558127ba899 100644
--- a/resources/assets/stylesheets/scss/layouts.scss
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -1,21 +1,5 @@
// TODO: SCSSify
-$page-margin: 15px;
-
-$sidebar-padding: 12px;
-$sidebar-width: 270px;
-
-$content-width: 400px;
-$content-margin: 12px;
-$max-content-width: 4 * $sidebar-width + $page-margin;
-
-$footer-height: 32px;
-
-$site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
-$page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
-
-$grid-gap: 0;
-
html {
height: 100vh;
overflow-y: auto;
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index f82da12bfa1d7300879d56181418a00e4e376e82..c07fbd0be02edcd344a01aab78fee7673e9e0e6e 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -1,5 +1,6 @@
@import '../mixins/colors.scss';
+// Typography
$text-color: #000;
$font-family-base: "Lato", sans-serif;
@@ -42,6 +43,23 @@ $drag_and_drop_border: 1px solid $base-color;
$transition-duration: .3s;
+// Layout
+$page-margin: 15px;
+
+$sidebar-padding: 12px;
+$sidebar-width: 270px;
+
+$content-width: 400px;
+$content-margin: 12px;
+$max-content-width: 4 * $sidebar-width + $page-margin;
+
+$footer-height: 32px;
+
+$site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
+$page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
+
+$grid-gap: 0;
+
:root {
// The special handling for -- as #{"--"} seems to be neccessary to make
// scss evaluate the color variables
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 1ec3573cc1b68251a0cf5718d678679f42cc07d9..2d5b7b1296e9adabe6f9c6f2ac4bb6c65c646281 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -32,7 +32,6 @@
@import "scss/comments";
@import "scss/copyable-links";
@import "scss/cronjobs";
-@import "scss/courseware";
@import "scss/coursewizard";
@import "scss/css_tree";
@import "scss/dates";