From 98cdd763f87c762d767352d8311faccc9cb10d3f Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Thu, 30 Apr 2020 00:38:45 -0600
Subject: [PATCH] Improve styling of advanced form toggle

---
 src/js/render/words.js   | 4 +++-
 src/js/wordManagement.js | 4 ++--
 template-index.html      | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/js/render/words.js b/src/js/render/words.js
index a6bd45c..98465ec 100644
--- a/src/js/render/words.js
+++ b/src/js/render/words.js
@@ -160,7 +160,9 @@ export function renderEditForm(wordId = false) {
       <label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br>
         <textarea id="wordDetails_${wordId}" placeholder="Markdown formatting allowed">${word.details}</textarea>
       </label>
-      <a id="expandAdvancedForm_${wordId}" class="expand-advanced-form">Show Advanced</a>
+      <label>
+        <a id="expandAdvancedForm_${wordId}" class="small button expand-advanced-form">Show Advanced Fields</a>
+      </label>
       <div id="advancedForm_${wordId}" class="advanced-word-form" style="display:none;">
         <label>Etymology / Root Words<br>
           <input id="wordEtymology_${wordId}" maxlength="2500" placeholder="comma,separated,root,words" value="${word.hasOwnProperty('etymology') ? word.etymology : ''}">
diff --git a/src/js/wordManagement.js b/src/js/wordManagement.js
index adcb453..f3fd34f 100644
--- a/src/js/wordManagement.js
+++ b/src/js/wordManagement.js
@@ -160,10 +160,10 @@ export function expandAdvancedForm(id = false) {
   const button = typeof id.target !== 'undefined' ? this : document.getElementById('expandAdvancedForm' + (!wordId ? '' : wordId)),
     form = document.getElementById('advancedForm' + (!wordId ? '' : wordId));
   if (form.style.display !== 'block') {
-    button.innerText = 'Hide Advanced';
+    button.innerText = 'Hide Advanced Fields';
     form.style.display = 'block';
   } else {
-    button.innerText = 'Show Advanced';
+    button.innerText = 'Show Advanced Fields';
     form.style.display = 'none';
   }
 }
diff --git a/template-index.html b/template-index.html
index 4d0021c..3329e08 100644
--- a/template-index.html
+++ b/template-index.html
@@ -139,7 +139,9 @@
         <label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br>
           <textarea id="wordDetails" placeholder="Markdown formatting allowed"></textarea>
         </label>
-        <a id="expandAdvancedForm" class="expand-advanced-form">+ Advanced</a>
+        <label>
+          <a id="expandAdvancedForm" class="small button expand-advanced-form">Show Advanced Fields</a>
+        </label>
         <div id="advancedForm" style="display:none;">
           <label>Etymology / Root Words<br>
             <input id="wordEtymology" maxlength="2500" placeholder="comma,separated,root,words">