Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Made mobile theme apply to small windows as well as screens. Explained mobile word form.

This commit is contained in:
Robbie Antenesse 2016-07-10 19:38:57 -06:00
parent 84bf0bda09
commit d623009b63
4 changed files with 49 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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.
### 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
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.

17
css/mobile.css
View File

@ -1,6 +1,6 @@
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (max-device-width : 910px) {
@media screen
and (max-width : 910px) {
body {
font-size: 11pt;
}
@ -32,7 +32,7 @@ and (max-device-width : 910px) {
}
#wordEntryForm label {
overflow: auto;
overflow: hidden;
display: flex;
justify-content: center;
font-size: 10pt;
@ -79,8 +79,9 @@ and (max-device-width : 910px) {
-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);
border: none;
cursor: pointer;
}
#dictionaryColumn {
width: 100%;
margin: 0;
@ -103,6 +104,14 @@ and (max-device-width : 910px) {
margin: 0 auto;
}
.fixedFade {
z-index: 5;
}
.fixedPage {
z-index: 10;
}
entry {
margin: 0 auto 5px;
}

11
css/styles.css
View File

@ -364,8 +364,7 @@ searchTerm {
margin: 10px;
}
#settingsBackgroundFade, #infoBackgroundFade, #loadAfterDeleteFade,
#accountSettingsBackgroundFade, #fullScreenTextboxBackgroundFade {
.fixedFade {
position: fixed;
top: 0;
left: 0;
@ -375,8 +374,7 @@ searchTerm {
opacity: 0.6;
}
#settingsOptions, #infoPage, #loadAfterDeletePage,
#accountSettingsPage, #fullScreenTextboxPage {
.fixedPage {
position: fixed;
top: 5%;
left: 6%;
@ -395,10 +393,7 @@ searchTerm {
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
}
#announcementCloseButton, #notificationCloseButton,
#settingsButton, #settingsScreenCloseButton, #accountSettingsScreenCloseButton,
#settingsSaveButtons button, #infoScreenCloseButton,
#fullScreenTextboxScreenCloseButton {
.rightButton {
float: right;
font-size: 12px;
}

60
index.php
View File

@ -100,7 +100,7 @@ if ($display_mode != "build") {
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php if ($display_mode != "build") { ?>
<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) : ""); ?>" />
@ -152,11 +152,11 @@ if ($display_mode != "build") {
<contents>
<?php if ($display_mode == "build") { ?>
<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>
<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>
<div id="leftColumn">
@ -196,7 +196,7 @@ if ($display_mode != "build") {
<div id="dictionaryColumn"><div id="dictionaryContent">
<?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 } ?>
<h1 id="dictionaryName"></h1>
@ -204,13 +204,13 @@ if ($display_mode != "build") {
<h4 id="dictionaryBy"></h4>
<div id="incompleteNotice"></div>
<?php } ?>
<?php if ($display_mode == "word") { ?>
<a class="clickable toggleButton" href="/<?php echo $dictionary_to_load; ?>">View Full Dictionary</a>
<?php } ?>
<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>
<?php if ($display_mode != "word") { ?>
<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 } ?>;">
@ -231,7 +231,7 @@ if ($display_mode != "build") {
</div>
</label>
</div>
<label style="display:block;margin-bottom:0;"><b>Filter Words</b></label>
<div id="filterOptions" style="display:block"></div>
<div style="display:block;">
@ -246,10 +246,10 @@ if ($display_mode != "build") {
</div>
<div id="filterWordCount"></div>
<?php } ?>
<div id="theDictionary"></div>
</div></div>
<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"); } ?>
</div>
@ -257,9 +257,9 @@ if ($display_mode != "build") {
<?php if ($display_mode == "build") { ?>
<div id="settingsScreen" style="display:none;">
<div id="settingsBackgroundFade" onclick="HideSettings()"></div>
<div id="settingsOptions">
<span id="settingsScreenCloseButton" class="clickable" onclick="HideSettings()">Close</span>
<div id="settingsBackgroundFade" class="fixedFade" onclick="HideSettings()"></div>
<div id="settingsOptions" class="fixedPage">
<span id="settingsScreenCloseButton" class="clickable rightButton" onclick="HideSettings()">Close</span>
<h2>Dictionary Settings</h2>
<form id="settingsForm">
<div class="settingsCol">
@ -325,29 +325,29 @@ if ($display_mode != "build") {
</div>
<div id="settingsSaveButtons">
<span id="settingsErrorMessage"></span><br>
<button type="button" 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(); HideSettings(); return false;">Save and Close</button>
<button type="button" class="rightButton" onclick="SaveSettings(); return false;" style="margin-right:2px;">Save</button>
</div>
</form>
</div>
</div>
<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="fullScreenTextboxPage">
<span id="fullScreenTextboxScreenCloseButton" class="clickable" onclick="HideFullScreenTextbox()">Minimize</span>
<div id="fullScreenTextboxPage" class="fixedPage">
<span id="fullScreenTextboxScreenCloseButton" class="clickable rightButton" onclick="HideFullScreenTextbox()">Minimize</span>
<label><span id="fullScreenTextboxLabel"></span></label>
<textarea id="fullScreenTextbox"></textarea>
</div>
</div>
<?php } ?>
<div id="infoScreen" style="display:none;">
<div id="infoBackgroundFade" onclick="HideInfo()"></div>
<div id="infoPage">
<span id="infoScreenCloseButton" class="clickable" onclick="HideInfo()">Close</span>
<div id="infoBackgroundFade" class="fixedFade" onclick="HideInfo()"></div>
<div id="infoPage" class="fixedPage">
<span id="infoScreenCloseButton" class="clickable rightButton" onclick="HideInfo()">Close</span>
<div id="infoText"></div>
</div>
</div>
@ -356,9 +356,9 @@ if ($display_mode != "build") {
$user_email = Get_User_Email($current_user);
?>
<div id="accountSettingsScreen" style="display:none;">
<div id="accountSettingsBackgroundFade" onclick="HideAccountSettings()"></div>
<div id="accountSettingsPage">
<span id="accountSettingsScreenCloseButton" class="clickable" onclick="HideAccountSettings()">Close</span>
<div id="accountSettingsBackgroundFade" class="fixedFade" onclick="HideAccountSettings()"></div>
<div id="accountSettingsPage" class="fixedPage">
<span id="accountSettingsScreenCloseButton" class="clickable rightButton" onclick="HideAccountSettings()">Close</span>
<div class="settingsCol"><form id="accountSettingsForm" method="post" action="?accountsettings">
<h2>Account Settings</h2>
<label><span>Email</span>
@ -390,8 +390,8 @@ if ($display_mode != "build") {
<?php if ($display_mode == "build") { ?>
<div id="loadAfterDeleteScreen" style="display:none;">
<div id="loadAfterDeleteFade"></div>
<div id="loadAfterDeletePage">
<div id="loadAfterDeleteFade" class="fixedFade"></div>
<div id="loadAfterDeletePage" class="fixedPage">
<div class="settingsCol">
<h1>Dictionary Deleted</h1>
<label>Select dictionary to load:<br />
@ -410,7 +410,7 @@ if ($display_mode != "build") {
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>
</footer>
<!-- Markdown Parser -->
<script src="/js/marked.js"></script>
<!-- CSV Parser -->
@ -439,7 +439,7 @@ if ($display_mode != "build") {
if ($display_mode != "word") { // don't try to set the filters
echo "SetPublicPartsOfSpeech()";
} ?>
GetTextFile("/README.md", "aboutText", true);
GetTextFile("/TERMS.md", "termsText", true);
GetTextFile("/PRIVACY.md", "privacyText", true);
@ -451,7 +451,7 @@ if ($display_mode != "build") {
<?php } else { ?>
ready(function() {
Initialize();
});
});
<?php } ?>
var loggedIn = <?php echo ($current_user > 0) ? "true" : "false"; ?>;
</script>