I have had to play around with viewports for other reasons than elog, but I do have a couple of comments to make. Obviously the meta tag viewpoint has to be added in. Also, elog was written for large screens (no-one thought anything else was possible when elog was started), and it is relatively recent that mobile devices have become a significant percentage of views of web pages. Google is downgrading websites that are not mobile-friendly - that is, not starting with the viewport meta tag. So there may have to be a fair re-arrangement of the default layout of elog for it to remain sensible on mobile devices.
The attached css file (I made minor edits to someone else's - and they were freely giving it away), allows tabs running along the top of the page (below the title) for navigation. So it would be nice if the elog tabs could operate in the same way when being used on a mobile device. If select on one, it can become a drop down menu to select other tabs under that general top layer (I don't think that function is in the attached css file). I've put a sample of such tabs (not drop down) in header.html attached. Though I'm sure everyone else can write far better css and html code.
As I'm not a heavy mobile user, and often do need the whole screen to view matters, it would be nice if all of this could be optional in the elog.cfg file.
| Ben Shepherd wrote: |
|
The viewport thing and the IE7 mode thing are separate issues.
OK, maybe it's a CKEditor thing then. I thought it might be. It seems pretty stupid that the default setting in IE is to emulate an older browser - although I guess a lot of people have very outdated intranet sites. Anyway, we have a fix here so I don't think you need to do anything. Just thought you might want to know.
The viewport tag issue - see attachments. The first two are the log selection page and the list page, both without the viewport tag. Obviously you can zoom in, but this is how they appear by default, as (apparently) Chrome tries to render the whole page width. The third one is how the list page appears when the viewport tag is added, and the fourth is with my custom CSS to put the columns on separate lines. It's probably very bad CSS, so I'm certain that it's not robust or cross-platform, but it works for me :)
/* make things look a bit nicer on smaller screens */
@media (max-width: 700px) {
table.listframe td, table.listframe th {
display: none;
}
/* show id, date, personnel, summary in separate lines */
table.listframe td:nth-of-type(-n+2), table.listframe td:nth-of-type(4), table.listframe td:nth-last-of-type(2) {
display: block;
border: 0px;
}
}
| Stefan Ritt wrote: |
|
I don't get your point. If you add the meta tag wiht the viewport, then the IE7 mode will load the CKEditor? The CKEditor home page says that IE7 is not supported any more, so I wonder if this simple tag might help. Can you turn off the compatibility mode on a per-URL basis?
If I try on my smatphone, the display is correct, so why you need the viewport tag? Can you shouw me examples?
If you have nice CSS features which are helpful for everybody, please send them to me and I can include it in the distribution, but only after you convince me that it works (almost) everywhere.
Best,
Stefan
| Ben Shepherd wrote: |
|
I just upgraded to 3.1.0 after many years using 2.9.2. Our eLogs are absolutely crucial for the operation of our accelerators, so first of all I'd like to say: thanks a lot for everything you've done! It's a rock-solid application that works really well.
The issue I'm having is a minor one. Some of our users are using Internet Explorer 11, which has a Compatibility Mode option that is enabled by default for intranet sites (of which our eLog is one). This mode emulates IE7, and this causes the CKEditor rich text box to fail to load. I can tell our users to disable the CM setting on their browsers, but it may be that a simple server-side fix is possible as well.
It would be nice if the eLog pages could have a <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag, so that it displays nicely on smaller screens. I've been adding this myself in some Javascript code (see elogHelper.js on the above-linked website), but it doesn't appear on every page (the logbook selection page, for instance). I also made some modifications to the CSS so that the list display collapses down when the browser window is very narrow.
The new autosave functionality is really good. I hacked something together to do this for our log a while ago, but it's nice that it's inbuilt now.
Thanks again!
Ben
|
|
|
|
<style media="screen" type="text/css">
/* <!-- */
/* General styles */
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:300px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size: 16px;
}
.small {
font-size: 12px;
}
.large {
fpnt-size: 20px;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* Full page settings */
.fullpage {
background:#fff; /* page background colour */
}
.fullpage .col1 {
width:96%; /* page width minus left and right padding */
left:2%; /* page left padding */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
.embed-container {
position: relative;
height:0;
overflow:hidden;
background-color:white;
}
.ratio-16-9{
padding-bottom:56.25%;
}
.ratio-4-3{
padding-bottom:75%;
}
.ratio-1-1{
padding-bottom:100%;
}
.embed-container img{
position: absolute;
top:0;
left:0;
width:100%;
}
/* --> */
</style>
|