Add functionality for fullscreen textbox for dictionary description

css/lexiconga.css

@@ -109,7 +109,8 @@ input, textarea, select, option, button {
 	border-color: #d09b84 #915237 #915237 #d09b84;
 }
 
-#dictionaryDescription, .management, #settingsOptions, #infoPage, #loadAfterDeletePage, #accountSettingsPage {
+#dictionaryDescription, .management, #settingsOptions, #infoPage, #loadAfterDeletePage,
+#accountSettingsPage, #fullScreenTextboxPage {
 	background: #f2d5b2;
 }
 

css/styles.css

@@ -63,6 +63,10 @@ and (max-device-width : 480px) {
     #formLockButton {
         display: none;
     }
+
+    #showFullScreenTextbox {
+        display: none;
+    }
 }
 
 #leftColumn {
@@ -329,7 +333,8 @@ searchTerm {
     margin: 10px;
 }
 
-#settingsBackgroundFade, #infoBackgroundFade, #loadAfterDeleteFade, #accountSettingsBackgroundFade {
+#settingsBackgroundFade, #infoBackgroundFade, #loadAfterDeleteFade,
+#accountSettingsBackgroundFade, #fullScreenTextboxBackgroundFade {
     position: fixed;
     top: 0;
     left: 0;
@@ -339,7 +344,8 @@ searchTerm {
     opacity: 0.75;
 }
 
-#settingsOptions, #infoPage, #loadAfterDeletePage, #accountSettingsPage {
+#settingsOptions, #infoPage, #loadAfterDeletePage,
+#accountSettingsPage, #fullScreenTextboxPage {
     position: fixed;
     top: 6%;
     left: 6%;
@@ -358,11 +364,23 @@ searchTerm {
 
 #announcementCloseButton, #notificationCloseButton,
 #settingsButton, #settingsScreenCloseButton,
-#settingsSaveButtons button, #infoScreenCloseButton {
+#settingsSaveButtons button, #infoScreenCloseButton,
+#fullScreenTextboxScreenCloseButton {
     float: right;
     font-size: 12px;
 }
 
+#fullScreenTextboxPage {
+    padding: 5px 3% 4%;
+    overflow-y: hidden;
+}
+
+#fullScreenTextbox {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 #settingsForm {
     width: 100%;
     padding: 0;

index.php

@@ -141,9 +141,10 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
                         <span>Dictionary Name</span>
                         <input type="text" id="dictionaryNameEdit" />
                     </label>
-                    <label><span>Dictionary Description/Rules</span>
+                    <label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox()">Maximize</a></span>
                         <textarea id="dictionaryDescriptionEdit"></textarea>
                     </label>
+
                     <label>
                         <span>Parts of Speech</span>
                         <input type="text" id="dictionaryPartsOfSpeechEdit" />
@@ -205,6 +206,14 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
         </div>
     </div>
     
+    <div id="fullScreenTextboxScreen" style="display:none;">
+        <div id="fullScreenTextboxBackgroundFade" onclick="HideFullScreenTextbox()"></div>
+        <div id="fullScreenTextboxPage">
+            <span id="fullScreenTextboxScreenCloseButton" class="clickable" onclick="HideFullScreenTextbox()">Minimize</span>
+            <textarea id="fullScreenTextbox"></textarea>
+        </div>
+    </div>
+    
     <div id="infoScreen" style="display:none;">
         <div id="infoBackgroundFade" onclick="HideInfo()"></div>
         <div id="infoPage">

js/ui.js

@@ -377,6 +377,16 @@ function HideSettingsWhenComplete() {
     }
 }
 
+function ShowFullScreenTextbox() {
+    document.getElementById("fullScreenTextbox").value = document.getElementById("dictionaryDescriptionEdit").value;
+    document.getElementById("fullScreenTextboxScreen").style.display = "block";
+}
+
+function HideFullScreenTextbox() {
+    document.getElementById("dictionaryDescriptionEdit").value = document.getElementById("fullScreenTextbox").value;
+    document.getElementById("fullScreenTextboxScreen").style.display = "none";
+}
+
 function ShowDictionaryDeleteMenu(dictionaryList) {
     document.getElementById('loadAfterDeleteScreen').style.display = 'block';
     //Parse response into the list that forces you to load one and reload select in settings.