From e64667a9551683c87fc118cc1622ca297e8b9a25 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 29 Mar 2018 19:30:05 +0200 Subject: [PATCH] [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] --- public_html/asset/svg/pin-disabled.svg | 45 ++++++++++++++++++++++++++ public_html/asset/svg/pin.svg | 9 +++--- webpack/component/ue/view.vue | 15 +++++---- webpack/data/ue.js | 30 +++++++++++++++-- webpack/scss/container/card.scss | 34 ++++++++++++++++++- webpack/scss/global.scss | 7 ++++ 6 files changed, 127 insertions(+), 13 deletions(-) create mode 100644 public_html/asset/svg/pin-disabled.svg diff --git a/public_html/asset/svg/pin-disabled.svg b/public_html/asset/svg/pin-disabled.svg new file mode 100644 index 0000000..ebdeadf --- /dev/null +++ b/public_html/asset/svg/pin-disabled.svg @@ -0,0 +1,45 @@ + +image/svg+xml \ No newline at end of file diff --git a/public_html/asset/svg/pin.svg b/public_html/asset/svg/pin.svg index b13d28e..73fb31d 100644 --- a/public_html/asset/svg/pin.svg +++ b/public_html/asset/svg/pin.svg @@ -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" />
-
-
-
+
+
+
+
@@ -61,7 +62,7 @@ -

{{ ue.label }}({{ ue.code }})

+

{{ ue.label }}({{ ue.code }})

@@ -72,8 +73,6 @@ -
{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}
-
{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h totales
Aucune formation {{ gstore.form_by_id(form_id).labelForm || '???' }} @@ -114,6 +113,10 @@
+
+ {{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h totales +
+ diff --git a/webpack/data/ue.js b/webpack/data/ue.js index 789528b..c122775 100644 --- a/webpack/data/ue.js +++ b/webpack/data/ue.js @@ -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 ---------------------------------------------------------*/ diff --git a/webpack/scss/container/card.scss b/webpack/scss/container/card.scss index d83d82f..7cb42c7 100644 --- a/webpack/scss/container/card.scss +++ b/webpack/scss/container/card.scss @@ -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; + } } diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss index 050da1c..172374f 100644 --- a/webpack/scss/global.scss +++ b/webpack/scss/global.scss @@ -54,4 +54,11 @@ a{ .mono{ font-family: 'Mono'; font-size: .9em; +} + + +[data-strike='1'], +.strike{ + text-decoration: line-through; + opacity: .5; } \ No newline at end of file