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>
<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"/>
</svg>
</template>

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

@ -34,77 +34,3 @@
}
}
</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.showProgressBar = 'bottom';
return survey;
}
@ -85,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;
}
},
}

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

@ -9,12 +9,15 @@
background-color: $color-white;
}
$icon-size: 20px;
.skillbox-input {
@include inputstyle;
&--error {
border-color: $color-accent-3-dark;
}
}
.skillbox-textarea {
@ -22,9 +25,120 @@
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: $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;
}
}
}

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

@ -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;
@ -25,4 +27,79 @@
width: 100%;
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 = {
'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': '',
'title': '',
'survey__page-description': ''
'root': 'survey__page',
'title': 'survey__page-title',
'description': 'survey__page-description'
},
'pageTitle': '',
'pageDescription': 'small',
'pageTitle': 'survey__page-title',
'pageDescription': 'survey__page-description',
'row': 'sv_row',
'question': {
'mainRoot': 'survey__question question',
@ -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',
@ -54,18 +54,19 @@ 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'
},
'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': {
@ -103,12 +104,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'
@ -126,11 +127,11 @@ 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',
'text': 'survey__input skillbox-input question__input',
'expression': 'survey__input skillbox-input',
'file': {
'root': 'sv_q_file',
@ -141,7 +142,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',