Improve TLE data presentation

[tomaszmrugalski]

Hey, @fivitti, I'm working on better TLE visualization. One thing I'm struggling with is the bootstrap classes. The current TLE presentation is broken. We don't preserve spaces, so if you try to copy and use it, you'll get errors).

Here's what I came up with:

The first is a basic <pre> tag that shows plain TLE data. That's boring, but at least it lets users copy the data. The second is more interesting, as each element is color-coded differently and you can hover your mouse over it to get an explanation. It's all cool, but I've encountered the problem.

I've tried to define classes in bootstrap-custom.css:

.tle1 span { white-space: pre; color: green }
.tle2 span { white-space: pre; color: blue }
.tle3 span { white-space: pre; color: black }
.tle4 span { white-space: pre; color: orange }

and then use it:

<code class="tle1">
    <span class="tle1">01 2  3   4    X</span>
</code>

Sadly, it doesn't work. This, however, works fine:

<code>
    <span style="color: green; white-space: pre;">01 2  3   4    X</span>
</code>

Any idea why?

[tomaszmrugalski]

The code is now ready for review. This is how it looks like. The next step (in a separate PR) will be to present orbital data in more useful manner (apogee, perigee, inclination, altitude, type of an orbit, etc.). Maybe sub-satellite points for AOS, TCA and LOS?

This is how it looks like:

[fivitti]

One tip - tags as <b>, <i> or <br> are for simple text documents. For HTML pages you should to use the CSS properties as font-weight, font-decoration and display.

[tomaszmrugalski]

Looks great! thanks.