julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 (account list) change display to grid

Browse Source
This commit is contained in:
Julien Calixte
2020-03-15 10:42:06 +01:00
parent 348dbb499d
commit 20463fa540
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/AccountList.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="account-list no-margin"> <div class="account-list">
<div class="columns is-centered is-multiline" v-if="accounts.length"> <div class="account-grid" v-if="accounts.length">
<div class="column is-3" v-for="(account, k) in accounts" :key="k"> <div v-for="(account, k) in accounts" :key="k">
<account-card :account="account" /> <account-card :account="account" />
</div> </div>
</div> </div>
@@ -53,6 +53,15 @@ export default class AccountList extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.account-grid {
display: grid;
gap: 1rem;
margin: 0 1rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 120px;
justify-content: center;
}
li { li {
margin-bottom: 10px; margin-bottom: 10px;
&:last-child { &:last-child {