ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Merged in feature/old-surveyjs-styling (pull request #27) 

Feature/old surveyjs styling

Approved-by: Christian Cueni <christian.cueni@iterativ.ch>
This commit is contained in:
Ramon Wenger 2019-07-23 08:33:37 +00:00 committed by Christian Cueni
parent af8fa19e61 c537fd37aa
commit 48ee15850f
6 changed files with 234 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/icons/Tick.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>tick</title> <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<polygon points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/> <polygon points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/>
</svg> </svg>
</template> </template>

74
client/src/components/inputs/BaseInput.vue
View File

@ -34,77 +34,3 @@
} }
} }
</script> </script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.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;
}
}
</style>

4
client/src/pages/survey.vue
View File

@ -68,6 +68,7 @@
}); });
survey.css = css; survey.css = css;
survey.showProgressBar = 'bottom';
return survey; return survey;
} }
@ -85,13 +86,14 @@
result({data, loading, networkStatus}) { result({data, loading, networkStatus}) {
if (!loading) { if (!loading) {
let json = JSON.parse(data.survey.data); let json = JSON.parse(data.survey.data);
json.showTitle = false;
let answer = {}; let answer = {};
if (data.survey.answer && data.survey.answer.data) { if (data.survey.answer && data.survey.answer.data) {
answer = JSON.parse(data.survey.answer.data); answer = JSON.parse(data.survey.answer.data);
} }
this.survey = this.initSurvey(json, answer); this.survey = this.initSurvey(json, answer);
this.title = data.survey.title; this.title = json.title;
} }
}, },
} }

116
client/src/styles/_forms.scss
View File

@ -9,12 +9,15 @@
background-color: $color-white; background-color: $color-white;
} }
$icon-size: 20px;
.skillbox-input { .skillbox-input {
@include inputstyle; @include inputstyle;
&--error { &--error {
border-color: $color-accent-3-dark; border-color: $color-accent-3-dark;
} }
} }
.skillbox-textarea { .skillbox-textarea {
@ -22,9 +25,120 @@
height: 120px; height: 120px;
} }
.skillbox-auto-grow { .skillbox-auto-grow {
overflow: hidden; overflow: hidden;
resize: none; resize: none;
outline: 0; 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: $icon-size;
height: $icon-size;
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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2317A887" r="25" cx="50" cy="50"></circle></svg>');
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: 50% 50%;
width: $icon-size;
height: $icon-size;
}
#{$base}__input:checked + #{$base}__checkbox {
background-image: url('data:image/svg+xml;utf8,<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%23FFFFFF" points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/></svg>');
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: 50% 50%;
width: $icon-size;
height: $icon-size;
}
#{$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;
}
}
}

83
client/src/styles/_survey.scss
View File

@ -1,13 +1,15 @@
.survey { .survey {
&__panel-title { &__panel-title,
&__page-title {
@include main-title; @include main-title;
margin-bottom: $large-spacing*2; margin-bottom: $large-spacing*2;
span { span {
@include main-title; @include main-title;
} }
} }
&__panel-description { &__panel-description,
&__page-description {
@include regular-paragraph; @include regular-paragraph;
line-height: 1.5; line-height: 1.5;
margin-bottom: $large-spacing; margin-bottom: $large-spacing;
@ -25,4 +27,79 @@
width: 100%; width: 100%;
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
} }
&__body {
display: flex;
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;
}
&__radiogroup-group, &__checkbox-group {
display: flex;
flex-direction: column;
}
&__progress-bar {
background-color: $color-brand;
height: 100%;
> span {
position: absolute;
right: -$progress-margin-right;
top: -0.25em;
@include regular-text;
}
}
&__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;
}
} }

69
client/src/survey.config.js
View File

