Skip to content

Commit

Permalink
Made mobile theme apply to small windows as well as screens. Explaine…
Browse files Browse the repository at this point in the history 
…d mobile word form.
  • Loading branch information
@Alamantus
Alamantus committed Jul 11, 2016
1 parent 84bf0bd commit d623009
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 43 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Expand Up @@ -47,7 +47,9 @@ The only things to remember while adding new words is that the minimum informati
And that's all you need to get started! Everything else should be pretty self-explanatory, but a full explanation of Dictionary Builder and all of its functions continues below. And that's all you need to get started! Everything else should be pretty self-explanatory, but a full explanation of Dictionary Builder and all of its functions continues below.


### Locking/Unlocking the Word Entry Form ### Locking/Unlocking the Word Entry Form
If you are not viewing Lexiconga from a mobile device, you will see a lock icon (🔒) in a button in the top right corner of the word entry form. If you click the button, the word entry form will be undocked from the top of the dictionary and will scroll down the page with you. If you click the unlocked icon (🔓) after the form has been unlocked, it will lock again and jump back to the top of the page. If you are **_not_** viewing Lexiconga from a mobile device or otherwise small window, you will see a lock icon (🔒) in a button in the top right corner of the word entry form. If you click the button, the word entry form will be undocked from the top of the dictionary and will scroll down the page with you. If you click the unlocked icon (🔓) after the form has been unlocked, it will lock again and jump back to the top of the page.

If you _are_ viewing from a mobile device or from a small enough window, when you scroll past the word form, you will see a green box with a + sign. Tapping/clicking this box will make the word entry form appear at that position on your screen so you can add words from anywhere in your dictionary. To hide the word entry form after it is open, just click the ✕ icon that replaces the + in the green box and the word form will hide.


### Viewing your Dictionary's Details ### Viewing your Dictionary's Details
After you enter a markdown-formatted description/rules in the Settings menu, you can view the formatted version by clicking the "Show Description" button under your dictionary's name. You can hide it again by clicking "Hide Description" when the description is displayed. After you enter a markdown-formatted description/rules in the Settings menu, you can view the formatted version by clicking the "Show Description" button under your dictionary's name. You can hide it again by clicking "Hide Description" when the description is displayed.
Expand Down
17 changes: 13 additions & 4 deletions css/mobile.css
View file
@@ -1,6 +1,6 @@
/* Smartphones (portrait and landscape) ----------- */ /* Smartphones (portrait and landscape) ----------- */
@media only screen @media screen
and (max-device-width : 910px) { and (max-width : 910px) {
body { body {
font-size: 11pt; font-size: 11pt;
} }
Expand Down Expand Up @@ -32,7 +32,7 @@ and (max-device-width : 910px) {
} }


#wordEntryForm label { #wordEntryForm label {
overflow: auto; overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 10pt; font-size: 10pt;
Expand Down Expand Up @@ -79,8 +79,9 @@ and (max-device-width : 910px) {
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
border: none; border: none;
cursor: pointer;
} }

#dictionaryColumn { #dictionaryColumn {
width: 100%; width: 100%;
margin: 0; margin: 0;
Expand All @@ -103,6 +104,14 @@ and (max-device-width : 910px) {
margin: 0 auto; margin: 0 auto;
} }


.fixedFade {
z-index: 5;
}

.fixedPage {
z-index: 10;
}

entry { entry {
margin: 0 auto 5px; margin: 0 auto 5px;
} }
Expand Down
11 changes: 3 additions & 8 deletions css/styles.css
View file
Expand Up @@ -364,8 +364,7 @@ searchTerm {
margin: 10px; margin: 10px;
} }


#settingsBackgroundFade, #infoBackgroundFade, #loadAfterDeleteFade, .fixedFade {
#accountSettingsBackgroundFade, #fullScreenTextboxBackgroundFade {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
Expand All @@ -375,8 +374,7 @@ searchTerm {
opacity: 0.6; opacity: 0.6;
} }


#settingsOptions, #infoPage, #loadAfterDeletePage, .fixedPage {
#accountSettingsPage, #fullScreenTextboxPage {
position: fixed; position: fixed;
top: 5%; top: 5%;
left: 6%; left: 6%;
Expand All @@ -395,10 +393,7 @@ searchTerm {
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
} }


#announcementCloseButton, #notificationCloseButton, .rightButton {
#settingsButton, #settingsScreenCloseButton, #accountSettingsScreenCloseButton,
#settingsSaveButtons button, #infoScreenCloseButton,
#fullScreenTextboxScreenCloseButton {
float: right; float: right;
font-size: 12px; font-size: 12px;
} }
Expand Down
60 changes: 30 additions & 30 deletions index.php
View file
Expand Up @@ -100,7 +100,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

