simon/mw-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Now working nicely on tablets; iPhones and some Android phones are still

Browse source 
getting the 'tablet' stylesheet instead of the 'phone' stylesheet, but it's
not critical.
This commit is contained in:
Simon Brooke 2014-07-24 08:09:48 +01:00
parent c15cd08159
commit 03cf9b79e0
15 changed files with 476 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

144
resources/public/css/phone.css Normal file
View file

@ -0,0 +1,144 @@
body {
font-family: sans-serif;
font-size: larger;
}
/* ids generally in document order */
/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
#main-container{
clear: both;
width:100%;
}
/* footer of the document */
#footer {
display: none;
}
#header {
width:100%;
padding: 0.25em 5% 0.25em 5%;
background-color: black;
color: white;
}
#header h1 {
background-color: transparent;
}
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
background:rgba(40,40,40,0.8);
}
#nav:hover #nav-menu {
display: inline;
}
#nav-icon {
padding: 0.25em;
}
#nav-menu {
display: none;
}
#nav ul li {
padding: 0;
margin: 0;
display: inline;
}
#nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 0.1em 0.75em;
margin: 0;
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
.error {
background-color: red;
color: white;
}
.widget {
margin: 0;
padding: 0.25em 1em;
border: thin solid white;
}
.world {
font-size: 8pt;
}
div.error {
width: 100%;
}
form {
width: 100%;
background-color: silver;
border: thin solid silver;
}
h1 {
font-size: 300%;
}
h1, h2, h3, h4, h5 {
background-color: black;
color: white;
}
p, pre, ul, ol, dl, h1, h2, h3, h4, h5 {
width: 100%;
padding: 0.25em 1em;
}
input {
background-color: white;
}
input.submit {
background-color: green;
}
input.required:after {
content: " \*";
color: red;
}
label {
min-width: 35%;
}
label, input {
padding: 0.25em 1em;
margin: 0 0.5em;
}
label {
border-right: thin solid gray;
}
menu li {
display: inline;
}
menu li::before {
content: "|| ";
}
div.world table, div.world tr td {
padding: 0;
margin: 0;
border: none;
}

34
resources/public/css/standard.css
View file

@ -29,29 +29,25 @@ body {
#header {
width:100%;
padding: 2em 10% 0.25em 10%;
padding: 2em 0 0.25em 0;
background-color: black;
color: white;
}
#header h1 {
background-color: transparent;
}
#header-logo {
float: left;
padding-right: 2.5em;
}
#nav{
margin: 0;
padding: 0;
width: 100%;
position: fixed;
z-index: 149;
background:rgba(40,40,40,0.8);
}
/* only needed for fly-out menu effect on tablet and phone stylesheets */
#nav-icon {
display: none;
}
#nav ul li {
padding: 0;
margin: 0;
@ -65,6 +61,7 @@ body {
padding: 0.1em 0.75em;
margin: 0;
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
@ -103,7 +100,7 @@ h1, h2, h3, h4, h5 {
color: white;
}
p, pre, ul, ol, dl, h1, h2, h3, h4, h5 {
p, pre, ul, ol, dl, menu, h1, h2, h3, h4, h5 {
padding: 0.25em 10%;
}
@ -133,4 +130,17 @@ label {
border-right: thin solid gray;
}
menu li {
display: inline;
}
menu li::before {
content: "|| ";
}
div.world table, div.world tr td {
padding: 0;
margin: 0;
border: none;
}

160
resources/public/css/tablet.css Normal file
View file

@ -0,0 +1,160 @@
body {
font-family: sans-serif;
}
/* ids generally in document order */
/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
#main-container{
clear: both;
width:100%;
}
/* footer of the document */
#footer {
clear: both;
font-size: smaller;
padding: 0 2em;
text-align: center;
color:white;
background:rgba(196,196,196,0.95);
width: 100%;
margin: 0;
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
}
#footer:hover #credits {
font-size: normal;
}
#header {
width:100%;
padding: 0.25em 5% 0.25em 5%;
background-color: black;
color: white;
}
#header h1 {
background-color: transparent;
}
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
background:rgba(40,40,40,0.8);
}
#nav:hover #nav-menu {
display: inline;
}
#nav-icon {
padding: 0.25em;
}
#nav-menu {
display: none;
}
#nav ul li {
padding: 0;
margin: 0;
display: inline;
}
#nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 0.1em 0.75em;
margin: 0;
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
.error {
background-color: red;
color: white;
}
.widget {
margin: 0;
padding: 0.25em 1em;
border: thin solid white;
}
.world {
font-size: 8pt;
}
div.error {
width: 100%;
}
form {
width: 100%;
background-color: silver;
border: thin solid silver;
}
h1 {
font-size: 300%;
}
h1, h2, h3, h4, h5 {
background-color: black;
color: white;
}
p, pre, ul, ol, dl, h1, h2, h3, h4, h5 {
width: 100%;
padding: 0.25em 1em;
}
input {
background-color: white;
}
input.submit {
background-color: green;
}
input.required:after {
content: " \*";
color: red;
}
label {
min-width: 35%;
}
label, input {
padding: 0.25em 1em;
margin: 0 0.5em;
}
label {
border-right: thin solid gray;
}
menu li {
display: inline;
}
menu li::before {
content: "|| ";
}
div.world table, div.world tr td {
padding: 0;
margin: 0;
border: none;
}