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 934de436eacf8fa6670fd623e11f82ff948d92ce..5fb78b5d95d02d3d02a885784207714edb950014 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 4b378d08100454fbb74199ab8a1173c2fe344c8b..42d3c862d74c5291c11f9ce08d05ce02cb968ef0 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 5e14c6634b731703dbcb83e868fa5772325a947c..4f56a863e34b42c78020d34321ff815ab2b33193 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 e3ba2cdb3e4672ca203b0bb27d4b63b31f7e1f28..4f56a863e34b42c78020d34321ff815ab2b33193 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 f537fd39b84d2baf823ce6b62b22550f8891ed83..9c3b2f1fd91e6c1a399f09a413f21f97cfc70c8f 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 2645533b8c6b261684ff51abe78b3e3e5ab286e7..cf711c1fa1ef165bf0d4847371984e8d9a24a401 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 dcc824c953d6681f41d9db3713c633022da9db8e..d0892a6dbd16fad031bf23045511957c27f12f8c 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 a917de4412fbd1f78553e5b5e2d1362cc760e6d9..314acf1ce80e422663efc0d5ab67662ed6b9e5f4 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 47b7fd071253d3d440f653b0384db048465da79e..7b14cc19df938ec1e1d9d98134fb5752b809d463 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 9c6cc78e43949ead47655dec0c7346396029fbff..6eaabb2c116e40c7e598b259a7d98f4c8e09b54e 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 2d953b2e0e9e6a719265862d04442e530b4fd129..39e39fe6b457484567106faf05ee0af9db4c1c62 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 48c5ea5469b0d8581638daf5ade4e5011f20a458..e8f3cd7c00fec60589e58add5c6bbdc0b28703c4 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 2e473e0bc7f05b64e4c0e8c8e94e1a9c98de2f93..e985582f00833bd85a377e632d60932349c871d7 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">