From 7c3a4e24b811b4d6cc370503a7cf21cf513708b2 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Tue, 17 Oct 2023 08:26:48 +0000
Subject: [PATCH] extract courseware chunk, fixes #2627
Closes #2627
Merge request studip/studip!1778
---
.../assets/javascripts/bootstrap/courseware.js | 16 ++++++++--------
resources/assets/javascripts/chunk-loader.js | 14 ++++++++++++--
.../assets/javascripts/chunks/courseware.js | 1 +
resources/assets/stylesheets/mixins.scss | 2 ++
.../assets/stylesheets/scss/courseware.scss | 6 +++---
resources/assets/stylesheets/scss/layouts.scss | 16 ----------------
.../assets/stylesheets/scss/variables.scss | 18 ++++++++++++++++++
resources/assets/stylesheets/studip.scss | 1 -
8 files changed, 44 insertions(+), 30 deletions(-)
create mode 100644 resources/assets/javascripts/chunks/courseware.js
diff --git a/resources/assets/javascripts/bootstrap/courseware.js b/resources/assets/javascripts/bootstrap/courseware.js
index d24bd4db392..d50331f8ea5 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 d2da2a7b144..dcd95cc63df 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 00000000000..5e555568c19
--- /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 a9dd78d0d08..a7bb714cafa 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 141bce98a00..b854bef5c05 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 72ff2e7c01c..6d0454af0cf 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 f82da12bfa1..c07fbd0be02 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 1ec3573cc1b..2d5b7b1296e 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";
--
GitLab