From b2084a94e5ee19e77b04801ad8fe9e1f57404adc Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Wed, 26 Jul 2023 07:08:00 +0200
Subject: [PATCH] Expand layout

---
 resources/views/v2/index.blade.php | 196 +++++++++++++++--------------
 1 file changed, 101 insertions(+), 95 deletions(-)

diff --git a/resources/views/v2/index.blade.php b/resources/views/v2/index.blade.php
index 9f09889ac4..1f218fe3eb 100644
--- a/resources/views/v2/index.blade.php
+++ b/resources/views/v2/index.blade.php
@@ -9,93 +9,98 @@
         <div class="container-fluid">
             @include('partials.dashboard.boxes')
             <!-- row with account data -->
-            <div class="row">
-                <div class="col-xl-8 col-lg-12 col-sm-12 col-xs-12">
-                    <div class="row mb-2">
-                        <div class="col">
+            <div x-data="accounts">
+                <div class="row">
+                    <div class="col-xl-8 col-lg-12 col-sm-12 col-xs-12">
+                        <div class="row mb-2">
+                            <div class="col">
 
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
-                                                              title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.yourAccounts') }}</a>
-                                    </h3>
-                                </div>
-                                <div class="card-body">
-                                    <div id="account-chart"></div>
-                                    <p x-data="accounts">
-                                        <template x-if="autoConvert">
-                                            <button type="button" @click="switchConversion" class="btn btn-info btm-sm">
-                                                Disable auto-convert
-                                            </button>
-                                        </template>
-                                        <template x-if="!autoConvert">
-                                            <button type="button" @click="switchConversion" class="btn btn-info btm-sm">
-                                                Enable auto-convert
-                                            </button>
-                                        </template>
-                                    </p>
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col">
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
-                                                              title="{{ __('firefly.yourAccounts') }}">budget</a>
-                                    </h3>
-                                </div>
-                                <div class="card-body">
-                                    <div id="budget-chart"></div>
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col">
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
-                                                              title="{{ __('firefly.yourAccounts') }}">cat</a>
-                                    </h3>
-                                </div>
-                                <div class="card-body">
-                                    <div id="category-chart"></div>
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
-                    <div class="row" x-data="accounts">
-                        <template x-for="account in accountList">
-                            <div class="col-12 mb-2">
                                 <div class="card">
                                     <div class="card-header">
-                                        <h3 class="card-title">
-                                            <a :href="'{{ route('accounts.show','') }}/' + account.id"
-                                               x-text="account.name"></a>
-
-                                            <span class="small text-muted">(<span
-                                                    x-text="account.balance"></span>)</span>
+                                        <h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
+                                                                  title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.yourAccounts') }}</a>
                                         </h3>
                                     </div>
-                                    <div class="card-body p-0">
-                                        <table class="table table-sm">
-                                            <tbody>
-                                            <template x-for="group in account.groups">
-                                                <tr>
-                                                    <td>
-                                                        <template x-if="group.title">
+                                    <div class="card-body">
+                                        <div id="account-chart"></div>
+                                        <p class="text-end">
+                                            <template x-if="autoConversion">
+                                                <button type="button" @click="switchAutoConversion"
+                                                        class="btn btn-outline-info btm-sm">
+                                                    <span
+                                                        class="fa-solid fa-comments-dollar"></span> {{ __('firefly.disable_auto_convert')  }}
+                                                </button>
+                                            </template>
+                                            <template x-if="!autoConversion">
+                                                <button type="button" @click="switchAutoConversion"
+                                                        class="btn btn-outline-info btm-sm">
+                                                    <span
+                                                        class="fa-solid fa-comments-dollar"></span> {{ __('firefly.enable_auto_convert')  }}
+                                                </button>
+                                            </template>
+                                        </p>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                        <div class="row mb-2">
+                            <div class="col">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
+                                                                  title="{{ __('firefly.yourAccounts') }}">budget</a>
+                                        </h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div id="budget-chart"></div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                        <div class="row mb-2">
+                            <div class="col">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
+                                                                  title="{{ __('firefly.yourAccounts') }}">cat</a>
+                                        </h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div id="category-chart"></div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
+                        <div class="row">
+                            <template x-for="account in accountList">
+                                <div class="col-12 mb-2">
+                                    <div class="card">
+                                        <div class="card-header">
+                                            <h3 class="card-title">
+                                                <a :href="'{{ route('accounts.show','') }}/' + account.id"
+                                                   x-text="account.name"></a>
+
+                                                <span class="small text-muted">(<span
+                                                        x-text="account.balance"></span>)</span>
+                                            </h3>
+                                        </div>
+                                        <div class="card-body p-0">
+                                            <table class="table table-sm">
+                                                <tbody>
+                                                <template x-for="group in account.groups">
+                                                    <tr>
+                                                        <td>
+                                                            <template x-if="group.title">
                                                             <span><a
                                                                     :href="'{{route('transactions.show', '') }}/' + group.id"
                                                                     x-text="group.title"></a><br/></span>
-                                                        </template>
-                                                        <template x-for="transaction in group.transactions">
+                                                            </template>
+                                                            <template x-for="transaction in group.transactions">
                                                             <span>
                                                                 <template x-if="group.title">
                                                                     <span>-
@@ -110,29 +115,30 @@
                                                                     </span>
                                                                 </template>
                                                             </span>
-                                                        </template>
-                                                    </td>
-                                                    <td style="width:30%;" class="text-end">
-                                                        <template x-if="group.title">
-                                                            <span><br/></span>
-                                                        </template>
-                                                        <template x-for="transaction in group.transactions">
+                                                            </template>
+                                                        </td>
+                                                        <td style="width:30%;" class="text-end">
+                                                            <template x-if="group.title">
+                                                                <span><br/></span>
+                                                            </template>
+                                                            <template x-for="transaction in group.transactions">
                                                             <span>
                                                                 <span x-text="transaction.amount"></span><br>
                                                             </span>
-                                                        </template>
-                                                    </td>
-                                                </tr>
-                                            </template>
-                                            </tbody>
-                                        </table>
+                                                            </template>
+                                                        </td>
+                                                    </tr>
+                                                </template>
+                                                </tbody>
+                                            </table>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        </template>
+                            </template>
+                        </div>
                     </div>
-                </div>
 
+                </div>
             </div>
         </div>