Made mobile theme apply to small windows as well as screens. Explained mobile word form.
This commit is contained in:
parent
84bf0bda09
commit
d623009b63
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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,6 +79,7 @@ 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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
38
index.php
38
index.php
|
|
@ -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>
|
||||
|
||||
|
|
@ -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,18 +325,18 @@ 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>
|
||||
|
|
@ -345,9 +345,9 @@ if ($display_mode != "build") {
|
|||
<?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 />
|
||||
|
|
|
|||
Loading…
Reference in New Issue