From c7593f337b2f93ac92842046e86a674cc2d74e73 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Thu, 16 Apr 2020 21:22:09 +0200
Subject: [PATCH] #338 - template choose page: accordion instead of cards
---
.../css/{filter.css => collapsible.css} | 0
.../css/dark/{filter.css => collapsible.css} | 6 +-
src/main/resources/static/css/dark/style.css | 8 +-
.../resources/static/css/dark/templates.css | 24 ++----
src/main/resources/static/css/templates.css | 22 ++---
src/main/resources/static/js/templates.js | 6 +-
.../resources/templates/charts/charts.ftl | 4 +-
.../templates/filter/filterMacros.ftl | 2 +-
.../resources/templates/reports/reports.ftl | 2 +-
.../templates/templates/selectTemplate.ftl | 3 +-
.../templates/templates/templateFunctions.ftl | 81 ++++++++++---------
.../transactions/newTransactionNormal.ftl | 2 +-
.../transactions/newTransactionTransfer.ftl | 2 +-
.../templates/transactions/transactions.ftl | 2 +-
14 files changed, 78 insertions(+), 86 deletions(-)
rename src/main/resources/static/css/{filter.css => collapsible.css} (100%)
rename src/main/resources/static/css/dark/{filter.css => collapsible.css} (79%)
diff --git a/src/main/resources/static/css/filter.css b/src/main/resources/static/css/collapsible.css
similarity index 100%
rename from src/main/resources/static/css/filter.css
rename to src/main/resources/static/css/collapsible.css
diff --git a/src/main/resources/static/css/dark/filter.css b/src/main/resources/static/css/dark/collapsible.css
similarity index 79%
rename from src/main/resources/static/css/dark/filter.css
rename to src/main/resources/static/css/dark/collapsible.css
index 934de436e..5fb78b5d9 100644
--- a/src/main/resources/static/css/dark/filter.css
+++ b/src/main/resources/static/css/dark/collapsible.css
@@ -21,8 +21,4 @@
.collapsible-body {
background-color: #444444;
border-bottom: 1px solid #666666;
-}
-
-input[type="checkbox"]:not(:checked) + span:not(.lever)::before {
- border: 2px solid rgba(255, 255, 255, 0.7);
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index 4b378d081..42d3c862d 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -128,8 +128,7 @@ main {
width: 350px;
}
-ul.sidenav.sidenav-fixed > li:last-child
-{
+ul.sidenav.sidenav-fixed > li:last-child {
margin-bottom: 160px;
}
@@ -474,6 +473,11 @@ input[type="checkbox"]:checked + span:not(.lever)::before {
border-bottom: 3px solid #45A0EF;
}
+input[type="checkbox"]:not(:checked) + span:not(.lever)::before {
+ border: 2px solid rgba(255, 255, 255, 0.7);
+}
+
+
/* chips autocomplete dropdown */
.autocomplete-content li span {
color: #2E79B9;
diff --git a/src/main/resources/static/css/dark/templates.css b/src/main/resources/static/css/dark/templates.css
index 5e14c6634..4f56a863e 100644
--- a/src/main/resources/static/css/dark/templates.css
+++ b/src/main/resources/static/css/dark/templates.css
@@ -1,20 +1,10 @@
-.card-template {
- color: #212121;
- background-color: #CCCCCC;
-}
-
-.card-template .card-title {
- font-weight: bold;
-}
-
-.card-delimiter {
- border-top: 1px solid rgba(0, 0, 0, 0.25) !important;
-}
-
-.table-template-content {
- color: #212121;
+.template-content-label {
+ font-weight: 600;
}
-.template-content-label {
+.collapsible-header-button {
+ position: absolute;
+ right: 15px;
+ top: 8px;
font-weight: bold;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/templates.css b/src/main/resources/static/css/templates.css
index e3ba2cdb3..4f56a863e 100644
--- a/src/main/resources/static/css/templates.css
+++ b/src/main/resources/static/css/templates.css
@@ -1,20 +1,10 @@
-.card-template {
- color: #212121;
- background-color: #d9d9d9;
-}
-
-.card-template .card-title {
+.template-content-label {
font-weight: 600;
}
-.card-delimiter {
- border-top: 1px solid rgba(0, 0, 0, 0.25) !important;
-}
-
-.table-template-content {
- color: #212121;
-}
-
-.template-content-label {
- font-weight: 600;
+.collapsible-header-button {
+ position: absolute;
+ right: 15px;
+ top: 8px;
+ font-weight: bold;
}
\ No newline at end of file
diff --git a/src/main/resources/static/js/templates.js b/src/main/resources/static/js/templates.js
index f537fd39b..9c3b2f1fd 100644
--- a/src/main/resources/static/js/templates.js
+++ b/src/main/resources/static/js/templates.js
@@ -24,11 +24,15 @@ $(document).ready(function()
data: {},
success: function(data)
{
- createAndOpenModal(data)
+ createAndOpenModal(data)
}
});
});
}
+
+ M.Collapsible.init(document.querySelector('.collapsible.expandable'), {
+ accordion: false
+ });
});
function createAndOpenModal(data)
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 2645533b8..cf711c1fa 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -3,7 +3,7 @@
<#import "../helpers/header.ftl" as header>
<@header.header "BudgetMaster"/>
<@header.style "datepicker"/>
- <@header.style "filter"/>
+ <@header.style "collapsible"/>
<@header.style "charts"/>
<#import "/spring.ftl" as s>
</head>
@@ -30,7 +30,7 @@
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
<div class="row">
- <div class="s12">
+ <div class="col s12">
<ul class="collapsible z-depth-2">
<!-- STEP 1 -->
diff --git a/src/main/resources/templates/filter/filterMacros.ftl b/src/main/resources/templates/filter/filterMacros.ftl
index dcc824c95..d0892a6db 100644
--- a/src/main/resources/templates/filter/filterMacros.ftl
+++ b/src/main/resources/templates/filter/filterMacros.ftl
@@ -115,7 +115,7 @@
<#assign prefixValue = ""/>
</#if>
<div class="row">
- <div class="s12">
+ <div class="col s12">
<ul class="collapsible z-depth-2" id="filterSettings">
<li id="section-type">
<div class="collapsible-header">
diff --git a/src/main/resources/templates/reports/reports.ftl b/src/main/resources/templates/reports/reports.ftl
index a917de441..314acf1ce 100644
--- a/src/main/resources/templates/reports/reports.ftl
+++ b/src/main/resources/templates/reports/reports.ftl
@@ -4,7 +4,7 @@
<@header.header "BudgetMaster"/>
<@header.style "reports"/>
<@header.style "globalDatepicker"/>
- <@header.style "filter"/>
+ <@header.style "collapsible"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
diff --git a/src/main/resources/templates/templates/selectTemplate.ftl b/src/main/resources/templates/templates/selectTemplate.ftl
index 47b7fd071..7b14cc19d 100644
--- a/src/main/resources/templates/templates/selectTemplate.ftl
+++ b/src/main/resources/templates/templates/selectTemplate.ftl
@@ -2,6 +2,7 @@
<head>
<#import "../helpers/header.ftl" as header>
<@header.header "BudgetMaster"/>
+ <@header.style "collapsible"/>
<@header.style "templates"/>
<#import "/spring.ftl" as s>
</head>
@@ -27,7 +28,7 @@
<div class="headline center-align">${locale.getString("placeholder")}</div>
</div>
<#else>
- <@templateFunctions.listTemplatesAsCards templates/>
+ <@templateFunctions.listTemplates templates/>
</#if>
</div>
</main>
diff --git a/src/main/resources/templates/templates/templateFunctions.ftl b/src/main/resources/templates/templates/templateFunctions.ftl
index 9c6cc78e4..6eaabb2c1 100644
--- a/src/main/resources/templates/templates/templateFunctions.ftl
+++ b/src/main/resources/templates/templates/templateFunctions.ftl
@@ -13,43 +13,50 @@
</div>
</#macro>
-<#macro listTemplatesAsCards templates>
- <div class="row">
- <#list templates as template>
- <div class="col s12 m6 l4">
- <div class="card card-template">
- <div class="card-content">
- <@templateCardTitle template/>
-
- <table class="table-template-content">
- <@templateCardName template/>
- <@templateCardAmount template/>
- <@templateCardCategory template/>
- <@templateCardDescription template/>
- <@templateCardTags template/>
- <@templateCardAccount template/>
- <@templateCardTransferAccount template/>
- </table>
- </div>
- <div class="card-action center-align card-delimiter">
- <a href="<@s.url '/templates/${template.ID?c}/select'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">note_add</i>${locale.getString("title.transaction.new", locale.getString("title.transaction.new.normal"))}</a>
- </div>
- </div>
+<#macro listTemplates templates>
+ <div class="container">
+ <div class="row">
+ <div class="col s12">
+ <ul class="collapsible expandable z-depth-2">
+ <#list templates as template>
+ <li>
+ <div class="collapsible-header bold">
+ <@templateHeader template/>
+ </div>
+ <div class="collapsible-body">
+ <div class="row no-margin-bottom">
+ <table class="table-template-content text-color">
+ <@templateName template/>
+ <@templateAmount template/>
+ <@templateCategory template/>
+ <@templateDescription template/>
+ <@templateTags template/>
+ <@templateAccount template/>
+ <@templateTransferAccount template/>
+ </table>
+ </div>
+ </div>
+ </li>
+ </#list>
+ </ul>
</div>
- </#list>
+ </div>
</div>
</#macro>
-<#macro templateCardTitle template>
- <span class="card-title">
- <#if template.getTransferAccount()??>
- <i class="material-icons">swap_horiz</i>
- </#if>
- ${template.getTemplateName()}
- </span>
+<#macro templateHeader template>
+ <#if template.getTransferAccount()??>
+ <i class="material-icons">swap_horiz</i>
+ <#else>
+ <i class="material-icons">payment</i>
+ </#if>
+ ${template.getTemplateName()}
+ <div class="collapsible-header-button">
+ <a href="<@s.url '/templates/${template.ID?c}/select'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">note_add</i>${locale.getString("title.transaction.new", locale.getString("title.transaction.new.normal"))}</a>
+ </div>
</#macro>
-<#macro templateCardName template>
+<#macro templateName template>
<#if template.getName()??>
<tr>
<td class="template-content-label">${locale.getString("transaction.new.label.name")}</td>
@@ -58,7 +65,7 @@
</#if>
</#macro>
-<#macro templateCardAmount template>
+<#macro templateAmount template>
<#if template.getAmount()??>
<tr>
<td class="template-content-label">${locale.getString("transaction.new.label.amount")}</td>
@@ -67,7 +74,7 @@
</#if>
</#macro>
-<#macro templateCardCategory template>
+<#macro templateCategory template>
<#if template.getCategory()??>
<tr>
<td class="template-content-label">${locale.getString("transaction.new.label.category")}</td>
@@ -76,7 +83,7 @@
</#if>
</#macro>
-<#macro templateCardDescription template>
+<#macro templateDescription template>
<#if template.getDescription()??>
<tr>
<td class="template-content-label">${locale.getString("transaction.new.label.description")}</td>
@@ -85,7 +92,7 @@
</#if>
</#macro>
-<#macro templateCardTags template>
+<#macro templateTags template>
<#if template.getTags()?? && template.getTags()?size gt 0>
<tr>
<td class="template-content-label">${locale.getString("transaction.new.label.tags")}</td>
@@ -98,7 +105,7 @@
</#if>
</#macro>
-<#macro templateCardAccount template>
+<#macro templateAccount template>
<#if template.getAccount()??>
<tr>
<td class="template-content-label">${locale.getString("transaction.new.label.account")}</td>
@@ -107,7 +114,7 @@
</#if>
</#macro>
-<#macro templateCardTransferAccount template>
+<#macro templateTransferAccount template>
<#if template.getTransferAccount()??>
<tr>
<td class="template-content-label">${locale.getString("transaction.new.label.transfer.account")}</td>
diff --git a/src/main/resources/templates/transactions/newTransactionNormal.ftl b/src/main/resources/templates/transactions/newTransactionNormal.ftl
index 2d953b2e0..39e39fe6b 100644
--- a/src/main/resources/templates/transactions/newTransactionNormal.ftl
+++ b/src/main/resources/templates/transactions/newTransactionNormal.ftl
@@ -5,7 +5,7 @@
<@header.style "transactions"/>
<@header.style "datepicker"/>
<@header.style "categories"/>
- <@header.style "filter"/>
+ <@header.style "collapsible"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
diff --git a/src/main/resources/templates/transactions/newTransactionTransfer.ftl b/src/main/resources/templates/transactions/newTransactionTransfer.ftl
index 48c5ea546..e8f3cd7c0 100644
--- a/src/main/resources/templates/transactions/newTransactionTransfer.ftl
+++ b/src/main/resources/templates/transactions/newTransactionTransfer.ftl
@@ -5,7 +5,7 @@
<@header.style "transactions"/>
<@header.style "datepicker"/>
<@header.style "categories"/>
- <@header.style "filter"/>
+ <@header.style "collapsible"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index 2e473e0bc..e985582f0 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -5,7 +5,7 @@
<@header.style "categories"/>
<@header.style "transactions"/>
<@header.style "globalDatepicker"/>
- <@header.style "filter"/>
+ <@header.style "collapsible"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
--
GitLab