Improve styling of advanced form toggle

This commit is contained in:
Robbie Antenesse 2020-04-30 00:38:45 -06:00
parent 006f020424
commit 98cdd763f8
3 changed files with 8 additions and 4 deletions

View File

@ -160,7 +160,9 @@ export function renderEditForm(wordId = false) {
<label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br> <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> <textarea id="wordDetails_${wordId}" placeholder="Markdown formatting allowed">${word.details}</textarea>
</label> </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;"> <div id="advancedForm_${wordId}" class="advanced-word-form" style="display:none;">
<label>Etymology / Root Words<br> <label>Etymology / Root Words<br>
<input id="wordEtymology_${wordId}" maxlength="2500" placeholder="comma,separated,root,words" value="${word.hasOwnProperty('etymology') ? word.etymology : ''}"> <input id="wordEtymology_${wordId}" maxlength="2500" placeholder="comma,separated,root,words" value="${word.hasOwnProperty('etymology') ? word.etymology : ''}">

View File

@ -160,10 +160,10 @@ export function expandAdvancedForm(id = false) {
const button = typeof id.target !== 'undefined' ? this : document.getElementById('expandAdvancedForm' + (!wordId ? '' : wordId)), const button = typeof id.target !== 'undefined' ? this : document.getElementById('expandAdvancedForm' + (!wordId ? '' : wordId)),
form = document.getElementById('advancedForm' + (!wordId ? '' : wordId)); form = document.getElementById('advancedForm' + (!wordId ? '' : wordId));
if (form.style.display !== 'block') { if (form.style.display !== 'block') {
button.innerText = 'Hide Advanced'; button.innerText = 'Hide Advanced Fields';
form.style.display = 'block'; form.style.display = 'block';
} else { } else {
button.innerText = 'Show Advanced'; button.innerText = 'Show Advanced Fields';
form.style.display = 'none'; form.style.display = 'none';
} }
} }

View File

@ -139,7 +139,9 @@
<label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br> <label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br>
<textarea id="wordDetails" placeholder="Markdown formatting allowed"></textarea> <textarea id="wordDetails" placeholder="Markdown formatting allowed"></textarea>
</label> </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;"> <div id="advancedForm" style="display:none;">
<label>Etymology / Root Words<br> <label>Etymology / Root Words<br>
<input id="wordEtymology" maxlength="2500" placeholder="comma,separated,root,words"> <input id="wordEtymology" maxlength="2500" placeholder="comma,separated,root,words">