Update

amd/src/studyplan-report-components.js

@@ -13,16 +13,81 @@ import Debugger from './util/debugger';
 import Config from 'core/config';
 import TSComponents from './treestudyplan-components';
 
+
+const debug = new Debugger("treestudyplan-viewer");
+
+
 // Make π available as a constant
 const π = Math.PI;
 // Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction
 const LINE_GRAVITY = 1.3;
 
+/**
+ * Retrieve condition headers
+ * @param {Object} item
+ */
+function conditionHeaders(item) {
+    const course = item.course;
+    const list = [];
+    if (course.completion) {
+        for (const cmp of course.competencies) {
+            list.push({
+                name: cmp.title,
+            });
+        }
+    } else if(course.completion) {
+        for (const cnd of course.completion.conditions) {
+            for (const itm of cnd.items) {
+                list.push({
+                    name: itm.title,
+                });
+            }
+        }
+    } else if(course.grades) {
+        for(const g of course.grades) {
+            if (g.selected) {
+                debug.info("...included");
+                list.push({
+                    name: g.name,
+                });
+            }
+        }
+    }
+    debug.info("Returning list",list);
+    return list;
+}
+
+/**
+ * Retrieve conditions
+ * @param {Object} item
+ */
+function conditions(item) {
+    const course = item.course;
+    const list = [];
+    if (course.completion) {
+        for (const cmp of course.competencies) {
+            list.push(cmp);
+        }
+    } else if(course.completion) {
+        for (const cnd of course.completion.conditions) {
+            for (const itm of cnd.items) {
+                list.push(itm);
+            }
+        }
+    } else if(course.grades) {
+        for(const g of course.grades) {
+            if (g.selected) {
+                list.push(g);
+            }
+        }
+    }
+    return list;
+}
+
 
 export default {
     install(Vue/*,options*/){
         Vue.use(TSComponents);
-        let debug = new Debugger("treestudyplan-viewer");
 
         let strings = load_strings({
             report: {
@@ -83,11 +148,6 @@ export default {
             created() {
                 this.loadStudents();
             },
-            computed: {
-                sortedstudents(){
-                    return this.students;
-                }
-            },
             watch:{
                 structure: {
                     immediate: true,
@@ -139,6 +199,37 @@ export default {
                     }
                 }
             },
+            computed: {
+                sortedstudents(){
+                    return this.students;
+                },
+                resultColCount(){
+                    let count = 0;
+                    for (const period of this.structure.periods) {
+                        const pid = period.period.id;
+                        if (!this.expansioninfo.periods[pid].expanded) {
+                            // This period is not expanded. Just one 
+                            count += 1;
+                        } else {
+                            for (const line of period.lines) {
+                                const lid = line.line.id;
+                                if (!this.expansioninfo.lines[pid][lid]) {
+                                    count +=1;
+                                } else { 
+                                    for (const item of line.items) {
+                                        if (!this.expansioninfo.items[item.id]) {
+                                            count += 1;
+                                        } else {
+                                            count += 1 + conditions(item).length;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    return count;           
+                }
+            },
             methods: {
                 loadStudents() {
                     const self = this;
@@ -195,18 +286,17 @@ export default {
                     } else {
                         this.expansioninfo[parm][id].expanded = val;
                     }
+                },
 
-                }
             },
             template: `
-            <div>
+            <table class='q-studyplanreport'>
                 <q-header 
                     :sorting='sorting' 
                     :structure='structure'
                     :expansion='expansioninfo'
                     @expansion='expansionChanged'
                 ></q-header>
-                <div class='q-scrolly'>
                 <template v-for="group in sortedstudents">
                     <q-groupheading v-if="group.users" :label="group.label" :groupinfo="groupinfo[group.label]"></q-groupheading>
                     <template v-if='group.users && groupinfo[group.label].expand'>
@@ -219,8 +309,7 @@ export default {
                             ></q-studentresults>
                     </template>
                 </template>
-                </div>
+            </table>
-            </div>
             `,
         });
 
@@ -245,38 +334,12 @@ export default {
             },
             methods: {
                 conditions(item) {
-                    const course = item.course;
+                    return conditionHeaders(item);
-                    const list = [];
-                    debug.info("Determining conditions", course);
-                    if (course.completion) {
-                        debug.info("Has Competencies");
-                        for (const cmp of course.competencies) {
-                            list.push({
-                                name: cmp.title,
-                            });
-                        }
-                    } else if(course.completion) {
-                        debug.info("Has Core completion");
-                        for (const cnd of course.completion.conditions) {
-                            for (const itm of cnd.items) {
-                                list.push({
-                                    name: itm.title,
-                                });
-                            }
-                        }
-                    } else if(course.grades) {
-                        debug.info("Has selected grades");
-                        for (const g of course.grades) {
-                            list.push({
-                                name: g.name,
-                            });
-                        }
-                    }
-
-                    return list;
                 },
                 colspanPeriod(period) {
-                    if (this.expansion.periods[period.id].expanded) {
+                    const pid = period.period.id;
+                    debug.info("Checking period expansion",period,this.expansion.periods);
+                    if (this.expansion.periods[pid].expanded) {
                         let sum = 0;
                         for (const l of period.lines) {
                             sum += this.colspanLine(period,l);
@@ -287,7 +350,10 @@ export default {
                     }
                 },
                 colspanLine(period,line) {
-                    if (this.expansion.lines[period.id][line.id].expanded) {
+                    const pid = period.period.id;
+                    const lid = line.line.id;
+
+                    if (this.expansion.lines[pid][lid].expanded) {
                         let sum = 0;
                         for (const i of line.items) {
                             sum += this.colspanItem(i);
@@ -319,39 +385,39 @@ export default {
             template: `
             <thead class='q-header'>
                 <tr> <!-- period heading -->
-                    <th rowspan='3' class='q-studentname'><span>{{text.students}}</span></th>
+                    <th rowspan='4' class='q-studentname'><span>{{text.students}}</span></th>
                     <th v-for="p in structure.periods" 
                         class='q-period-heading'
                         :colspan='colspanPeriod(p)'
-                        :rowspan='(expansion.periods[p.period.id].expanded)?1:3'
+                        :rowspan='(expansion.periods[p.period.id].expanded)?1:4'
                         ><a  v-if="expansion.periods[p.period.id].expanded"
                             href='#' @click.prevent="$emit('expansion','periods',p.period.id,false);"
                             ><i class='fa fa-minus-square'></i></a
                         ><a  v-else
                             href='#' @click.prevent="$emit('expansion','periods',p.period.id,true);"
                             ><i class='fa fa-plus-square'></i></a
-                        >{{ p.period.fullname}}<
+                        >&nbsp;{{ p.period.fullname}}
-                    /th>
+                    </th>
                 </tr>
                 <tr> <!-- line heading -->
                     <template v-for="p in structure.periods">
                         <template v-if="expansion.periods[p.period.id].expanded">              
-                            <th v-for='l in p.lines"
+                            <th v-for="l in p.lines"
                                 class='q-line-heading'
                                 :colspan="colspanLine(p,l)"
                                 ><span v-html="l.line.shortname"></span
-                            ><th>
+                            ></th>
                         </template>
                     </template>
                 </tr>
                 <tr> <!-- item heading -->
                     <template v-for="p in structure.periods">      
                         <template v-if="expansion.periods[p.period.id].expanded">                 
-                            <template v-for='l in p.lines">
+                            <template v-for="l in p.lines">
                                 <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
                                     <th v-for="item in l.items"
-                                        class='q-item-heading'
+                                        :class="'q-item-heading ' + ((expansion.items[item.id].expanded)?'expanded':'collapsed')"
-                                        :colspan="colspanitem(item)"
+                                        :colspan="colspanItem(item)"
                                         :rowspan='(expansion.items[item.id].expanded)?1:2'
                                         ><a  v-if="expansion.items[item.id].expanded"
                                             href='#' @click.prevent="$emit('expansion','items',item.id,false);"
@@ -359,8 +425,8 @@ export default {
                                         ><a  v-else
                                             href='#' @click.prevent="$emit('expansion','items',item.id,true);"
                                                 ><i class='fa fa-plus-square'></i></a
-                                        ><span v-html="item.course.displayname"></span><
+                                        >&nbsp;<span v-html="item.course.displayname"></span
-                                    /th>
+                                    ></th>
                                 </template>
                             </template>
                         </template>
@@ -369,13 +435,12 @@ export default {
                 <tr> <!-- condition heading -->
                     <template v-for="p in structure.periods">
                         <template v-if="expansion.periods[p.period.id].expanded">     
-                            <template v-for='l in p.lines">
+                            <template v-for="l in p.lines">
                                 <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
                                     <template v-for="item in l.items">
-                                        <th class='q-condition-heading overall
-                                            >{{ text.overall }}<
-                                        /th>
                                         <template v-if="expansion.items[item.id].expanded">
+                                            <th class='q-condition-heading overall'
+                                                ><span>{{ text.overall }}</span></th>
                                             <th v-for="c in conditions(item)"
                                                 class='q-condition-heading'
                                                 ><span v-html="c.name"></span
@@ -407,9 +472,9 @@ export default {
             methods: {
             },
             template: `
-            <div class='q-groupheading'>
+            <tr class='q-groupheading'>
 
-            </div>
+            </tr>
             `,
         });
 
@@ -453,7 +518,10 @@ export default {
                         list.push(newitm);
                     }
                     return list;
-                }
+                },
+                conditions(item) {
+                    return conditions(item);
+                },
             },
             /* https://css-tricks.com/position-sticky-and-table-headers/ */
             /* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers.
@@ -461,19 +529,19 @@ export default {
                */
             template: `
             <tr class='q-student-results'>
-                <th class='q-studentname'><span>{{student.firstname}} {{student.lastname}}</span></th>
+                <td class='q-studentname'><span>{{student.firstname}} {{student.lastname}}</span></td>
                 <template v-for="p in structure.periods">
                     <template v-if="expansion.periods[p.period.id].expanded">     
-                        <template v-for='l in p.lines">
+                        <template v-for="l in p.lines">
                             <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
                                 <template v-for="item in useritems(l)">
-                                    <td class='q-result overall
+                                    <td class='q-result overall'
                                         ><q-courseresult
                                             :item="item"
                                             :student="student"
                                             :loading="loading"
-                                        ></q-courseresult><
+                                        ></q-courseresult
-                                    /td>
+                                    ></td>
                                     <template v-if="expansion.items[item.id].expanded">
                                         <td v-for="(c,idx) in conditions(item)"
                                             class='q-result'
@@ -482,8 +550,8 @@ export default {
                                                 :conditionidx="idx"
                                                 :student="student"
                                                 :loading="loading"
-                                            ></q-conditionresult><
+                                            ></q-conditionresult
-                                        /td>
+                                        ></td>
                                     </template>
                                 </template>
                             </template>
@@ -546,22 +614,22 @@ export default {
             methods: {
             },
             template: `
-            <div class='q-courseresult'>
+            <span class='q-courseresult'>
                 <template v-if="loading">
                     <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                 </template>
                 <template v-else-if='!item.course.enrolled'>
                     <i v-b-popover.top
-                        class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert"
+                        class="fa fa-exclamation-triangle t-not-enrolled-alert"
                         :title="text.student_not_tracked"></i>
                 </template>
                 <template v-else>
                     <i v-b-popover.top
-                        :class="'r-course-result fa fa-'+completion_icon+
+                        :class="'fa fa-'+completion_icon+
                                 ' r-completion-'+item.completion"
                         :title="text['completion_'+item.completion]"></i>
                 </template>
-            </div>
+            </span>
             `,
         });
 
@@ -588,24 +656,7 @@ export default {
             },
             computed: {
                 conditions() {
-                    const course = this.item.course;
+                    return conditions(this.item);
-                    const list = [];
-                    debug.info("Determining conditions", course);
-                    if (course.completion) {
-                        debug.info("Has Competencies");
-                        return course.competencies;
-                    } else if(course.completion) {
-                        debug.info("Has Core completion");
-                        const list = [];
-                        for (const cnd of course.completion.conditions) {
-                            for (const itm of cnd.items) {
-                                list.push(itm);
-                            }
-                        }
-                        return list;
-                    } else if(course.grades) {
-                        return course.grades;
-                    }
                 },
                 condition() {
                     if (this.conditionidx >= 0 && this.conditionidx < this.conditions.length) {
@@ -645,21 +696,22 @@ export default {
             },
             // TODO: Show actual grades when relevant at all (don;t forget the grade point completion requirement)
             template: `
-            <div class='q-conditionresult'>
+            <span class='q-conditionresult'>
                 <template v-if="loading">
                     <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                 </template>
                 <template v-else-if='!item.course.enrolled'>
                     <i v-b-popover.top
-                        class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert"
+                        class="fa fa-exclamation-triangle t-not-enrolled-alert"
                         :title="text.student_not_tracked"></i>
                 </template>
+                <template v-else>
                     <i v-b-popover.top
-                        :class="'r-course-result fa fa-'+completion_icon(item.completion)+
+                        :class="'fa fa-'+completion_icon(item.completion)+
                                 ' r-completion-'+item.completion"
                         :title="text['completion_'+item.completion]"></i>
                 </template>
-            </div>
+            </span>
             `,
         });
 

css/devstyles.css

@@ -1578,12 +1578,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan {
     font: inherit;
 }
+.path-local-treestudyplan table.studyplanreport {
+    table-layout: fixed;
+}
 .path-local-treestudyplan .q-header,
 .path-local-treestudyplan .q-student-results {
     background-color: white;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
 }
 .path-local-treestudyplan .q-header .q-period-heading,
 .path-local-treestudyplan .q-header .q-line-heading,
@@ -1601,26 +1601,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan .q-student-results .q-line-results,
 .path-local-treestudyplan .q-student-results .q-item-results,
 .path-local-treestudyplan .q-student-results .q-condition-results {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-}
-.path-local-treestudyplan .q-header .q-period-heading:not(:last-child),
-.path-local-treestudyplan .q-header .q-line-heading:not(:last-child),
-.path-local-treestudyplan .q-header .q-item-heading:not(:last-child),
-.path-local-treestudyplan .q-header .q-condition-heading:not(:last-child),
-.path-local-treestudyplan .q-header .q-period-results:not(:last-child),
-.path-local-treestudyplan .q-header .q-line-results:not(:last-child),
-.path-local-treestudyplan .q-header .q-item-results:not(:last-child),
-.path-local-treestudyplan .q-header .q-condition-results:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-period-heading:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-line-heading:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-item-heading:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-condition-heading:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-period-results:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-line-results:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-item-results:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-condition-results:not(:last-child) {
     border-right: 1px solid gray;
 }
 .path-local-treestudyplan .q-header .q-period-heading .q-header-title,
@@ -1641,93 +1621,69 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan .q-student-results .q-condition-results .q-header-title {
     padding: 0.5rem;
 }
-.path-local-treestudyplan .q-header .q-period-heading .q-header-details,
-.path-local-treestudyplan .q-header .q-period-heading .q-result-details,
-.path-local-treestudyplan .q-header .q-line-heading .q-header-details,
-.path-local-treestudyplan .q-header .q-line-heading .q-result-details,
-.path-local-treestudyplan .q-header .q-item-heading .q-header-details,
-.path-local-treestudyplan .q-header .q-item-heading .q-result-details,
-.path-local-treestudyplan .q-header .q-condition-heading .q-header-details,
-.path-local-treestudyplan .q-header .q-condition-heading .q-result-details,
-.path-local-treestudyplan .q-header .q-period-results .q-header-details,
-.path-local-treestudyplan .q-header .q-period-results .q-result-details,
-.path-local-treestudyplan .q-header .q-line-results .q-header-details,
-.path-local-treestudyplan .q-header .q-line-results .q-result-details,
-.path-local-treestudyplan .q-header .q-item-results .q-header-details,
-.path-local-treestudyplan .q-header .q-item-results .q-result-details,
-.path-local-treestudyplan .q-header .q-condition-results .q-header-details,
-.path-local-treestudyplan .q-header .q-condition-results .q-result-details,
-.path-local-treestudyplan .q-student-results .q-period-heading .q-header-details,
-.path-local-treestudyplan .q-student-results .q-period-heading .q-result-details,
-.path-local-treestudyplan .q-student-results .q-line-heading .q-header-details,
-.path-local-treestudyplan .q-student-results .q-line-heading .q-result-details,
-.path-local-treestudyplan .q-student-results .q-item-heading .q-header-details,
-.path-local-treestudyplan .q-student-results .q-item-heading .q-result-details,
-.path-local-treestudyplan .q-student-results .q-condition-heading .q-header-details,
-.path-local-treestudyplan .q-student-results .q-condition-heading .q-result-details,
-.path-local-treestudyplan .q-student-results .q-period-results .q-header-details,
-.path-local-treestudyplan .q-student-results .q-period-results .q-result-details,
-.path-local-treestudyplan .q-student-results .q-line-results .q-header-details,
-.path-local-treestudyplan .q-student-results .q-line-results .q-result-details,
-.path-local-treestudyplan .q-student-results .q-item-results .q-header-details,
-.path-local-treestudyplan .q-student-results .q-item-results .q-result-details,
-.path-local-treestudyplan .q-student-results .q-condition-results .q-header-details,
-.path-local-treestudyplan .q-student-results .q-condition-results .q-result-details {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    border-top: 1px solid green;
-}
 .path-local-treestudyplan .q-header .q-result,
 .path-local-treestudyplan .q-student-results .q-result {
     height: 2rem;
-    display: flex;
-    justify-content: center;
     padding-top: 0.25rem;
 }
 .path-local-treestudyplan .q-header,
 .path-local-treestudyplan .q-student-results {
     /*.q-line-heading > .q-header-title,*/
 }
-.path-local-treestudyplan .q-header .q-item-heading > .q-header-title,
+.path-local-treestudyplan .q-header .q-item-heading.collapsed,
 .path-local-treestudyplan .q-header .q-condition-heading,
-.path-local-treestudyplan .q-student-results .q-item-heading > .q-header-title,
+.path-local-treestudyplan .q-student-results .q-item-heading.collapsed,
 .path-local-treestudyplan .q-student-results .q-condition-heading {
     width: 2rem;
     writing-mode: vertical-lr;
     text-orientation: sideways;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.path-local-treestudyplan .q-header .q-line-heading > .q-header-title,
+.path-local-treestudyplan .q-header .q-period-heading,
-.path-local-treestudyplan .q-student-results .q-line-heading > .q-header-title {
+.path-local-treestudyplan .q-header .q-line-heading,
+.path-local-treestudyplan .q-header .q-item-heading,
+.path-local-treestudyplan .q-header .q-condition-heading,
+.path-local-treestudyplan .q-student-results .q-period-heading,
+.path-local-treestudyplan .q-student-results .q-line-heading,
+.path-local-treestudyplan .q-student-results .q-item-heading,
+.path-local-treestudyplan .q-student-results .q-condition-heading {
+    vertical-align: top;
+}
+.path-local-treestudyplan .q-header .q-line-heading,
+.path-local-treestudyplan .q-student-results .q-line-heading {
     height: fit-content;
 }
-.path-local-treestudyplan .q-header .q-item-heading > .q-item-heading,
+.path-local-treestudyplan .q-header .q-item-heading,
-.path-local-treestudyplan .q-student-results .q-item-heading > .q-item-heading {
+.path-local-treestudyplan .q-student-results .q-item-heading {
     height: 6rem;
 }
 .path-local-treestudyplan .q-header .q-condition-heading,
 .path-local-treestudyplan .q-student-results .q-condition-heading {
+    text-align: center;
+}
+.path-local-treestudyplan .q-header .q-condition-heading span,
+.path-local-treestudyplan .q-student-results .q-condition-heading span {
     height: 8rem;
+    white-space: nowrap;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.path-local-treestudyplan .q-result {
+    text-align: center;
+    vertical-align: middle;
+    border-right: 1px solid gray;
 }
 .path-local-treestudyplan .q-studentname {
     padding: 0.5em;
     border-right: 2px solid grey;
     width: 20rem;
 }
-.path-local-treestudyplan .q-studentname.heading {
+.path-local-treestudyplan .q-courseresult i.fa,
-    font-weight: bold;
+.path-local-treestudyplan .q-conditionresult i.fa {
-    vertical-align: bottom;
+    font-size: 21px;
-    display: flex;
+    vertical-align: middle;
-}
-.path-local-treestudyplan .q-studentname.heading span {
-    align-self: flex-end;
-}
-.path-local-treestudyplan .q-scrolly {
-    overflow-y: auto;
-    max-height: 300rem;
 }
 
 .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,

lang/en/local_treestudyplan.php

@@ -460,3 +460,6 @@ $string["settingdesc_premium_key"] = 'Paste the premium key you received in the
 
 $string["premiumfeature:morestudyplans"] = 'Creating more than 5 studyplans in a single category is a premium feature.';
 $string["premiumfeature:morecategories"] = 'Creating studyplans in more than 20 categories is a premium feature.';
+$string["overall"] = 'Course';
+$string["studyplan_report"] = 'Studyplan result overview';
+

lang/nl/local_treestudyplan.php

@@ -460,3 +460,5 @@ $string["settingdesc_premium_key"] = 'Premium activation key';
 
 $string["premiumfeature:morestudyplans"] = 'Meer dan 5 studieplannen in één categorie aanmaken kan alleen met premium toegang.';
 $string["premiumfeature:morecategories"] = 'In meer dan 20 categoriën een studieplan aanmaken kan alleen met premium toegang.';
+$string["overall"] = 'Cursus voltooid';
+$string["studyplan_report"] = 'Studieplan resultatenoverzicht';

scss/studyplan-report.scss

@@ -1,45 +1,28 @@
 .path-local-treestudyplan {
     font: inherit;
 
+    table.studyplanreport {
+        table-layout: fixed;
+    }
 
     .q-header, .q-student-results {
         background-color: white;
-        display: flex;
-        flex-direction: row;;
-        flex-wrap: nowrap;
-
 
         .q-period-heading, .q-line-heading, .q-item-heading, .q-condition-heading,
         .q-period-results, .q-line-results, .q-item-results, .q-condition-results
          {
-            display: flex;
-            flex-direction: column;
-            flex-grow: 1;
 
-            &:not(:last-child) {
             border-right: 1px solid gray;
-            }
 
             .q-header-title {
                 padding: 0.5rem;
 
             }
 
-            .q-header-details,
-            .q-result-details {
-                display: flex;
-                flex-direction: row;
-                flex-wrap: nowrap;
-                border-top: 1px solid green;
-
-            }
-
         }
 
         .q-result {
             height: 2rem;
-            display: flex;
-            justify-content: center;
             padding-top: 0.25rem;
         }
 
@@ -47,47 +30,60 @@
 
     .q-header, .q-student-results {
         /*.q-line-heading > .q-header-title,*/
-        .q-item-heading > .q-header-title,
+        .q-item-heading.collapsed,
         .q-condition-heading {
             width: 2rem;
             writing-mode: vertical-lr;
             text-orientation: sideways;
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }
 
-        .q-line-heading > .q-header-title {
+        .q-period-heading,
+        .q-line-heading,
+        .q-item-heading,
+        .q-condition-heading {
+            vertical-align: top;
+        }
+
+        .q-line-heading {
             height: fit-content;
         }
-        .q-item-heading > .q-item-heading {
+        .q-item-heading  {
             height: 6rem;
         }
         .q-condition-heading {
+            text-align: center;
+            span {
                 height: 8rem;
+                white-space: nowrap;
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
 
         }
 
+    }
+
+    .q-result {
+        text-align: center;
+        vertical-align: middle;
+        border-right: 1px solid gray;
+    }
+
     .q-studentname {
         padding: 0.5em;
-
-        &.heading {
-            font-weight: bold;
-            vertical-align: bottom;
-            display: flex;
-    
-            span {
-                align-self:flex-end;
-            }
-        }
-
         border-right: 2px solid grey;
         width: 20rem;
     }
-    .q-scrolly {
+
-        overflow-y: auto;
+    .q-courseresult,
-        max-height: 300rem;
+    .q-conditionresult{
+        i.fa {
+            font-size: 21px;
+            vertical-align: middle;
+        }
     }
 
 }

styles.css

@@ -1578,12 +1578,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan {
     font: inherit;
 }
+.path-local-treestudyplan table.studyplanreport {
+    table-layout: fixed;
+}
 .path-local-treestudyplan .q-header,
 .path-local-treestudyplan .q-student-results {
     background-color: white;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
 }
 .path-local-treestudyplan .q-header .q-period-heading,
 .path-local-treestudyplan .q-header .q-line-heading,
@@ -1601,26 +1601,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan .q-student-results .q-line-results,
 .path-local-treestudyplan .q-student-results .q-item-results,
 .path-local-treestudyplan .q-student-results .q-condition-results {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-}
-.path-local-treestudyplan .q-header .q-period-heading:not(:last-child),
-.path-local-treestudyplan .q-header .q-line-heading:not(:last-child),
-.path-local-treestudyplan .q-header .q-item-heading:not(:last-child),
-.path-local-treestudyplan .q-header .q-condition-heading:not(:last-child),
-.path-local-treestudyplan .q-header .q-period-results:not(:last-child),
-.path-local-treestudyplan .q-header .q-line-results:not(:last-child),
-.path-local-treestudyplan .q-header .q-item-results:not(:last-child),
-.path-local-treestudyplan .q-header .q-condition-results:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-period-heading:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-line-heading:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-item-heading:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-condition-heading:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-period-results:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-line-results:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-item-results:not(:last-child),
-.path-local-treestudyplan .q-student-results .q-condition-results:not(:last-child) {
     border-right: 1px solid gray;
 }
 .path-local-treestudyplan .q-header .q-period-heading .q-header-title,
@@ -1641,93 +1621,69 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan .q-student-results .q-condition-results .q-header-title {
     padding: 0.5rem;
 }
-.path-local-treestudyplan .q-header .q-period-heading .q-header-details,
-.path-local-treestudyplan .q-header .q-period-heading .q-result-details,
-.path-local-treestudyplan .q-header .q-line-heading .q-header-details,
-.path-local-treestudyplan .q-header .q-line-heading .q-result-details,
-.path-local-treestudyplan .q-header .q-item-heading .q-header-details,
-.path-local-treestudyplan .q-header .q-item-heading .q-result-details,
-.path-local-treestudyplan .q-header .q-condition-heading .q-header-details,
-.path-local-treestudyplan .q-header .q-condition-heading .q-result-details,
-.path-local-treestudyplan .q-header .q-period-results .q-header-details,
-.path-local-treestudyplan .q-header .q-period-results .q-result-details,
-.path-local-treestudyplan .q-header .q-line-results .q-header-details,
-.path-local-treestudyplan .q-header .q-line-results .q-result-details,
-.path-local-treestudyplan .q-header .q-item-results .q-header-details,
-.path-local-treestudyplan .q-header .q-item-results .q-result-details,
-.path-local-treestudyplan .q-header .q-condition-results .q-header-details,
-.path-local-treestudyplan .q-header .q-condition-results .q-result-details,
-.path-local-treestudyplan .q-student-results .q-period-heading .q-header-details,
-.path-local-treestudyplan .q-student-results .q-period-heading .q-result-details,
-.path-local-treestudyplan .q-student-results .q-line-heading .q-header-details,
-.path-local-treestudyplan .q-student-results .q-line-heading .q-result-details,
-.path-local-treestudyplan .q-student-results .q-item-heading .q-header-details,
-.path-local-treestudyplan .q-student-results .q-item-heading .q-result-details,
-.path-local-treestudyplan .q-student-results .q-condition-heading .q-header-details,
-.path-local-treestudyplan .q-student-results .q-condition-heading .q-result-details,
-.path-local-treestudyplan .q-student-results .q-period-results .q-header-details,
-.path-local-treestudyplan .q-student-results .q-period-results .q-result-details,
-.path-local-treestudyplan .q-student-results .q-line-results .q-header-details,
-.path-local-treestudyplan .q-student-results .q-line-results .q-result-details,
-.path-local-treestudyplan .q-student-results .q-item-results .q-header-details,
-.path-local-treestudyplan .q-student-results .q-item-results .q-result-details,
-.path-local-treestudyplan .q-student-results .q-condition-results .q-header-details,
-.path-local-treestudyplan .q-student-results .q-condition-results .q-result-details {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    border-top: 1px solid green;
-}
 .path-local-treestudyplan .q-header .q-result,
 .path-local-treestudyplan .q-student-results .q-result {
     height: 2rem;
-    display: flex;
-    justify-content: center;
     padding-top: 0.25rem;
 }
 .path-local-treestudyplan .q-header,
 .path-local-treestudyplan .q-student-results {
     /*.q-line-heading > .q-header-title,*/
 }
-.path-local-treestudyplan .q-header .q-item-heading > .q-header-title,
+.path-local-treestudyplan .q-header .q-item-heading.collapsed,
 .path-local-treestudyplan .q-header .q-condition-heading,
-.path-local-treestudyplan .q-student-results .q-item-heading > .q-header-title,
+.path-local-treestudyplan .q-student-results .q-item-heading.collapsed,
 .path-local-treestudyplan .q-student-results .q-condition-heading {
     width: 2rem;
     writing-mode: vertical-lr;
     text-orientation: sideways;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.path-local-treestudyplan .q-header .q-line-heading > .q-header-title,
+.path-local-treestudyplan .q-header .q-period-heading,
-.path-local-treestudyplan .q-student-results .q-line-heading > .q-header-title {
+.path-local-treestudyplan .q-header .q-line-heading,
+.path-local-treestudyplan .q-header .q-item-heading,
+.path-local-treestudyplan .q-header .q-condition-heading,
+.path-local-treestudyplan .q-student-results .q-period-heading,
+.path-local-treestudyplan .q-student-results .q-line-heading,
+.path-local-treestudyplan .q-student-results .q-item-heading,
+.path-local-treestudyplan .q-student-results .q-condition-heading {
+    vertical-align: top;
+}
+.path-local-treestudyplan .q-header .q-line-heading,
+.path-local-treestudyplan .q-student-results .q-line-heading {
     height: fit-content;
 }
-.path-local-treestudyplan .q-header .q-item-heading > .q-item-heading,
+.path-local-treestudyplan .q-header .q-item-heading,
-.path-local-treestudyplan .q-student-results .q-item-heading > .q-item-heading {
+.path-local-treestudyplan .q-student-results .q-item-heading {
     height: 6rem;
 }
 .path-local-treestudyplan .q-header .q-condition-heading,
 .path-local-treestudyplan .q-student-results .q-condition-heading {
+    text-align: center;
+}
+.path-local-treestudyplan .q-header .q-condition-heading span,
+.path-local-treestudyplan .q-student-results .q-condition-heading span {
     height: 8rem;
+    white-space: nowrap;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.path-local-treestudyplan .q-result {
+    text-align: center;
+    vertical-align: middle;
+    border-right: 1px solid gray;
 }
 .path-local-treestudyplan .q-studentname {
     padding: 0.5em;
     border-right: 2px solid grey;
     width: 20rem;
 }
-.path-local-treestudyplan .q-studentname.heading {
+.path-local-treestudyplan .q-courseresult i.fa,
-    font-weight: bold;
+.path-local-treestudyplan .q-conditionresult i.fa {
-    vertical-align: bottom;
+    font-size: 21px;
-    display: flex;
+    vertical-align: middle;
-}
-.path-local-treestudyplan .q-studentname.heading span {
-    align-self: flex-end;
-}
-.path-local-treestudyplan .q-scrolly {
-    overflow-y: auto;
-    max-height: 300rem;
 }
 
 .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,