From 6d21cce747143f9e09961c7e3458ef9d57e08201 Mon Sep 17 00:00:00 2001
From: Murtaza Sultani <sultani@data-quest.de>
Date: Mon, 13 Oct 2025 12:33:47 +0200
Subject: Regiester use vue components

---
 resources/assets/javascripts/bootstrap/use-vue-components.js | 9 +++++++++
 resources/assets/javascripts/entry-base.js                   | 3 ++-
 resources/assets/stylesheets/studip.scss                     | 5 +++++
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/javascripts/bootstrap/use-vue-components.js

diff --git a/resources/assets/javascripts/bootstrap/use-vue-components.js b/resources/assets/javascripts/bootstrap/use-vue-components.js
new file mode 100644
index 0000000..333b559
--- /dev/null
+++ b/resources/assets/javascripts/bootstrap/use-vue-components.js
@@ -0,0 +1,9 @@
+STUDIP.ready(function () {
+    const containers = document.querySelectorAll('.use-vue-components');
+
+    STUDIP.Vue.load().then(({ createApp }) => {
+        containers.forEach(container  => createApp().mount(container));
+    });
+});
+
+
diff --git a/resources/assets/javascripts/entry-base.js b/resources/assets/javascripts/entry-base.js
index 896189e..d8ce582 100644
--- a/resources/assets/javascripts/entry-base.js
+++ b/resources/assets/javascripts/entry-base.js
@@ -77,8 +77,9 @@ import "./bootstrap/oer.js"
 import "./bootstrap/courseware.js"
 import "./bootstrap/external_pages.js"
 import "./bootstrap/vips.js"
-import "./bootstrap/admission.js"
+import "./bootstrap/use-vue-components.js"
 
+import "./bootstrap/admission.js"
 import "./mvv_course_wizard.js"
 import "./mvv.js"
 import "./feedback.js"
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 6ea02f5..75136a7 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -827,6 +827,10 @@ input.allow-plaintext-toggle {
 
     hr {
         margin: 10px 0;
+        border-top: 1px solid var(--color--divider);
+        border-bottom: none;
+        border-left: none;
+        border-right: none;
     }
 
     &__header {
@@ -900,6 +904,7 @@ input.allow-plaintext-toggle {
         display: flex;
         align-items: center;
         gap: 5px;
+        width: max-content;
 
         &:hover,
         &:focus,
-- 
cgit v1.0