[ue.view] updated 'required' colors + 'CM', 'TD', 'TP' with group count + when errors in bold red + error incicators
This commit is contained in:
xdrm-brackets
parent
53e671457d
commit
2d270f5689
|
|
@ -0,0 +1,45 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
enable-background="new 0 0 24 24"
|
||||
height="24px"
|
||||
id="Layer_1"
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="time.svg"
|
||||
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
|
||||
id="metadata13"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs11" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1015"
|
||||
id="namedview9"
|
||||
showgrid="false"
|
||||
inkscape:zoom="9.8333333"
|
||||
inkscape:cx="12"
|
||||
inkscape:cy="12"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="29"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Layer_1" /><path
|
||||
d="m 12,2.0344069 c -5.5018378,0 -9.9631017,4.4620943 -9.9631017,9.9655931 0,5.503499 4.4612639,9.965593 9.9631017,9.965593 5.502668,0 9.963102,-4.462094 9.963102,-9.965593 0,-5.5034988 -4.460434,-9.9655931 -9.963102,-9.9655931 z m 3.664016,13.8762581 -0.290663,0.290663 c -0.241665,0.241666 -0.649424,0.253292 -0.903547,0.02408 l -3.753707,-3.28449 C 10.460316,12.71254 10.266817,12.244987 10.283427,11.902835 l 0.347965,-5.9245446 c 0.01827,-0.3429825 0.313086,-0.6220191 0.656068,-0.6220191 h 0.40942 c 0.342982,0 0.636967,0.2790366 0.653577,0.6211886 l 0.28485,4.9279861 c 0.01744,0.342982 0.217582,0.830466 0.444299,1.08708 l 2.610985,3.012931 c 0.226718,0.256614 0.215921,0.663542 -0.02657,0.905208 z"
|
||||
id="fill-edit"
|
||||
inkscape:connector-curvature="0"
|
||||
style="clip-rule:evenodd;fill-rule:evenodd;stroke-width:0.83046609" /></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
|
||||
<!-- COURS -->
|
||||
<section class='cours'
|
||||
<section class='bcours'
|
||||
v-for='(c,i) in gstore.manage.cours'
|
||||
:data-id='c.idCours'>
|
||||
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
|
||||
<!-- TD -->
|
||||
<section class='td'
|
||||
<section class='btd'
|
||||
v-for='(td,i) in gstore.manage.td'
|
||||
:data-id='td.idTD'
|
||||
data-anim-incoming='1'
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
|
||||
|
||||
<!-- TP -->
|
||||
<section class='tp'
|
||||
<section class='btp'
|
||||
v-for='(tp,i) in gstore.manage.tp'
|
||||
:data-id='tp.idTP'
|
||||
data-anim-incoming='1'
|
||||
|
|
|
|||
|
|
@ -62,15 +62,34 @@
|
|||
<!-- endif -->
|
||||
|
||||
<!-- if VIEW MODE -->
|
||||
<h1 v-show='gstore.edit_i!=pi' :class='ue.required?`pin`:`pin neutral`'><span :data-strike='ue.disabled?1:0'>{{ ue.label }}</span><span :data-visible='1'>({{ ue.code }})</span></h1>
|
||||
<h1 v-show='gstore.edit_i!=pi' :class='ue.required?`pin`:`pin disabled`' :title='ue.required?`obligatoire`:`optionnelle`'><span :data-strike='ue.disabled?1:0'>{{ ue.label }}</span><span :data-visible='1'>({{ ue.code }})</span></h1>
|
||||
<!-- if EDIT MODE -->
|
||||
<h1 v-show='gstore.edit_i==pi' :class="ue.required ? 'warning' : ''">
|
||||
<h1 v-show='gstore.edit_i==pi' :class='ue.required?`pin`:`pin disabled`'>
|
||||
<input type='text' placeholder='Libellé' v-model='gstore.edit_label'>
|
||||
<!-- <span :data-visible='1'>({{ ue.code }})</span> -->
|
||||
<span data-visible='1'>(<input type='text' placeholder='code' v-model='gstore.edit_code'>)</span>
|
||||
</h1>
|
||||
<!-- endif -->
|
||||
|
||||
<!-- if VIEW MODE -->
|
||||
<div class='table little' v-show='gstore.edit_i!=pi'>
|
||||
<div>
|
||||
<span class='active reflow' :data-error='ue.nbrCours!=ue.nbrProfCours || ue.modCours != 0?1:0'>{{ ue.nbrCours }} CM</span>
|
||||
<span v-show='ue.nbrCours!=ue.nbrProfCours' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
|
||||
<span v-show='ue.modCours != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class='active reflow' :data-error='ue.nbrTD!=ue.nbrProfTD || ue.modTD != 0?1:0'>{{ ue.nbrTD }} TD</span>
|
||||
<span v-show='ue.nbrTD!=ue.nbrProfTD' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
|
||||
<span v-show='ue.modTD != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class='active reflow' :data-error='ue.nbrTP!=ue.nbrProfTP || ue.modTP != 0?1:0'>{{ ue.nbrTP }} TP</span>
|
||||
<span v-show='ue.nbrTP!=ue.nbrProfTP' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
|
||||
<span v-show='ue.modTP != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- if VIEW MODE -->
|
||||
<div v-show='gstore.edit_i!=pi' class='taglist'>
|
||||
|
|
@ -82,25 +101,6 @@
|
|||
<div v-show='gstore.edit_i==pi' :class="gstore.edit_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.edit_err_valid?1:0'>{{ gstore.edit_err }}</div>
|
||||
<!-- endif -->
|
||||
|
||||
<div class='footer'>
|
||||
<!-- if VIEW MODE -->
|
||||
<span v-show='gstore.edit_i!=pi' :class="(ue.volumeCours == 0) ? 'course' : 'course active'">{{ ue.volumeCours }}h <span>Cours</span></span>
|
||||
<hr v-show='gstore.edit_i!=pi'>
|
||||
<span v-show='gstore.edit_i!=pi' :class="(ue.volumeTD == 0) ? 'td' : 'td active'">{{ ue.volumeTD }}h <span>TD</span></span>
|
||||
<hr v-show='gstore.edit_i!=pi'>
|
||||
<span v-show='gstore.edit_i!=pi' :class="(ue.volumeTP == 0) ? 'tp' : 'tp active'">{{ ue.volumeTP }}h <span>TP</span></span>
|
||||
|
||||
<!-- if EDIT MODE -->
|
||||
<span v-show='gstore.edit_i==pi' class='course'><input type='text' placeholder='???' v-model='gstore.edit_vol.c'><span>Cours</span></span>
|
||||
<hr v-show='gstore.edit_i==pi'>
|
||||
<span v-show='gstore.edit_i==pi' class='td'><input type='text' placeholder='???' v-model='gstore.edit_vol.td'><span>TD</span></span>
|
||||
<hr v-show='gstore.edit_i==pi'>
|
||||
<span v-show='gstore.edit_i==pi' class='tp'><input type='text' placeholder='???' v-model='gstore.edit_vol.tp'><span>TP</span></span>
|
||||
|
||||
<!-- endif -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- if VIEW MODE -->
|
||||
<div class='footer' v-show='gstore.edit_i!=pi'>
|
||||
|
|
@ -114,7 +114,10 @@
|
|||
<!-- endif -->
|
||||
|
||||
<div class='info'>
|
||||
<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales
|
||||
<strong class='cm reflow'>{{ ue.volumeCours}}</strong> CM
|
||||
<strong class='td reflow'>{{ ue.volumeTD}}</strong> TD
|
||||
<strong class='tp reflow'>{{ ue.volumeTP }}</strong> TP →
|
||||
<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -215,8 +215,8 @@
|
|||
z-index: 104;
|
||||
|
||||
&:hover{ background-image: url('/asset/svg/pin-disabled.svg@555555'); }
|
||||
&[data-active='1']{ background-image: url('/asset/svg/pin.svg@ea4b35'); }
|
||||
&[data-active='1']:hover{ background-image: url('/asset/svg/pin.svg@c44130'); }
|
||||
&[data-active='1']{ background-image: url('/asset/svg/pin.svg@f4bd18'); }
|
||||
&[data-active='1']:hover{ background-image: url('/asset/svg/pin.svg@f4a118'); }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -284,6 +284,8 @@
|
|||
color: darken($primary-color, 5%);
|
||||
font-size: 1em;
|
||||
|
||||
margin: .4em 0;
|
||||
|
||||
// flex
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -372,9 +374,16 @@
|
|||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&.little{
|
||||
font-size: .7em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* (6.1) Column */
|
||||
& > div{
|
||||
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 2.3em;
|
||||
|
|
@ -389,7 +398,7 @@
|
|||
|
||||
// flex properties
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
|
|
@ -421,7 +430,7 @@
|
|||
}
|
||||
|
||||
/* (6.2) Column Emphasis */
|
||||
& > span:last-child{
|
||||
& > span:last-child:not(.notlast){
|
||||
display: block;
|
||||
position: relative;
|
||||
min-width: 4em;
|
||||
|
|
@ -599,20 +608,20 @@
|
|||
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-top: 1.9em;
|
||||
margin-left: -1.9em;
|
||||
margin-top: 2.1em;
|
||||
margin-left: -2.1em;
|
||||
height: auto;
|
||||
width: calc( 100% + 2*1.9em - 2*1em);
|
||||
width: calc( 100% + 2*2.1em - 2*1em);
|
||||
|
||||
margin-bottom: -1.9em;
|
||||
margin-bottom: -2.1em;
|
||||
padding: .3em 1em;
|
||||
|
||||
border-top: 1px solid #f3f3f3;
|
||||
|
||||
background-color: darken(#fafbfd,1%);
|
||||
|
||||
font-size: .8em;
|
||||
color: #999;
|
||||
font-size: .7em;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@
|
|||
&.create:hover{ border-left-color: $form-valid-color; }
|
||||
|
||||
&:hover,
|
||||
&.cours:hover{ border-left-color: $form-search-color; }
|
||||
&.td:hover{ border-left-color: $form-valid-color; }
|
||||
&.tp:hover{ border-left-color: $form-invalid-color; }
|
||||
&.bcours:hover{ border-left-color: $form-search-color; }
|
||||
&.btd:hover{ border-left-color: $form-valid-color; }
|
||||
&.btp:hover{ border-left-color: $form-invalid-color; }
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
@import 'global/tag';
|
||||
|
||||
|
||||
.error, [data-error='1']{ font-weight: bold; color: $form-invalid-color; }
|
||||
|
||||
|
||||
|
||||
|
|
@ -61,4 +62,47 @@ a{
|
|||
.strike{
|
||||
text-decoration: line-through;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
|
||||
[data-tooltip]{
|
||||
|
||||
position: relative;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:after{
|
||||
content: attr(data-tooltip);
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc( 100% + .3em );
|
||||
left: 50%;
|
||||
|
||||
margin-left: -.1em;
|
||||
|
||||
padding: .4em .6em;
|
||||
|
||||
border-radius: 3px / 3px;
|
||||
|
||||
box-shadow: 0 0 .5em 0 #fff;
|
||||
|
||||
font-size: .7em;
|
||||
color: #ddd;
|
||||
|
||||
background-color: #444;
|
||||
|
||||
transform: translateX(-50%) translateY(-50%) scale(0);
|
||||
|
||||
transition: transform .1s ease-in-out;
|
||||
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
&:hover:not([data-tooltip='']):after{
|
||||
transform: translateX(-50%) translateY(0) scale(1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -4,7 +4,12 @@
|
|||
|
||||
/* (1) Warning icon */
|
||||
.warning,
|
||||
.pin{
|
||||
.user,
|
||||
.time,
|
||||
.pin,
|
||||
.cm,
|
||||
.td,
|
||||
.tp{
|
||||
|
||||
// add icon before
|
||||
&:before{
|
||||
|
|
@ -21,6 +26,30 @@
|
|||
background-size: auto 90%;
|
||||
}
|
||||
|
||||
&.nospace:before{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.reflow{
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
&:before{
|
||||
font-size: 1.2em;
|
||||
background-position: center bottom;
|
||||
background-size: auto 70%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.big{
|
||||
|
||||
&:before{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// icon color variants
|
||||
&.neutral:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-neutral-color}'); }
|
||||
&.valid:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-valid-color}'); }
|
||||
|
|
@ -40,12 +69,118 @@
|
|||
|
||||
// add icon before
|
||||
&:before{
|
||||
background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
|
||||
background-image: url('/asset/svg/pin.svg@f4bd18');
|
||||
}
|
||||
|
||||
// icon color variants
|
||||
&.disabled:before{ background-image: url('/asset/svg/pin-disabled.svg@#{$rd-form-neutral-color}'); }
|
||||
&.neutral:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}'); }
|
||||
&.valid:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-valid-color}'); }
|
||||
&.search:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-search-color}'); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* (3) CM */
|
||||
.cm{
|
||||
|
||||
// add icon before
|
||||
&:before{
|
||||
background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}');
|
||||
}
|
||||
|
||||
&.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); }
|
||||
|
||||
// icon color variants
|
||||
&.neutral:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-neutral-color}'); }
|
||||
&.valid:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-valid-color}'); }
|
||||
&.search:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-search-color}'); }
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* (4) TD */
|
||||
.td{
|
||||
|
||||
// add icon before
|
||||
&:before{
|
||||
background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}');
|
||||
}
|
||||
|
||||
&.active:before{ background-image: url('/asset/svg/td.svg@20b565'); }
|
||||
|
||||
// icon color variants
|
||||
&.neutral:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-neutral-color}'); }
|
||||
&.valid:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-valid-color}'); }
|
||||
&.search:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-search-color}'); }
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* (5) TP */
|
||||
.tp{
|
||||
|
||||
// add icon before
|
||||
&:before{
|
||||
background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}');
|
||||
}
|
||||
|
||||
&.active:before{ background-image: url('/asset/svg/tp.svg@e85456'); }
|
||||
|
||||
// icon color variants
|
||||
&.neutral:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-neutral-color}'); }
|
||||
&.valid:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-valid-color}'); }
|
||||
&.search:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-search-color}'); }
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* (6) USER */
|
||||
.user{
|
||||
|
||||
// add icon before
|
||||
&:before{
|
||||
background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}');
|
||||
}
|
||||
|
||||
|
||||
// icon color variants
|
||||
&.neutral:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-neutral-color}'); }
|
||||
&.invalid:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-invalid-color}'); }
|
||||
&.valid:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-valid-color}'); }
|
||||
&.search:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-search-color}'); }
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* (7) TIME */
|
||||
.time{
|
||||
|
||||
// add icon before
|
||||
&:before{
|
||||
background-image: url('/asset/svg/time.svg@#{$menu-item-inactive}');
|
||||
}
|
||||
|
||||
|
||||
// icon color variants
|
||||
&.neutral:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-neutral-color}'); }
|
||||
&.invalid:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-invalid-color}'); }
|
||||
&.valid:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-valid-color}'); }
|
||||
&.search:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-search-color}'); }
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue