Styling

amd/src/studyplan-editor-components.js

@@ -1361,7 +1361,9 @@ export default {
                                     :key="'c-'+lineindex+'-'+index" 
                                     :slotindex="index" 
                                     :line="line"
-                                    :plan="value">
+                                    :plan="value"
+                                    :class= "'t-studyline ' + (line.sequence==1?' first':'') + (line.sequence==numlines?' last':'')"
+                                    >
                                 </t-studyline-slot
                                 ><t-studyline-slot 
                                     type='filter'
@@ -1370,6 +1372,10 @@ export default {
                                     :slotindex="index" 
                                     :line="line"
                                     :plan="value"
+                                    :class="  't-studyline ' 
+                                            + (line.sequence==1?' first':'') 
+                                            + (line.sequence==numlines?' last':'')
+                                            + (index==value.slots?' end':'')"
                                     >
                                 </t-studyline-slot
                             ></template
@@ -1480,7 +1486,7 @@ export default {
             },
             template: `
             <div :class="'t-studyline t-studyline-heading' + ((value.sequence%2)?' odd':' even') +
-                (value.sequence==0?' first':'') + (value.sequence==numlines?' last':'')" 
+                (value.sequence==1?' first':'') + (value.sequence==numlines?' last':'')" 
                 :data-studyline="value.id" :data-sequence="value.sequence" :data-numlines="numlines"
                 ><div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
                 <div class="t-studyline-title">
@@ -1545,7 +1551,7 @@ export default {
 
             },
             template: `
-            <div :class="'t-studyline ' + (value.sequence==0?' first':'') + (value.sequence==numlines-1?' last':'')" > 
+            <div :class="'t-studyline ' + (value.sequence==1?' first':'') + (value.sequence==numlines?' last':'')" > 
                 <div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
                 <div class="t-studyline-title">
                     <div>

amd/src/studyplan-processor.js

@@ -1,3 +1,4 @@
+/*eslint no-console: "off"*/
 /**
  * Copy fields from one object to another
  * @param {Object} target The target to move to
@@ -125,18 +126,21 @@ export function ProcessStudyplan(studyplan){
 
 /**
  * Update the line wrapper elements to properly display the lines between items
+ * 
+ * TODO: For a short time, during the loading time of the page, the arrows get messed up if the frame is scrolled
+ * Somehow this is not the case after a short while. This phenomenon must be investigated.
  */
 export function fixLineWrappers(){
     let elmLineWrappers = document.getElementsByClassName('l-leaderline-linewrapper');
-    //debug.info("Line wrappers",elmLineWrappers);
+    console.info("Request line wrapper fix @",(Date.now() - window.performance.timeOrigin)/1000.0);
     for(let i =0; i < elmLineWrappers.length; i++){
         const elm = elmLineWrappers[i];
         elm.style.transform = '';
         let rectWrapper = elm.getBoundingClientRect();
-        //debug.info("Line wrapper",elm,rectWrapper,[window.pageXOffset,window.pageYOffset]);
+        console.info("Line wrapper",elm,rectWrapper,(Date.now() - window.performance.timeOrigin)/1000.0);
         // Move to the origin of coordinates as the document
         elm.style.transform = 'translate(' +
-            ((rectWrapper.left + window.pageXOffset ) * -1) + 'px, ' +
-            ((rectWrapper.top + window.pageYOffset ) * -1) + 'px)';
+            ((rectWrapper.left + window.scrollX ) * -1) + 'px, ' +
+            ((rectWrapper.top + window.scrollY ) * -1) + 'px)';
     }
 }

css/devstyles.css

@@ -1,9 +1,5 @@
 /* stylelint-disable length-zero-no-unit, color-hex-case, color-hex-length, no-eol-whitespace, unit-blacklist, block-no-empty */
 
-:root {
-
-}
-
 .t-toolbox-preface {
     margin: 10px;
 }
@@ -62,17 +58,19 @@ ul.dropdown-menu.show {
 }
 
 .t-studyline {
-    width: min-content;
     display: grid;
     grid-auto-flow: column;
     /*border-bottom-style: solid;*/
-    border-right-style: solid;
     border-color: #cccccc;
     border-width: 1px;
 }
 
-.t-studyline:first-child {
-    border-top-style: solid;
+.t-studyline.t-studyline-heading {
+    border-right-style: none;
+}
+
+.t-studyline.end {
+    border-right-style: solid;
 }
 
 .t-studyline .controlbox {
@@ -124,7 +122,6 @@ ul.dropdown-menu.show {
     border-color: rgba(0, 0, 0, 0.125);
     border-width: 1px;
     border-left-style: solid;
-    border-right-style: solid;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -548,7 +545,6 @@ a.t-item-course-config {
     display: grid;
     grid-auto-flow: column;
     /*border-bottom-style: solid;*/
-    border-right-style: solid;
     border-color: #cccccc;
     border-width: 1px;
 }