From dc647f567f67779b90a3c947e87a533ba924d349 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sun, 18 Mar 2018 17:17:31 +0100 Subject: [PATCH] [webpack.ue.manage] CREATE new Cours|TD|TP implemented (with real-time feedback (push into VueJS), then updates/remove works) --- webpack/component/ue/manage.vue | 36 ++++++++- webpack/data/ue.js | 107 ++++++++++++++++++++++++--- webpack/scss/container/card.scss | 2 +- webpack/scss/container/list.scss | 30 ++++++-- webpack/scss/global/before-icon.scss | 4 + webpack/scss/global/tag.scss | 1 + 6 files changed, 160 insertions(+), 20 deletions(-) diff --git a/webpack/component/ue/manage.vue b/webpack/component/ue/manage.vue index e7534a3..bd5f615 100644 --- a/webpack/component/ue/manage.vue +++ b/webpack/component/ue/manage.vue @@ -4,7 +4,31 @@
- + +
+ +
+ + + + +
{{ gstore.ccrea.err }}
+ +
+ +
+ +
@@ -21,7 +45,7 @@ v-for='(c,i) in gstore.manage.cours' :data-id='c.idCours'> -
+
@@ -91,7 +115,7 @@ data-anim-incoming='1' :data-anim-bounce='gstore.nav_anim.out?1:0'> -
+
- margin-top: -1em; // replace as if not a select + margin-top: -1em; // replace as if not a select margin-bottom: -.3em; // fix layout for following elements // remove border diff --git a/webpack/scss/container/list.scss b/webpack/scss/container/list.scss index 32d75ea..29fb90f 100644 --- a/webpack/scss/container/list.scss +++ b/webpack/scss/container/list.scss @@ -42,7 +42,8 @@ flex-wrap: nowrap; /* (1.1) Element item */ - & > div:not(.icon){ + & > div:not(.icon), + & > input{ flex: 1 1 0; // fix @@ -69,7 +70,6 @@ display: inline-block; position: relative; height: 1.8em; - width: auto; margin: 0; margin-right: 1em; @@ -91,12 +91,25 @@ -moz-appearance: none; appearance: none; - justify-self: space-around; flex: 0 1 20em; + &.min{ flex: 0 1 5em; } + } - /* (1.4) Icon (remove) */ + /* (1.4) Input */ + & > input{ + display: inline-block; + position: relative; + min-width: 0; + + margin: 0; + padding: .22em .5em; + + flex: 0 1 5em; + } + + /* (1.5) Icon (remove) */ & > div.icon{ display: inline-block; width: 1.2em; @@ -104,14 +117,19 @@ margin-right: 1em; - background: url('/asset/svg/cross.svg@aaaaaa') center center no-repeat; + background: url('/asset/svg/plus.svg@aaaaaa') center center no-repeat; background-size: 60% auto; overflow: hidden; cursor: pointer; - &:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); } + &:hover{ background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}'); } + + &.remove{ + background-image: url('/asset/svg/cross.svg@aaaaaa'); + &:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); } + } } } diff --git a/webpack/scss/global/before-icon.scss b/webpack/scss/global/before-icon.scss index d41948c..d2a3097 100644 --- a/webpack/scss/global/before-icon.scss +++ b/webpack/scss/global/before-icon.scss @@ -28,6 +28,10 @@ // force red text &.invalid{ color: $form-invalid-color; } + + &[data-valid='1']{ color: $form-valid-color; } + &[data-neutral='1']{ color: $form-neutral-color; } + &[data-search='1']{ color: $form-search-color; } } diff --git a/webpack/scss/global/tag.scss b/webpack/scss/global/tag.scss index b690462..9c7e0b9 100644 --- a/webpack/scss/global/tag.scss +++ b/webpack/scss/global/tag.scss @@ -33,6 +33,7 @@ color: #999; font-size: .8em; + white-space: nowrap; cursor: default;