1. Home
  2. Library
  3. Data

Upcoming Games

(UTC times)

Full list
Add a game

Upcoming Events

No events to display

Who's Online

Legacy-look Timetable CSS

You are here: Home > Forum > General > General questions, comments, and issues > Loader V5 > Legacy-look Timetable CSS

Page 3 of 4

Legacy-look Timetable CSS 03/07/2020 at 19:54 #128925
belly buster
Avatar
368 posts 		TylerE in post 128648 said:


So, with the announcement that the next version of the loader will support a user-specified CSS file for the timetable popups, I knew immediately what had to be done...

Changes:

* All distracting visual elements eliminated (Borders, zebra striping, colors)
* Monospaced font throughout
* Location names right aligned
* : added after field headers in top section
* Column widths tweaked

Right now this was just developed in chrome so it will require some tweaking once the loader update is released and I can see how things render in whatever version of IE the loader embeds.
TylerE would you be so kind as to post your CSS in the new subforum for those of us who would like to try it.
Log in to reply
The following user said thank you: jc92
Legacy-look Timetable CSS 03/07/2020 at 20:56 #128939
TylerE
Avatar
149 posts 		Once updated for 5.3, yes.

Unfortunately the HTML being output changed quite a bit in 5.3 and it is no longer possible to actually *see what it is* so that makes doing this sort of thing about 1000x harder if you want to do anything beyond change colors or fonts.
Log in to reply
The following user said thank you: belly buster
Legacy-look Timetable CSS 04/07/2020 at 23:06 #129050
TylerE
Avatar
149 posts 		https://www.SimSig.co.uk/Forum/PostView/129049
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 12:17 #129060
Jan
Avatar
906 posts 		TylerE in post 129049 said:
Legacy / Readability Style
.alternate1,
.alternate2 td {
padding-right: 10px;
}

Hmm, for at least one train (1221 on Moss Vale), this causes the location names to be displayed in some sort of zigzagging arrangement which doesn't look quite right.
Two million people attempt to use Birmingham's magnificent rail network every year, with just over a million of them managing to get further than Smethwick.
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 18:09 #129088
TylerE
Avatar
149 posts 		Jan in post 129060 said:

Hmm, for at least one train (1221 on Moss Vale), this causes the location names to be displayed in some sort of zigzagging arrangement which doesn't look quite right.
Can you screnshot?

It seems fine here.
Post has attachments. Log in to view them.
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 19:23 #129091
Jan
Avatar
906 posts 		Here you are:
Post has attachments. Log in to view them.
Two million people attempt to use Birmingham's magnificent rail network every year, with just over a million of them managing to get further than Smethwick.
Last edited: 05/07/2020 at 19:26 by Jan
Reason: None given
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 19:26 #129092
Meld
Avatar
1111 posts 		Come on guys use the Image tag for display not the attachment please
Passed the age to be doing 'Spoon Feeding' !!!
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 19:30 #129093
Jan
Avatar
906 posts 		I would if the forum had a more sane way of doing it...
Two million people attempt to use Birmingham's magnificent rail network every year, with just over a million of them managing to get further than Smethwick.
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 19:37 #129094
Steamer
Avatar
3985 posts
Online 		The forum doesn't allow you to embed attachments with a space in the filename. They display fine if you remove them or replace with underscores.
"Don't stress/ relax/ let life roll off your backs./ Except for death and paying taxes/ everything in life.../ is only for now." (Avenue Q)
Last edited: 05/07/2020 at 19:37 by Steamer
Reason: None given
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 19:41 #129095
MarkC
Avatar
1105 posts 		If you attach an image just ensure that it has no spaces in the file name.

So if the file name is "image 1.jpg" it will not display in the post

Where as if the file name is "image_1.jpg" it will display in the post

It is literally as simple as that
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 19:45 #129096
TylerE
Avatar
149 posts 		Jan in post 129091 said:
Here you are:
Wow that's truly bizzare. The interesting thing is that the ones that are offset are offset by EXACTLY one character width (Note the O in Wingello exactly aligns with the second O in Bundanoon).

Is that an edited/unreleased timetable? I notice it has a lot of stuff in the Misc column
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 20:10 #129097
JamesN
Avatar
1608 posts 		TylerE in post 129096 said:
Jan in post 129091 said:
Here you are:
Wow that's truly bizzare. The interesting thing is that the ones that are offset are offset by EXACTLY one character width (Note the O in Wingello exactly aligns with the second O in Bundanoon).

Is that an edited/unreleased timetable? I notice it has a lot of stuff in the Misc column
Jan has elevated user privileges, which result in the debugging notes in the Misc column
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 20:20 #129099
Jan
Avatar
906 posts 		Now you mention it, yes, this only happens with the additional debug info being shown. Changing the selector to ".alternate1 td,
.alternate2 td" seems to fix this, though I'm not sure if it might cause unwanted side effects elsewhere, respectively what the reasoning behind the original selector was.

