diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index 4e0791fa6f99278da88f957665e68ed0430ff0fc..6f2d86497d89f40ffcb96a64234d5d2380db8d29 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -256,9 +256,9 @@ filter.tags.button.all=Alle
filter.tags.button.none=Keine
# home menu
-home.menu.accounts=Konten erlauben es mehrere Buchungen zu gruppieren. Du kannst so viele Konten erstellen, wie du m�chtest. Zum Erstellen, Aktualisieren oder L�schen von Accounts klicke hier.
-home.menu.transactions=Buchungen sind das zentrale Element von BudgetMaster. Gib ihnen einen Namen und eine Beschreibung, weise ihnen eine Kategorie und ein Konto zu, konfiguriere sie als wiederholend und markiere sie mit Tags. Um Buchungen zu erstellen, zu bearbeiten oder zu l�schen einfach hier klicken.
+home.menu.accounts=Konten erlauben es mehrere Buchungen zu gruppieren. Du kannst so viele Konten erstellen, wie du m�chtest.
+home.menu.transactions=Buchungen sind das zentrale Element von BudgetMaster. Gib ihnen einen Namen und eine Beschreibung, weise ihnen eine Kategorie und ein Konto zu, konfiguriere sie als wiederholend und markiere sie mit Tags.
home.menu.charts=Diese Funktion wird in einer kommenden Version verf�gbar sein.
-home.menu.reports=Erstelle konfigurierbare Monatsberichte als PDF zum Ausdrucken und Archivieren. Du kannst den Inhalt der Berichte filtern und zum Beispiel nach Einnahmen und Ausgaben getrennt auflisten lassen. Zum Erstellen eines Reports klicke hier.
-home.menu.categories=Kategorien k�nnen Buchungen zugeordnet werden, um diese als zusammengeh�rig zu kennzeichnen. Eine Kategorie besteht aus einem Namen und einer Farbe. Letztere kann aus einer vordefinierten Farbpalette oder mit Hilfe eines benutzerdefinierten Farbw�hlers ausgew�hlt werden. Erstelle, aktualisiere und l�sche Kategorien, indem du hier klickst.
+home.menu.reports=Erstelle konfigurierbare Monatsberichte als PDF zum Ausdrucken und Archivieren. Du kannst den Inhalt der Berichte filtern und zum Beispiel nach Einnahmen und Ausgaben getrennt auflisten lassen.
+home.menu.categories=Kategorien k�nnen Buchungen zugeordnet werden, um diese als zusammengeh�rig zu kennzeichnen. Eine Kategorie besteht aus einem Namen und einer Farbe. Letztere kann aus einer vordefinierten Farbpalette oder mit Hilfe eines benutzerdefinierten Farbw�hlers ausgew�hlt werden.
home.menu.settings=Verwalte allgemeine Einstellungen wie dein Login-Passwort, deine bevorzugte Sprache und wie Updates verwaltet werden sollen. Dieser Bereich bietet zudem die M�glichkeit, deine Daten zu exportieren oder zu l�schen, sowie eine bestehende Datenbank zu importieren.
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index bad6cc7b8823bc0422c9425a81f9027edb082f8b..2e0c43f786b5710e4ca2a47113f626350d15915a 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -257,9 +257,9 @@ filter.tags.button.all=All
filter.tags.button.none=None
# home menu
-home.menu.accounts=Accounts allow you to group multiple transactions. You can create as many accounts as you want. Create, update and delete them by clicking here.
-home.menu.transactions=Transactions are the key element of BudgetMaster. Give them a name and description, assign a category and account to them, configure them as recurring, and mark them with tags. You can create, edit and delete them by clicking here.
+home.menu.accounts=Accounts allow you to group multiple transactions. You can create as many accounts as you want.
+home.menu.transactions=Transactions are the key element of BudgetMaster. Give them a name and description, assign a category and account to them, configure them as recurring, and mark them with tags.
home.menu.charts=This feature will be available in an upcoming release.
-home.menu.reports=Create configurable month reports in PDF format for printing and archiving. You can filter the content of the reports and, for example, list them separately to incomes and expenditures. To create a report click here.
-home.menu.categories=Categories can be assigned to transactions in order to mark them as belonging together. They consists of a name an a color. Latter can be chosen from a predefined color palette or by using a custom color picker. Create, update and delete categories by clicking here.
+home.menu.reports=Create configurable month reports in PDF format for printing and archiving. You can filter the content of the reports and, for example, list them separately to incomes and expenditures.
+home.menu.categories=Categories can be assigned to transactions in order to mark them as belonging together. They consists of a name an a color. Latter can be chosen from a predefined color palette or by using a custom color picker.
home.menu.settings=Manage general settings such as login password, your preferred language and how to handle updates. This section also offers the possibility to export or delete your data or importing an existing database.
diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index 45229d619757c2ee9c97bb73914634bb92dcacd2..8b8529e8e5bd11dd7c1781c3fc773e6510e4cc30 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -498,8 +498,8 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
flex-wrap: wrap;
}
-.home-menu-cell:hover {
- background-color: #333333;
+.home-menu-flex .col {
+ margin-bottom: 2rem;
}
.home-menu-link {
@@ -507,10 +507,24 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
color: #FFFFFF;
}
+.home-menu-link-item {
+ font-size: 1.2rem;
+ color: #FFFFFF;
+}
+
+.home-menu-link-item:hover {
+ background-color: #333333;
+}
+
.home-menu-disabled * {
color: #777777 !important;
}
+.home-menu-text {
+ padding-left: 16px;
+ margin-top: 2rem;
+}
+
.modal-footer .btn-flat {
color: #FFFFFF;
}
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 4758d361f419d7cafa72ae5b33da1d2590b4ea04..2ba0cc0ab8761d8a29a6c34ae6b97115f81d04c0 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -425,18 +425,31 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
flex-wrap: wrap;
}
-.home-menu-cell:hover {
- background-color: #EEEEEE;
+.home-menu-flex .col {
+ margin-bottom: 2rem;
}
.home-menu-link {
display: inline-block;
}
+.home-menu-link-item {
+ font-size: 1.2rem;
+}
+
+.home-menu-link-item:hover {
+ background-color: #EEEEEE;
+}
+
.home-menu-disabled * {
color: #AAAAAA !important;
}
+.home-menu-text {
+ padding-left: 16px;
+ margin-top: 2rem;
+}
+
.import-text {
color: #2E79B9;
}
diff --git a/src/main/resources/templates/index.ftl b/src/main/resources/templates/index.ftl
index 9801f7ac9870bf508fa2ddfed780ea5641837c78..f3f62f2907fae9d994151fee3f4a9b2d0eeb37d2 100644
--- a/src/main/resources/templates/index.ftl
+++ b/src/main/resources/templates/index.ftl
@@ -22,59 +22,77 @@
<div class="hide-on-small-only"><br></div>
<div class="row home-menu-flex">
- <div class="col s12 m6 l4 center-align home-menu-cell">
- <a href="<@s.url '/accounts'/>" class="home-menu-link budgetmaster-text-black">
- <h1 class="center budgetmaster-grey-text"><i class="material-icons icon-budget">account_balance</i></h1>
- <h3 class="center budget">${locale.getString("menu.accounts")}</h3>
- <p class="text-grey">${locale.getString("home.menu.accounts")}</p>
+ <div class="col s12 m6 l4 home-menu-cell">
+ <a href="<@s.url '/accounts'/>" class="home-menu-link btn-flat budget">
+ <i class="material-icons icon-budget left">account_balance</i>
+ ${locale.getString("menu.accounts")}
</a>
+ <p class="text-grey home-menu-text">${locale.getString("home.menu.accounts")}</p>
+ <div class="left-align">
+ <a href="<@s.url '/accounts'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>Kontoverwaltung</a>
+ <a href="<@s.url '/accounts/newAccount'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>Neues Konto anlegen</a>
+ </div>
</div>
- <div class="col s12 m6 l4 center-align home-menu-cell">
- <a href="<@s.url '/transactions'/>" class="home-menu-link budgetmaster-text-black">
- <h1 class="center budgetmaster-baby-blue-text"><i class="material-icons icon-budget">list</i></h1>
- <h3 class="center budget">${locale.getString("menu.transactions")}</h3>
- <p class="text-grey">${locale.getString("home.menu.transactions")}</p>
+ <div class="col s12 m6 l4 home-menu-cell">
+ <a href="<@s.url '/transactions'/>" class="home-menu-link btn-flat budget">
+ <i class="material-icons icon-budget left budgetmaster-baby-blue-text">list</i>
+ ${locale.getString("menu.transactions")}
</a>
+ <p class="text-grey home-menu-text">${locale.getString("home.menu.transactions")}</p>
+ <div class="left-align">
+ <a href="<@s.url '/transactions'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>Buchungsverwaltung</a>
+ <a href="<@s.url '/transactions/newTransaction'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>Neue Buchung anlegen</a>
+ </div>
</div>
<div class="hide-on-small-only hide-on-large-only">
</div>
<div class="row home-menu-flex">
</div>
- <div class="col s12 m6 l4 center-align home-menu-cell">
- <a class="home-menu-link budgetmaster-text-black home-menu-disabled">
- <h1 class="center budgetmaster-purple-text"><i class="material-icons icon-budget">show_chart</i></h1>
- <h3 class="center budget">${locale.getString("menu.charts")}</h3>
- <p class="home-menu-disabled ">${locale.getString("home.menu.charts")}</p>
+ <div class="col s12 m6 l4 home-menu-cell home-menu-disabled">
+ <a class="home-menu-link btn-flat budget">
+ <i class="material-icons icon-budget left budgetmaster-purple-text">show_chart</i>
+ ${locale.getString("menu.charts")}
</a>
+ <p class="home-menu-text">${locale.getString("home.menu.charts")}</p>
</div>
<div class="hide-on-med-only">
</div>
<div class="row home-menu-flex">
</div>
- <div class="col s12 m6 l4 center-align home-menu-cell">
- <a href="<@s.url '/reports'/>" class="home-menu-link budgetmaster-text-black">
- <h1 class="center budgetmaster-green-text"><i class="material-icons icon-budget">description</i></h1>
- <h3 class="center budget">${locale.getString("menu.reports")}</h3>
- <p class="text-grey">${locale.getString("home.menu.reports")}</p>
+ <div class="col s12 m6 l4 home-menu-cell">
+ <a href="<@s.url '/reports'/>" class="home-menu-link btn-flat budget">
+ <i class="material-icons icon-budget left budgetmaster-green-text">description</i>
+ ${locale.getString("menu.reports")}
</a>
+ <p class="text-grey home-menu-text">${locale.getString("home.menu.reports")}</p>
+ <div class="left-align">
+ <a href="<@s.url '/reports'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>Neuen Report erstellen</a>
+ </div>
</div>
<div class="hide-on-small-only hide-on-large-only">
</div>
<div class="row home-menu-flex">
</div>
- <div class="col s12 m6 l4 center-align home-menu-cell">
- <a href="<@s.url '/categories'/>" class="home-menu-link budgetmaster-text-black">
- <h1 class="center budgetmaster-orange-text"><i class="material-icons icon-budget">label</i></h1>
- <h3 class="center budget">${locale.getString("menu.categories")}</h3>
- <p class="text-grey">${locale.getString("home.menu.categories")}</p>
+ <div class="col s12 m6 l4 home-menu-cell">
+ <a href="<@s.url '/categories'/>" class="home-menu-link btn-flat budget">
+ <i class="material-icons icon-budget left budgetmaster-orange-text">label</i>
+ ${locale.getString("menu.categories")}
</a>
+ <p class="text-grey home-menu-text">${locale.getString("home.menu.categories")}</p>
+ <div class="left-align">
+ <a href="<@s.url '/categories'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>Kategorieverwaltung</a>
+ <a href="<@s.url '/categories/newCategory'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>Neue Kategorie anlegen</a>
+ </div>
</div>
- <div class="col s12 m6 l4 center-align home-menu-cell">
- <a href="<@s.url '/settings'/>" class="home-menu-link budgetmaster-text-black">
- <h1 class="center budgetmaster-red-text"><i class="material-icons icon-budget">settings</i></h1>
- <h3 class="center budget">${locale.getString("menu.settings")}</h3>
- <p class="text-grey">${locale.getString("home.menu.settings")}</p>
+ <div class="col s12 m6 l4 home-menu-cell">
+ <a href="<@s.url '/settings'/>" class="home-menu-link btn-flat budget">
+ <i class="material-icons icon-budget left budgetmaster-red-text">settings</i>
+ ${locale.getString("menu.settings")}
</a>
+ <p class="text-grey home-menu-text">${locale.getString("home.menu.settings")}</p>
+ <div class="left-align">
+ <a href="<@s.url '/settings'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>Einstellungen</a>
+ </div>
</div>
</div>
</div>