Styling fixes for studyplan editor
This commit is contained in:
PMKuipers
parent
1755a8c854
commit
dcc9b5bcd6
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user