<?php if ($display_mode != "build") { ?> <?php if ($display_mode != "build") { ?>
<title><?php echo (($display_mode == "word") ? ($word_name . " | ") : "") . $dictionary_name; ?> Dictionary on Lexiconga</title> <title><?php echo (($display_mode == "word") ? ($word_name . " | ") : "") . $dictionary_name; ?> Dictionary on Lexiconga</title>
<meta property="og:url" content="http://lexicon.ga/<?php echo $dictionary_to_load . (($display_mode == "word") ? ("/" . $word_to_load) : ""); ?>" /> <meta property="og:url" content="http://lexicon.ga/<?php echo $dictionary_to_load . (($display_mode == "word") ? ("/" . $word_to_load) : ""); ?>" />
Expand Down Expand Up @@ -152,11 +152,11 @@
<contents> <contents>
<?php if ($display_mode == "build") { ?> <?php if ($display_mode == "build") { ?>
<div id="announcementArea" style="display:<?php echo (($announcement) ? "block" : "none"); ?>;"> <div id="announcementArea" style="display:<?php echo (($announcement) ? "block" : "none"); ?>;">
<span id="announcementCloseButton" class="clickable" onclick="document.getElementById('announcementArea').style.display='none';">Close</span> <span id="announcementCloseButton" class="clickable rightButton" onclick="document.getElementById('announcementArea').style.display='none';">Close</span>
<div id="announcement"><?php echo $announcement; ?></div> <div id="announcement"><?php echo $announcement; ?></div>
</div> </div>
<div id="notificationArea" style="display:<?php echo (($notificationMessage) ? "block" : "none"); ?>;"> <div id="notificationArea" style="display:<?php echo (($notificationMessage) ? "block" : "none"); ?>;">
<span id="notificationCloseButton" class="clickable" onclick="document.getElementById('notificationArea').style.display='none';">Close</span> <span id="notificationCloseButton" class="clickable rightButton" onclick="document.getElementById('notificationArea').style.display='none';">Close</span>
<div id="notificationMessage"><?php echo $notificationMessage; ?></div> <div id="notificationMessage"><?php echo $notificationMessage; ?></div>
</div> </div>
<div id="leftColumn"> <div id="leftColumn">
Expand Down Expand Up @@ -196,21 +196,21 @@


<div id="dictionaryColumn"><div id="dictionaryContent"> <div id="dictionaryColumn"><div id="dictionaryContent">
<?php if ($display_mode == "build") { ?> <?php if ($display_mode == "build") { ?>
<span id="settingsButton" class="clickable" onclick="ShowSettings()">Settings</span> <span id="settingsButton" class="clickable rightButton" onclick="ShowSettings()">Settings</span>
<?php } ?> <?php } ?>
<h1 id="dictionaryName"></h1> <h1 id="dictionaryName"></h1>


<?php if ($display_mode != "build") { ?> <?php if ($display_mode != "build") { ?>
<h4 id="dictionaryBy"></h4> <h4 id="dictionaryBy"></h4>
<div id="incompleteNotice"></div> <div id="incompleteNotice"></div>
<?php } ?> <?php } ?>

<?php if ($display_mode == "word") { ?> <?php if ($display_mode == "word") { ?>
<a class="clickable toggleButton" href="/<?php echo $dictionary_to_load; ?>">View Full Dictionary</a> <a class="clickable toggleButton" href="/<?php echo $dictionary_to_load; ?>">View Full Dictionary</a>
<?php } ?> <?php } ?>
<span id="descriptionToggle" class="clickable toggleButton" onclick="ToggleDescription();"><?php if ($display_mode == "view") { ?>Hide<?php } else { ?>Show<?php } ?> Description</span> <span id="descriptionToggle" class="clickable toggleButton" onclick="ToggleDescription();"><?php if ($display_mode == "view") { ?>Hide<?php } else { ?>Show<?php } ?> Description</span>
<div id="dictionaryDescription" style="display:<?php if ($display_mode == "view") { ?>block<?php } else { ?>none<?php } ?>;"></div> <div id="dictionaryDescription" style="display:<?php if ($display_mode == "view") { ?>block<?php } else { ?>none<?php } ?>;"></div>

<?php if ($display_mode != "word") { ?> <?php if ($display_mode != "word") { ?>
<span id="searchFilterToggle" class="clickable toggleButton" onclick="ToggleSearchFilter();"><?php if ($display_mode == "view") { ?>Hide <?php } ?>Search/Filter Options</span> <span id="searchFilterToggle" class="clickable toggleButton" onclick="ToggleSearchFilter();"><?php if ($display_mode == "view") { ?>Hide <?php } ?>Search/Filter Options</span>
<div id="searchFilterArea" style="display:<?php if ($display_mode == "view") { ?>block<?php } else { ?>none<?php } ?>;"> <div id="searchFilterArea" style="display:<?php if ($display_mode == "view") { ?>block<?php } else { ?>none<?php } ?>;">
Expand All @@ -231,7 +231,7 @@
</div> </div>
</label> </label>
</div> </div>

<label style="display:block;margin-bottom:0;"><b>Filter Words</b></label> <label style="display:block;margin-bottom:0;"><b>Filter Words</b></label>
<div id="filterOptions" style="display:block"></div> <div id="filterOptions" style="display:block"></div>
<div style="display:block;"> <div style="display:block;">
Expand All @@ -246,20 +246,20 @@
</div> </div>
<div id="filterWordCount"></div> <div id="filterWordCount"></div>
<?php } ?> <?php } ?>

<div id="theDictionary"></div> <div id="theDictionary"></div>
</div></div> </div></div>

<div id="rightColumn" class="googleads" style="float:right;width:20%;max-width:300px;min-width:200px;overflow:hidden;"> <div id="rightColumn" class="googleads" style="float:right;width:20%;max-width:300px;min-width:200px;overflow:hidden;">
<?php if ($_GET['adminoverride'] != "noadsortracking") { include_once("php/google/adsense.php"); } ?> <?php if ($_GET['adminoverride'] != "noadsortracking") { include_once("php/google/adsense.php"); } ?>
</div> </div>


<?php if ($display_mode == "build") { ?> <?php if ($display_mode == "build") { ?>


<div id="settingsScreen" style="display:none;"> <div id="settingsScreen" style="display:none;">
<div id="settingsBackgroundFade" onclick="HideSettings()"></div> <div id="settingsBackgroundFade" class="fixedFade" onclick="HideSettings()"></div>
<div id="settingsOptions"> <div id="settingsOptions" class="fixedPage">
<span id="settingsScreenCloseButton" class="clickable" onclick="HideSettings()">Close</span> <span id="settingsScreenCloseButton" class="clickable rightButton" onclick="HideSettings()">Close</span>
<h2>Dictionary Settings</h2> <h2>Dictionary Settings</h2>
<form id="settingsForm"> <form id="settingsForm">
<div class="settingsCol"> <div class="settingsCol">
Expand Down Expand Up @@ -325,29 +325,29 @@
</div> </div>
<div id="settingsSaveButtons"> <div id="settingsSaveButtons">
<span id="settingsErrorMessage"></span><br> <span id="settingsErrorMessage"></span><br>
<button type="button" onclick="SaveSettings(); HideSettings(); return false;">Save and Close</button> <button type="button" class="rightButton" onclick="SaveSettings(); HideSettings(); return false;">Save and Close</button>
<button type="button" onclick="SaveSettings(); return false;" style="margin-right:2px;">Save</button> <button type="button" class="rightButton" onclick="SaveSettings(); return false;" style="margin-right:2px;">Save</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>

<div id="fullScreenTextboxScreen" style="display:none;"> <div id="fullScreenTextboxScreen" style="display:none;">
<div id="fullScreenTextboxBackgroundFade" onclick="HideFullScreenTextbox()"></div> <div id="fullScreenTextboxBackgroundFade" class="fixedFade" onclick="HideFullScreenTextbox()"></div>
<div id="expandedTextboxId" style="display:none;width:0px;height:0px;"></div> <div id="expandedTextboxId" style="display:none;width:0px;height:0px;"></div>
<div id="fullScreenTextboxPage"> <div id="fullScreenTextboxPage" class="fixedPage">
<span id="fullScreenTextboxScreenCloseButton" class="clickable" onclick="HideFullScreenTextbox()">Minimize</span> <span id="fullScreenTextboxScreenCloseButton" class="clickable rightButton" onclick="HideFullScreenTextbox()">Minimize</span>
<label><span id="fullScreenTextboxLabel"></span></label> <label><span id="fullScreenTextboxLabel"></span></label>
<textarea id="fullScreenTextbox"></textarea> <textarea id="fullScreenTextbox"></textarea>
</div> </div>
</div> </div>


<?php } ?> <?php } ?>

<div id="infoScreen" style="display:none;"> <div id="infoScreen" style="display:none;">
<div id="infoBackgroundFade" onclick="HideInfo()"></div> <div id="infoBackgroundFade" class="fixedFade" onclick="HideInfo()"></div>
<div id="infoPage"> <div id="infoPage" class="fixedPage">
<span id="infoScreenCloseButton" class="clickable" onclick="HideInfo()">Close</span> <span id="infoScreenCloseButton" class="clickable rightButton" onclick="HideInfo()">Close</span>
<div id="infoText"></div> <div id="infoText"></div>
</div> </div>
</div> </div>
Expand All @@ -356,9 +356,9 @@
$user_email = Get_User_Email($current_user); $user_email = Get_User_Email($current_user);
?> ?>
<div id="accountSettingsScreen" style="display:none;"> <div id="accountSettingsScreen" style="display:none;">
<div id="accountSettingsBackgroundFade" onclick="HideAccountSettings()"></div> <div id="accountSettingsBackgroundFade" class="fixedFade" onclick="HideAccountSettings()"></div>
<div id="accountSettingsPage"> <div id="accountSettingsPage" class="fixedPage">
<span id="accountSettingsScreenCloseButton" class="clickable" onclick="HideAccountSettings()">Close</span> <span id="accountSettingsScreenCloseButton" class="clickable rightButton" onclick="HideAccountSettings()">Close</span>
<div class="settingsCol"><form id="accountSettingsForm" method="post" action="?accountsettings"> <div class="settingsCol"><form id="accountSettingsForm" method="post" action="?accountsettings">
<h2>Account Settings</h2> <h2>Account Settings</h2>
<label><span>Email</span> <label><span>Email</span>
Expand Down Expand Up @@ -390,8 +390,8 @@


<?php if ($display_mode == "build") { ?> <?php if ($display_mode == "build") { ?>
<div id="loadAfterDeleteScreen" style="display:none;"> <div id="loadAfterDeleteScreen" style="display:none;">
<div id="loadAfterDeleteFade"></div> <div id="loadAfterDeleteFade" class="fixedFade"></div>
<div id="loadAfterDeletePage"> <div id="loadAfterDeletePage" class="fixedPage">
<div class="settingsCol"> <div class="settingsCol">
<h1>Dictionary Deleted</h1> <h1>Dictionary Deleted</h1>
<label>Select dictionary to load:<br /> <label>Select dictionary to load:<br />
Expand All @@ -410,7 +410,7 @@
Dictionary Builder only guaranteed to work with most up-to-date HTML5 browsers. <a href="/issues" class="clickable inline-button" target="_blank">Issues</a> <a href="/updates" class="clickable inline-button" target="_blank">Updates</a> | <span class="clickable inline-button" onclick="ShowInfo('termsText')" style="font-size:12px;">Terms</span> <span class="clickable inline-button" onclick="ShowInfo('privacyText')" style="font-size:12px;">Privacy</span> Dictionary Builder only guaranteed to work with most up-to-date HTML5 browsers. <a href="/issues" class="clickable inline-button" target="_blank">Issues</a> <a href="/updates" class="clickable inline-button" target="_blank">Updates</a> | <span class="clickable inline-button" onclick="ShowInfo('termsText')" style="font-size:12px;">Terms</span> <span class="clickable inline-button" onclick="ShowInfo('privacyText')" style="font-size:12px;">Privacy</span>
</div> </div>
</footer> </footer>

<!-- Markdown Parser --> <!-- Markdown Parser -->
<script src="/js/marked.js"></script> <script src="/js/marked.js"></script>
<!-- CSV Parser --> <!-- CSV Parser -->
Expand Down Expand Up @@ -439,7 +439,7 @@
if ($display_mode != "word") { // don't try to set the filters if ($display_mode != "word") { // don't try to set the filters
echo "SetPublicPartsOfSpeech()"; echo "SetPublicPartsOfSpeech()";
} ?> } ?>

GetTextFile("/README.md", "aboutText", true); GetTextFile("/README.md", "aboutText", true);
GetTextFile("/TERMS.md", "termsText", true); GetTextFile("/TERMS.md", "termsText", true);
GetTextFile("/PRIVACY.md", "privacyText", true); GetTextFile("/PRIVACY.md", "privacyText", true);
Expand All @@ -451,7 +451,7 @@
<?php } else { ?> <?php } else { ?>
ready(function() { ready(function() {
Initialize(); Initialize();
}); });
<?php } ?> <?php } ?>
var loggedIn = <?php echo ($current_user > 0) ? "true" : "false"; ?>; var loggedIn = <?php echo ($current_user > 0) ? "true" : "false"; ?>;
</script> </script>
Expand Down

0 comments on commit d623009

Please sign in to comment.