Skip to content

Using SPA CSS as a template

Jump to bottom
archv edited this page Jul 3, 2020 · 2 revisions

First, please refer to Integration with a JS project page to get the initial code sample.

Add necessary CSS

Add spa.css to the <head> tag of the index.html.

<link rel="stylesheet" href="assets/css/spa.css">

Apply the template

Add some details around ParallelCoordinatesGraph divs.

At first, the code we need to change is as follows:

<div id="ParallelCoordinatesGraph1"></div>
<div id="ParallelCoordinatesGraph2"></div>

Change it to be looking like this: (do not forget to put the github logo in your project)

<div id="after-load">
    <div id="header">
        <h1>Parallel Coordinates</h1>
        <p><a href="https://github.com/PanDAWMS/InVEx-ParCoords-SA">
              <img src="assets/images/github-logo.png" alt="GitHub repo link" style="height:30px">
       </a></p>
    </div>
    <hr>
    <div class="pc-spa-contents">
        <!-- Here we can add titles, text or any other elements -->
        <div id="ParallelCoordinatesGraph1"></div>
    </div>
    <div class="pc-spa-contents">
        <!-- The same, any elements here -->
        <div id="ParallelCoordinatesGraph2"></div>
    </div>
</div>

Clone this wiki locally