simon/smeagol
1
0
Fork 0
mirror of https://github.com/journeyman-cc/smeagol.git synced 2026-04-12 18:05:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added specialised stylesheets for display on small screens.

Browse source
This commit is contained in:
Simon Brooke 2015-01-11 16:34:13 +00:00
parent 637ea8c084
commit 80b1bc054e
2 changed files with 320 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,153 @@
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: gray;
color: white;
}
#header h1 {
background-color: transparent;
}
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
background:rgba(40,40,40,0.8);
font-size: larger;
}
#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; }
/* left bar tends to get used for menus. As there isn't screen-width for two
* columns on a phone screen, let's try to spread it horizontally. Ultimately
* I should hide this and provide a fly-in control which allows it to be
* dragged in from the left */
#left-bar ul li {
display: inline;
}
#left-bar ul li::before {
content: "|| ";
}
.error {
background-color: red;
color: white;
}
/* there isn't enough room on a phone display for optional elements, and
load/save isn't going to work on a phone anyway */
.nav-optional {
display: none;
}
.widget {
margin: 0;
padding: 0.25em 1em;
border: thin solid white;
}
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: gray;
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: "|| ";
}

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

@ -0,0 +1,167 @@
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: gray;
color: white;
}
#header h1 {
background-color: transparent;
}
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
background:rgba(40,40,40,0.8);
font-size: larger;
}
#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; }
/* left bar tends to get used for menus. As there isn't screen-width for two
* columns on a tablet screen, let's try to spread it horizontally */
#left-bar ul li {
display: inline;
}
#left-bar ul li::before {
content: "|| ";
}
.error {
background-color: red;
color: white;
}
.minor-controls {
float: right;
}
/* there isn't enough room on a tablet display for optional elements, and
load/save isn't going to work on a tablet anyway */
.nav-optional {
display: none;
}
.widget {
margin: 0;
padding: 0.25em 1em;
border: thin solid white;
}
div.error {
width: 100%;
}
form {
width: 100%;
background-color: silver;
border: thin solid silver;
}
h1, h2, h3, h4, h5 {
background-color: gray;
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: "|| ";
}