Line layout tweaks

amd/src/report-viewer-components.js

@@ -16,6 +16,7 @@ import Debugger from './debugger';
 
 // Make π available as a constant
 const π = Math.PI;
+const LINE_GRAVITY = 1.3;
 
 export default {
     install(Vue/*,options*/){
@@ -646,6 +647,10 @@ export default {
                     if(start !== null && end !== null && isVisible(start) && isVisible(end)){
                         lineinfo.line = new SimpleLine(start,end,{
                             color: lineColor,
+                            gravity: {
+                                start: LINE_GRAVITY,
+                                end: LINE_GRAVITY,
+                            },
                         });
 
                         let elmWrapper = (this.plan.id >=0)?document.getElementById('studyplan-linewrapper-'+this.plan.id):null;

amd/src/studyplan-editor-components.js

@@ -22,6 +22,8 @@ const STUDYPLAN_EDITOR_PAGE_FIELDS =  //TODO: Add 'fullname', 'shortname' and 'd
 const PERIOD_EDITOR_FIELDS =   
 ['fullname','shortname','startdate','enddate'];
 
+const LINE_GRAVITY = 1.3;
+
 export default {
     STUDYPLAN_EDITOR_FIELDS: STUDYPLAN_EDITOR_FIELDS, // make copy available in plugin
     install(Vue/*,options*/){
@@ -2289,7 +2291,11 @@ export default {
                     dragelement.style.left = event.position.x+'px';
                     dragelement.style.top = event.position.y+'px';
                     this.dragLine = new SimpleLine(start,dragelement,{
-                            color: "#777"
+                            color: "#777",
+                            gravity: {
+                                start: LINE_GRAVITY,
+                                end: LINE_GRAVITY,
+                            },
                         });
                     // Add separate event listener to reposition mouse move
                     document.addEventListener("mousemove",this.onMouseMove);
@@ -2337,8 +2343,13 @@ export default {
                     } 
                     // create a new line if the start and finish items are visible
                     if(start !== null && end !== null && isVisible(start) && isVisible(end)){
-                        this.lines[conn.to_id] = new SimpleLine( start,end,{color: lineColor,}
+                        this.lines[conn.to_id] = new SimpleLine( start,end,{
-                        );                       
+                            color: lineColor,
+                            gravity: {
+                                start: LINE_GRAVITY,
+                                end: LINE_GRAVITY,
+                            },
+                        });
                     }
 
                 },

css/devstyles.css

@@ -258,6 +258,12 @@ ul.t-competency-list li {
     min-height: 32px;
 }
 
+.t-studyline-slot-0.filter .t-slot-item,
+.r-studyline-slot-0.filter .r-slot-item {
+    margin-left: 0;
+}
+
+
 
 .t-studyline-slot.t-studyline-slot-0,
 .r-studyline-slot.r-studyline-slot-0  {
@@ -266,7 +272,7 @@ ul.t-competency-list li {
 
 .t-studyline-slot.t-studyline-slot-0 .t-slot-drop.filter .t-slot-item,
 .r-studyline-slot.r-studyline-slot-0 .r-item-base {
-    margin-left: 10px;
+    margin-left: 0px;
 }
 
 .t-studyline-slot.gradable.current.odd,
@@ -373,23 +379,6 @@ ul.t-competency-list li {
     min-height: 3px;
 }
 
-.t-slot-item.feedback {
-    border: 2px dashed black;
-    border-radius: 3px;
-}
-.t-slot-item.drag-mode-copy {
-    color: green;
-    font-weight: bold;
-}
-.t-slot-item.drag-mode-cut {
-    color: red;
-    font-weight: bold;
-}
-.t-slot-item.drag-mode-reordering {
-    color: blueviolet;
-    font-weight: bold;
-}
-
 .t-item-deletebox {
     display: inline-block;
     width: 100px;
@@ -572,6 +561,11 @@ ul.t-toolbox li {
     line-height: 1px;
 }
 
+.t-studyline-slot-0.filter .t-slot-drop.filter .t-item-base{
+    margin-left: 0;
+}
+
+
 a.t-item-config {
     position: absolute;
     top: -5px;
@@ -722,15 +716,6 @@ a.t-item-course-config {
 }
 
 
-
-/*.r-item-base {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-}*/
-
 .gradable .r-item-base {
     width: 100%;
 }