From 4047edff0a564be9065fa5be752e5aba5a46074d Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 7 Apr 2020 15:55:04 +0200 Subject: [PATCH 1/5] Add matrix styling in surveys --- client/src/styles/_forms.scss | 9 +++++++ client/src/styles/_survey.scss | 47 ++++++++++++++++++++++++++++++++++ client/src/survey.config.js | 17 ++++++++---- 3 files changed, 68 insertions(+), 5 deletions(-) diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss index e4216776..4511e670 100644 --- a/client/src/styles/_forms.scss +++ b/client/src/styles/_forms.scss @@ -154,4 +154,13 @@ $icon-size: 20px; margin-top: 1px; } } + + &--matrix { + margin: 0; + + #{$base}__label-container { + display: flex; + justify-content: flex-end; + } + } } diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss index 39eabfcb..9d53f17d 100644 --- a/client/src/styles/_survey.scss +++ b/client/src/styles/_survey.scss @@ -2,6 +2,7 @@ &__page-title { @include main-title; margin-bottom: $large-spacing*2; + span { @include main-title; } @@ -22,6 +23,7 @@ &__question-title { @include heading-4; margin-bottom: $medium-spacing; + > span > span { // weird survey.js html structure @include heading-4; line-height: $default-line-height; @@ -57,6 +59,7 @@ } $progress-margin-right: 140px; + &__progress { background-color: $color-silver-light; height: 0.3em; @@ -67,6 +70,10 @@ margin-right: $progress-margin-right; box-sizing: border-box; display: flex; + + > span { + display: none; + } } &__radiogroup-group, &__checkbox-group { @@ -102,11 +109,51 @@ &__completed-text { @include regular-text; } + + &__matrix { + width: 100%; + } + +} + +.matrix { + margin-bottom: $large-spacing; + + &__row { + display: table-row; + border-top: 1px solid $color-silver; + } + + &__cell { + display: table-cell; + padding: $small-spacing/2 0; + text-align: left; + vertical-align: middle; + @include small-text; + } + + thead { + th { + text-align: right; + @include small-text; + vertical-align: bottom; + padding: $small-spacing/2 $small-spacing; + } + } + + &__radio { + margin: 0; + } + + &__label { + display: flex; + } } .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 0093c5e9..8476f828 100644 --- a/client/src/survey.config.js +++ b/client/src/survey.config.js @@ -73,11 +73,18 @@ export const css = { 'root': '' }, 'matrix': { - 'root': 'table table-striped', - 'label': 'sv_q_m_label', - 'cellText': 'sv_q_m_cell_text', - 'cellTextSelected': 'sv_q_m_cell_selected bg-primary', - 'cellLabel': 'sv_q_m_cell_label' + 'root': 'survey__matrix matrix', + 'label': 'base-input-container__label-container matrix__label', + 'item': 'survey__matrix-item', + 'itemValue': 'survey__matrix-item matrix__item base-input-container__input', + // 'itemChecked': 'survey__matrix-checked', + // 'itemDecorator': 'survey__matrix-decorator', + 'materialDecorator': 'base-input-container__radiobutton base-input-container__icon matrix__radio', + 'row': 'survey__radiogroup-group matrix__row', + 'cell': 'base-input-container base-input-container--survey base-input-container--matrix matrix__cell', + 'cellText': 'survey__matrix-cell-text', + 'cellTextSelected': 'survey__matrix-cell-text--selected', + 'cellLabel': 'survey__matrix-cell-label' }, 'matrixdropdown': { 'root': 'table' From 4c149eb48efc980ba1ccc4091a83d38bceadbb64 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 7 Apr 2020 16:17:11 +0200 Subject: [PATCH 2/5] Update styles --- client/src/styles/_forms.scss | 2 +- client/src/styles/_survey.scss | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss index 4511e670..5cf07afc 100644 --- a/client/src/styles/_forms.scss +++ b/client/src/styles/_forms.scss @@ -160,7 +160,7 @@ $icon-size: 20px; #{$base}__label-container { display: flex; - justify-content: flex-end; + justify-content: flex-start; } } } diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss index 9d53f17d..20934ef7 100644 --- a/client/src/styles/_survey.scss +++ b/client/src/styles/_survey.scss @@ -118,6 +118,7 @@ .matrix { margin-bottom: $large-spacing; + position: relative; &__row { display: table-row; @@ -126,7 +127,7 @@ &__cell { display: table-cell; - padding: $small-spacing/2 0; + padding: $medium-spacing 0; text-align: left; vertical-align: middle; @include small-text; @@ -134,10 +135,10 @@ thead { th { - text-align: right; + text-align: left; @include small-text; vertical-align: bottom; - padding: $small-spacing/2 $small-spacing; + padding: $small-spacing/2 $small-spacing/2 $small-spacing/2 0; } } From f1257d925f73910e6c14856f7474509f5172d074 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 7 Apr 2020 16:27:48 +0200 Subject: [PATCH 3/5] Add force parameter to dev deployment step --- bitbucket-pipelines.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bitbucket-pipelines.yml b/bitbucket-pipelines.yml index ae2fd9bb..b24ab09f 100644 --- a/bitbucket-pipelines.yml +++ b/bitbucket-pipelines.yml @@ -68,7 +68,7 @@ aliases: deployment: dev trigger: manual script: - - git push https://heroku:$HEROKU_API_KEY@git.heroku.com/skillbox-dev.git HEAD:master + - git push --force-with-lease https://heroku:$HEROKU_API_KEY@git.heroku.com/skillbox-dev.git HEAD:master pipelines: default: From 419c5b78a11a13555dc60a0ecd1785902f7f4708 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 7 Apr 2020 17:29:03 +0200 Subject: [PATCH 4/5] Add real force parameter this time --- bitbucket-pipelines.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bitbucket-pipelines.yml b/bitbucket-pipelines.yml index b24ab09f..5faa72ea 100644 --- a/bitbucket-pipelines.yml +++ b/bitbucket-pipelines.yml @@ -68,7 +68,7 @@ aliases: deployment: dev trigger: manual script: - - git push --force-with-lease https://heroku:$HEROKU_API_KEY@git.heroku.com/skillbox-dev.git HEAD:master + - git push --force https://heroku:$HEROKU_API_KEY@git.heroku.com/skillbox-dev.git HEAD:master pipelines: default: From 2af171404431696703bb3674e93b0d3ed2a845e9 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Wed, 8 Apr 2020 11:22:41 +0200 Subject: [PATCH 5/5] Clean up code --- client/src/styles/_survey.scss | 1 - client/src/styles/_variables.scss | 10 ---------- client/src/survey.config.js | 2 -- 3 files changed, 13 deletions(-) diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss index 20934ef7..cb505cb5 100644 --- a/client/src/styles/_survey.scss +++ b/client/src/styles/_survey.scss @@ -118,7 +118,6 @@ .matrix { margin-bottom: $large-spacing; - position: relative; &__row { display: table-row; diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss index f4d793bd..001b842a 100644 --- a/client/src/styles/_variables.scss +++ b/client/src/styles/_variables.scss @@ -50,16 +50,8 @@ $serif-font-family: "ff-meta-serif-web-pro", serif; $base-font-size: 100%; // 16px in most browsers $base-font-size-pixels: 16px; // used to calculate rem - -//temporary, for room mock, todo: define with real types -$red: #FA5F5F; -$green: #6DD79A; -$brown: #EB9E77; - $list-height: 52px; - - $default-border-radius: 13px; $input-border-radius: 3px; @@ -67,14 +59,12 @@ $input-border-radius: 3px; $modal-lateral-padding: 34px; $modal-input-width: 560px; - $default-padding: 30px; $small-spacing: 10px; $medium-spacing: 20px; $large-spacing: 30px; - $font-weight-bold: 700; $font-weight-semibold: 600; $font-weight-regular: 400; diff --git a/client/src/survey.config.js b/client/src/survey.config.js index 8476f828..35a0bd67 100644 --- a/client/src/survey.config.js +++ b/client/src/survey.config.js @@ -77,8 +77,6 @@ export const css = { 'label': 'base-input-container__label-container matrix__label', 'item': 'survey__matrix-item', 'itemValue': 'survey__matrix-item matrix__item base-input-container__input', - // 'itemChecked': 'survey__matrix-checked', - // 'itemDecorator': 'survey__matrix-decorator', 'materialDecorator': 'base-input-container__radiobutton base-input-container__icon matrix__radio', 'row': 'survey__radiogroup-group matrix__row', 'cell': 'base-input-container base-input-container--survey base-input-container--matrix matrix__cell',