From 5c5366676439736981ce0cce3847a0dbaa64af55 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Fri, 1 Mar 2019 20:49:11 +0100
Subject: [PATCH] #413 - redesigned home page
---
src/main/resources/languages/_de.properties | 8 +-
src/main/resources/languages/_en.properties | 8 +-
src/main/resources/static/css/dark/style.css | 18 ++++-
src/main/resources/static/css/style.css | 17 ++++-
src/main/resources/templates/index.ftl | 78 ++++++++++++--------
5 files changed, 87 insertions(+), 42 deletions(-)
diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index 4e0791fa6..6f2d86497 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 bad6cc7b8..2e0c43f78 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 45229d619..8b8529e8e 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 4758d361f..2ba0cc0ab 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 9801f7ac9..f3f62f290 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>
--
GitLab