Update Help file to add new features

Add alphabetical order to database
Render custom css in public view
2019-07-10 17:10:43 -06:00 · 2019-07-10 17:09:47 -06:00 · 2019-07-10 16:45:15 -06:00 · 2019-07-10 16:13:01 -06:00 · 2019-07-10 15:11:46 -06:00 · 2019-07-10 14:59:37 -06:00
27 changed files with 579 additions and 451 deletions
--- a/offline.html
+++ b/offline.html
@ -13,7 +13,7 @@
  <meta property="og:title" content="Lexiconga (OFFLINE)">
  <meta property="og:description" content="The quick and easy (offline) dictionary builder for constructed languages.">
  <meta property="og:image" content="processedImages/logo.png">
-  
+
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image:alt" content="Lexiconga logo">

@ -26,13 +26,13 @@
  <meta name="apple-mobile-web-app-title" content="Lexiconga">
  <link rel="apple-touch-icon" href="processedImages/icon-152.png">

-  <link rel="stylesheet" href="src/main.scss" />
+  <link rel="stylesheet" href="src/main.scss">
  <script>window.isOffline = true;</script>
  <script src="src/index.js"></script>
 </head>
 <body id="defaultTheme">
  <header id="top">
-    <a href="/" title="Lexiconga"><svg id="title" alt="Lexiconga Logo"viewBox="0 0 249.78 55.087">
+    <a href="/" title="Lexiconga"><svg id="title" alt="Lexiconga Logo" viewBox="0 0 249.78 55.087">
      <g transform="translate(-107.53 -155.84)">
        <g id="lexi">
          <path d="m144.03 159.39-11.339 22.409h-21.62l11.339-22.409z" />
@ -81,6 +81,9 @@
              <label>Exact Words
                <input type="checkbox" id="searchExactWords">
              </label>
+              <label>Translations
+                <input type="checkbox" id="searchOrthography">
+              </label>
            </div>
          </div>
          <div class="split">
@ -241,9 +244,11 @@
      <section id="editDescriptionTab">
        <label>Name<br>
          <input id="editName" maxlength="50">
+          <small>Won't update if left blank.</small>
        </label>
        <label>Specification<br>
          <input id="editSpecification" maxlength="50">
+          <small>Won't update if left blank.</small>
        </label>
        <label>Description<a class="label-button maximize-button">Maximize</a><br>
          <textarea id="editDescription"></textarea>
@ -254,8 +259,12 @@
        <label>Parts of Speech <small>(Comma Separated List)</small><br>
          <input id="editPartsOfSpeech" maxlength="2500" placeholder="Noun,Adjective,Verb">
        </label>
-        <label>Alphabetical Order <small>(Comma Separated List. Include every letter!)</small><br>
-          <input id="editAlphabeticalOrder" disabled value="English Alphabet">
+        <label>Alphabetical Order <small>(Space Separated List)</small><br>
+          <input id="editAlphabeticalOrder" placeholder="a A b B c C d D ...">
+          <a class="label-help-button" onclick="alert('Include every letter and case! Any letters used in your words that are not specified will be sorted in the default order below your alphabetically custom-sorted words.\n\nLexiconga can only sort by single characters and will sort by the words AS ENTERED, not using orthographic translation.')">
+            Field Info
+          </a>&nbsp;
+          <small>Leave blank for default (case-insensitive ASCII/Unicode sorting)</small>
        </label>
        <h3>Phonology</h3>
        <div class="split three">
@ -284,6 +293,9 @@
            </label>
          </div>
        </div>
+        <label>Notes <small>(Markdown-enabled)</small><br>
+          <textarea id="editPhonologyNotes"></textarea>
+        </label>
        <h3>Phonotactics</h3>
        <div class="split three">
          <div>
@ -309,6 +321,13 @@
          <textarea id="editPhonotacticsNotes"></textarea>
        </label>
        <h3>Orthography</h3>
+        <label>Translations <small>(One translation per line)</small><a class="label-button maximize-button">Maximize</a><br>
+          <textarea id="editTranslations" placeholder="ai=I
+AA=ay
+ou=ow"></textarea>
+          <small>Use format: <code>sequence=replacement</code></small><br>
+          <small>Translations occur in the order specified here, so try to avoid double translations!</small>
+        </label>
        <label>Notes <small>(Markdown-enabled)</small><a class="label-button maximize-button">Maximize</a><br>
          <textarea id="editOrthography"></textarea>
        </label>
@ -345,6 +364,9 @@
            <option value="grape">Grape</option>
          </select>
        </label>
+        <label>Custom Styling <small>(CSS Only)</small><a class="label-button maximize-button">Maximize</a><br>
+          <textarea id="editCustomCSS" placeholder=".orthographic-translation {font-family: serif;}"></textarea>
+        </label>
      </section>

      <section id="editActionsTab" style="display:none;">
--- a/src/constants.js
+++ b/src/constants.js
@ -1,6 +1,6 @@
 import { getTimestampInSeconds } from "./helpers";

