🎨 (app) no margin to main components

2020-02-17 23:47:22 +01:00
parent 565f91600a
commit f124fb31e4
12 changed files with 108 additions and 34 deletions
--- a/src/components/AccountList.vue
+++ b/src/components/AccountList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="account-list">
+  <div class="account-list no-margin">
    <div class="columns is-centered is-multiline" v-if="accounts.length">
      <div class="column is-3" v-for="(account, k) in accounts" :key="k">
        <account-card :account="account" />
@@ -53,9 +53,6 @@ export default class AccountList extends Vue {
 </script>

 <style lang="scss" scoped>
-.account-list {
-  margin: 0 0.75rem;
-}
 li {
  margin-bottom: 10px;
  &:last-child {
--- a/src/components/TagList.vue
+++ b/src/components/TagList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tag-list">
+  <div class="tag-list no-margin">
    <div class="columns">
      <div class="column legend-container">
        <table class="table is-fullwidth">
@@ -171,9 +171,7 @@ export default class TagList extends Vue {

 <style lang="scss" scoped>
@import '../styles/variables';
-.tag-list {
-  margin: 0 0.75rem;
-}
+
 .category-list:not(:last-child) {
  border-bottom: 1px solid $main;
 }
--- a/src/components/TransactionCreate.vue
+++ b/src/components/TransactionCreate.vue
@@ -226,13 +226,13 @@ export default class TransactionCreate extends Vue {
    this.currency = transaction.mainCurrency
  }

-  public async submitTransaction(next: any): Promise<void> {
+  public async submitTransaction(finish: () => void): Promise<void> {
    if (!this.validate()) {
-      next()
+      finish()
      return
    }
    if (!this.currency || !this.account) {
-      next()
+      finish()
      return
    }
    const currencies: string[] = this.account.currencies.map(
@@ -282,7 +282,7 @@ export default class TransactionCreate extends Vue {
      console.warn(response)
      alertMessage(`Une erreur s'est produite à la création d'une transaction.`)
    }
-    next()
+    finish()
  }

  public selectAll(): void {
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -48,6 +48,10 @@ button {
  font-family: 'Nunito', sans-serif;
 }

+.no-margin {
+  margin: 0 0.75rem;
+}
+
 .numeric {
  font-family: 'Cutive Mono', monospace;
 }
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="about">
+  <div class="about no-margin">
    <img class="logo" src="../assets/logo.svg" title="logo Vaquant" />
    <p class="simple-description" v-t="'about.description'"></p>
    <hr />
@@ -19,9 +19,6 @@ export default class About extends Vue {}
 </script>

 <style>
-.about {
-  margin: 0 0.75rem;
-}
 .simple-description {
  max-width: 450pt;
  margin: auto;
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="user">
+  <div class="user no-margin">
    <div v-if="user">
      <h2 class="title is-2">{{ user.userId }}</h2>
      <div class="columns is-centered">
@@ -373,6 +373,5 @@ export default class User extends Vue {
 <style scoped>
 .user {
  padding: 15px 0;
-  margin: 0 0.75rem;
 }
 </style>
--- a/src/views/accounts/AccountItem.vue
+++ b/src/views/accounts/AccountItem.vue
@@ -122,7 +122,7 @@
      >
        <div
          v-if="userRefunds.length"
-          class="refund-container columns is-centered is-multiline"
+          class="refund-container no-margin columns is-centered is-multiline"
        >
          <div
            class="column is-one-fifth"
@@ -132,7 +132,9 @@
            <refund-transaction :refund="userRefunds[k]" :account="account" />
          </div>
        </div>
-        <div v-else class="equilibrium">Le compte est à l'équilibre&nbsp;!</div>
+        <div v-else class="equilibrium no-margin">
+          Le compte est à l'équilibre&nbsp;!
+        </div>
      </div>
    </div>
    <fab-button
@@ -480,13 +482,9 @@ export default class AccountItem extends BaseAccount {
      min-height: calc(100vh - 52px);
    }
  }
-  .refund-container  {
-    margin: 0 0.75rem;
-  }
  .equilibrium {
    font-size: 25pt;
    color: var(--primary-font-color);
-    margin: 0 0.75rem;
  }
  table.table {
    margin: auto;
--- a/src/views/accounts/AccountNew.vue
+++ b/src/views/accounts/AccountNew.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="account-new">
+  <div class="account-new no-margin">
    <h1 class="title is-1" v-t="'account.create'"></h1>
    <form @submit.prevent="submitAccount">
      <div class="columns is-multiline">
--- a/src/views/accounts/AccountSetting.vue
+++ b/src/views/accounts/AccountSetting.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="account-setting" v-if="account">
+  <div class="account-setting no-margin" v-if="account">
    <nav class="breadcrumb" aria-label="breadcrumbs" v-if="account">
      <ul>
        <li>
-          <router-link :to="{ name: 'account', params: { id: account._id } }">{{ account.name }}</router-link>
+          <router-link :to="{ name: 'account', params: { id: account._id } }">{{
+            account.name
+          }}</router-link>
        </li>
        <li class="is-active">
          <a href="#" @click.prevent>Paramètres</a>
@@ -19,17 +21,26 @@
    <div>
      <h3 class="subtitle is-3" v-t="'account.users'"></h3>
      <div class="columns is-multiline is-centered">
-        <div class="column">{{ account.users.map(u => getUserInfo(u)).join(', ')}}</div>
+        <div class="column">
+          {{ account.users.map((u) => getUserInfo(u)).join(', ') }}
+        </div>
      </div>
      <h3 class="subtitle is-3">Ajouter des amis</h3>
      <div class="columns is-centered">
        <div class="column is-one-third">
-          <account-user-new v-model="newUsers" :default-user="false" :show-title="false" />
+          <account-user-new
+            v-model="newUsers"
+            :default-user="false"
+            :show-title="false"
+          />
        </div>
      </div>
      <div class="columns is-centered" v-if="newUsers.length">
        <div class="column is-one-third">
-          <button @click="saveUsers" class="button is-primary is-fullwidth is-large">
+          <button
+            @click="saveUsers"
+            class="button is-primary is-fullwidth is-large"
+          >
            <awe-icon icon="check" />
          </button>
        </div>
@@ -46,7 +57,11 @@
            <p>Actions</p>
          </div>
          <div class="buttons action-buttons is-centered">
-            <confirm-button v-if="account.archive" class="is-warning" @confirm="active">
+            <confirm-button
+              v-if="account.archive"
+              class="is-warning"
+              @confirm="active"
+            >
              <span v-t="'account.open'"></span>
            </confirm-button>
            <confirm-button v-else class="is-warning" @confirm="archive">
--- a/src/views/transactions/TransactionNew.vue
+++ b/src/views/transactions/TransactionNew.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-new">
+  <div class="transaction-new no-margin">
    <div v-if="!account">
      no account
      <br />
--- a/src/views/transactions/TransactionUpdate.vue
+++ b/src/views/transactions/TransactionUpdate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-update" v-if="account && transaction">
+  <div class="transaction-update no-margin" v-if="account && transaction">
    <transaction-create :account="account" :transaction="transaction" />
  </div>
 </template>
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,10 +2,76 @@ module.exports = {
  pwa: {
    themeColor: '#3f4fa6',
    msTileColor: '#3f4fa6',
+    manifestOptions: {
+      background_color: '#3f4fa6',
+      theme_color: '#3f4fa6',
+      icons: [
+        {
+          src: './img/icons/android-chrome-192x192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/android-chrome-512x512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-60x60.png',
+          sizes: '60x60',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-76x76.png',
+          sizes: '76x76',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-120x120.png',
+          sizes: '120x120',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-152x152.png',
+          sizes: '152x152',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-180x180.png',
+          sizes: '180x180',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon.png',
+          sizes: '180x180',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/favicon-16x16.png',
+          sizes: '16x16',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/favicon-32x32.png',
+          sizes: '32x32',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/msapplication-icon-144x144.png',
+          sizes: '144x144',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/mstile-150x150.png',
+          sizes: '150x150',
+          type: 'image/png'
+        }
+      ]
+    },
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true
    },
    name: 'Vaquant'
  }
-}
+}