From 2d270f5689d99f0599df0ce3b6e8a4c5a7b513b4 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 29 Mar 2018 21:21:37 +0200 Subject: [PATCH] [ue.view] updated 'required' colors + 'CM', 'TD', 'TP' with group count + when errors in bold red + error incicators --- public_html/asset/svg/time.svg | 45 +++++++++ webpack/component/ue/manage.vue | 6 +- webpack/component/ue/view.vue | 47 ++++----- webpack/scss/container/card.scss | 29 ++++-- webpack/scss/container/list.scss | 6 +- webpack/scss/global.scss | 44 +++++++++ webpack/scss/global/before-icon.scss | 139 ++++++++++++++++++++++++++- 7 files changed, 276 insertions(+), 40 deletions(-) create mode 100644 public_html/asset/svg/time.svg diff --git a/public_html/asset/svg/time.svg b/public_html/asset/svg/time.svg new file mode 100644 index 0000000..1cec4d1 --- /dev/null +++ b/public_html/asset/svg/time.svg @@ -0,0 +1,45 @@ + +image/svg+xml \ No newline at end of file diff --git a/webpack/component/ue/manage.vue b/webpack/component/ue/manage.vue index 7246fc2..4b0173c 100644 --- a/webpack/component/ue/manage.vue +++ b/webpack/component/ue/manage.vue @@ -45,7 +45,7 @@ -
@@ -78,7 +78,7 @@ -
-
-

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

+

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

-

+

()

+ +
+
+ {{ ue.nbrCours }} CM + + +
+
+ {{ ue.nbrTD }} TD + + +
+
+ {{ ue.nbrTP }} TP + + +
+
+
@@ -82,25 +101,6 @@
{{ gstore.edit_err }}
-
- - {{ ue.volumeCours }}h Cours -
- {{ ue.volumeTD }}h TD -
- {{ ue.volumeTP }}h TP - - - Cours -
- TD -
- TP - - -
- -
@@ -114,7 +114,10 @@
- {{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h totales + {{ ue.volumeCours}} CM + {{ ue.volumeTD}} TD + {{ ue.volumeTP }} TP → + {{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h
diff --git a/webpack/scss/container/card.scss b/webpack/scss/container/card.scss index 7cb42c7..cdacb2c 100644 --- a/webpack/scss/container/card.scss +++ b/webpack/scss/container/card.scss @@ -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; } } diff --git a/webpack/scss/container/list.scss b/webpack/scss/container/list.scss index 3f7dd8f..4f77e2a 100644 --- a/webpack/scss/container/list.scss +++ b/webpack/scss/container/list.scss @@ -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; } } diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss index 172374f..0bf7c43 100644 --- a/webpack/scss/global.scss +++ b/webpack/scss/global.scss @@ -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); + } + + + } \ No newline at end of file diff --git a/webpack/scss/global/before-icon.scss b/webpack/scss/global/before-icon.scss index d2a3097..2f1a016 100644 --- a/webpack/scss/global/before-icon.scss +++ b/webpack/scss/global/before-icon.scss @@ -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}'); } + + } \ No newline at end of file