From dcc9b5bcd674be4b75c38fb41c6be66a254042a4 Mon Sep 17 00:00:00 2001
From: PMKuipers <pm@miqra.nl>
Date: Wed, 26 Jul 2023 23:24:34 +0200
Subject: [PATCH] Styling fixes for studyplan editor

---
 amd/src/studyplan-editor-components.js | 54 ++++++++++----------------
 css/devstyles.css                      | 35 ++++++++++++++---
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/amd/src/studyplan-editor-components.js b/amd/src/studyplan-editor-components.js
index 01f15d4..937401b 100644
--- a/amd/src/studyplan-editor-components.js
+++ b/amd/src/studyplan-editor-components.js
@@ -1343,7 +1343,7 @@ export default {
                         <template v-slot:item="{item}">
                             <drag 
                                 :key="item.id" 
-                                class='t-studyplan-drag'
+                                class='t-studyline-drag'
                                 :data="item" 
                                 :type="'studyline-'+page.id" 
                                 >
@@ -1352,7 +1352,6 @@ export default {
                                 </template>
                                 <t-studyline-edit 
                                     v-model="item"
-                                    :numlines='page.studylines.length'
                                     @edit='editLineStart(item)'
                                     @delete='deleteLine(page,item)'
                                     >
@@ -1368,8 +1367,10 @@ export default {
                         <t-studyline-heading  v-for="(line,lineindex) in page.studylines"
                             :key="line.id"
                             v-model="page.studylines[lineindex]"
-                            :numlines='page.studylines.length'
                             :layers='countLineLayers(line)+1'
+                            :class=" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )
+                                    + ((lineindex==0)?' first ':' ') 
+                                    + ((lineindex==page.studylines.length-1)?' last ':' ')"
                         ></t-studyline-heading>
                     </div>
                     <!-- Next, paint all the cells in the scrollable -->
@@ -1391,8 +1392,9 @@ export default {
                                         :plan="value"
                                         :page="page"
                                         :layer="layeridx-1"
-                                        :class= "'t-studyline ' + ((line.sequence==1 && layeridx==1)?' first':'') + 
-                                                (line.sequence==page.studylines.length?' last':'')"
+                                        :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+                                                + ((lineindex==0 && layeridx==1)?' first ':' ')
+                                                + ((lineindex==page.studylines.length-1)?' last ':' ')"
                                     ></t-studyline-slot
                                     ><t-studyline-slot 
                                         type='filter'
@@ -1403,10 +1405,10 @@ export default {
                                         :plan="value"
                                         :page="page"
                                         :layer="layeridx-1"
-                                        :class="  't-studyline ' 
-                                                + ((line.sequence==1 && layeridx==1)?' first':'') 
-                                                + (line.sequence==page.studylines.length?' last':'')
-                                                + (index==page.slots?' end':'')"
+                                        :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+                                                + ((lineindex==0 && layeridx==1)?' first ':'')
+                                                + ((lineindex==page.studylines.length-1)?' last ':' ')
+                                                + ((index==page.periods)?' rightmost':'')"
                                         >
                                     </t-studyline-slot
                                 ></template
@@ -1499,10 +1501,6 @@ export default {
                     type: Object, // Studyline
                     default: function(){ return {};},
                 },
-                numlines: {
-                    type: Number,
-                    default: 1,
-                },
                 layers: {
                     type: Number,
                     default: 1,
@@ -1545,10 +1543,8 @@ export default {
                 }
             },
             template: `
-            <div :class="'t-studyline t-studyline-heading' + ((value.sequence%2)?' odd':' even') +
-                (value.sequence==1?' first':'') + (value.sequence==numlines?' last':'')" 
-                :data-studyline="value.id" :data-sequence="value.sequence" :data-numlines="numlines"
-                ref="mainEl"
+            <div class="t-studyline t-studyline-heading " 
+                :data-studyline="value.id" ref="mainEl"
                 ><div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
                 <div class="t-studyline-title">
                     <abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>
@@ -1565,18 +1561,7 @@ export default {
                 value : {
                     type: Object, // Studyline
                     default: function(){ return {};},
-                },
-                numlines: {
-                    type: Number,
-                    default: 1,
-                },                
-
-                /*
-                    :color='value.color' 
-                    :name='value.name' 
-                    :code='value.shortname'
-                    :sequence='value.sequence'
-                */
+                }          
            },
             data() {
                 return {
@@ -1612,7 +1597,7 @@ export default {
 
             },
             template: `
-            <div :class="'t-studyline ' + (value.sequence==1?' first':'') + (value.sequence==numlines?' last':'')" > 
+            <div :class="'t-studyline '" > 
                 <div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
                 <div class="t-studyline-title">
                     <div>
@@ -1623,13 +1608,15 @@ export default {
                 <div class='t-studyline-editmode-content'>
                     <slot></slot>
                 </div>
-                <div class='controlbox' v-if='editable || deletable'>
+                <div class='controlbox'>
+                    <template v-if='editable || deletable'>
                     <span class='control editable'>
                         <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>
                     </span>
                     <span class='control deletable'>
                         <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>
                     </span>
+                    </template>
                 </div>
             </div>
             `,
@@ -1823,9 +1810,8 @@ export default {
 
             },
             template: `
-            <div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ((slotindex==0)?' t-studyline-firstcolumn':'')
-                         + ((line.sequence%2)?' odd':' even') "
-                         :data-studyline="line.id" ref="sizeElement"
+            <div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')"
+                :data-studyline="line.id" ref="sizeElement"
                 ><drag v-if="item"
                     
                     :key="item.id" 
diff --git a/css/devstyles.css b/css/devstyles.css
index bb3d574..fb91a80 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -66,6 +66,11 @@ ul.dropdown-menu.show {
     border-width: 1px;
 }
 
+.t-studyline-drag .t-studyline {
+    justify-content: start;
+}
+
+
 .t-studyline.t-studyline-heading {
     border-right-style: none;
 }
@@ -74,11 +79,15 @@ ul.dropdown-menu.show {
     border-right-style: solid;
 }
 
-.t-studyline .controlbox {
-    border-left-style: solid;
+.t-studyline .t-studyline-editmode-content {
+    border-right-style: solid;
     border-color: #cccccc;
     border-width: 1px;
+}
+
+.t-studyline .controlbox {
     white-space: nowrap;
+    width: 64px;
 }
 .t-studyline .control {
     display: inline-block;
@@ -541,21 +550,35 @@ a.t-item-course-config {
     border-width: 1px;
 }
 
-.t-studyline.even,
-.r-studyline.odd {
+.t-studyline-drag:nth-child(odd) .t-studyline div,
+.t-studyline-heading.odd,
+.r-studyline-heading.odd,
+.t-studyline-slot.odd{
     background-color: #f0f0f0;
 }
 
-.t-studyline.first,
+.t-studyline-drag:first-child,
+.t-studyline-heading.first,
+.t-studyline-slot.first,
+.r-studyline-heading.first,
 .r-studyline.first {
     border-top-style: solid;
 }
 
-.t-studyline.last,
+.t-studyline-drag:last-child,
+.t-studyline-heading.last,
+.t-studyline-slot.last,
+.r-studyline-heading.last,
 .r-studyline.last {
     border-bottom-style: solid;
 }
 
+
+.t-studyline-slot.rightmost {
+    border-right-style: solid;
+}
+
+
 .t-studyline-handle,
 .r-studyline-handle {
     width: 10px;