Work on edit modal

Something's wrong with scrolling, gotta fix
This commit is contained in:
Robbie Antenesse 2019-05-03 21:52:19 -06:00
parent a670abf24c
commit c5e3544570
6 changed files with 173 additions and 30 deletions

View File

@ -75,7 +75,7 @@
<h2 id="dictionaryName">Dictionary Name</h2>
<nav>
<ul>
<li>Description</li><li>Details</li><li>Stats</li><li onclick="document.getElementById('editModal').style.display='block'">Edit</li>
<li>Description</li><li>Details</li><li>Stats</li><li id="editDictionaryButton">Edit</li>
</ul>
</nav>
<article id="detailsPanel" style="display:none;">
@ -122,6 +122,76 @@
<li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li>
</ul>
</nav>
<section id="editDescriptionTab" style="display:none;">
<label>Name<br>
<input id="editName">
</label>
<label>Specification<br>
<input id="editSpecification">
</label>
<label>Description<a class="label-button">Maximize</a><br>
<textarea id="editDescription"></textarea>
</label>
</section>
<section id="editDetailsTab">
<label>Parts of Speech <small>(Comma Separated List)</small><br>
<input id="editPartsOfSpeech">
</label>
<label>Alphabetical Order <small>(Comma Separated List. Include every letter!)</small><br>
<input id="editAlphabeticalOrder" disabled value="English Alphabet">
</label>
<h3>Phonology</h3>
<div class="split three">
<div>
<label>Consonants<br>
<input id="editConsonants">
</label>
</div>
<div>
<label>Vowels<br>
<input id="editVowels">
</label>
</div>
<div>
<label>Polyphthongs&nbsp;/ Blends<br>
<input id="editBlends">
</label>
</div>
</div>
<h3>Phonotactics</h3>
<div class="split three">
<div>
<label>Onset<br>
<input id="editOnset">
</label>
</div>
<div>
<label>Nucleus<br>
<input id="editNucleus">
</label>
</div>
<div>
<label>Coda<br>
<input id="editCoda">
</label>
</div>
</div>
<h3>Orthography</h3>
<label>Notes<a class="label-button">Maximize</a><br>
<textarea id="editOrthography"></textarea>
</label>
<h3>Grammar</h3>
<label>Notes<a class="label-button">Maximize</a><br>
<textarea id="editGrammar"></textarea>
</label>
</section>
<footer>
<a class="button" id="editSave">Save</a>
<a class="button" id="editSaveAndClose">Save &amp; Close</a>
<a class="red button" onclick="this.parentElement.parentElement.parentElement.style.display='none';">Close Without Saving</a>
</footer>
</div>
</section>
</body>

View File

@ -0,0 +1,14 @@
import { renderDictionaryDetails } from "./render";
export function updateDictionary () {
renderDictionaryDetails();
}
export function openEditModal() {
document.getElementById('editModal').style.display = 'block';
}
export function updateGeneralDetails() {
}

View File

@ -3,6 +3,7 @@ import { renderWords } from './render';
import { validateWord, addWord } from './wordManagement';
import { removeTags } from '../helpers';
import { getNextId } from './utilities';
import { openEditModal } from './dictionaryManagement';
export default function setupListeners() {
setupDetailsTabs();
@ -15,6 +16,9 @@ function setupDetailsTabs() {
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const section = tab.innerText.toLowerCase();
if (section === 'edit') {
openEditModal();
} else {
const isActive = tab.classList.contains('active');
tabs.forEach(t => t.classList.remove('active'));
if (isActive) {
@ -23,8 +27,14 @@ function setupDetailsTabs() {
tab.classList.add('active');
showSection(section);
}
}
});
})
});
setupEditForm();
}
function setupEditForm() {
}
function setupSearchBar() {

View File

@ -76,7 +76,7 @@ export function getWordsStats() {
});
wordStats.totalLetters = totalLetters;
wordStats.wordLength.average = words.length > 0 ? totalLetters / words.length : 0;
wordStats.wordLength.average = words.length > 0 ? Math.round(totalLetters / words.length) : 0;
for (const letter in numberOfLetters) {
if (numberOfLetters.hasOwnProperty(letter)) {

View File

@ -8,6 +8,31 @@ p, span {
}
}
label {
display: block;
font-weight: bold;
&:not(:last-child) {
margin-bottom: 20px;
}
small {
font-weight: normal;
}
input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
font-weight: normal;
width: 100%;
}
.label-button {
font-size: 80%;
float: right;
cursor: pointer;
}
}
.tag {
padding: 3px 9px;
border: $border;
@ -77,6 +102,25 @@ span .tag {
font-size: 200%;
cursor: pointer;
}
nav ul {
margin-bottom: 0;
}
section {
padding: 20px;
margin-bottom: 80px;
overflow-y: auto;
height: 78%;
}
section~footer {
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-color: $white;
}
}
}

View File

@ -22,6 +22,24 @@
margin: 0 auto;
width: 90%;
padding: 20px;
label {
display: inline;
}
section {
padding: 0;
overflow-y: unset;
margin-bottom: 0;
}
section+footer {
position: relative;
left: unset;
bottom: unset;
right: unset;
background-color: $white;
}
}
#searchBox {
@ -36,7 +54,7 @@
}
.options {
* {
label {
margin-right: 5px;
}
}
@ -53,26 +71,6 @@
border-radius: 5px;
max-height: 80%;
overflow-y: auto;
label {
display: block;
font-weight: bold;
&:not(:last-child) {
margin-bottom: 20px;
}
input, select, textarea {
font-weight: normal;
width: 100%;
}
.label-button {
font-size: 80%;
float: right;
cursor: pointer;
}
}
}
#detailsSection {
@ -132,3 +130,10 @@
font-size: 70%;
}
}
#editModal {
#editDescription {
width: 100%;
height: 350px;
}
}