diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index bc436e79cf1ca3ef1721042f82ceed597bfee993..ea30e4fbe238d72c9f269d65c36883c6e004b0ee 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -339,12 +339,15 @@ chart.type=Typ
chart.actions=Aktionen
chart.show=Diagramm anzeigen
-chart.steps.first=Schritt 1: W�hle ein Diagramm
+chart.steps.first.step=Schritt 1:
+chart.steps.first=W�hle ein Diagramm
chart.steps.first.label=Diagramm
-chart.steps.second=Schritt 2: W�hle eine Zeitspanne
+chart.steps.second.step=Schritt 2:
+chart.steps.second=W�hle eine Zeitspanne
chart.steps.second.label.start=Startdatum
chart.steps.second.label.end=Enddatum
-chart.steps.third=Schritt 3: Wende Filter an (optional)
+chart.steps.third.step=Schritt 3:
+chart.steps.third=Wende Filter an (optional)
chart.script.default=/* This list will be dynamically filled with all the transactions between\n \
* the start and and date you select on the "Show Chart" page\n \
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index 3d2eb0dfaed28c5ae14476690c01254555a89bce..ae218ba7a4cad30dde56c5cf656d407daba4e92b 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -338,12 +338,15 @@ chart.type=Type
chart.actions=Actions
chart.show=Show chart
-chart.steps.first=Step 1: Choose a chart
+chart.steps.first.step=Step 1:
+chart.steps.first=Choose a chart
chart.steps.first.label=Chart
-chart.steps.second=Step 2: Choose a date range
+chart.steps.second.step=Step 2:
+chart.steps.second=Choose a date range
chart.steps.second.label.start=Start date
chart.steps.second.label.end=End date
-chart.steps.third=Step 3: Apply filters (optional)
+chart.steps.third.step=Step 3:
+chart.steps.third=Apply filters (optional)
chart.script.default=/* This list will be dynamically filled with all the transactions between\n \
* the start and and date you select on the "Show Chart" page\n \
diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index 66d6a04481b71d924199ddc4debf9873216fd7e8..ec82a98c7188e1ba83c23f959ccbb5ae99d9ab59 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -581,6 +581,10 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
margin-bottom: 20px;
}
+.step-name {
+ margin-left: 1em;
+}
+
.invisible {
opacity: 0;
}
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index aa697a2ae69733c1523343827f69d66126b1ceec..8d100ec79aea21fe52181d38497df3ce9746fd3a 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -503,6 +503,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
margin-bottom: 20px;
}
+.step-name {
+ margin-left: 1em;
+}
+
.invisible {
opacity: 0;
}
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index f69c89ac609a93458e5106ab03ed19fddb9cdbb2..4a6b699caffb143a80f688fb91a8ed04832c9fde 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -28,75 +28,87 @@
<form name="NewChartSettings" action="<@s.url '/charts'/>" method="post">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
- <!-- STEP 1 -->
- <div class="row no-margin-bottom">
- <div class="col s12 m12 l8 offset-l2">
- ${locale.getString("chart.steps.first")}
- </div>
- </div>
- <div class="row">
- <div class="input-field col s12 m12 l8 offset-l2 no-margin-top">
- <select name="chartID">
- <#list charts as chart>
- <#assign chartName=chartFunctions.getChartName(chart)>
- <#if chartSettings.getChartID() == chart.getID()>
- <option selected value="${chart.getID()?c}">${chartName}</option>
- <#continue>
- </#if>
-
- <option value="${chart.getID()?c}">${chartName}</option>
- </#list>
- </select>
- </div>
- </div>
-
-
- <!-- STEP 2 -->
- <div class="row no-margin-bottom">
- <div class="col s12 m12 l8 offset-l2">
- ${locale.getString("chart.steps.second")}
- </div>
- </div>
- <div class="row">
- <div class="input-field col s6 m6 l4 offset-l2">
- <#assign startDate = dateService.getLongDateString(chartSettings.getStartDate())/>
-
- <input id="chart-datepicker" type="text" class="datepicker" name="startDate" value="${startDate}">
- <label for="chart-datepicker">${locale.getString("chart.steps.second.label.start")}</label>
- </div>
-
- <div class="input-field col s6 m6 l4 ">
- <#assign endDate = dateService.getLongDateString(chartSettings.getEndDate())/>
-
- <input id="chart-datepicker-end" type="text" class="datepicker" name="endDate" value="${endDate}">
- <label for="chart-datepicker-end">${locale.getString("chart.steps.second.label.end")}</label>
- </div>
- </div>
-
- <script>
- startDate = "${startDate}".split(".");
- startDate = new Date(startDate[2], startDate[1] - 1, startDate[0]);
- endDate = "${endDate}".split(".");
- endDate = new Date(endDate[2], endDate[1] - 1, endDate[0]);
- </script>
-
-
- <!-- STEP 3 -->
- <div class="row no-margin-bottom">
- <div class="col s12 m12 l8 offset-l2">
- ${locale.getString("chart.steps.third")}
- </div>
- </div>
<div class="row">
- <div class="col s12 m12 l8 offset-l2 no-margin-top center-align">
- <@transactionsMacros.buttonFilter chartSettings.getFilterConfiguration().isActive()/>
+ <div class="s12">
+ <ul class="collapsible z-depth-2">
+
+ <!-- STEP 1 -->
+ <li <#if !chart??>class="active"</#if>>
+ <div class="collapsible-header">
+ <span class="bold">${locale.getString("chart.steps.first.step")}</span>
+ <span class="step-name">${locale.getString("chart.steps.first")}</span>
+ </div>
+ <div class="collapsible-body">
+ <div class="row">
+ <div class="input-field col s12 m12 l8 offset-l2 no-margin-top">
+ <select name="chartID">
+ <#list charts as chart>
+ <#assign chartName=chartFunctions.getChartName(chart)>
+ <#if chartSettings.getChartID() == chart.getID()>
+ <option selected value="${chart.getID()?c}">${chartName}</option>
+ <#continue>
+ </#if>
+
+ <option value="${chart.getID()?c}">${chartName}</option>
+ </#list>
+ </select>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ <!-- STEP 2 -->
+ <li>
+ <div class="collapsible-header">
+ <span class="bold">${locale.getString("chart.steps.second.step")}</span>
+ <span class="step-name">${locale.getString("chart.steps.second")}</span>
+ </div>
+ <div class="collapsible-body">
+ <div class="row">
+ <div class="input-field col s6 m6 l4 offset-l2">
+ <#assign startDate = dateService.getLongDateString(chartSettings.getStartDate())/>
+
+ <input id="chart-datepicker" type="text" class="datepicker" name="startDate" value="${startDate}">
+ <label for="chart-datepicker">${locale.getString("chart.steps.second.label.start")}</label>
+ </div>
+
+ <div class="input-field col s6 m6 l4 ">
+ <#assign endDate = dateService.getLongDateString(chartSettings.getEndDate())/>
+
+ <input id="chart-datepicker-end" type="text" class="datepicker" name="endDate" value="${endDate}">
+ <label for="chart-datepicker-end">${locale.getString("chart.steps.second.label.end")}</label>
+ </div>
+ </div>
+
+ <script>
+ startDate = "${startDate}".split(".");
+ startDate = new Date(startDate[2], startDate[1] - 1, startDate[0]);
+ endDate = "${endDate}".split(".");
+ endDate = new Date(endDate[2], endDate[1] - 1, endDate[0]);
+ </script>
+ </div>
+ </li>
+
+ <!-- STEP 3 -->
+ <li>
+ <div class="collapsible-header">
+ <span class="bold">${locale.getString("chart.steps.third.step")}</span>
+ <span class="step-name">${locale.getString("chart.steps.third")}</span>
+ </div>
+ <div class="collapsible-body">
+ <div class="row">
+ <div class="col s12 m12 l8 offset-l2 no-margin-top center-align">
+ <@transactionsMacros.buttonFilter chartSettings.getFilterConfiguration().isActive()/>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
</div>
</div>
<@filterMacros.filterModalCharts chartSettings.getFilterConfiguration()/>
- <br>
-
<#-- buttons -->
<div class="row center-align">
<div class="col s12">