Steamer in post 129094 said:
The forum doesn't allow you to embed attachments with a space in the filename. They display fine if you remove them or replace with underscores.

Thanks for the replies (MarkC as well), that explains it - though I'd still count that under "more sane way of doing it".
Two million people attempt to use Birmingham's magnificent rail network every year, with just over a million of them managing to get further than Smethwick.
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 20:48 #129103
TylerE
Avatar
149 posts 		The misc column is somewhat problematic... there really isn't much space for it, and sometimes it can be pretty long. That might be causing oddness. I'm not sure there's really a good solution here. There might be some ways to handle it if I had the full HTML being output, but even then, a big limitation here is that the browser embedded in SimSig is IE 7, which is 14 years old, and does not support many CSS features.
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 21:41 #129105
Jan
Avatar
906 posts 		TylerE in post 129103 said:
but even then, a big limitation here is that the browser embedded in SimSig is IE 7, which is 14 years old, and does not support many CSS features.

Would having Simsig include Quote:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
in its HTML output fix this?
Two million people attempt to use Birmingham's magnificent rail network every year, with just over a million of them managing to get further than Smethwick.
Log in to reply
Legacy-look Timetable CSS 05/07/2020 at 22:22 #129106
TylerE
Avatar
149 posts 		Jan in post 129105 said:
TylerE in post 129103 said:
but even then, a big limitation here is that the browser embedded in SimSig is IE 7, which is 14 years old, and does not support many CSS features.

Would having Simsig include Quote:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
in its HTML output fix this?
No. That only works backwards. It can e.g. make edge render like IE7, but not the reverse.
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 09:12 #129113
Jan
Avatar
906 posts 		Are you certain? I don't have a test program lying around to test this easily, but my understanding is that while Windows's HTML control might indeed default to IE7 emulation in the absence of any directives to the contrary (it seems you can also globally set a registry entry to default to some higher feature level), internally it will still use whatever the currently installed IE version is, which nowadays should almost universally be IE11, so using the "X-UA-Compatible" directive to unlock a higher IE version should work as well.
Two million people attempt to use Birmingham's magnificent rail network every year, with just over a million of them managing to get further than Smethwick.
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 15:22 #129127
TylerE
Avatar
149 posts 		Tested just now:
Post has attachments. Log in to view them.
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 15:58 #129128
TylerE
Avatar
149 posts 		So, in a pretty major coup, I was able to use javascript to actually get the raw HTML out, see attached.

(NB: The actual HTML is output as one giant blob, I formatted for readability)
Post has attachments. Log in to view them.
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 16:07 #129130
TylerE
Avatar
149 posts 		Ok, found the bug in the vanilla style...

should be

.alternate1 td,
.alternate2 td {
padding-right: 10px;
}
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 17:09 #129137
TylerE
Avatar
149 posts 		So with a reasonably up-to-date IE and knowing the actual source code, pandora's box is now fully open.

The change here is fairly subtle, but now I'm using JavaScript to manipulate the underlying elements.

The features I've implemented is that now I delete empty cells to the left of a non-empty Misc row, and allow the Misc cell to expand into that now-free space. No more ugly wrapping when a misc value is present!

Also, I'm hiding the "Last Reported Delay" line when train is running on time.

The sky is more or less the limit... if I wanted to I could parse out all the data, then delete all the elements SimSig provides, and build a completely new HTML structure from scratch. I don't think I'll need to do that...but basically the only limitation now is the extent of my patience and free time.
Post has attachments. Log in to view them.
Last edited: 06/07/2020 at 17:26 by TylerE
Reason: None given
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 17:47 #129145
headshot119
Avatar
4869 posts 		Moderator note - one post removed pending advice on an attachment.
"Passengers for New Lane, should be seated in the rear coach of the train " - Opinions are my own and not those of my employer
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 18:24 #129158
Jan
Avatar
906 posts 		TylerE in post 129127 said:
Tested just now:


Note that the Microsoft blog post I've linked to specifically mentions that using the "X-UA-Compatible" meta header doesn’t affect the user agent string you see, but is still supposed to change the rendering mode as specified.
Two million people attempt to use Birmingham's magnificent rail network every year, with just over a million of them managing to get further than Smethwick.
Last edited: 06/07/2020 at 18:39 by Jan
Reason: None given
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 19:02 #129163
Peter Bennet
Avatar
5402 posts
Online 		headshot119 in post 129145 said:
Moderator note - one post removed pending advice on an attachment.

And another one.

Peter
I identify as half man half biscuit - crumbs!
Log in to reply
Legacy-look Timetable CSS 06/07/2020 at 20:13 #129170
TylerE
Avatar
149 posts 		So I'm continuing to experiment with what is possible...

Here's a fairly radically reworked header that parses out the Characteristics screen and draws them in compact, easy to read color coded boxes. Not entirely sure I actually like the colors I'm using, but this was more an exploration...
Post has attachments. Log in to view them.
Log in to reply
The following user said thank you: torets
Back