[scss.container.card] added 'info' (mini-header for little informations) + added icon to update 'required'/'optional' in right top corner + [vue.ue.view] moved 'required' with pin before name and 'enabled' with line-through [scss.global]
This commit is contained in:
xdrm-brackets
parent
1997af49f4
commit
e64667a955
|
|
@ -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 500 500"
|
||||
height="500px"
|
||||
id="Layer_1"
|
||||
version="1.1"
|
||||
viewBox="0 0 500 500"
|
||||
width="500px"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="pin-disabled.svg"
|
||||
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
|
||||
id="metadata9"><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></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs7" /><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="namedview5"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.6675088"
|
||||
inkscape:cx="186.10652"
|
||||
inkscape:cy="69.51775"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="29"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Layer_1"
|
||||
inkscape:snap-page="true" /><path
|
||||
style="clip-rule:evenodd;fill:#010101;fill-rule:evenodd"
|
||||
d="M 463.1543 1 L 349.9375 114.2168 L 349.9375 77.375 L 363.56836 77.375 C 376.10336 77.375 386.2832 67.198109 386.2832 54.662109 C 386.2832 42.126109 376.10336 31.949219 363.56836 31.949219 L 136.43164 31.949219 C 123.89564 31.949219 113.71875 42.126109 113.71875 54.662109 C 113.71875 67.199109 123.89564 77.375 136.43164 77.375 L 150.06055 77.375 L 150.06055 232.73828 L 82.828125 300.60742 C 79.465125 303.87442 77.376953 308.50466 77.376953 313.59766 C 77.376953 323.58866 85.459234 331.77148 95.365234 331.77148 L 132.38281 331.77148 L 1 463.1543 L 36.845703 499 L 499 36.845703 L 463.1543 1 z M 213.6582 77.375 C 223.6532 77.375 231.83008 85.552828 231.83008 95.548828 L 231.83008 213.65625 C 231.83008 223.65225 223.6542 231.82812 213.6582 231.82812 C 203.6642 231.82812 195.48633 223.65225 195.48633 213.65625 L 195.48633 95.548828 C 195.48633 85.552828 203.6642 77.375 213.6582 77.375 z M 352.55469 235.29102 L 222.74414 365.10156 L 222.74414 445.33984 C 222.74414 457.87584 232.92103 468.05078 245.45703 468.05078 C 257.99403 468.05078 268.17188 457.87584 268.17188 445.33984 L 268.17188 331.77148 L 404.63281 331.77148 C 414.53181 331.77148 422.62305 323.58866 422.62305 313.59766 C 422.62305 308.60466 420.61847 304.06211 417.35547 300.78711 L 352.55469 235.29102 z "
|
||||
id="fill-edit" /></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -32,13 +32,14 @@
|
|||
inkscape:window-height="1015"
|
||||
id="namedview5"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.472"
|
||||
inkscape:cx="14.830508"
|
||||
inkscape:cy="250"
|
||||
inkscape:zoom="0.6675088"
|
||||
inkscape:cx="186.10652"
|
||||
inkscape:cy="69.51775"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="29"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Layer_1" /><path
|
||||
inkscape:current-layer="Layer_1"
|
||||
inkscape:snap-page="true" /><path
|
||||
d="m 150.061,232.739 -67.232,67.868 c -3.363,3.267 -5.453,7.898 -5.453,12.991 0,9.991 8.083,18.173 17.989,18.173 H 222.744 V 445.34 c 0,12.536 10.177,22.711 22.713,22.711 12.537,0 22.715,-10.175 22.715,-22.711 V 331.771 h 136.46 c 9.899,0 17.992,-8.182 17.992,-18.173 0,-4.993 -2.006,-9.536 -5.269,-12.811 L 349.938,232.644 V 77.375 h 13.631 c 12.535,0 22.715,-10.177 22.715,-22.713 0,-12.536 -10.18,-22.713 -22.715,-22.713 H 136.432 c -12.536,0 -22.713,10.177 -22.713,22.713 0,12.537 10.177,22.713 22.713,22.713 h 13.629 V 232.739 Z M 231.83,95.548 v 118.109 c 0,9.996 -8.176,18.172 -18.172,18.172 -9.994,0 -18.171,-8.176 -18.171,-18.172 V 95.548 c 0,-9.996 8.177,-18.173 18.171,-18.173 9.995,0 18.172,8.177 18.172,18.173 z"
|
||||
id="fill-edit"
|
||||
inkscape:connector-curvature="0"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
|
@ -46,6 +46,7 @@
|
|||
<!-- if VIEW MODE -->
|
||||
<div class='goo-menu' v-show='gstore.edit_i!=pi'>
|
||||
<div class='enabled' :data-enabled='ue.code' :data-active='ue.disabled?0:1' title='UE activée' @click="gstore.ia_handler(pi)"></div>
|
||||
<div class='required' :data-required='ue.code' :data-active='ue.required?1:0' title='UE obligatoire' @click="gstore.io_handler(pi)"></div>
|
||||
<div class='remove' :data-remove='ue.code' title='Supprimer' @click="gstore.ir_handler(ue.code)"></div>
|
||||
<div class='edit' :data-edit='ue.code' title='Modifier' @click="gstore.ie_toggle(pi)"></div>
|
||||
</div>
|
||||
|
|
@ -61,7 +62,7 @@
|
|||
<!-- endif -->
|
||||
|
||||
<!-- if VIEW MODE -->
|
||||
<h1 v-show='gstore.edit_i!=pi'>{{ ue.label }}<span :data-visible='1'>({{ ue.code }})</span></h1>
|
||||
<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>
|
||||
<!-- if EDIT MODE -->
|
||||
<h1 v-show='gstore.edit_i==pi' :class="ue.required ? 'warning' : ''">
|
||||
<input type='text' placeholder='Libellé' v-model='gstore.edit_label'>
|
||||
|
|
@ -72,8 +73,6 @@
|
|||
|
||||
|
||||
<!-- if VIEW MODE -->
|
||||
<div v-show='gstore.edit_i!=pi' :class="ue.required ? 'sub pin' : 'sub pin neutral'">{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}</div>
|
||||
<div v-show='gstore.edit_i!=pi' class='sub'><strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales</div>
|
||||
<div v-show='gstore.edit_i!=pi' class='taglist'>
|
||||
<span v-if='ue.formations.length==0' class='tag invalid'>Aucune formation</span>
|
||||
<span v-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'tag search' : 'tag'">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>
|
||||
|
|
@ -114,6 +113,10 @@
|
|||
</div>
|
||||
<!-- endif -->
|
||||
|
||||
<div class='info'>
|
||||
<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -504,9 +504,9 @@ gstore.add('ie_handler', function(ue_i){
|
|||
|
||||
|
||||
|
||||
/* (8) Manage instant admin
|
||||
/* (8) Manage instant toggle
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Define admin handler */
|
||||
/* (1) Define 'disabled' handler */
|
||||
gstore.add('ia_handler', function(ue_i){
|
||||
|
||||
/* (1) Abort if wrong ue_i */
|
||||
|
|
@ -532,6 +532,32 @@ gstore.add('ia_handler', function(ue_i){
|
|||
|
||||
});
|
||||
|
||||
/* (1) Define 'required' / 'optional handler */
|
||||
gstore.add('io_handler', function(ue_i){
|
||||
|
||||
/* (1) Abort if wrong ue_i */
|
||||
if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null)
|
||||
return;
|
||||
|
||||
/* (2) Toggle current value */
|
||||
var local = gstore.get.ues[ue_i];
|
||||
var is_required = local.required == '1' || local.required === true;
|
||||
var new_state = !is_required;
|
||||
|
||||
/* (3.1) Update in database */
|
||||
api.call('PUT ue/'+local.code, { required: new_state }, function(rs){
|
||||
|
||||
/* (3.1.1) Abort on error */
|
||||
if( rs.error !== 0 || rs.updated !== true )
|
||||
return console.log('Impossible de changer le status \'requis\' / \'optionnel\', erreur '+rs.error);
|
||||
|
||||
/* (3.1.2) Success */
|
||||
gstore.get.ues[ue_i].required = new_state ? 1 : 0;
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* (9) Manage 'manage' sub-page
|
||||
---------------------------------------------------------*/
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
|
||||
$btn-size: 1.8em;
|
||||
$btn-space: 0em;
|
||||
$nb-btn: 3;
|
||||
$nb-btn: 4;
|
||||
$nb-spc: $nb-btn - 1;
|
||||
|
||||
$cont-w: $btn-size * $nb-btn + $nb-spc * $btn-space;
|
||||
|
|
@ -138,12 +138,14 @@
|
|||
& > div.remove[data-remove],
|
||||
& > div.edit[data-edit],
|
||||
& > div.enabled[data-enabled],
|
||||
& > div.required[data-required],
|
||||
& > div.admin[data-admin]{
|
||||
background-color: darken(#fff, 12%);
|
||||
|
||||
/* (2.1.2) displace all but 1st element */
|
||||
&.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
|
||||
&.remove[data-remove]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
|
||||
&.required[data-required]{ left: calc( 100% - #{$btn-size * 4 + $btn-space * 3} ); }
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -153,6 +155,7 @@
|
|||
& > div.remove[data-remove],
|
||||
& > div.edit[data-edit],
|
||||
& > div.enabled[data-enabled],
|
||||
& > div.required[data-required],
|
||||
& > div.admin[data-admin]{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
|
@ -206,6 +209,16 @@
|
|||
&[data-active='1']:hover{ background-image: url('/asset/svg/bell.svg@f4a118'); }
|
||||
}
|
||||
|
||||
/* (2.4) REQUIRED switch */
|
||||
&.required[data-required]{
|
||||
background-image: url('/asset/svg/pin-disabled.svg@aaaaaa');
|
||||
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'); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -581,7 +594,26 @@
|
|||
|
||||
}
|
||||
|
||||
/* (9) Infobar */
|
||||
& > div.info{
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-top: 1.9em;
|
||||
margin-left: -1.9em;
|
||||
height: auto;
|
||||
width: calc( 100% + 2*1.9em - 2*1em);
|
||||
|
||||
margin-bottom: -1.9em;
|
||||
padding: .3em 1em;
|
||||
|
||||
border-top: 1px solid #f3f3f3;
|
||||
|
||||
background-color: darken(#fafbfd,1%);
|
||||
|
||||
font-size: .8em;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,3 +55,10 @@ a{
|
|||
font-family: 'Mono';
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
|
||||
[data-strike='1'],
|
||||
.strike{
|
||||
text-decoration: line-through;
|
||||
opacity: .5;
|
||||
}
|
||||
Loading…
Reference in New Issue