-export const MIGRATE_VERSION = '2.0.1';
+export const MIGRATE_VERSION = '2.1.0';
 export const DEFAULT_DICTIONARY = {
  name: 'New',
  specification: 'Dictionary',
@ -12,6 +12,7 @@ export const DEFAULT_DICTIONARY = {
      consonants: [],
      vowels: [],
      blends: [],
+      notes: '',
    },
    phonotactics: {
      onset: [],
@ -26,15 +27,6 @@ export const DEFAULT_DICTIONARY = {
    grammar: {
      notes: '',
    },
-    custom: {
-      css: '',
-      // tabs: [
-        // {
-        //   name: 'Example Tab',
-        //   content: `This is an _example_ tab to show how **tabs** work with [Markdown](${ MARKDOWN_LINK })!`,
-        // }
-      // ],
-    },
  },
  words: [
    /* {
@ -51,6 +43,7 @@ export const DEFAULT_DICTIONARY = {
    caseSensitive: false,
    sortByDefinition: false,
    theme: 'default',
+    customCSS: '',
    isPublic: false,
  },
  lastUpdated: getTimestampInSeconds(),
--- a/src/js/account/setupListeners.js
+++ b/src/js/account/setupListeners.js
@ -3,6 +3,7 @@ import { setCookie } from "../StackOverflow/cookie";
 import { changeDictionary, createNewDictionary } from "./dictionaryManagement";
 import { addMessage } from "../utilities";
 import { renderForgotPasswordForm } from "./passwordReset";
+import { setupMaximizeButtons } from "../setupListeners/buttons";

 export function setupLoginModal(modal) {
  const closeElements = modal.querySelectorAll('.modal-background, .close-button');
@ -73,4 +74,5 @@ export function setupMakePublic() {
    document.execCommand('copy');
    addMessage('Copied public link to clipboard', 3000);
  });
+  setupMaximizeButtons();
 }
--- a/src/js/account/sync.js
+++ b/src/js/account/sync.js
@ -80,7 +80,9 @@ export function uploadWholeDictionary(asNew = false) {
      dictionary,
    }, remoteId => {
      window.currentDictionary.externalID = remoteId;
-      document.getElementById('publicLink').value = document.domain + window.location.pathname + remoteId.toString();
+      if (document.getElementById('publicLink')) {
+        document.getElementById('publicLink').value = getPublicLink();
+      }
      saveDictionary(false);
      addMessage('Dictionary Uploaded Successfully');
      renderChangeDictionaryOptions();
--- a/src/js/dictionaryManagement.js
+++ b/src/js/dictionaryManagement.js
@ -1,6 +1,6 @@
 import papa from 'papaparse';
 import { renderDictionaryDetails, renderPartsOfSpeech } from "./render/details";
-import { renderAll, renderTheme } from "./render";
+import { renderAll, renderTheme, renderCustomCSS } from "./render";
 import { removeTags, cloneObject, getTimestampInSeconds, download, slugify } from "../helpers";
 import { LOCAL_STORAGE_KEY, DEFAULT_DICTIONARY } from "../constants";
 import { addMessage, getNextId, hasToken, objectValuesAreDifferent } from "./utilities";
@ -14,9 +14,9 @@ export function updateDictionary () {

 export function openEditModal() {
  const { name, specification, description, partsOfSpeech, alphabeticalOrder } = window.currentDictionary;
-  const { consonants, vowels, blends } = window.currentDictionary.details.phonology;
-  const { phonotactics, orthography, grammar } = window.currentDictionary.details;
-  const { allowDuplicates, caseSensitive, sortByDefinition, theme, isPublic } = window.currentDictionary.settings;
+  const { phonology, phonotactics, orthography, grammar } = window.currentDictionary.details;
+  const { consonants, vowels, blends } = phonology;
+  const { allowDuplicates, caseSensitive, sortByDefinition, theme, customCSS, isPublic } = window.currentDictionary.settings;
  
  document.getElementById('editName').value = name;
  document.getElementById('editSpecification').value = specification;
@ -27,6 +27,8 @@ export function openEditModal() {
  document.getElementById('editConsonants').value = consonants.join(' ');
  document.getElementById('editVowels').value = vowels.join(' ');
  document.getElementById('editBlends').value = blends.join(' ');
+  document.getElementById('editPhonologyNotes').value = phonology.notes;
+
  document.getElementById('editOnset').value = phonotactics.onset.join(',');
  document.getElementById('editNucleus').value = phonotactics.nucleus.join(',');
  document.getElementById('editCoda').value = phonotactics.coda.join(',');
@ -41,6 +43,7 @@ export function openEditModal() {
  if (allowDuplicates) document.getElementById('editCaseSensitive').disabled = true;
  document.getElementById('editSortByDefinition').checked = sortByDefinition;
  document.getElementById('editTheme').value = theme;
+  document.getElementById('editCustomCSS').value = customCSS;
  if (hasToken()) {
    document.getElementById('editIsPublic').checked = isPublic;
  }
@ -52,7 +55,13 @@ export function saveEditModal() {
  const updatedDictionary = cloneObject(window.currentDictionary);
  delete updatedDictionary.words;
  updatedDictionary.name = removeTags(document.getElementById('editName').value.trim());
+  if (updatedDictionary.name.length < 1) {
+    updatedDictionary.name = window.currentDictionary.name;
+  }
  updatedDictionary.specification = removeTags(document.getElementById('editSpecification').value.trim());
+    if (updatedDictionary.specification.length < 1) {
+      updatedDictionary.specification = window.currentDictionary.specification;
+    }
  updatedDictionary.description = removeTags(document.getElementById('editDescription').value.trim());
  updatedDictionary.partsOfSpeech = document.getElementById('editPartsOfSpeech').value.split(',').map(val => val.trim()).filter(val => val !== '');
  updatedDictionary.alphabeticalOrder = document.getElementById('editAlphabeticalOrder').value.split(' ').map(val => val.trim()).filter(val => val !== '');
@ -60,6 +69,8 @@ export function saveEditModal() {
  updatedDictionary.details.phonology.consonants = document.getElementById('editConsonants').value.split(' ').map(val => val.trim()).filter(val => val !== '');
  updatedDictionary.details.phonology.vowels = document.getElementById('editVowels').value.split(' ').map(val => val.trim()).filter(val => val !== '');
  updatedDictionary.details.phonology.blends = document.getElementById('editBlends').value.split(' ').map(val => val.trim()).filter(val => val !== '');
+  updatedDictionary.details.phonology.notes = removeTags(document.getElementById('editPhonologyNotes').value.trim());
+
  updatedDictionary.details.phonotactics.onset = document.getElementById('editOnset').value.split(',').map(val => val.trim()).filter(val => val !== '');
  updatedDictionary.details.phonotactics.nucleus = document.getElementById('editNucleus').value.split(',').map(val => val.trim()).filter(val => val !== '');
  updatedDictionary.details.phonotactics.coda = document.getElementById('editCoda').value.split(',').map(val => val.trim()).filter(val => val !== '');
@ -73,6 +84,7 @@ export function saveEditModal() {
  updatedDictionary.settings.caseSensitive = document.getElementById('editCaseSensitive').checked;
  updatedDictionary.settings.sortByDefinition = document.getElementById('editSortByDefinition').checked;
  updatedDictionary.settings.theme = document.getElementById('editTheme').value;
+  updatedDictionary.settings.customCSS = removeTags(document.getElementById('editCustomCSS').value.trim());

  if (hasToken()) {
    updatedDictionary.settings.isPublic = document.getElementById('editIsPublic').checked;
@ -84,6 +96,7 @@ export function saveEditModal() {
    window.currentDictionary = Object.assign(window.currentDictionary, updatedDictionary);

    renderTheme();
+    renderCustomCSS();
    renderDictionaryDetails();
    renderPartsOfSpeech();
    sortWords(true);
--- a/src/js/migration.js
+++ b/src/js/migration.js
@ -106,12 +106,13 @@ export function migrateDictionary() {
    switch (window.currentDictionary.version) {
      default: console.error('Unknown version'); break;
      case '2.0.0': {
+        window.currentDictionary.details.phonology.notes = '';
        window.currentDictionary.details.phonotactics = Object.assign({}, window.currentDictionary.details.phonology.phonotactics);
        delete window.currentDictionary.details.phonology.phonotactics;
        window.currentDictionary.details.phonotactics.notes = window.currentDictionary.details.phonotactics.exceptions;
        delete window.currentDictionary.details.phonotactics.exceptions;
        window.currentDictionary.details.orthography.translations = [];
-        // Add window.currentDictionary.custom.css = '';
+        window.currentDictionary.settings.customCSS = '';
        window.currentDictionary = Object.assign({}, DEFAULT_DICTIONARY, window.currentDictionary);
        window.currentDictionary.version = MIGRATE_VERSION;
        migrated = true;
--- a/src/js/render/details.js
+++ b/src/js/render/details.js
@ -2,9 +2,7 @@ import md from 'marked';
 import { removeTags, slugify } from '../../helpers';
 import { getWordsStats, hasToken } from '../utilities';
 import { showSection } from '../displayToggles';
-import {
-  setupSearchFilters,
-} from '../setupListeners';
+import { setupSearchFilters } from '../setupListeners/search';
 import { parseReferences } from '../wordManagement';
 import { getPublicLink } from '../account/utilities';

@ -62,12 +60,14 @@ export function renderDetails() {
  const consonantHTML = `<p><strong>Consonants</strong><br>${consonants.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
  const vowelHTML = `<p><strong>Vowels</strong><br>${vowels.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
  const blendHTML = blends.length > 0 ? `<p><strong>Polyphthongs&nbsp;/&nbsp;Blends</strong><br>${blends.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>` : '';
+  const phonologyNotesHTML = phonology.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonology.notes)) + '</div>' : '';
  const phonologyHTML = `<h3>Phonology</h3>
  <div class="split two">
    <div>${consonantHTML}</div>
    <div>${vowelHTML}</div>
  </div>
-  ${blendHTML}`;
+  ${blendHTML}
+  ${phonologyNotesHTML}`;

  const { onset, nucleus, coda } = phonotactics;
  const onsetHTML = `<p><strong>Onset</strong><br>${onset.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
@ -76,29 +76,32 @@ export function renderDetails() {
  const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonotactics.notes)) + '</div>' : '';
  const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
    ? `<h3>Phonotactics</h3>
-  <div class="split three">
+  ${onset.length > 0 || nucleus.length > 0 || coda.length > 0
+    ? `<div class="split three">
    <div>${onsetHTML}</div>
    <div>${nucleusHTML}</div>
    <div>${codaHTML}</div>
-  </div>
+  </div>` : ''}
  ${phonotacticsNotesHTML}`
    : '';

  const { translations } = orthography;
-  const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => {
+  const translationsHTML = translations.length > 0 ? `<p><strong>Translations</strong><br>${translations.map(translation => {
    translation = translation.split('=').map(value => value.trim());
    if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
      return `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
    }
    return false;
-  }).filter(html => html !== false).join(' ')}</p>`;
+  }).filter(html => html !== false).join(' ')}</p>` : '';
  const orthographyNotesHTML = orthography.notes.trim().length > 0 ? '<p><strong>Notes</strong><br>' + md(removeTags(orthography.notes)) + '</div>' : '';
-  const orthographyHTML = translations.length > 0 || orthographyNotesHTML.length > 0
+  const orthographyHTML = translations.length + orthographyNotesHTML.length > 0
    ? `<h3>Orthography</h3>
-  ${translations.length > 0 ? translationsHTML : ''}
+  ${translationsHTML}
  ${orthographyNotesHTML}`
    : '';
-  const grammarHTML = '<h3>Grammar</h3><div>' + md(removeTags(grammar.notes)) + '</div>';
+  const grammarHTML = grammar.notes.trim().length > 0 ? '<h3>Grammar</h3><div>'
+    + (grammar.notes.trim().length > 0 ? md(removeTags(grammar.notes)) : '')
+  + '</div>' : '';

  detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;
 }
--- a/src/js/render/index.js
+++ b/src/js/render/index.js
@ -3,6 +3,7 @@ import { renderWords } from './words';

 export function renderAll() {
  renderTheme();
+  renderCustomCSS();
  renderDictionaryDetails();
  renderPartsOfSpeech();
  renderWords();
@ -12,3 +13,17 @@ export function renderTheme() {
  const { theme } = window.currentDictionary.settings;
  document.body.id = theme + 'Theme';
 }
+
+export function renderCustomCSS() {
+  const { customCSS } = window.currentDictionary.settings;
+  const stylingId = 'customCSS';
+  const stylingElement = document.getElementById(stylingId);
+  if (!stylingElement) {
+    const styling = document.createElement('style');
+    styling.id = stylingId;
+    styling.innerHTML = customCSS;
+    document.body.appendChild(styling);
+  } else {
+    stylingElement.innerHTML = customCSS;
+  }
+}
--- a/src/js/render/modals.js
+++ b/src/js/render/modals.js
@ -1,9 +1,9 @@
+import { setupIPAFields } from '../setupListeners';
 import {
  setupMaximizeModal,
  setupInfoModal,
  setupIPATable,
-  setupIPAFields
-} from '../setupListeners';
+} from '../setupListeners/modals';
 import ipaTableFile from '../KeyboardFire/phondue/ipa-table.html';

 export function renderIPAHelp() {
--- a/src/js/render/words.js
+++ b/src/js/render/words.js
@ -7,7 +7,7 @@ import {
  setupPagination,
  setupWordOptionSelections,
  setupWordEditFormButtons,
-} from '../setupListeners';
+} from '../setupListeners/words';
 import { getPaginationData } from '../pagination';
 import { getOpenEditForms, translateOrthography, parseReferences } from '../wordManagement';
 import { renderAd } from '../ads';
--- a/src/js/search.js
+++ b/src/js/search.js
@ -1,6 +1,7 @@
 import { cloneObject, getIndicesOf } from "../helpers";
 import removeDiacritics from "./StackOverflow/removeDiacritics";
 import { renderWords } from "./render/words";
+import { translateOrthography, parseReferences } from "./wordManagement";

 export function showSearchModal() {
  document.getElementById('searchModal').style.display = 'block';
@ -22,6 +23,7 @@ export function getSearchFilters() {
    caseSensitive: document.getElementById('searchCaseSensitive').checked,
    ignoreDiacritics: document.getElementById('searchIgnoreDiacritics').checked,
    exact: document.getElementById('searchExactWords').checked,
+    orthography: document.getElementById('searchOrthography').checked,
    name: document.getElementById('searchIncludeName').checked,
    definition: document.getElementById('searchIncludeDefinition').checked,
    details: document.getElementById('searchIncludeDetails').checked,
@ -53,11 +55,13 @@ export function getMatchingSearchWords() {
    }).filter(word => {
      searchTerm = filters.ignoreDiacritics ? removeDiacritics(searchTerm) : searchTerm;
      searchTerm = filters.caseSensitive ? searchTerm : searchTerm.toLowerCase();
-      let name = filters.ignoreDiacritics ? removeDiacritics(word.name) : word.name;
+      let name = filters.orthography ? translateOrthography(word.name) : word.name;
+      name = filters.ignoreDiacritics ? removeDiacritics(name) : name;
      name = filters.caseSensitive ? name : name.toLowerCase();
      let definition = filters.ignoreDiacritics ? removeDiacritics(word.definition) : word.definition;
      definition = filters.caseSensitive ? definition : definition.toLowerCase();
-      let details = filters.ignoreDiacritics ? removeDiacritics(word.details) : word.details;
+      let details = filters.orthography ? parseReferences(word.details) : word.details;
+      details = filters.ignoreDiacritics ? removeDiacritics(details) : details;
      details = filters.caseSensitive ? details : details.toLowerCase();

      const isInName = filters.name && (filters.exact
@ -80,6 +84,10 @@ export function highlightSearchTerm(word) {
  if (searchTerm) {
    const filters = getSearchFilters();
    const markedUpWord = cloneObject(word);
+    if (filters.orthography) {
+      markedUpWord.name = translateOrthography(markedUpWord.name);
+      markedUpWord.details = parseReferences(markedUpWord.details);
+    }
    if (filters.ignoreDiacritics) {
      const searchTermLength = searchTerm.length;
      searchTerm = removeDiacritics(searchTerm);
--- a/src/js/setupListeners.js
+++ b/src/js/setupListeners.js
@ -1,392 +0,0 @@
-import {showSection, hideDetailsPanel} from './displayToggles';
-import { renderWords, renderEditForm } from './render/words';
-import { renderMaximizedTextbox, renderInfoModal, renderIPATable, renderIPAHelp } from './render/modals';
-import { confirmEditWord, cancelEditWord, confirmDeleteWord, submitWordForm } from './wordManagement';
-import { openEditModal, saveEditModal, saveAndCloseEditModal, exportDictionary, exportWords, importDictionary, importWords, confirmDeleteDictionary } from './dictionaryManagement';
-import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
-import { insertAtCursor, getInputSelection, setSelectionRange } from './StackOverflow/inputCursorManagement';
-import { usePhondueDigraphs } from './KeyboardFire/phondue/ipaField';
-import { openSettingsModal, saveSettingsModal, saveAndCloseSettingsModal } from './settings';
-import { enableHotKeys } from './hotkeys';
-import { showSearchModal, clearSearchText, checkAllPartsOfSpeechFilters, uncheckAllPartsOfSpeechFilters } from './search';
-import helpFile from '../markdown/help.md';
-import termsFile from '../markdown/terms.md';
-import privacyFile from '../markdown/privacy.md';
-import { dismiss, isDismissed } from './announcements';
-import { fadeOutElement } from './utilities';
-
-export default function setupListeners() {
-  setupAnnouncements();
-  setupDetailsTabs();
-  setupHeaderButtons();
-  setupWordForm();
-  setupMobileWordFormButton();
-  setupInfoButtons();
-  if (window.settings.useHotkeys) {
-    enableHotKeys();
-  }
-}
-
-export function setupHeaderButtons() {
-  setupSearchBar();
-  setupSettingsModal();
-
-  document.getElementById('loginCreateAccountButton').addEventListener('click', () => {
-    import('./account/index.js').then(account => {
-      account.showLoginForm();
-    });
-  });
-}
-
-function setupAnnouncements() {
-  const announcements = document.querySelectorAll('.announcement');
-  Array.from(announcements).forEach(announcement => {
-    if (announcement.id && isDismissed(announcement.id)) {
-      fadeOutElement(announcement);
-    } else {
-      announcement.querySelector('.close-button').addEventListener('click', () => dismiss(announcement));
-    }
-  });
-}
-
-function setupDetailsTabs() {
-  const tabs = document.querySelectorAll('#detailsSection nav li');
-  tabs.forEach(tab => {
-    tab.addEventListener('click', () => {
-      const section = tab.innerText.toLowerCase();
-      if (section === 'edit') {
-        openEditModal();
-        // import('../test.js').then(function (test) {
-        //   // Render page
-        //   test.aaa();
-        // });
-      } else {
-        const isActive = tab.classList.contains('active');
-        tabs.forEach(t => t.classList.remove('active'));
-        if (isActive) {
-          hideDetailsPanel();
-        } else {
-          tab.classList.add('active');
-          showSection(section);
-        }
-      }
-    });
-  });
-  setupEditFormTabs();
-  setupEditFormInteractions();
-  setupEditFormButtons();
-}
-
-function setupEditFormTabs() {
-  const tabs = document.querySelectorAll('#editModal nav li');
-  tabs.forEach(tab => {
-    tab.addEventListener('click', () => {
-      tabs.forEach(t => {
-        t.classList.remove('active');
-        document.getElementById('edit' + t.innerText + 'Tab').style.display = 'none';
-      });
-      tab.classList.add('active');
-      document.getElementById('edit' + tab.innerText + 'Tab').style.display = '';
-    });
-  });
-}
-
-function setupEditFormInteractions() {
-  const preventDuplicatesBox = document.getElementById('editPreventDuplicates');
-  preventDuplicatesBox.addEventListener('change', () => {
-    const caseSensitiveBox = document.getElementById('editCaseSensitive');
-    if (preventDuplicatesBox.checked) {
-      caseSensitiveBox.disabled = false;
-    } else {
-      caseSensitiveBox.disabled = true;
-      caseSensitiveBox.checked = false;
-    }
-  });
-}
-
-function setupEditFormButtons() {
-  document.getElementById('editSave').addEventListener('click', saveEditModal);
-  document.getElementById('editSaveAndClose').addEventListener('click', saveAndCloseEditModal);
-  document.getElementById('importDictionaryFile').addEventListener('change', importDictionary);
-  document.getElementById('importWordsCSV').addEventListener('change', importWords);
-  document.getElementById('exportDictionaryButton').addEventListener('click', exportDictionary);
-  document.getElementById('exportWordsButton').addEventListener('click', exportWords);
-  document.getElementById('deleteDictionaryButton').addEventListener('click', confirmDeleteDictionary);
-
-  setupMaximizeButtons();
-}
-
-function setupSearchBar() {
-  const searchBox = document.getElementById('searchBox'),
-    clearSearchButton = document.getElementById('clearSearchButton'),
-    openSearchModal = document.getElementById('openSearchModal'),
-    searchIgnoreDiacritics = document.getElementById('searchIgnoreDiacritics'),
-    searchExactWords = document.getElementById('searchExactWords'),
-    searchIncludeDetails = document.getElementById('searchIncludeDetails');
-  searchBox.addEventListener('change', () => {
-    renderWords();
-  });
-  searchBox.addEventListener('input', event => {
-    openSearchModal.value = event.target.value;
-  });
-  clearSearchButton.addEventListener('click', clearSearchText);
-  openSearchModal.addEventListener('click', showSearchModal);
-
-  const toggleDetailsCheck = function() {
-    if (searchExactWords.checked) {
-      searchIncludeDetails.checked = false;
-      searchIncludeDetails.disabled = true;
-    } else {
-      searchIncludeDetails.disabled = false;
-      searchIncludeDetails.checked = true;
-    }
-  }
-
-  searchIgnoreDiacritics.addEventListener('change', () => {
-    if (searchIgnoreDiacritics.checked) {
-      searchExactWords.checked = false;
-      searchExactWords.disabled = true;
-    } else {
-      searchExactWords.disabled = false;
-    }
-    toggleDetailsCheck();
-  });
-
-  searchExactWords.addEventListener('change', () => toggleDetailsCheck());
-}
-
-export function setupSearchFilters() {
-  const searchFilters = document.querySelectorAll('#searchOptions input[type="checkbox"]'),
-    searchBox = document.getElementById('searchBox');
-  Array.from(searchFilters).concat([searchBox]).forEach(filter => {
-    filter.removeEventListener('change', renderWords);
-    filter.addEventListener('change', renderWords);
-  });
-  document.getElementById('checkAllFilters').removeEventListener('click', checkAllPartsOfSpeechFilters);
-  document.getElementById('checkAllFilters').addEventListener('click', checkAllPartsOfSpeechFilters);
-  document.getElementById('uncheckAllFilters').removeEventListener('click', uncheckAllPartsOfSpeechFilters);
-  document.getElementById('uncheckAllFilters').addEventListener('click', uncheckAllPartsOfSpeechFilters);
-}
-
-function setupWordForm() {
-  const wordForm = document.getElementById('wordForm'),
-    addWordButton = document.getElementById('addWordButton');
-  wordForm.addEventListener('submit', event => {
-    // Allow semantic form and prevent it from getting submitted
-    event.preventDefault();
-    return false;
-  });
-  addWordButton.addEventListener('click', submitWordForm);
-
-  setupIPAFields();
-  setupMaximizeButtons();
-}
-
-export function setupWordOptionButtons() {
-  const wordOptionButtons = document.getElementsByClassName('word-option-button');
-  const showWordOptions = function() {
-    this.parentElement.querySelector('.word-option-list').style.display = '';
-  }
-  const hideWordOptions = function(e) {
-    if (!e.target.classList.contains('word-option-button')) {
-      const allWordOptions = document.querySelectorAll('.word-option-list');
-      Array.from(allWordOptions).forEach(wordOptionList => {
-        wordOptionList.style.display = 'none';
-      });
-    }
-  }
-
-  Array.from(wordOptionButtons).forEach(button => {
-    button.removeEventListener('click', showWordOptions);
-    button.addEventListener('click', showWordOptions);
-  });
-
-  document.removeEventListener('click', hideWordOptions);
-  document.addEventListener('click', hideWordOptions);
-
-}
-
-export function setupWordOptionSelections() {
-  const wordOptions = document.getElementsByClassName('word-option');
-  Array.from(wordOptions).forEach(option => {
-    switch (option.innerText) {
-      case 'Edit': {
-        option.removeEventListener('click', renderEditForm);
-        option.addEventListener('click', renderEditForm);
-        break;
-      }
-      case 'Delete': {
-        option.removeEventListener('click', confirmDeleteWord);
-        option.addEventListener('click', confirmDeleteWord);
-        break;
-      }
-    }
-  });
-}
-
-export function setupSettingsModal() {
-  document.getElementById('settingsButton').addEventListener('click', openSettingsModal);
-  document.getElementById('settingsSave').addEventListener('click', saveSettingsModal);
-  document.getElementById('settingsSaveAndClose').addEventListener('click', saveAndCloseSettingsModal);
-}
-
-export function setupWordEditFormButtons() {
-  const saveChangesButtons = document.getElementsByClassName('edit-save-changes'),
-    cancelChangesButtons = document.getElementsByClassName('edit-cancel');
-  Array.from(saveChangesButtons).forEach(button => {
-    button.removeEventListener('click', confirmEditWord);
-    button.addEventListener('click', confirmEditWord);
-  });
-  Array.from(cancelChangesButtons).forEach(button => {
-    button.removeEventListener('click', cancelEditWord);
-    button.addEventListener('click', cancelEditWord);
-  });
-
-  setupIPAFields();
-  setupMaximizeButtons();
-}
-
-export function setupMobileWordFormButton() {
-  const mobileButton = document.getElementById('mobileWordFormShow'),
-    wordForm = document.getElementById('wordForm');
-  
-  mobileButton.addEventListener('click', () => {
-    if (mobileButton.innerText === '+') {
-      wordForm.style.display = 'block';
-      mobileButton.innerHTML = '&times;&#xFE0E;';
-    } else {
-      wordForm.style.display = '';
-      mobileButton.innerHTML = '+';
-    }
-  });
-}
-
-export function setupPagination() {
-  const nextButtons = document.getElementsByClassName('next-button'),
-    prevButtons = document.getElementsByClassName('prev-button'),
-    pageSelectors = document.getElementsByClassName('page-selector');
-  
-  Array.from(nextButtons).forEach(nextButton => {
-    nextButton.removeEventListener('click', goToNextPage);
-    nextButton.addEventListener('click', goToNextPage);
-  });
-  Array.from(prevButtons).forEach(prevButton => {
-    prevButton.removeEventListener('click', goToPreviousPage);
-    prevButton.addEventListener('click', goToPreviousPage);
-  });
-  
-  Array.from(pageSelectors).forEach(pageSelector => {
-    pageSelector.removeEventListener('change', goToPage);
-    pageSelector.addEventListener('change', goToPage);
-  });
-}
-
-export function setupIPAFields() {
-  if (window.settings.useIPAPronunciationField) {
-    const ipaFields = document.getElementsByClassName('ipa-field');
-    Array.from(ipaFields).forEach(field => {
-      field.removeEventListener('keypress', usePhondueDigraphs);
-      field.addEventListener('keypress', usePhondueDigraphs);
-    });
-  }
-
-  setupIPAButtons();
-}
-
-export function setupIPAButtons() {
-  const ipaTableButtons = document.getElementsByClassName('ipa-table-button'),
-    ipaFieldHelpButtons = document.getElementsByClassName('ipa-field-help-button');
-
-  Array.from(ipaTableButtons).forEach(button => {
-    button.removeEventListener('click', renderIPATable);
-    button.addEventListener('click', renderIPATable);
-  });
-
-  Array.from(ipaFieldHelpButtons).forEach(button => {
-    button.removeEventListener('click', renderIPAHelp);
-    button.addEventListener('click', renderIPAHelp);
-  });
-}
-
-export function setupIPATable(modal, textBox) {
-  const closeElements = modal.querySelectorAll('.modal-background, .close-button, .done-button'),
-    headerTextBox = modal.querySelector('header input'),
-    ipaButtons = modal.querySelectorAll('.td-btn button');
-  Array.from(closeElements).forEach(close => {
-    close.addEventListener('click', () => {
-      textBox.focus();
-      const endOfTextbox = textBox.value.length;
-      setSelectionRange(textBox, endOfTextbox, endOfTextbox);
-      modal.parentElement.removeChild(modal);
-    });
-  });
-
-  headerTextBox.addEventListener('change', () => {
-    textBox.value = headerTextBox.value;
-  });
-  
-  Array.from(ipaButtons).forEach(button => {
-    button.addEventListener('click', () => {
-      insertAtCursor(headerTextBox, button.innerText);
-      textBox.value = headerTextBox.value;
-    });
-  });
-
-  setTimeout(() => {
-    headerTextBox.focus();
-    const endOfTextbox = headerTextBox.value.length;
-    setSelectionRange(headerTextBox, endOfTextbox, endOfTextbox);
-  }, 1);
-}
-
-export function setupMaximizeButtons() {
-  const maximizeButtons = document.getElementsByClassName('maximize-button');
-  Array.from(maximizeButtons).forEach(button => {
-    button.removeEventListener('click', renderMaximizedTextbox);
-    button.addEventListener('click', renderMaximizedTextbox);
-  });
-}
-
-export function setupMaximizeModal(modal, textBox) {
-  const closeElements = modal.querySelectorAll('.modal-background, .close-button, .done-button'),
-    maximizedTextBox = modal.querySelector('textarea');
-  Array.from(closeElements).forEach(close => {
-    close.addEventListener('click', () => {
-      const selection = getInputSelection(maximizedTextBox);
-      textBox.focus();
-      setSelectionRange(textBox, selection.start, selection.end);
-      modal.parentElement.removeChild(modal);
-    });
-  });
-
-  maximizedTextBox.addEventListener('change', () => {
-    textBox.value = maximizedTextBox.value;
-  })
-
-  setTimeout(() => {
-    const selection = getInputSelection(textBox);
-    maximizedTextBox.focus();
-    setSelectionRange(maximizedTextBox, selection.start, selection.end);
-  }, 1);
-}
-
-export function setupInfoButtons() {
-  document.getElementById('helpInfoButton').addEventListener('click', () => {
-    renderInfoModal(helpFile);
-  });
-  document.getElementById('termsInfoButton').addEventListener('click', () => {
-    renderInfoModal(termsFile);
-  });
-  document.getElementById('privacyInfoButton').addEventListener('click', () => {
-    renderInfoModal(privacyFile);
-  });
-}
-
-export function setupInfoModal(modal) {
-  const closeElements = modal.querySelectorAll('.modal-background, .close-button');
-  Array.from(closeElements).forEach(close => {
-    close.addEventListener('click', () => {
-      modal.parentElement.removeChild(modal);
-    });
-  });
-}
--- a/src/js/setupListeners/buttons.js
+++ b/src/js/setupListeners/buttons.js
@ -0,0 +1,52 @@
+import { renderMaximizedTextbox, renderInfoModal, renderIPATable, renderIPAHelp } from '../render/modals';
+import helpFile from '../../markdown/help.md';
+import termsFile from '../../markdown/terms.md';
+import privacyFile from '../../markdown/privacy.md';
+import { setupSearchBar } from './search';
+import { setupSettingsModal } from './modals';
+
+export function setupHeaderButtons() {
+  setupSearchBar();
+  setupSettingsModal();
+
+  document.getElementById('loginCreateAccountButton').addEventListener('click', () => {
+    import('../account/index.js').then(account => {
+      account.showLoginForm();
+    });
+  });
+}
+
+export function setupIPAButtons() {
+  const ipaTableButtons = document.getElementsByClassName('ipa-table-button'),
+    ipaFieldHelpButtons = document.getElementsByClassName('ipa-field-help-button');
+
+  Array.from(ipaTableButtons).forEach(button => {
+    button.removeEventListener('click', renderIPATable);
+    button.addEventListener('click', renderIPATable);
+  });
+
+  Array.from(ipaFieldHelpButtons).forEach(button => {
+    button.removeEventListener('click', renderIPAHelp);
+    button.addEventListener('click', renderIPAHelp);
+  });
+}
+
+export function setupMaximizeButtons() {
+  const maximizeButtons = document.getElementsByClassName('maximize-button');
+  Array.from(maximizeButtons).forEach(button => {
+    button.removeEventListener('click', renderMaximizedTextbox);
+    button.addEventListener('click', renderMaximizedTextbox);
+  });
+}
+
+export function setupInfoButtons() {
+  document.getElementById('helpInfoButton').addEventListener('click', () => {
+    renderInfoModal(helpFile);
+  });
+  document.getElementById('termsInfoButton').addEventListener('click', () => {
+    renderInfoModal(termsFile);
+  });
+  document.getElementById('privacyInfoButton').addEventListener('click', () => {
+    renderInfoModal(privacyFile);
+  });
+}
--- a/src/js/setupListeners/details.js
+++ b/src/js/setupListeners/details.js
@ -0,0 +1,66 @@
+import { showSection, hideDetailsPanel } from '../displayToggles';
+import { openEditModal, saveEditModal, saveAndCloseEditModal, exportDictionary, exportWords, importDictionary, importWords, confirmDeleteDictionary } from '../dictionaryManagement';
+import { setupMaximizeButtons } from './buttons';
+
+export function setupDetailsTabs() {
+  const tabs = document.querySelectorAll('#detailsSection nav li');
+  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) {
+          hideDetailsPanel();
+        } else {
+          tab.classList.add('active');
+          showSection(section);
+        }
+      }
+    });
+  });
+  setupEditFormTabs();
+  setupEditFormInteractions();
+  setupEditFormButtons();
+}
+
+function setupEditFormTabs() {
+  const tabs = document.querySelectorAll('#editModal nav li');
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      tabs.forEach(t => {
+        t.classList.remove('active');
+        document.getElementById('edit' + t.innerText + 'Tab').style.display = 'none';
+      });
+      tab.classList.add('active');
+      document.getElementById('edit' + tab.innerText + 'Tab').style.display = '';
+    });
+  });
+}
+
+function setupEditFormInteractions() {
+  const preventDuplicatesBox = document.getElementById('editPreventDuplicates');
+  preventDuplicatesBox.addEventListener('change', () => {
+    const caseSensitiveBox = document.getElementById('editCaseSensitive');
+    if (preventDuplicatesBox.checked) {
+      caseSensitiveBox.disabled = false;
+    } else {
+      caseSensitiveBox.disabled = true;
+      caseSensitiveBox.checked = false;
+    }
+  });
+}
+
+function setupEditFormButtons() {
+  document.getElementById('editSave').addEventListener('click', saveEditModal);
+  document.getElementById('editSaveAndClose').addEventListener('click', saveAndCloseEditModal);
+  document.getElementById('importDictionaryFile').addEventListener('change', importDictionary);
+  document.getElementById('importWordsCSV').addEventListener('change', importWords);
+  document.getElementById('exportDictionaryButton').addEventListener('click', exportDictionary);
+  document.getElementById('exportWordsButton').addEventListener('click', exportWords);
+  document.getElementById('deleteDictionaryButton').addEventListener('click', confirmDeleteDictionary);
+
+  setupMaximizeButtons();
+}
--- a/src/js/setupListeners/index.js
+++ b/src/js/setupListeners/index.js
@ -0,0 +1,42 @@
+import { usePhondueDigraphs } from '../KeyboardFire/phondue/ipaField';
+import { enableHotKeys } from '../hotkeys';
+import { dismiss, isDismissed } from '../announcements';
+import { fadeOutElement } from '../utilities';
+import { setupDetailsTabs } from './details';
+import { setupWordForm, setupMobileWordFormButton } from './words';
+import { setupIPAButtons, setupHeaderButtons, setupInfoButtons } from './buttons';
+
+export default function setupListeners() {
+  setupAnnouncements();
+  setupDetailsTabs();
+  setupHeaderButtons();
+  setupWordForm();
+  setupMobileWordFormButton();
+  setupInfoButtons();
+  if (window.settings.useHotkeys) {
+    enableHotKeys();
+  }
+}
+
+function setupAnnouncements() {
+  const announcements = document.querySelectorAll('.announcement');
+  Array.from(announcements).forEach(announcement => {
+    if (announcement.id && isDismissed(announcement.id)) {
+      fadeOutElement(announcement);
+    } else {
+      announcement.querySelector('.close-button').addEventListener('click', () => dismiss(announcement));
+    }
+  });
+}
+
+export function setupIPAFields() {
+  if (window.settings.useIPAPronunciationField) {
+    const ipaFields = document.getElementsByClassName('ipa-field');
+    Array.from(ipaFields).forEach(field => {
+      field.removeEventListener('keypress', usePhondueDigraphs);
+      field.addEventListener('keypress', usePhondueDigraphs);
+    });
+  }
+
+  setupIPAButtons();
+}
--- a/src/js/setupListeners/modals.js
+++ b/src/js/setupListeners/modals.js
@ -0,0 +1,71 @@
+import { insertAtCursor, getInputSelection, setSelectionRange } from '../StackOverflow/inputCursorManagement';
+import { openSettingsModal, saveSettingsModal, saveAndCloseSettingsModal } from '../settings';
+
+export function setupSettingsModal() {
+  document.getElementById('settingsButton').addEventListener('click', openSettingsModal);
+  document.getElementById('settingsSave').addEventListener('click', saveSettingsModal);
+  document.getElementById('settingsSaveAndClose').addEventListener('click', saveAndCloseSettingsModal);
+}
+
+export function setupIPATable(modal, textBox) {
+  const closeElements = modal.querySelectorAll('.modal-background, .close-button, .done-button'),
+    headerTextBox = modal.querySelector('header input'),
+    ipaButtons = modal.querySelectorAll('.td-btn button');
+  Array.from(closeElements).forEach(close => {
+    close.addEventListener('click', () => {
+      textBox.focus();
+      const endOfTextbox = textBox.value.length;
+      setSelectionRange(textBox, endOfTextbox, endOfTextbox);
+      modal.parentElement.removeChild(modal);
+    });
+  });
+
+  headerTextBox.addEventListener('change', () => {
+    textBox.value = headerTextBox.value;
+  });
+
+  Array.from(ipaButtons).forEach(button => {
+    button.addEventListener('click', () => {
+      insertAtCursor(headerTextBox, button.innerText);
+      textBox.value = headerTextBox.value;
+    });
+  });
+
+  setTimeout(() => {
+    headerTextBox.focus();
+    const endOfTextbox = headerTextBox.value.length;
+    setSelectionRange(headerTextBox, endOfTextbox, endOfTextbox);
+  }, 1);
+}
+
+export function setupMaximizeModal(modal, textBox) {
+  const closeElements = modal.querySelectorAll('.modal-background, .close-button, .done-button'),
+    maximizedTextBox = modal.querySelector('textarea');
+  Array.from(closeElements).forEach(close => {
+    close.addEventListener('click', () => {
+      const selection = getInputSelection(maximizedTextBox);
+      textBox.focus();
+      setSelectionRange(textBox, selection.start, selection.end);
+      modal.parentElement.removeChild(modal);
+    });
+  });
+
+  maximizedTextBox.addEventListener('change', () => {
+    textBox.value = maximizedTextBox.value;
+  })
+
+  setTimeout(() => {
+    const selection = getInputSelection(textBox);
+    maximizedTextBox.focus();
+    setSelectionRange(maximizedTextBox, selection.start, selection.end);
+  }, 1);
+}
+
+export function setupInfoModal(modal) {
+  const closeElements = modal.querySelectorAll('.modal-background, .close-button');
+  Array.from(closeElements).forEach(close => {
+    close.addEventListener('click', () => {
+      modal.parentElement.removeChild(modal);
+    });
+  });
+}
--- a/src/js/setupListeners/search.js
+++ b/src/js/setupListeners/search.js
@ -0,0 +1,54 @@
+import { renderWords } from '../render/words';
+import { showSearchModal, clearSearchText, checkAllPartsOfSpeechFilters, uncheckAllPartsOfSpeechFilters } from '../search';
+
+export function setupSearchBar() {
+  const searchBox = document.getElementById('searchBox'),
+    clearSearchButton = document.getElementById('clearSearchButton'),
+    openSearchModal = document.getElementById('openSearchModal'),
+    searchIgnoreDiacritics = document.getElementById('searchIgnoreDiacritics'),
+    searchExactWords = document.getElementById('searchExactWords'),
+    searchIncludeDetails = document.getElementById('searchIncludeDetails');
+  searchBox.addEventListener('change', () => {
+    renderWords();
+  });
+  searchBox.addEventListener('input', event => {
+    openSearchModal.value = event.target.value;
+  });
+  clearSearchButton.addEventListener('click', clearSearchText);
+  openSearchModal.addEventListener('click', showSearchModal);
+
+  const toggleDetailsCheck = function() {
+    if (searchExactWords.checked) {
+      searchIncludeDetails.checked = false;
+      searchIncludeDetails.disabled = true;
+    } else {
+      searchIncludeDetails.disabled = false;
+      searchIncludeDetails.checked = true;
+    }
+  }
+
+  searchIgnoreDiacritics.addEventListener('change', () => {
+    if (searchIgnoreDiacritics.checked) {
+      searchExactWords.checked = false;
+      searchExactWords.disabled = true;
+    } else {
+      searchExactWords.disabled = false;
+    }
+    toggleDetailsCheck();
+  });
+
+  searchExactWords.addEventListener('change', () => toggleDetailsCheck());
+}
+
+export function setupSearchFilters() {
+  const searchFilters = document.querySelectorAll('#searchOptions input[type="checkbox"]'),
+    searchBox = document.getElementById('searchBox');
+  Array.from(searchFilters).concat([searchBox]).forEach(filter => {
+    filter.removeEventListener('change', renderWords);
+    filter.addEventListener('change', renderWords);
+  });
+  document.getElementById('checkAllFilters').removeEventListener('click', checkAllPartsOfSpeechFilters);
+  document.getElementById('checkAllFilters').addEventListener('click', checkAllPartsOfSpeechFilters);
+  document.getElementById('uncheckAllFilters').removeEventListener('click', uncheckAllPartsOfSpeechFilters);
+  document.getElementById('uncheckAllFilters').addEventListener('click', uncheckAllPartsOfSpeechFilters);
+}
--- a/src/js/setupListeners/words.js
+++ b/src/js/setupListeners/words.js
@ -0,0 +1,112 @@
+import { renderEditForm } from '../render/words';
+import { confirmEditWord, cancelEditWord, confirmDeleteWord, submitWordForm } from '../wordManagement';
+import { goToNextPage, goToPreviousPage, goToPage } from '../pagination';
+import { setupMaximizeButtons } from './buttons';
+import { setupIPAFields } from '.';
+
+export function setupWordForm() {
+  const wordForm = document.getElementById('wordForm'),
+    addWordButton = document.getElementById('addWordButton');
+  wordForm.addEventListener('submit', event => {
+    // Allow semantic form and prevent it from getting submitted
+    event.preventDefault();
+    return false;
+  });
+  addWordButton.addEventListener('click', submitWordForm);
+
+  setupIPAFields();
+  setupMaximizeButtons();
+}
+
+export function setupWordOptionButtons() {
+  const wordOptionButtons = document.getElementsByClassName('word-option-button');
+  const showWordOptions = function() {
+    this.parentElement.querySelector('.word-option-list').style.display = '';
+  }
+  const hideWordOptions = function(e) {
+    if (!e.target.classList.contains('word-option-button')) {
+      const allWordOptions = document.querySelectorAll('.word-option-list');
+      Array.from(allWordOptions).forEach(wordOptionList => {
+        wordOptionList.style.display = 'none';
+      });
+    }
+  }
+
+  Array.from(wordOptionButtons).forEach(button => {
+    button.removeEventListener('click', showWordOptions);
+    button.addEventListener('click', showWordOptions);
+  });
+
+  document.removeEventListener('click', hideWordOptions);
+  document.addEventListener('click', hideWordOptions);
+
+}
+
+export function setupWordOptionSelections() {
+  const wordOptions = document.getElementsByClassName('word-option');
+  Array.from(wordOptions).forEach(option => {
+    switch (option.innerText) {
+      case 'Edit': {
+        option.removeEventListener('click', renderEditForm);
+        option.addEventListener('click', renderEditForm);
+        break;
+      }
+      case 'Delete': {
+        option.removeEventListener('click', confirmDeleteWord);
+        option.addEventListener('click', confirmDeleteWord);
+        break;
+      }
+    }
+  });
+}
+
+export function setupWordEditFormButtons() {
+  const saveChangesButtons = document.getElementsByClassName('edit-save-changes'),
+    cancelChangesButtons = document.getElementsByClassName('edit-cancel');
+  Array.from(saveChangesButtons).forEach(button => {
+    button.removeEventListener('click', confirmEditWord);
+    button.addEventListener('click', confirmEditWord);
+  });
+  Array.from(cancelChangesButtons).forEach(button => {
+    button.removeEventListener('click', cancelEditWord);
+    button.addEventListener('click', cancelEditWord);
+  });
+
+  setupIPAFields();
+  setupMaximizeButtons();
+}
+
+export function setupMobileWordFormButton() {
+  const mobileButton = document.getElementById('mobileWordFormShow'),
+    wordForm = document.getElementById('wordForm');
+
+  mobileButton.addEventListener('click', () => {
+    if (mobileButton.innerText === '+') {
+      wordForm.style.display = 'block';
+      mobileButton.innerHTML = '&times;&#xFE0E;';
+    } else {
+      wordForm.style.display = '';
+      mobileButton.innerHTML = '+';
+    }
+  });
+}
+
+export function setupPagination() {
+  const nextButtons = document.getElementsByClassName('next-button'),
+    prevButtons = document.getElementsByClassName('prev-button'),
+    pageSelectors = document.getElementsByClassName('page-selector');
+
+  Array.from(nextButtons).forEach(nextButton => {
+    nextButton.removeEventListener('click', goToNextPage);
+    nextButton.addEventListener('click', goToNextPage);
+  });
+  Array.from(prevButtons).forEach(prevButton => {
+    prevButton.removeEventListener('click', goToPreviousPage);
+    prevButton.addEventListener('click', goToPreviousPage);
+  });
+
+  Array.from(pageSelectors).forEach(pageSelector => {
+    pageSelector.removeEventListener('change', goToPage);
+    pageSelector.addEventListener('change', goToPage);
+  });
+}
--- a/src/js/view/render.js
+++ b/src/js/view/render.js
@ -3,12 +3,14 @@ import { removeTags, slugify } from '../../helpers';
 import { getWordsStats, getHomonymnNumber } from './utilities';
 import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
 import { showSection } from './displayToggles';
-import { setupSearchFilters, setupInfoModal } from './setupListeners';
 import { renderAd } from '../ads';
 import { sortWords } from './wordManagement';
+import { setupInfoModal } from '../setupListeners/modals';
+import { setupSearchFilters } from '../setupListeners/search';

 export function renderAll() {
  renderTheme();
+  renderCustomCSS();
  renderDictionaryDetails();
  renderPartsOfSpeech();
  sortWords();
@ -20,6 +22,20 @@ export function renderTheme() {
  document.body.id = theme + 'Theme';
 }

+export function renderCustomCSS() {
+  const { customCSS } = window.currentDictionary.settings;
+  const stylingId = 'customCSS';
+  const stylingElement = document.getElementById(stylingId);
+  if (!stylingElement) {
+    const styling = document.createElement('style');
+    styling.id = stylingId;
+    styling.innerHTML = customCSS;
+    document.body.appendChild(styling);
+  } else {
+    stylingElement.innerHTML = customCSS;
+  }
+}
+
 export function renderDictionaryDetails() {
  renderName();
  showSection('description');
@ -52,12 +68,14 @@ export function renderDetails() {
  const consonantHTML = `<p><strong>Consonants</strong><br>${consonants.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
  const vowelHTML = `<p><strong>Vowels</strong><br>${vowels.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
  const blendHTML = blends.length > 0 ? `<p><strong>Polyphthongs&nbsp;/&nbsp;Blends</strong><br>${blends.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>` : '';
+  const phonologyNotesHTML = phonology.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonology.notes)) + '</div>' : '';
  const phonologyHTML = `<h3>Phonology</h3>
  <div class="split two">
    <div>${consonantHTML}</div>
    <div>${vowelHTML}</div>
  </div>
-  ${blendHTML}`;
+  ${blendHTML}
+  ${phonologyNotesHTML}`;

  const { onset, nucleus, coda } = phonotactics;
  const onsetHTML = `<p><strong>Onset</strong><br>${onset.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
@ -66,29 +84,32 @@ export function renderDetails() {
  const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonotactics.notes)) + '</div>' : '';
  const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
    ? `<h3>Phonotactics</h3>
-  <div class="split three">
+  ${onset.length > 0 || nucleus.length > 0 || coda.length > 0
+    ? `<div class="split three">
    <div>${onsetHTML}</div>
    <div>${nucleusHTML}</div>
    <div>${codaHTML}</div>
-  </div>
+  </div>` : ''}
  ${phonotacticsNotesHTML}`
    : '';

  const { translations } = orthography;
-  const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => {
+  const translationsHTML = translations.length > 0 ? `<p><strong>Translations</strong><br>${translations.map(translation => {
    translation = translation.split('=').map(value => value.trim());
    if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
      return `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
    }
    return false;
-  }).filter(html => html !== false).join(' ')}</p>`;
+  }).filter(html => html !== false).join(' ')}</p>` : '';
  const orthographyNotesHTML = orthography.notes.trim().length > 0 ? '<p><strong>Notes</strong><br>' + md(removeTags(orthography.notes)) + '</div>' : '';
-  const orthographyHTML = translations.length > 0 && orthographyNotesHTML.length > 0
+  const orthographyHTML = translations.length + orthographyNotesHTML.length > 0
    ? `<h3>Orthography</h3>
-  ${translations.length > 0 ? translationsHTML : ''}
+  ${translationsHTML}
  ${orthographyNotesHTML}`
    : '';
-  const grammarHTML = '<h3>Grammar</h3><div>' + md(removeTags(grammar.notes)) + '</div>';
+  const grammarHTML = grammar.notes.trim().length > 0 ? '<h3>Grammar</h3><div>'
+    + (grammar.notes.trim().length > 0 ? md(removeTags(grammar.notes)) : '')
+  + '</div>' : '';

  detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;
 }
--- a/src/js/view/search.js
+++ b/src/js/view/search.js
@ -22,6 +22,7 @@ export function getSearchFilters() {
    caseSensitive: document.getElementById('searchCaseSensitive').checked,
    ignoreDiacritics: document.getElementById('searchIgnoreDiacritics').checked,
    exact: document.getElementById('searchExactWords').checked,
+    orthography: document.getElementById('searchOrthography').checked,
    name: document.getElementById('searchIncludeName').checked,
    definition: document.getElementById('searchIncludeDefinition').checked,
    details: document.getElementById('searchIncludeDetails').checked,
@ -53,11 +54,13 @@ export function getMatchingSearchWords() {
    }).filter(word => {
      searchTerm = filters.ignoreDiacritics ? removeDiacritics(searchTerm) : searchTerm;
      searchTerm = filters.caseSensitive ? searchTerm : searchTerm.toLowerCase();
-      let name = filters.ignoreDiacritics ? removeDiacritics(word.name) : word.name;
+      let name = filters.orthography ? translateOrthography(word.name) : word.name;
+      name = filters.ignoreDiacritics ? removeDiacritics(name) : name;
      name = filters.caseSensitive ? name : name.toLowerCase();
      let definition = filters.ignoreDiacritics ? removeDiacritics(word.definition) : word.definition;
      definition = filters.caseSensitive ? definition : definition.toLowerCase();
-      let details = filters.ignoreDiacritics ? removeDiacritics(word.details) : word.details;
+      let details = filters.orthography ? parseReferences(word.details) : word.details;
+      details = filters.ignoreDiacritics ? removeDiacritics(details) : details;
      details = filters.caseSensitive ? details : details.toLowerCase();

      const isInName = filters.name && (filters.exact
@ -80,6 +83,10 @@ export function highlightSearchTerm(word) {
  if (searchTerm) {
    const filters = getSearchFilters();
    const markedUpWord = cloneObject(word);
+    if (filters.orthography) {
+      markedUpWord.name = translateOrthography(markedUpWord.name);
+      markedUpWord.details = parseReferences(markedUpWord.details);
+    }
    if (filters.ignoreDiacritics) {
      const searchTermLength = searchTerm.length;
      searchTerm = removeDiacritics(searchTerm);
--- a/src/markdown/help.md
+++ b/src/markdown/help.md
@ -89,6 +89,7 @@ You can refine your search by clicking the "Toggle Options" button and using the
  - **Case-Sensitive:** When checked, Lexiconga finds entries matching the letter case in the entered text. When unchecked, it will find any case as long as the letters match.
  - **Ignore Diacritics/Accents:** When checked, Lexiconga will ignore accented letters and diacritics and identify them as their equivalent unaccented letter and vice-versa, in case you want to find a word with a diacritic without entering the diacritic in the search box. When unchecked, it will only find diacritics and accented letters if they are specifically entered in the search box.
  - **Exact Words:** When checked, the search term will find entries with _exact matches_ in only the Word or Definition field. If Word or Definition has _any_ text aside from exactly what was entered in the search bar, it will not be displayed.
+  - **Translation:** When checked, Lexiconga will translate all words and references by any specified orthographic translations and compare your search term with that instead of the words as entered.
 - **Include in Search**
  - **Word**: When checked, Lexiconga searches your dictionary's "Word" entries for the entered text. When unchecked, it ignores it.
  - **Definition**: When checked, Lexiconga searches your dictionary's "Definition/Equivalent Word(s)" entries for the entered text. When unchecked, it ignores it.
@ -124,17 +125,19 @@ Clicking the "Edit" button under your dictionary's name will display a window wi
 #### Details

  - **Parts of Speech:** The parts of speech available in the dropdown box on word forms. Separate each individual part of speech with a comma.
-  - **Alphabetical Order:** This feature has not been implemented yet.
+  - **Alphabetical Order:** The order that your words will be sorted by. Include every letter and different capitalization used in your dictionary to sort your words in whatever order you want—any letters in your words that are not sorted here are sorted by the default ASCII/Unicode order (i.e. English Alphabetical) _after_ any custom-sorted words. Lexiconga can only sort by single characters (rather than sets of characters) and will sort the words _as entered_, not using orthographic translations. Separate each character with a _space_.
  - **Phonology**
    - **Consonants:** The IPA characters representing the consonants present in your language. Uses the IPA Auto-Fill feature unless it is turned off. Separate each consonant with a _space_ so they will be displayed correctly under the Details section of your dictionary.
    - **Vowels:** The IPA characters representing the vowels present in your language. Uses the IPA Auto-Fill feature unless it is turned off. Separate each vowel with a _space_ so they will be displayed correctly under the Details section of your dictionary.
    - **Polyphthongs/Blends:** The IPA characters representing the polyphthongs or blends present in your language. Uses the IPA Auto-Fill feature unless it is turned off. Separate each one with a _space_ so they will be displayed correctly under the Details section of your dictionary.
+    - **Notes:** Any notes about your constructed language's phonology that you want to share. Uses Markdown.
  - **Phonotactics**
-    - **Onset:** What phonological characters can appear at the beginning of a syllable. Separate each with a comma.
-    - **Nucleus:** What phonological characters can appear in the middle of a syllable. Separate each with a comma.
-    - **Coda:** What phonological characters can appear at the end of a syllable. Separate each with a comma.
-    - **Exceptions:** Any exceptions to the phonotactical rules laid out above. This is a Markdown-enable text area that you can use however you'd like.
+    - **Onset:** What phonological characters can appear at the beginning of a syllable. Separate each with a _comma_.
+    - **Nucleus:** What phonological characters can appear in the middle of a syllable. Separate each with a _comma_.
+    - **Coda:** What phonological characters can appear at the end of a syllable. Separate each with a _comma_.
+    - **Notes:** Any notes about your phonotactical rules laid out above. Uses Markdown.
  - **Orthography**
+    - **Translations:** The specification for how Lexiconga should translate certain character sequences into other character sequences. Use the format "original=new" where "original" is the old letter or sequence of letters and "new" is what you want those letters to change into separated by an equal sign. Put each translation on a _separate line_.
    - **Notes:** Any notes about your constructed language's writing system that you want to share. Uses Markdown.
  - **Grammar**
    - **Notes:** Any notes about your constructed language's grammar that you want to share. Uses Markdown.
@ -144,6 +147,7 @@ Clicking the "Edit" button under your dictionary's name will display a window wi
  - **Words are Case-Sensitive:** Only available when "Prevent Duplicate Words" is checked. Checking this box will allow the creation of words with the exact same spelling if their capitalization is different.
  - **Sort by Definition:** Checking this box will sort the words in alphabetical order based on the Definition instead of the Word.
  - **Theme:** Set the color theme for the current dictionary.
+  - **Custom Styling:** Specify custom CSS to change the styling of your dictionary. You can use custom fonts by specifying them here and setting the `font-family` style of the `.orthographic-translation` class!
  - **Make Public:** Only visible if logged in with a Lexiconga account. Checking this box will make your dictionary public via a link you can share with others. The link will appear below this checkbox after it is checked.

 #### Actions
--- a/src/php/api/Dictionary.php
+++ b/src/php/api/Dictionary.php
@ -33,14 +33,15 @@ class Dictionary {
    $insert_dictionary = $this->db->execute($insert_dictionary_query, array($new_id, $user, 'A new dictionary.', time()));

    if ($insert_dictionary === true) {
-      $insert_linguistics_query = "INSERT INTO dictionary_linguistics (dictionary, parts_of_speech, phonotactics_notes, translations, orthography_notes, grammar_notes)
-VALUES ($new_id, ?, ?, ?, ?, ?)";
+      $insert_linguistics_query = "INSERT INTO dictionary_linguistics (dictionary, parts_of_speech, phonology_notes, phonotactics_notes, translations, orthography_notes, grammar_notes)
+VALUES ($new_id, ?, ?, ?, ?, ?, ?)";
      $insert_linguistics = $this->db->execute($insert_linguistics_query, array(
        $this->defaults['partsOfSpeech'],
        '',
        '',
        '',
        '',
+        '',
      ));

      if ($insert_linguistics === true) {
@ -104,12 +105,13 @@ VALUES ($new_id, ?, ?, ?, ?, ?)";
          'description' => $this->parseReferences(strip_tags($result['description']), $result['id']),
          'createdBy' => $result['public_name'],
          'partsOfSpeech' => explode(',', $partsOfSpeech),
-          'alphabeticalOrder' => array(),
+          'alphabeticalOrder' => $result['alphabetical_order'] !== '' ? explode(' ', $result['alphabetical_order']) : array(),
          'details' => array(
            'phonology' => array(
              'consonants' => $result['consonants'] !== '' ? explode(' ', $result['consonants']) : array(),
              'vowels' => $result['vowels'] !== '' ? explode(' ', $result['vowels']) : array(),
              'blends' => $result['blends'] !== '' ? explode(' ', $result['blends']) : array(),
+              'notes' => $result['phonology_notes'],
            ),
            'phonotactics' => array(
              'onset' => $result['onset'] !== '' ? explode(',', $result['onset']) : array(),
@ -130,6 +132,7 @@ VALUES ($new_id, ?, ?, ?, ?, ?)";
            'caseSensitive' => $result['case_sensitive'] === '1' ? true : false,
            'sortByDefinition' => $result['sort_by_definition'] === '1' ? true : false,
            'theme' => $result['theme'],
+            'customCSS' => $result['custom_css'],
            'isPublic' => $result['is_public'] === '1' ? true : false,
          ),
          'lastUpdated' => is_null($result['last_updated']) ? $result['created_on'] : $result['last_updated'],
@ -281,12 +284,13 @@ VALUES ($new_id, ?, ?, ?, ?, ?)";
        'specification' => $result['specification'],
        'description' => $result['description'],
        'partsOfSpeech' => explode(',', $partsOfSpeech),
-        'alphabeticalOrder' => array(),
+        'alphabeticalOrder' => $result['alphabetical_order'] !== '' ? explode(' ', $result['alphabetical_order']) : array(),
        'details' => array(
          'phonology' => array(
            'consonants' => $result['consonants'] !== '' ? explode(' ', $result['consonants']) : array(),
            'vowels' => $result['vowels'] !== '' ? explode(' ', $result['vowels']) : array(),
            'blends' => $result['blends'] !== '' ? explode(' ', $result['blends']) : array(),
+            'notes' => $result['phonology_notes'],
          ),
          'phonotactics' => array(
            'onset' => $result['onset'] !== '' ? explode(',', $result['onset']) : array(),
@ -307,6 +311,7 @@ VALUES ($new_id, ?, ?, ?, ?, ?)";
          'caseSensitive' => $result['case_sensitive'] === '1' ? true : false,
          'sortByDefinition' => $result['sort_by_definition'] === '1' ? true : false,
          'theme' => $result['theme'],
+          'customCSS' => $result['custom_css'],
          'isPublic' => $result['is_public'] === '1' ? true : false,
        ),
        'lastUpdated' => is_null($result['last_updated']) ? $result['created_on'] : $result['last_updated'],
@ -325,6 +330,7 @@ SET name=:name,
  case_sensitive=:case_sensitive,
  sort_by_definition=:sort_by_definition,
  theme=:theme,
+  custom_css=:custom_css,
  is_public=:is_public,
  last_updated=:last_updated,
  created_on=:created_on
@ -339,6 +345,7 @@ WHERE user=$user AND id=$dictionary";
      ':case_sensitive' => $dictionary_object['settings']['caseSensitive'] ? 1 : 0,
      ':sort_by_definition' => $dictionary_object['settings']['sortByDefinition'] ? 1 : 0,
      ':theme' => $dictionary_object['settings']['theme'],
+      ':custom_css' => $dictionary_object['settings']['customCSS'],
      ':is_public' => $dictionary_object['settings']['isPublic'] ? 1 : 0,
      ':last_updated' => $dictionary_object['lastUpdated'],
      ':created_on' => $dictionary_object['createdOn'],
@ -348,9 +355,11 @@ WHERE user=$user AND id=$dictionary";
      $linguistics = $dictionary_object['details'];
      $query2 = "UPDATE dictionary_linguistics
 SET parts_of_speech=:parts_of_speech,
+  alphabetical_order=:alphabetical_order,
  consonants=:consonants,
  vowels=:vowels,
  blends=:blends,
+  phonology_notes=:phonology_notes,
  onset=:onset,
  nucleus=:nucleus,
  coda=:coda,
@ -363,9 +372,11 @@ WHERE dictionary=$dictionary";
      // $result2 = $this->db->query($query2, array(
      $result2 = $this->db->execute($query2, array(
        ':parts_of_speech' => implode(',', $dictionary_object['partsOfSpeech']),
+        ':alphabetical_order' => implode(' ', $dictionary_object['alphabeticalOrder']),
        ':consonants' => implode(' ', $linguistics['phonology']['consonants']),
        ':vowels' => implode(' ', $linguistics['phonology']['vowels']),
        ':blends' => implode(' ', $linguistics['phonology']['blends']),
+        ':phonology_notes' => $linguistics['phonology']['notes'],
        ':onset' => implode(',', $linguistics['phonotactics']['onset']),
        ':nucleus' => implode(',', $linguistics['phonotactics']['nucleus']),
        ':coda' => implode(',', $linguistics['phonotactics']['coda']),
--- a/src/scss/_structure.scss
+++ b/src/scss/_structure.scss
@ -279,7 +279,11 @@ $nav-font-height: 16px;
  
  #editDescription {
    width: 100%;
-    height: 280px;
+    height: 240px;
+  }
+
+  #editCustomCSS {
+    font-family: 'Courier New', Courier, monospace;
  }
 }

--- a/src/scss/mobile/_structure.scss
+++ b/src/scss/mobile/_structure.scss
@ -89,7 +89,7 @@ $mobile-word-form-size: 32px;
  }
  #editDescription {
    width: 100%;
-    height: 260px;
+    height: 220px;
  }
 }

--- a/src/structure.sql
+++ b/src/structure.sql
@ -17,6 +17,7 @@ CREATE TABLE IF NOT EXISTS `dictionaries` (
  `case_sensitive` tinyint(1) NOT NULL DEFAULT 0,
  `sort_by_definition` tinyint(1) NOT NULL DEFAULT 0,
  `theme` varchar(20) COLLATE utf8_unicode_ci NOT NULL DEFAULT 'default',
+  `custom_css` text COLLATE utf8_unicode_ci NOT NULL COMMENT 'CSS',
  `is_public` tinyint(1) NOT NULL DEFAULT 0,
  `last_updated` int(11) DEFAULT NULL,
  `created_on` int(11) NOT NULL,
@ -34,9 +35,11 @@ DELIMITER ;
 CREATE TABLE IF NOT EXISTS `dictionary_linguistics` (
  `dictionary` int(11) NOT NULL,
  `parts_of_speech` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL COMMENT 'Comma-separated',
+  `alphabetical_order` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT 'Space-separated',
  `consonants` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT 'Space-separated',
  `vowels` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT 'Space-separated',
  `blends` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT 'Space-separated',
+  `phonology_notes` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL COMMENT 'Markdown',
  `onset` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT 'Comma-separated',
  `nucleus` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT 'Comma-separated',
  `coda` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT 'Comma-separated',
--- a/template-index.html
+++ b/template-index.html
@ -81,6 +81,9 @@
              <label>Exact Words
                <input type="checkbox" id="searchExactWords">
              </label>
+              <label>Translations
+                <input type="checkbox" id="searchOrthography">
+              </label>
            </div>
          </div>
          <div class="split">
@ -242,9 +245,11 @@
      <section id="editDescriptionTab">
        <label>Name<br>
          <input id="editName" maxlength="50">
+          <small>Won't update if left blank.</small>
        </label>
        <label>Specification<br>
          <input id="editSpecification" maxlength="50">
+          <small>Won't update if left blank.</small>
        </label>
        <label>Description<a class="label-button maximize-button">Maximize</a><br>
          <textarea id="editDescription"></textarea>
@ -289,6 +294,9 @@
            </label>
          </div>
        </div>
+        <label>Notes <small>(Markdown-enabled)</small><br>
+          <textarea id="editPhonologyNotes"></textarea>
+        </label>
        <h3>Phonotactics</h3>
        <div class="split three">
          <div>
@ -357,6 +365,9 @@ ou=ow"></textarea>
            <option value="grape">Grape</option>
          </select>
        </label>
+        <label>Custom Styling <small>(CSS Only)</small><a class="label-button maximize-button">Maximize</a><br>
+          <textarea id="editCustomCSS" placeholder=".orthographic-translation {font-family: serif;}"></textarea>
+        </label>
      </section>

      <section id="editActionsTab" style="display:none;">
--- a/template-view.html
+++ b/template-view.html
@ -81,6 +81,9 @@
              <label>Exact Words
                <input type="checkbox" id="searchExactWords">
              </label>
+              <label>Translations
+                <input type="checkbox" id="searchOrthography">
+              </label>
            </div>
          </div>
          <div class="split">
Author	SHA1	Message	Date
Robbie Antenesse	80ea69e9a6	Update Help file to add new features	2019-07-10 17:10:43 -06:00
Robbie Antenesse	f67bd78785	Add alphabetical order to database	2019-07-10 17:09:47 -06:00
Robbie Antenesse	ef49386b1f	Render custom css in public view	2019-07-10 16:45:15 -06:00
Robbie Antenesse	c8d9901a1e	Split out setupListeners into separate files	2019-07-10 16:13:01 -06:00
Robbie Antenesse	d0a4036f7b	Add new features to offline and view	2019-07-10 15:11:46 -06:00
Robbie Antenesse	8fb03834c8	Add Custom CSS field	2019-07-10 14:59:37 -06:00
Robbie Antenesse	885f891053	Stop dictionary update if name or specification blank	2019-07-10 13:23:32 -06:00
Robbie Antenesse	27dc0d223a	Add Phonology Notes	2019-07-10 12:14:27 -06:00
Robbie Antenesse	3997293689	Fix console error when uploading whole dictionary	2019-07-10 11:56:06 -06:00
Robbie Antenesse	d64619c8c1	Add ability to search for orthographic translations	2019-07-10 11:00:12 -06:00