Fixed #429 - improve creation of transactions; added text to button and made button rectangular

src/main/resources/languages/_de.properties

@@ -32,6 +32,7 @@ title.category.new=Neue Kategorie
 title.category.edit=Kategorie bearbeiten
 title.transaction.edit={0} bearbeiten
 title.transaction.new=Neue {0}
+title.transaction.new.short=Neu
 title.transaction.new.normal=Buchung
 title.transaction.new.repeating=Wiederholend
 title.transaction.new.repeating.long=Wiederholende Buchung

src/main/resources/languages/_en.properties

@@ -32,6 +32,7 @@ title.category.new=New Category
 title.category.edit=Edit Category
 title.transaction.edit=Edit {0}
 title.transaction.new=New {0}
+title.transaction.new.short=New
 title.transaction.new.normal=Transaction
 title.transaction.new.repeating=Recurring
 title.transaction.new.repeating.long=Recurring Transaction

src/main/resources/static/css/dark/transactions.css

@@ -44,7 +44,7 @@
 
 .transactions-buttons-col {
     position: relative;
-    height: 56px;
+    height: 36px;
 }
 
 .new-transaction-button {
@@ -53,13 +53,22 @@
     right: 0;
     left: 0;
     top: 0;
+    padding: 0 !important;
 }
 
 .new-transaction-button-list {
+    top: auto !important;
+}
+
+.new-transaction-button-list-large {
     left: auto !important;
     right: 8px !important;
 }
 
+.new-transaction-button-list li .btn-floating {
+    border-radius: 0;
+}
+
 .mobile-fab-tip {
     position: absolute;
     padding: 0 0.5rem;
@@ -70,3 +79,16 @@
     color: #FFFFFF;
     width: auto;
 }
+
+#button-new-transaction {
+    height: 36px;
+    width: auto;
+    border-radius: 0;
+    line-height: 36px;
+    padding: 0 16px;
+    font-size: 14px;
+}
+
+#button-new-transaction i {
+    line-height: 36px;
+}
\ No newline at end of file

src/main/resources/static/css/transactions.css

@@ -44,7 +44,7 @@
 
 .transactions-buttons-col {
     position: relative;
-    height: 56px;
+    height: 36px;
 }
 
 .new-transaction-button {
@@ -53,13 +53,22 @@
     right: 0;
     left: 0;
     top: 0;
+    padding: 0 !important;
 }
 
 .new-transaction-button-list {
+    top: auto !important;
+}
+
+.new-transaction-button-list-large {
     left: auto !important;
     right: 8px !important;
 }
 
+.new-transaction-button-list li .btn-floating {
+    border-radius: 0;
+}
+
 .mobile-fab-tip {
     position: absolute;
     padding: 0 0.5rem;
@@ -70,3 +79,16 @@
     color: #FFFFFF;
     width: auto;
 }
+
+#button-new-transaction {
+    height: 36px;
+    width: auto;
+    border-radius: 0;
+    line-height: 36px;
+    padding: 0 16px;
+    font-size: 14px;
+}
+
+#button-new-transaction i {
+    line-height: 36px;
+}
\ No newline at end of file

src/main/resources/templates/index.ftl

@@ -41,7 +41,7 @@
                             <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>${locale.getString("home.menu.transactions.action.manage")}</a>
-                                <a href="<@s.url '/transactions/newTransaction/normal'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>${locale.getString("home.menu.transactions.action.new")}n</a>
+                                <a href="<@s.url '/transactions/newTransaction/normal'/>" class="waves-effect btn-flat home-menu-link-item"><i class="material-icons left">play_arrow</i>${locale.getString("home.menu.transactions.action.new")}</a>
                             </div>
                         </div>
                 <div class="hide-on-small-only hide-on-large-only">

src/main/resources/templates/transactions/transactionsMacros.ftl

@@ -95,7 +95,7 @@
 <#macro buttons isFilterActive>
     <div class="row hide-on-small-only valign-wrapper">
         <div class="col s6 right-align transactions-buttons-col">
-            <@buttonNew "new-transaction-button-list"/>
+            <@buttonNew "new-transaction-button-list new-transaction-button-list-large"/>
         </div>
         <div class="col s6 left-align">
             <@buttonFilter isFilterActive/>
@@ -110,7 +110,7 @@
                 </div>
             </div>
             <div class="col s12 transactions-buttons-col">
-                <@buttonNew ""/>
+                <@buttonNew "new-transaction-button-list "/>
             </div>
         </div>
     </div>
@@ -118,8 +118,8 @@
 
 <#macro buttonNew listClasses>
     <div class="fixed-action-btn new-transaction-button">
-        <a class="btn-floating btn-large btn waves-effect waves-light budgetmaster-blue">
-            <i class="large material-icons">add</i>
+        <a class="btn-floating btn-large btn waves-effect waves-light budgetmaster-blue" id="button-new-transaction">
+            <i class="material-icons left">add</i>${locale.getString("title.transaction.new.short")}
         </a>
         <ul class="${listClasses}">
             <li>