From 2d6013e169a07e8e6b748a454cea611b6e4e56af Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <gamedev@alamantus.com>
Date: Sat, 2 Jul 2016 21:25:26 -0600
Subject: [PATCH] Started working on Mobile CSS!

---
 css/lexiconga.css | 17 ---------
 css/mobile.css    | 88 +++++++++++++++++++++++++++++++++++++++++++++++
 css/styles.css    | 63 ++++++++++++++++-----------------
 index.php         |  9 +++--
 4 files changed, 124 insertions(+), 53 deletions(-)
 create mode 100644 css/mobile.css

diff --git a/css/lexiconga.css b/css/lexiconga.css
index c5f46db..813aecc 100644
--- a/css/lexiconga.css
+++ b/css/lexiconga.css
@@ -3,23 +3,7 @@ body {
 }
 
 header {
-	height: 50px;
-	width: 100%;
 	background: #eacc9d;
-	margin-bottom: 10px;
-	border: none;
-	-webkit-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-	-moz-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-	box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-}
-
-/* Smartphones (portrait and landscape) ----------- */
-@media only screen 
-and (min-device-width : 320px) 
-and (max-device-width : 480px) {
-    header {
-        height: 70px;
-    }
 }
 
 tr, thead {
@@ -70,7 +54,6 @@ and (min-device-width : 481px) {
 
 /* Smartphones (portrait and landscape) ----------- */
 @media only screen 
-and (min-device-width : 320px) 
 and (max-device-width : 480px) {
 	#siteLogo {
 		display: block;
diff --git a/css/mobile.css b/css/mobile.css
new file mode 100644
index 0000000..0b5a9fe
--- /dev/null
+++ b/css/mobile.css
@@ -0,0 +1,88 @@
+/* Smartphones (portrait and landscape) ----------- */
+@media only screen 
+and (max-device-width : 480px) {
+    body {
+        font-size: 11pt;
+    }
+
+    header {
+        height: 70px;
+    }
+
+    footer {
+        position: relative;
+        clear: both;
+        max-height: 100%;
+    }
+
+    #announcementArea, #notificationArea {
+        width: 80%;
+    }
+
+    #leftColumn {
+        width: 100%;
+    }
+
+    #wordEntryForm {
+        padding: 8px 0;
+        width: 100%;
+        max-width: 450px;
+        margin: 10px auto;
+        -webkit-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
+        -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
+        box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
+    }
+
+    #wordEntryForm label {
+        overflow: auto;
+        display: flex;
+        justify-content: center;
+        font-size: 10pt;
+    }
+
+    #wordEntryForm label span {
+        float: left;
+        width: 30%;
+        text-align: right;
+        margin-right: 8px;
+    }
+
+    #wordEntryForm input, #wordEntryForm select, #wordEntryForm textarea {
+        float: right;
+        width: 60%;
+        margin-right: 8px;
+        align-self: center;
+    }
+
+    .longDefinition {
+        min-width: 200px;
+        height: 80px;
+    }
+
+    #wordEntryForm button {
+        display: block;
+        width: 50%;
+        height: 30px;
+        margin: 0px auto;
+    }
+    
+    #dictionaryContainer {
+        margin-bottom: 15px !important;
+    }
+
+    #formLockButton {
+        display: none;
+    }
+
+    #showFullScreenTextbox {
+        display: none;
+    }
+
+    #settingsSaveButtons {
+        position: relative;
+        right: 0;
+        bottom: 0;
+        clear: both;
+        width: 100%;
+    }
+}
diff --git a/css/styles.css b/css/styles.css
index 1a7bcd7..abd1528 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,4 +1,9 @@
+html {
+    width: 100%;
+}
+
 body {
+    width: 100%;
     padding: 0;
     margin: 0;
     border: none;
@@ -10,6 +15,21 @@ contents {
     width: 100%;
 }
 
+header {
+    height: 50px;
+    width: 100%;
+    margin: 0 0 10px;
+    position: relative;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    border: none;
+    padding: 0;
+    -webkit-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
+    box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
+}
+
 footer {
     width: 100%;
     text-align: center;
@@ -18,10 +38,14 @@ footer {
     bottom: 0px;
     left: 0px;
     background: #aaaaaa;
-    padding: 8px;
+    padding: 0;
     max-height: 32px;   /* Update Dictionary Container's bottom margin to account for footer */
 }
 
+#footer-content {
+    padding: 8px;
+}
+
 table {
     border-collapse: collapse;
     width: 100%;
@@ -62,6 +86,10 @@ form {
     border: outset 3px;
 }
 
+.wbr:after {
+    content: "\00200B";
+}
+
 label {
     display: block;
     margin-bottom: 10px;
@@ -139,7 +167,7 @@ input[type=checkbox] {
 #announcementArea, #notificationArea {
     text-align:center;
     padding:10px;
-    margin:0 auto;
+    margin: 0 auto 5px;
     width:50%;
     min-width:200px;
     -webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
@@ -418,34 +446,3 @@ searchTerm {
     max-width: 400px;
     margin: 0 30px 0 0;
 }
-
-/* Smartphones (portrait and landscape) ----------- */
-@media only screen 
-and (min-device-width : 320px) 
-and (max-device-width : 480px) {
-    footer {
-        position: relative;
-        clear: both;
-        max-height: 100%;
-    }
-    
-    #dictionaryContainer {
-        margin-bottom: 15px !important;
-    }
-
-    #formLockButton {
-        display: none;
-    }
-
-    #showFullScreenTextbox {
-        display: none;
-    }
-
-    #settingsSaveButtons {
-        position: relative;
-        right: 0;
-        bottom: 0;
-        clear: both;
-        width: 100%;
-    }
-}
diff --git a/index.php b/index.php
index 4828f0f..2be560c 100644
--- a/index.php
+++ b/index.php
@@ -119,6 +119,7 @@ if ($display_mode != "build") {
     <?php } ?>
 
     <link href="/css/styles.css" rel="stylesheet" />
