From a9b10fdf88e049f46a64a4d17d08f5fe45443f6c Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Thu, 18 Jul 2019 14:55:46 +0200 Subject: [PATCH 1/7] Add radiobutton styling to survey --- client/src/components/icons/Tick.vue | 2 +- client/src/components/inputs/BaseInput.vue | 74 --------------- client/src/pages/survey.vue | 1 + client/src/styles/_forms.scss | 105 ++++++++++++++++++++- client/src/styles/_survey.scss | 5 + client/src/survey.config.js | 12 +-- 6 files changed, 117 insertions(+), 82 deletions(-) diff --git a/client/src/components/icons/Tick.vue b/client/src/components/icons/Tick.vue index 468b76d4..e89a99ec 100644 --- a/client/src/components/icons/Tick.vue +++ b/client/src/components/icons/Tick.vue @@ -1,5 +1,5 @@ diff --git a/client/src/components/inputs/BaseInput.vue b/client/src/components/inputs/BaseInput.vue index e0c0c59f..6a5b8c7e 100644 --- a/client/src/components/inputs/BaseInput.vue +++ b/client/src/components/inputs/BaseInput.vue @@ -34,77 +34,3 @@ } } - - diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue index 994dd2b0..de737b88 100644 --- a/client/src/pages/survey.vue +++ b/client/src/pages/survey.vue @@ -68,6 +68,7 @@ }); survey.css = css; + survey.showProgressBar = 'bottom'; return survey; } diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss index ba88e0ad..f8a18836 100644 --- a/client/src/styles/_forms.scss +++ b/client/src/styles/_forms.scss @@ -15,6 +15,7 @@ &--error { border-color: $color-accent-3-dark; } + } .skillbox-textarea { @@ -22,9 +23,111 @@ height: 120px; } - .skillbox-auto-grow { overflow: hidden; resize: none; outline: 0; } + +.base-input-container { + display: inline-flex; + flex-direction: row; + align-items: center; + margin-right: 10px; + cursor: pointer; + width: auto; + + svg { + width: 15px; + } + + &__input { + display: none; + } + + &__input:checked + &__checkbox { + border: 0; + background-color: $color-brand; + + svg { + display: block; + fill: $color-white; + } + } + + &__icon { + width: 20px; + height: 20px; + display: flex; + border: 2px solid $color-silver-dark; + justify-content: center; + align-items: center; + box-sizing: border-box; + margin-right: 10px; + transition: background-color 0.5s; + } + + &__checkbox { + border-radius: 3px; + + svg { + display: none; + transition: all 0.7s; + } + } + + &__radiobutton { + border-radius: 20px; + + svg { + display: none; + fill: $color-brand; + width: 12px; + } + } + + &__input:checked + &__radiobutton { + border-color: $color-brand; + + svg { + display: block; + } + } + + &__label { + font-family: $sans-serif-font-family; + } + + $base: &; + + &--survey { + margin-bottom: $small-spacing; + + #{$base}__input:checked + #{$base}__radiobutton { + background-image: url('data:image/svg+xml;utf8,'); + background-size: 12px 12px; + background-repeat: no-repeat; + background-position: 50% 50%; + width: 20px; + height: 20px; + } + + #{$base}__label-container { + display: -ms-grid; + display: grid; + grid-template-columns: 30px 1fr; + align-items: start; + justify-content: center; + } + + #{$base}__label { + grid-row: 1; + grid-column: 2; + line-height: 1.5; + } + + #{$base}__radiobutton { + margin-top: 1px; + } + } +} diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss index c854eb23..85ffaa18 100644 --- a/client/src/styles/_survey.scss +++ b/client/src/styles/_survey.scss @@ -25,4 +25,9 @@ width: 100%; margin-bottom: $medium-spacing; } + + &__radiogroup-group { + display: flex; + flex-direction: column; + } } diff --git a/client/src/survey.config.js b/client/src/survey.config.js index a6b2213b..ebcb4f58 100644 --- a/client/src/survey.config.js +++ b/client/src/survey.config.js @@ -103,12 +103,12 @@ export const css = { 'itemValue': 'sv_q_mt_item_value skillbox-input' }, 'radiogroup': { - 'root': 'sv_qcbc form-inline', - 'item': 'radio', - 'label': '', - 'itemControl': '', - 'controlLabel': '', - 'materialDecorator': 'circle', + 'root': 'survey__radiogroup-group', + 'item': 'base-input-container base-input-container--survey', + 'label': 'base-input-container__label-container', + 'itemControl': 'base-input-container__input', + 'controlLabel': 'base-input-container__label', + 'materialDecorator': 'base-input-container__radiobutton base-input-container__icon', 'other': 'sv_q_radiogroup_other skillbox-input', 'clearButton': 'sv_q_radiogroup_clear button', 'column': 'sv_q_select_column' From d5a63a0c7ee635cede9b38df493ab86d941f5a41 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 9 Jul 2019 14:56:26 +0200 Subject: [PATCH 2/7] Add styling for survey progress bar --- client/src/styles/_survey.scss | 56 ++++++++++++++++++++++++++++++++-- client/src/survey.config.js | 26 ++++++++-------- 2 files changed, 66 insertions(+), 16 deletions(-) diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss index 85ffaa18..d6133773 100644 --- a/client/src/styles/_survey.scss +++ b/client/src/styles/_survey.scss @@ -3,7 +3,7 @@ @include main-title; margin-bottom: $large-spacing*2; span { - @include main-title; + @include main-title; } } @@ -26,8 +26,58 @@ margin-bottom: $medium-spacing; } - &__radiogroup-group { + &__body { display: flex; - flex-direction: column; + flex-wrap: wrap; + justify-content: space-between; + //grid-template-areas: "content content" "navigation progress"; + + &--completed { + flex-direction: column; + } + } + + &__page { + width: 100%; + //grid-area: content; + order: 1; + } + + &__footer { + //grid-area: navigation; + order: 2; + } + + $progress-margin-right: 120px; + &__progress { + background-color: $color-silver; + height: 0.3em; + order: 3; + width: 40%; + //grid-area: progress; + position: relative; + margin-right: $progress-margin-right; + box-sizing: border-box; + display: flex; + align-content: center; + } + + &__progress-bar { + background-color: $color-brand; + + height: 100%; + + > span { + position: absolute; + right: -$progress-margin-right; + top: -0.25em; + @include regular-text; + } + + &__radiogroup-group { + display: flex; + flex-direction: column; + + } } } diff --git a/client/src/survey.config.js b/client/src/survey.config.js index ebcb4f58..e798c6d7 100644 --- a/client/src/survey.config.js +++ b/client/src/survey.config.js @@ -1,26 +1,26 @@ export const css = { 'root': 'survey', - 'header': '', - 'body': '', + 'header': 'survey__header', + 'body': 'survey__body', 'bodyEmpty': '', - 'footer': '', + 'footer': 'survey__footer', 'navigationButton': 'button button--primary', - 'completedPage': '', + 'completedPage': 'survey__body--completed', 'navigation': { 'complete': 'button button--primary', 'prev': 'button button--primary', 'next': 'button button--primary', 'start': 'button button--primary' }, - 'progress': 'progress center-block mx-auto mb-4', - 'progressBar': 'progress-bar', + 'progress': 'survey__progress', + 'progressBar': 'survey__progress-bar', 'page': { - 'root': '', + 'root': 'survey__page', 'title': '', 'survey__page-description': '' }, - 'pageTitle': '', - 'pageDescription': 'small', + 'pageTitle': 'survey__page-title', + 'pageDescription': 'survey__page-description', 'row': 'sv_row', 'question': { 'mainRoot': 'survey__question question', @@ -126,9 +126,9 @@ export const css = { 'root': 'btn-group', 'item': 'btn btn-default btn-secondary', 'selected': 'active', - 'minText': 'sv_q_rating_min_text', - 'itemText': 'sv_q_rating_item_text', - 'maxText': 'sv_q_rating_max_text' + 'minText': '', + 'itemText': '', + 'maxText': '' }, 'text': 'survey__input skillbox-input', 'expression': 'survey__input skillbox-input', @@ -141,7 +141,7 @@ export const css = { 'removeFile': 'sv_q_file_remove' }, 'saveData': { - 'root': '', + 'root': 'save-data', 'saving': 'alert alert-info', 'error': 'alert alert-danger', 'success': 'alert alert-success', From b84059adf552cfbcad7c0119bbc543acf8d497df Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Thu, 18 Jul 2019 15:13:58 +0200 Subject: [PATCH 3/7] Add checkbox styling --- client/src/styles/_forms.scss | 9 +++++++++ client/src/styles/_survey.scss | 10 +++++----- client/src/survey.config.js | 11 ++++++----- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss index f8a18836..1c9c600a 100644 --- a/client/src/styles/_forms.scss +++ b/client/src/styles/_forms.scss @@ -112,6 +112,15 @@ height: 20px; } + #{$base}__input:checked + #{$base}__checkbox { + background-image: url('data:image/svg+xml;utf8,'); + background-size: 12px 12px; + background-repeat: no-repeat; + background-position: 50% 50%; + width: 20px; + height: 20px; + } + #{$base}__label-container { display: -ms-grid; display: grid; diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss index d6133773..f2f0688e 100644 --- a/client/src/styles/_survey.scss +++ b/client/src/styles/_survey.scss @@ -62,6 +62,11 @@ align-content: center; } + &__radiogroup-group, &__checkbox-group { + display: flex; + flex-direction: column; + } + &__progress-bar { background-color: $color-brand; @@ -74,10 +79,5 @@ @include regular-text; } - &__radiogroup-group { - display: flex; - flex-direction: column; - - } } } diff --git a/client/src/survey.config.js b/client/src/survey.config.js index e798c6d7..6d2162a9 100644 --- a/client/src/survey.config.js +++ b/client/src/survey.config.js @@ -54,11 +54,12 @@ export const css = { 'materialDecorator': 'checkbox-material' }, 'checkbox': { - 'root': 'sv_qcbc sv_qcbx form-inline', - 'item': 'checkbox', - 'itemControl': '', - 'controlLabel': '', - 'materialDecorator': 'checkbox-material', + 'root': 'survey__checkbox-group', + 'item': 'base-input-container base-input-container--survey', + 'itemControl': 'base-input-container__input', + 'label': 'base-input-container__label-container', + 'controlLabel': 'base-input-container__label', + 'materialDecorator': 'base-input-container__checkbox base-input-container__icon', 'other': 'sv_q_checkbox_other skillbox-input', 'column': 'sv_q_select_column' }, From 3a64365f7d3d335830abe0c858d36ab2705f9e8a Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Thu, 18 Jul 2019 16:33:21 +0200 Subject: [PATCH 4/7] Replace values with a variable --- client/src/styles/_forms.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss index 1c9c600a..8ce75beb 100644 --- a/client/src/styles/_forms.scss +++ b/client/src/styles/_forms.scss @@ -9,6 +9,8 @@ background-color: $color-white; } +$icon-size: 20px; + .skillbox-input { @include inputstyle; @@ -56,8 +58,8 @@ } &__icon { - width: 20px; - height: 20px; + width: $icon-size; + height: $icon-size; display: flex; border: 2px solid $color-silver-dark; justify-content: center; @@ -108,8 +110,8 @@ background-size: 12px 12px; background-repeat: no-repeat; background-position: 50% 50%; - width: 20px; - height: 20px; + width: $icon-sizex; + height: $icon-size; } #{$base}__input:checked + #{$base}__checkbox { @@ -117,8 +119,8 @@ background-size: 12px 12px; background-repeat: no-repeat; background-position: 50% 50%; - width: 20px; - height: 20px; + width: $icon-size; + height: $icon-size; } #{$base}__label-container { From eda5653477a2d6ad80054d9b88d9f5244139b935 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 22 Jul 2019 11:36:08 +0200 Subject: [PATCH 5/7] Always display survey title from JSON, never from model --- client/src/pages/survey.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue index de737b88..1ee651e9 100644 --- a/client/src/pages/survey.vue +++ b/client/src/pages/survey.vue @@ -86,13 +86,14 @@ result({data, loading, networkStatus}) { if (!loading) { let json = JSON.parse(data.survey.data); + json.showTitle = false; let answer = {}; if (data.survey.answer && data.survey.answer.data) { answer = JSON.parse(data.survey.answer.data); } this.survey = this.initSurvey(json, answer); - this.title = data.survey.title; + this.title = json.title; } }, } From d8f4077d634b9ed08a8cd0d7871d0ad888591461 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 22 Jul 2019 14:42:07 +0200 Subject: [PATCH 6/7] Fix typo --- client/src/styles/_forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss index 8ce75beb..e94dfa20 100644 --- a/client/src/styles/_forms.scss +++ b/client/src/styles/_forms.scss @@ -110,7 +110,7 @@ $icon-size: 20px; background-size: 12px 12px; background-repeat: no-repeat; background-position: 50% 50%; - width: $icon-sizex; + width: $icon-size; height: $icon-size; } From c537fd37aaa2bbced5903164d475bce75927e4fd Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 22 Jul 2019 16:27:59 +0200 Subject: [PATCH 7/7] Add more styling --- client/src/styles/_survey.scss | 26 ++++++++++++++++++++++++-- client/src/survey.config.js | 20 ++++++++++---------- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss index f2f0688e..962d5d13 100644 --- a/client/src/styles/_survey.scss +++ b/client/src/styles/_survey.scss @@ -1,5 +1,6 @@ .survey { - &__panel-title { + &__panel-title, + &__page-title { @include main-title; margin-bottom: $large-spacing*2; span { @@ -7,7 +8,8 @@ } } - &__panel-description { + &__panel-description, + &__page-description { @include regular-paragraph; line-height: 1.5; margin-bottom: $large-spacing; @@ -80,4 +82,24 @@ } } + + &__error { + margin-bottom: $large-spacing; + } + + &__error-item { + span { + color: $color-error; + @include small-text; + } + } +} + +.question { + + $question: &; + &--error #{$question}__input { + border-color: $color-error; + box-shadow: none; + } } diff --git a/client/src/survey.config.js b/client/src/survey.config.js index 6d2162a9..a6c3c5f8 100644 --- a/client/src/survey.config.js +++ b/client/src/survey.config.js @@ -16,8 +16,8 @@ export const css = { 'progressBar': 'survey__progress-bar', 'page': { 'root': 'survey__page', - 'title': '', - 'survey__page-description': '' + 'title': 'survey__page-title', + 'description': 'survey__page-description' }, 'pageTitle': 'survey__page-title', 'pageDescription': 'survey__page-description', @@ -29,10 +29,10 @@ export const css = { 'title': 'survey__question-title', 'number': 'sv_q_num', 'survey__question-description': 'small', - 'comment': 'survey__question-input skillbox-input', + 'comment': 'survey__question-input skillbox-input question__input', 'required': '', 'titleRequired': '', - 'hasError': 'has-error', + 'hasError': 'survey__question--error question--error', 'indent': 20 }, 'panel': { @@ -43,9 +43,9 @@ export const css = { 'error': { 'root': 'alert alert-danger', 'icon': 'glyphicon glyphicon-exclamation-sign', - 'item': '', - 'locationTop': 'sv_qstn_error_top', - 'locationBottom': 'sv_qstn_error_bottom' + 'item': 'survey__error-item', + 'locationTop': 'survey__error survey__error--top', + 'locationBottom': 'survey__error survey__error--bottom' }, 'boolean': { 'root': 'sv_qbln form-inline checkbox', @@ -63,10 +63,10 @@ export const css = { 'other': 'sv_q_checkbox_other skillbox-input', 'column': 'sv_q_select_column' }, - 'comment': 'survey__input skillbox-input', + 'comment': 'survey__input skillbox-input question__input', 'dropdown': { 'root': '', - 'control': 'skillbox-input', + 'control': 'survey__input skillbox-input', 'other': 'sv_q_dd_other skillbox-input' }, 'html': { @@ -131,7 +131,7 @@ export const css = { 'itemText': '', 'maxText': '' }, - 'text': 'survey__input skillbox-input', + 'text': 'survey__input skillbox-input question__input', 'expression': 'survey__input skillbox-input', 'file': { 'root': 'sv_q_file',