Embed toolbar within Accounts component instead of App

This commit is contained in:
Bubka 2020-01-31 14:03:46 +01:00
parent 0dbbb979dc
commit dec0831f14
3 changed files with 16 additions and 29 deletions

View File

@ -1,22 +1,7 @@
<template>
<div>
<!-- toolbar -->
<header class="toolbar has-background-black-bis" v-if="showToolbar">
<div class="container">
<div class="columns is-mobile is-centered">
<div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<a class="button is-dark">
Delete
</a>
</div>
</div>
</div>
</header>
<!-- main content -->
<main class="main-section">
<router-view :showToolbar="showToolbar"></router-view>
</main>
</div>
<main class="main-section">
<router-view></router-view>
</main>
</template>
<script>
@ -25,7 +10,6 @@
data(){
return {
showToolbar: false
}
}
}

View File

@ -1,10 +1,20 @@
<template>
<div>
<div class="container" v-if="this.showAccounts">
<!-- search -->
<div class="search columns is-gapless is-mobile is-centered">
<!-- header -->
<div class="columns is-gapless is-mobile is-centered">
<div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<div class="field">
<!-- toolbar -->
<div class="toolbar has-text-centered" v-if="editMode">
<a class="button is-text has-text-grey">
<span class="icon is-small">
<font-awesome-icon :icon="['fas', 'trash']" />
</span>
<span>delete</span>
</a>
</div>
<!-- search -->
<div class="field" v-else>
<div class="control has-icons-right">
<input type="text" class="input is-rounded is-search" v-model="search">
<span class="icon is-small is-right">

View File

@ -27,13 +27,6 @@
}
}
.toolbar {
position: fixed;
width: 100%;
z-index: 30;
padding: 0.75rem 0;
}
.form-column {
padding-top: 3rem;
}