From 4936024fbfc64e9dd2c9177ab313686d8aa92c9b Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 28 Mar 2021 16:23:10 +0200
Subject: [PATCH] #593 - refactor: moved css rules for image select to separate
 file

---
 src/main/resources/static/css/accounts.css    | 66 -------------------
 src/main/resources/static/css/imageSelect.css | 65 ++++++++++++++++++
 .../templates/accounts/newAccount.ftl         |  1 +
 .../templates/helpers/imageSelect.ftl         |  2 +-
 4 files changed, 67 insertions(+), 67 deletions(-)
 create mode 100644 src/main/resources/static/css/imageSelect.css

diff --git a/src/main/resources/static/css/accounts.css b/src/main/resources/static/css/accounts.css
index d9cd8ff25..54fb15aa9 100644
--- a/src/main/resources/static/css/accounts.css
+++ b/src/main/resources/static/css/accounts.css
@@ -1,53 +1,3 @@
-#account-icon {
-    margin-top: 3rem;
-    justify-content: center;
-}
-
-#item-icon-preview {
-    text-align: center;
-    border: 2px solid var(--color-text);
-    padding: 1rem;
-    color: var(--color-text);
-}
-
-.button-remove-icon-from-item {
-    margin-left: 1rem;
-}
-
-.button-remove-icon-from-item i {
-    font-size: 1.8rem;
-}
-
-.item-icon-option-column {
-    text-align: center;
-    margin-bottom: 1.5rem;
-}
-
-.item-icon-option {
-    padding: 0.5rem;
-    border: 2px solid transparent;
-}
-
-.item-icon-option:hover {
-    cursor: pointer;
-}
-
-.item-icon-option.selected {
-    border: 2px solid var(--color-text);
-}
-
-.item-icon-preview-icon {
-    height: 5rem;
-}
-
-#item-icon-preview:hover {
-    cursor: pointer;
-}
-
-.item-icon-preview  {
-    height: 5rem;
-}
-
 .account-select-icon {
     height: 34px;
     width: 34px;
@@ -57,19 +7,3 @@
     border: 3px solid var(--color-blue);
     line-height: 28px !important;
 }
-
-.item-icon-option-delete span {
-    display: none;
-}
-
-.item-icon-option-delete i.left {
-    margin-right: 0;
-}
-
-.item-icon-option-delete-confirm {
-    color: var(--color-red) !important;
-}
-
-.item-icon-option-delete-confirm span {
-    display: inline-block;
-}
diff --git a/src/main/resources/static/css/imageSelect.css b/src/main/resources/static/css/imageSelect.css
new file mode 100644
index 000000000..8d3d947f0
--- /dev/null
+++ b/src/main/resources/static/css/imageSelect.css
@@ -0,0 +1,65 @@
+.item-icon {
+    margin-top: 3rem;
+    justify-content: center;
+}
+
+#item-icon-preview {
+    text-align: center;
+    border: 2px solid var(--color-text);
+    padding: 1rem;
+    color: var(--color-text);
+}
+
+.button-remove-icon-from-item {
+    margin-left: 1rem;
+}
+
+.button-remove-icon-from-item i {
+    font-size: 1.8rem;
+}
+
+.item-icon-option-column {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.item-icon-option {
+    padding: 0.5rem;
+    border: 2px solid transparent;
+}
+
+.item-icon-option:hover {
+    cursor: pointer;
+}
+
+.item-icon-option.selected {
+    border: 2px solid var(--color-text);
+}
+
+.item-icon-preview-icon {
+    height: 5rem;
+}
+
+#item-icon-preview:hover {
+    cursor: pointer;
+}
+
+.item-icon-preview  {
+    height: 5rem;
+}
+
+.item-icon-option-delete span {
+    display: none;
+}
+
+.item-icon-option-delete i.left {
+    margin-right: 0;
+}
+
+.item-icon-option-delete-confirm {
+    color: var(--color-red) !important;
+}
+
+.item-icon-option-delete-confirm span {
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/accounts/newAccount.ftl b/src/main/resources/templates/accounts/newAccount.ftl
index dfc06f125..08ac33566 100644
--- a/src/main/resources/templates/accounts/newAccount.ftl
+++ b/src/main/resources/templates/accounts/newAccount.ftl
@@ -10,6 +10,7 @@
         </#if>
 
         <@header.header "BudgetMaster - ${title}"/>
+        <@header.style "imageSelect"/>
         <#import "/spring.ftl" as s>
     </head>
     <@header.body>
diff --git a/src/main/resources/templates/helpers/imageSelect.ftl b/src/main/resources/templates/helpers/imageSelect.ftl
index 7d7e4a5b2..bd608f279 100644
--- a/src/main/resources/templates/helpers/imageSelect.ftl
+++ b/src/main/resources/templates/helpers/imageSelect.ftl
@@ -7,7 +7,7 @@
             <i class="fas fa-icons prefix"></i>
             <label class="input-label" for="${id}">${locale.getString("account.new.label.icon")}</label>
 
-            <div id="${id}" class="valign-wrapper">
+            <div id="${id}" class="valign-wrapper item-icon">
                 <a id="item-icon-preview" data-url="<@s.url '/media/getAvailableImages'/>">
                     <img id="item-icon-preview-icon" src="<#if item.getIcon()??>${item.getIcon().getBase64EncodedImage()}</#if>" class="item-icon-preview <#if item.getIcon()?? == false>hidden</#if>"/>
                     <div id="item-icon-placeholder" class="<#if item.getIcon()??>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div>
-- 
GitLab