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

Move question-button to bottom

Browse source 
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
This commit is contained in:
Jonas Rittershofer 2020-05-01 14:11:02 +02:00
parent 5151a46b9f
commit 4fad189fbc
2 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -162,7 +162,7 @@ export default {
align-items: stretch;
flex-direction: column;
justify-content: stretch;
margin: 80px 0;
margin-bottom: 80px;
padding-left: 44px;
user-select: none;
background-color: var(--color-main-background);

48
src/views/Create.vue
View file

@ -68,25 +68,6 @@
</header>
<section>
<!-- Add new questions toolbar -->
<div class="question-toolbar" role="toolbar">
<Actions ref="questionMenu"
:open.sync="questionMenuOpened"
:menu-title="t('forms', 'Add a question')"
:primary="true"
:default-icon="isLoadingQuestions ? 'icon-loading-small' : 'icon-add-white'">
<ActionButton v-for="(answer, type) in answerTypes"
:key="answer.label"
:close-after-click="true"
:disabled="isLoadingQuestions"
:icon="answer.icon"
class="question-toolbar__question"
@click="addQuestion(type)">
{{ answer.label }}
</ActionButton>
</Actions>
</div>
<!-- Questions list -->
<Draggable v-model="form.questions"
:animation="200"
@ -105,6 +86,25 @@
v-bind.sync="question"
@delete="deleteQuestion(question)" />
</Draggable>
<!-- Add new questions toolbar -->
<div class="question-toolbar" role="toolbar">
<Actions ref="questionMenu"
:open.sync="questionMenuOpened"
:menu-title="t('forms', 'Add a question')"
:primary="true"
:default-icon="isLoadingQuestions ? 'icon-loading-small' : 'icon-add-white'">
<ActionButton v-for="(answer, type) in answerTypes"
:key="answer.label"
:close-after-click="true"
:disabled="isLoadingQuestions"
:icon="answer.icon"
class="question-toolbar__question"
@click="addQuestion(type)">
{{ answer.label }}
</ActionButton>
</Actions>
</div>
</section>
</AppContent>
</template>
@ -414,14 +414,14 @@ export default {
position: sticky;
// Above other menus
z-index: 55;
top: var(--header-height);
bottom: 0px;
padding-bottom: 16px;
display: flex;
align-items: center;
align-self: flex-start;
width: 44px;
// To not overlap navigation toggle
margin-left: 44px;
height: var(--top-bar-height);
// To align with Drag-Handle
margin-left: 16px;
.icon-add-white {
opacity: 1;