Cleaner animation

This commit is contained in:
Dane Everitt 2018-08-26 14:03:43 -07:00
parent e906ada528
commit 5170d40bb2
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53

View file

@ -3,27 +3,29 @@
<div v-if="loading">
<div class="spinner spinner-xl blue"></div>
</div>
<div class="context-box" v-else-if="!databases.length">
<div class="flex items-center">
<database-icon class="flex-none text-grey-darker"></database-icon>
<div class="flex-1 px-4 text-grey-darker">
<p>You have no databases.</p>
<div class="animate fadein" v-else>
<div class="context-box" v-if="!databases.length">
<div class="flex items-center">
<database-icon class="flex-none text-grey-darker"></database-icon>
<div class="flex-1 px-4 text-grey-darker">
<p>You have no databases.</p>
</div>
</div>
</div>
<div v-else>
<database-row v-for="database in databases" :database="database" :key="database.name"/>
</div>
<div>
<button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
</div>
<modal :show="showCreateModal" v-on:close="showCreateModal = false">
<create-database-modal
v-on:close="showCreateModal = false"
v-on:database="handleModalCallback"
v-if="showCreateModal"
/>
</modal>
</div>
<div v-else>
<database-row v-for="database in databases" :database="database" :key="database.name"/>
</div>
<div>
<button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
</div>
<modal :show="showCreateModal" v-on:close="showCreateModal = false">
<create-database-modal
v-on:close="showCreateModal = false"
v-on:database="handleModalCallback"
v-if="showCreateModal"
/>
</modal>
</div>
</template>