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,12 +129,20 @@ 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();
+
+    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 words = getMatchingSearchWords();
-
-  const openEditForms = getOpenEditForms();
-
     if (openEditForms.length > 0) {
       // Clone the dom nodes
       openEditForms.forEach((wordFormId, index) => {
@@ -182,6 +193,7 @@ export function renderWords() {
         </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%;
   }