Commit 41f5a99d authored by Marek Veselý's avatar Marek Veselý
Browse files

Merge branch '911-questionnaires-format-the-content-same-as-questions' into 'main' 

911-Questionnaires: format the content same as questions

Closes #911

See merge request inject/frontend!811
parents 889e35ea 402688fc

frontend/src/components/Questionnaire/classes.ts

+2 −1
Original line number Diff line number Diff line
@@ -2,8 +2,9 @@ import { Colors } from '@blueprintjs/colors' 
import { css } from '@emotion/css'

import type { QuestionnaireAnswer } from '@inject/graphql'



export const questionNumber = css`

export const questionNumber = (showNumber: boolean) => css`

  text-align: right;

  visibility: ${showNumber ? 'visible' : 'hidden'};

`



export const correctOption = css`

frontend/src/components/Questionnaire/index.tsx

+5 −17
Original line number Diff line number Diff line
@@ -32,9 +32,6 @@ const contentWrapper = css` 
const body = css`

  flex: 1;

  margin: 0.5rem;

`



const bodyGrid = css`

  display: grid;

  grid-template-columns: auto auto 1fr;

  row-gap: 1rem;
@@ -157,22 +154,13 @@ const Questionnaire: FC<QuestionnaireProps> = ({ 
            />

          </div>

        )}

        <div

          className={cx({

            [body]: true,

            [bodyGrid]: questionsAndAnswers.length > 1,

          })}

        >

        <div className={cx(body)}>

          {questionsAndAnswers.map((questionAndAnswer, questionIndex) => (

            <Fragment key={questionAndAnswer.question.id}>

              {questionsAndAnswers.length > 1 && (

                <>

                  <div

                    className={questionNumber}

                  >{`${questionIndex + 1}.`}</div>

              <div className={questionNumber(questionsAndAnswers.length !== 1)}>

                {`${questionIndex + 1}.`}

              </div>

              <Divider />

                </>

              )}

              <div>

                <QuestionContent {...getQuestionProps(questionAndAnswer)} />

                {questionActions && questionActions(questionAndAnswer.question)}