@ -1,26 +1,26 @@
export const css = { export const css = {
'root': 'survey', 'root': 'survey',
'header': '', 'header': 'survey__header',
'body': '', 'body': 'survey__body',
'bodyEmpty': '', 'bodyEmpty': '',
'footer': '', 'footer': 'survey__footer',
'navigationButton': 'button button--primary', 'navigationButton': 'button button--primary',
'completedPage': '', 'completedPage': 'survey__body--completed',
'navigation': { 'navigation': {
'complete': 'button button--primary', 'complete': 'button button--primary',
'prev': 'button button--primary', 'prev': 'button button--primary',
'next': 'button button--primary', 'next': 'button button--primary',
'start': 'button button--primary' 'start': 'button button--primary'
}, },
'progress': 'progress center-block mx-auto mb-4', 'progress': 'survey__progress',
'progressBar': 'progress-bar', 'progressBar': 'survey__progress-bar',
'page': { 'page': {
'root': '', 'root': 'survey__page',
'title': '', 'title': 'survey__page-title',
'survey__page-description': '' 'description': 'survey__page-description'
}, },
'pageTitle': '', 'pageTitle': 'survey__page-title',
'pageDescription': 'small', 'pageDescription': 'survey__page-description',
'row': 'sv_row', 'row': 'sv_row',
'question': { 'question': {
'mainRoot': 'survey__question question', 'mainRoot': 'survey__question question',
@ -29,10 +29,10 @@ export const css = {
'title': 'survey__question-title', 'title': 'survey__question-title',
'number': 'sv_q_num', 'number': 'sv_q_num',
'survey__question-description': 'small', 'survey__question-description': 'small',
'comment': 'survey__question-input skillbox-input', 'comment': 'survey__question-input skillbox-input question__input',
'required': '', 'required': '',
'titleRequired': '', 'titleRequired': '',
'hasError': 'has-error', 'hasError': 'survey__question--error question--error',
'indent': 20 'indent': 20
}, },
'panel': { 'panel': {
@ -43,9 +43,9 @@ export const css = {
'error': { 'error': {
'root': 'alert alert-danger', 'root': 'alert alert-danger',
'icon': 'glyphicon glyphicon-exclamation-sign', 'icon': 'glyphicon glyphicon-exclamation-sign',
'item': '', 'item': 'survey__error-item',
'locationTop': 'sv_qstn_error_top', 'locationTop': 'survey__error survey__error--top',
'locationBottom': 'sv_qstn_error_bottom' 'locationBottom': 'survey__error survey__error--bottom'
}, },
'boolean': { 'boolean': {
'root': 'sv_qbln form-inline checkbox', 'root': 'sv_qbln form-inline checkbox',
@ -54,18 +54,19 @@ export const css = {
'materialDecorator': 'checkbox-material' 'materialDecorator': 'checkbox-material'
}, },
'checkbox': { 'checkbox': {
'root': 'sv_qcbc sv_qcbx form-inline', 'root': 'survey__checkbox-group',
'item': 'checkbox', 'item': 'base-input-container base-input-container--survey',
'itemControl': '', 'itemControl': 'base-input-container__input',
'controlLabel': '', 'label': 'base-input-container__label-container',
'materialDecorator': 'checkbox-material', 'controlLabel': 'base-input-container__label',
'materialDecorator': 'base-input-container__checkbox base-input-container__icon',
'other': 'sv_q_checkbox_other skillbox-input', 'other': 'sv_q_checkbox_other skillbox-input',
'column': 'sv_q_select_column' 'column': 'sv_q_select_column'
}, },
'comment': 'survey__input skillbox-input', 'comment': 'survey__input skillbox-input question__input',
'dropdown': { 'dropdown': {
'root': '', 'root': '',
'control': 'skillbox-input', 'control': 'survey__input skillbox-input',
'other': 'sv_q_dd_other skillbox-input' 'other': 'sv_q_dd_other skillbox-input'
}, },
'html': { 'html': {
@ -103,12 +104,12 @@ export const css = {
'itemValue': 'sv_q_mt_item_value skillbox-input' 'itemValue': 'sv_q_mt_item_value skillbox-input'
}, },
'radiogroup': { 'radiogroup': {
'root': 'sv_qcbc form-inline', 'root': 'survey__radiogroup-group',
'item': 'radio', 'item': 'base-input-container base-input-container--survey',
'label': '', 'label': 'base-input-container__label-container',
'itemControl': '', 'itemControl': 'base-input-container__input',
'controlLabel': '', 'controlLabel': 'base-input-container__label',
'materialDecorator': 'circle', 'materialDecorator': 'base-input-container__radiobutton base-input-container__icon',
'other': 'sv_q_radiogroup_other skillbox-input', 'other': 'sv_q_radiogroup_other skillbox-input',
'clearButton': 'sv_q_radiogroup_clear button', 'clearButton': 'sv_q_radiogroup_clear button',
'column': 'sv_q_select_column' 'column': 'sv_q_select_column'
@ -126,11 +127,11 @@ export const css = {
'root': 'btn-group', 'root': 'btn-group',
'item': 'btn btn-default btn-secondary', 'item': 'btn btn-default btn-secondary',
'selected': 'active', 'selected': 'active',
'minText': 'sv_q_rating_min_text', 'minText': '',
'itemText': 'sv_q_rating_item_text', 'itemText': '',
'maxText': 'sv_q_rating_max_text' 'maxText': ''
}, },
'text': 'survey__input skillbox-input', 'text': 'survey__input skillbox-input question__input',
'expression': 'survey__input skillbox-input', 'expression': 'survey__input skillbox-input',
'file': { 'file': {
'root': 'sv_q_file', 'root': 'sv_q_file',
@ -141,7 +142,7 @@ export const css = {
'removeFile': 'sv_q_file_remove' 'removeFile': 'sv_q_file_remove'
}, },
'saveData': { 'saveData': {
'root': '', 'root': 'save-data',
'saving': 'alert alert-info', 'saving': 'alert alert-info',
'error': 'alert alert-danger', 'error': 'alert alert-danger',
'success': 'alert alert-success', 'success': 'alert alert-success',