Design fixes for the submission view
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
0db9d183ca
commit
ee65ef7d2d
|
@ -284,6 +284,8 @@ export default {
|
||||||
|
|
||||||
.question__label {
|
.question__label {
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
|
// Overwrite guest page core styles
|
||||||
|
text-align: left !important;
|
||||||
&::before {
|
&::before {
|
||||||
margin: 14px !important;
|
margin: 14px !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -392,7 +392,7 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 32px 0;
|
margin: 32px 0;
|
||||||
padding-left: 14px; // align with description (compensate font size diff)
|
padding-left: 14px; // align with description (compensate font size diff)
|
||||||
overflow-x: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,9 +25,9 @@
|
||||||
<AppContent>
|
<AppContent>
|
||||||
<!-- Forms title & description-->
|
<!-- Forms title & description-->
|
||||||
<header>
|
<header>
|
||||||
<h3 id="form-title">
|
<h2 id="form-title">
|
||||||
{{ form.title }}
|
{{ form.title }}
|
||||||
</h3>
|
</h2>
|
||||||
<p v-if="!loading && !success" id="form-desc">
|
<p v-if="!loading && !success" id="form-desc">
|
||||||
{{ form.description }}
|
{{ form.description }}
|
||||||
</p>
|
</p>
|
||||||
|
@ -59,7 +59,7 @@
|
||||||
</EmptyContent>
|
</EmptyContent>
|
||||||
|
|
||||||
<EmptyContent v-else-if="success" icon="icon-checkmark">
|
<EmptyContent v-else-if="success" icon="icon-checkmark">
|
||||||
{{ t('forms', 'Thank you for completing the survey!') }}
|
{{ t('forms', 'Thank you for completing the form!') }}
|
||||||
</EmptyContent>
|
</EmptyContent>
|
||||||
</AppContent>
|
</AppContent>
|
||||||
</Content>
|
</Content>
|
||||||
|
@ -153,6 +153,11 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
// Force hide navigation toggle as there is no navigation
|
||||||
|
::v-deep #app-navigation-toggle {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
header,
|
header,
|
||||||
form {
|
form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -163,18 +168,18 @@ export default {
|
||||||
|
|
||||||
// Title & description header
|
// Title & description header
|
||||||
header {
|
header {
|
||||||
margin: 44px;
|
margin-top: 44px;
|
||||||
|
|
||||||
#form-title,
|
#form-title,
|
||||||
#form-desc {
|
#form-desc {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 16px 0; // aerate the header
|
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
#form-title {
|
#form-title {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin: 32px 0;
|
||||||
padding-left: 14px; // align with description (compensate font size diff)
|
padding-left: 14px; // align with description (compensate font size diff)
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
@ -182,16 +187,26 @@ export default {
|
||||||
}
|
}
|
||||||
#form-desc {
|
#form-desc {
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
max-height: 200px;
|
|
||||||
margin-top: 0;
|
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
.question {
|
||||||
|
// Less padding needed as submit view does not have drag handles
|
||||||
|
padding-left: 16px;
|
||||||
|
::v-deep &__content {
|
||||||
|
// Left-align multiple choice and checkboxes with question text
|
||||||
|
// Only in submit view
|
||||||
|
// TODO: use variables
|
||||||
|
margin-left: -14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
input[type=submit] {
|
input[type=submit] {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
|
margin-bottom: 160px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue