Skip to content

Update Bootstrap CSS for summary information #107

@PrashantKuntala

Description

@PrashantKuntala

Since, PEGR is already using Bootstrap, you can improve the readability of the Summary information under each sequence run page & Sample page, where multiple rows of information on Antibody, CellSource and Master Pool information is listed.

Below is some HTML code to make proper formatting.

<style media="screen">
        .customDim{
            // custom width for tables
            width: 400px;
        }
 </style>

<table class="table table-bordered customDim">
    <thead>
      <tr>
        <th scope="col" colspan="2">Basic Information</th>
      </tr>
    </thead>
      <tbody>
        <tr>
          <td>Platform</td>
          <td>NextSeq 500</td>
        </tr>
        <tr>
          <td>User</td>
          <td>User(username:gja2)</td>
        </tr>
        <tr>
          <td>Date</td>
          <td> 2019-06-06</td>
        </tr>
        <tr>
          <td>Directory</td>
          <td>190606_NS500168_0460_AHK3NYBGXB</td>
        </tr>
        <tr>
          <td>FC ID</td>
          <td>AHK3NYBGXB</td>
        </tr>
        <tr>
          <td>Lane</td>
          <td>0</td>
        </tr>
        <tr>
          <td colspan="2">Notes : This is a sample note.</td>
        </tr>
      </tbody>
</table>

Above code changes the Summary information as below :
summaryInfo

With more aligned content, improved readability:
moreContent

Bootstrap Table Documentation: here

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions