Started working on Mobile CSS!
This commit is contained in:
parent
d163c998af
commit
2d6013e169
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue