Increase column sizes

src/js/render.js

@@ -117,6 +117,9 @@ export function renderPartsOfSpeech() {
 
 export function renderWords() {
   let wordsHTML = '';
+  let openEditForms = getOpenEditForms();
+  let words = false;
+
   if (window.currentDictionary.words.length === 0) {
     wordsHTML = `<article class="entry">
       <header>
@@ -126,62 +129,71 @@ export function renderWords() {
         <dt class="definition">Use the Word Form to create words or click the Help button below!</dt>
       </dl>
     </article>`;
-  }
+  } else {
+    words = getMatchingSearchWords();
 
-  const words = getMatchingSearchWords();
+    if (words.length === 0) {
+      wordsHTML = `<article class="entry">
+        <header>
+          <h4 class="word">No Search Results</h4>
+        </header>
+        <dl>
+          <dt class="definition">Edit your search or filter to show words.</dt>
+        </dl>
+      </article>`;
+    }
 
-  const openEditForms = getOpenEditForms();
-
-  if (openEditForms.length > 0) {
-    // Clone the dom nodes
-    openEditForms.forEach((wordFormId, index) => {
-      openEditForms[index] = document.getElementById(wordFormId.toString()).cloneNode(true);
-    });
-  }
-
-  // const { pageStart, pageEnd } = getPaginationData(words);
-
-  // words.slice(pageStart, pageEnd).forEach(originalWord => {
-  words.forEach(originalWord => {
-    let detailsMarkdown = removeTags(originalWord.longDefinition);
-    const references = detailsMarkdown.match(/\{\{.+?\}\}/g);
-    if (references && Array.isArray(references)) {
-      new Set(references).forEach(reference => {
-        const wordToFind = reference.replace(/\{\{|\}\}/g, '');
-        const existingWordId = wordExists(wordToFind, true);
-        if (existingWordId !== false) {
-          const wordMarkdownLink = `[${wordToFind}](#${existingWordId})`;
-          detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink);
-        }
+    if (openEditForms.length > 0) {
+      // Clone the dom nodes
+      openEditForms.forEach((wordFormId, index) => {
+        openEditForms[index] = document.getElementById(wordFormId.toString()).cloneNode(true);
       });
     }
-    const word = highlightSearchTerm({
-      name: removeTags(originalWord.name),
-      pronunciation: removeTags(originalWord.pronunciation),
-      partOfSpeech: removeTags(originalWord.partOfSpeech),
-      simpleDefinition: removeTags(originalWord.simpleDefinition),
-      longDefinition: detailsMarkdown,
-      wordId: originalWord.wordId,
+
+    // const { pageStart, pageEnd } = getPaginationData(words);
+
+    // words.slice(pageStart, pageEnd).forEach(originalWord => {
+    words.forEach(originalWord => {
+      let detailsMarkdown = removeTags(originalWord.longDefinition);
+      const references = detailsMarkdown.match(/\{\{.+?\}\}/g);
+      if (references && Array.isArray(references)) {
+        new Set(references).forEach(reference => {
+          const wordToFind = reference.replace(/\{\{|\}\}/g, '');
+          const existingWordId = wordExists(wordToFind, true);
+          if (existingWordId !== false) {
+            const wordMarkdownLink = `[${wordToFind}](#${existingWordId})`;
+            detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink);
+          }
+        });
+      }
+      const word = highlightSearchTerm({
+        name: removeTags(originalWord.name),
+        pronunciation: removeTags(originalWord.pronunciation),
+        partOfSpeech: removeTags(originalWord.partOfSpeech),
+        simpleDefinition: removeTags(originalWord.simpleDefinition),
+        longDefinition: detailsMarkdown,
+        wordId: originalWord.wordId,
+      });
+      wordsHTML += `<article class="entry" id="${word.wordId}">
+        <header>
+          <h4 class="word">${word.name}</h4>
+          <span class="pronunciation">${word.pronunciation}</span>
+          <span class="part-of-speech">${word.partOfSpeech}</span>
+          <span class="small button word-option-button">Options</span>
+          <div class="word-option-list" style="display:none;">
+            <div class="word-option" id="edit_${word.wordId}">Edit</div>
+            <div class="word-option" id="delete_${word.wordId}">Delete</div>
+          </div>
+        </header>
+        <dl>
+          <dt class="definition">${word.simpleDefinition}</dt>
+          <dd class="details">
+            ${md(word.longDefinition)}
+          </dd>
+        </dl>
+      </article>`;
     });
-    wordsHTML += `<article class="entry" id="${word.wordId}">
-      <header>
-        <h4 class="word">${word.name}</h4>
-        <span class="pronunciation">${word.pronunciation}</span>
-        <span class="part-of-speech">${word.partOfSpeech}</span>
-        <span class="small button word-option-button">Options</span>
-        <div class="word-option-list" style="display:none;">
-          <div class="word-option" id="edit_${word.wordId}">Edit</div>
-          <div class="word-option" id="delete_${word.wordId}">Delete</div>
-        </div>
-      </header>
-      <dl>
-        <dt class="definition">${word.simpleDefinition}</dt>
-        <dd class="details">
-          ${md(word.longDefinition)}
-        </dd>
-      </dl>
-    </article>`;
-  });
+  }
 
   document.getElementById('entries').innerHTML = wordsHTML;
 
@@ -200,7 +212,7 @@ export function renderWords() {
   // Show Search Results
   const searchTerm = getSearchTerm();
   const filters = getSearchFilters();
-  let resultsText = searchTerm !== '' || !filters.allPartsOfSpeechChecked ? words.length.toString() + ' Results' : '';
+  let resultsText = searchTerm !== '' || !filters.allPartsOfSpeechChecked ? (words ? words.length : 0).toString() + ' Results' : '';
   resultsText += !filters.allPartsOfSpeechChecked ? ' (Filtered)' : '';
   document.getElementById('searchResults').innerHTML = resultsText;
 

src/js/search.js

@@ -36,7 +36,6 @@ export function getMatchingSearchWords() {
     const matchingWords = window.currentDictionary.words.slice().filter(word => {
       if (!filters.allPartsOfSpeechChecked) {
         const partOfSpeech = word.partOfSpeech === '' ? 'Unclassified' : word.partOfSpeech;
-        console.log('partOfSpeech', partOfSpeech);
         return filters.partsOfSpeech.hasOwnProperty(partOfSpeech) && filters.partsOfSpeech[partOfSpeech];
       }
       return true;

src/js/setupListeners.js

@@ -5,7 +5,7 @@ import { removeTags } from '../helpers';
 import { getNextId } from './utilities';
 import { openEditModal, saveEditModal, saveAndCloseEditModal } from './dictionaryManagement';
 import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
-import { insertAtCursor } from './StackOverflow/inputCursorManagement';
+import { insertAtCursor, getInputSelection, setSelectionRange } from './StackOverflow/inputCursorManagement';
 import { usePhondueDigraphs } from './KeyboardFire/phondue/ipaField';
 import { openSettingsModal, saveSettingsModal, saveAndCloseSettingsModal } from './settings';
 
@@ -341,6 +341,9 @@ export function setupMaximizeModal(modal, textBox) {
     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);
     });
   });
@@ -350,7 +353,9 @@ export function setupMaximizeModal(modal, textBox) {
   })
 
   setTimeout(() => {
-    modal.querySelector('textarea').focus();
+    const selection = getInputSelection(textBox);
+    maximizedTextBox.focus();
+    setSelectionRange(maximizedTextBox, selection.start, selection.end);
   }, 1);
 }
 

src/scss/_containers.scss

@@ -23,12 +23,12 @@ main {
   }
 
   #sideColumn {
-    width: 28%;
+    width: 32%;
     margin: 0 1%;
   }
 
   #mainColumn {
-    width: 68%;
+    width: 64%;
     margin: 0;
   }
 

src/scss/_structure.scss

@@ -89,8 +89,8 @@
 #wordForm {
   position: fixed;
   top: auto;
-  width: 24%;
-  max-width: 275px;
+  width: 31%;
+  max-width: 320px;
   padding: 10px;
   background-color: $light;
   border: $border;

src/scss/mobile/_structure.scss

@@ -1,6 +1,11 @@
 @media (max-width: 750px) {
   
 #top {
+  #title {
+    font-size: 13pt;
+    margin-right: 10px;
+  }
+
   #openSearchModal {
     width: 40%;
   }