deblan/forms
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Design fixes for the submission view

Browse source 
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2020-04-29 03:41:02 +02:00 committed by John Molakvoæ (skjnldsv)
parent 0db9d183ca
commit ee65ef7d2d
No known key found for this signature in database
GPG key ID: 60C25B8C072916CF
3 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Questions/QuestionMultiple.vue
View file

@ -284,6 +284,8 @@ export default {
.question__label {
flex: 1 1 100%;
// Overwrite guest page core styles
text-align: left !important;
&::before {
margin: 14px !important;
}

2
src/views/Create.vue
View file

@ -392,7 +392,7 @@ export default {
font-weight: bold;
margin: 32px 0;
padding-left: 14px; // align with description (compensate font size diff)
overflow-x: hidden;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

29
src/views/Submit.vue
View file

@ -25,9 +25,9 @@
<AppContent>
<!-- Forms title & description-->
<header>
<h3 id="form-title">
<h2 id="form-title">
{{ form.title }}
</h3>
</h2>
<p v-if="!loading && !success" id="form-desc">
{{ form.description }}
</p>
@ -59,7 +59,7 @@
</EmptyContent>
<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>
</AppContent>
</Content>
@ -153,6 +153,11 @@ export default {
align-items: center;
flex-direction: column;
// Force hide navigation toggle as there is no navigation
::v-deep #app-navigation-toggle {
display: none !important;
}
header,
form {
width: 100%;
@ -163,18 +168,18 @@ export default {
// Title & description header
header {
margin: 44px;
margin-top: 44px;
#form-title,
#form-desc {
width: 100%;
margin: 16px 0; // aerate the header
padding: 0 16px;
border: none;
}
#form-title {
font-size: 2em;
font-weight: bold;
margin: 32px 0;
padding-left: 14px; // align with description (compensate font size diff)
overflow: hidden;
text-overflow: ellipsis;
@ -182,16 +187,26 @@ export default {
}
#form-desc {
min-height: 60px;
max-height: 200px;
margin-top: 0;
resize: none;
}
}
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] {
align-self: flex-end;
margin: 5px;
margin-bottom: 160px;
padding: 10px 20px;
}
}