+    <link href="/css/mobile.css" rel="stylesheet" />
     <link href="/css/lexiconga.css" rel="stylesheet" />
 </head>
 <body>
@@ -150,7 +151,7 @@ if ($display_mode != "build") {
     </header>
     <contents>
     <?php if ($display_mode == "build") { ?>
-    <div id="announcementArea" style="display:<?php echo (($announcement) ? "block" : "none"); ?>;margin-bottom:10px;">
+    <div id="announcementArea" style="display:<?php echo (($announcement) ? "block" : "none"); ?>;">
         <span id="announcementCloseButton" class="clickable" onclick="document.getElementById('announcementArea').style.display='none';">Close</span>
         <div id="announcement"><?php echo $announcement; ?></div>
     </div>
@@ -171,10 +172,10 @@ if ($display_mode != "build") {
             <label><span>Part of Speech</span>
                 <select id="partOfSpeech" onkeydown="SubmitWordOnCtrlEnter(this)"></select>
             </label>
-            <label><span>Definition/Equivalent Word(s)</span>
+            <label><span>Definition/<wbr><b class=wbr></b>Equivalent Word(s)</span>
                 <input type="text" id="simpleDefinition" onkeydown="SubmitWordOnCtrlEnter(this)" />
             </label>
-            <label><span>Explanation/Long Definition <span id="showFullScreenTextbox" class="clickable inline-button" onclick="ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition')">Maximize</span></span>
+            <label><span>Explanation/<wbr><b class=wbr></b>Long Definition <span id="showFullScreenTextbox" class="clickable inline-button" onclick="ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition')">Maximize</span></span>
                 <textarea id="longDefinition" class="longDefinition" onkeydown="SubmitWordOnCtrlEnter(this)"></textarea>
             </label>
             <input type="hidden" id="editIndex" />
@@ -403,7 +404,9 @@ if ($display_mode != "build") {
 
     </contents>
     <footer>
+        <div id="footer-content">
         Dictionary Builder only guaranteed to work with most up-to-date HTML5 browsers. <a href="/issues" class="clickable" target="_blank">Issues</a> <a href="/updates" class="clickable" target="_blank">Updates</a> | <span class="clickable" onclick="ShowInfo('termsText')" style="font-size:12px;">Terms</span> <span class="clickable" onclick="ShowInfo('privacyText')" style="font-size:12px;">Privacy</span>
+        </div>
     </footer>
     
     <!-- Markdown Parser -->