Skip to content

Instantly share code, notes, and snippets.

@ErnestK

ErnestK/flexbox-table-with-const-header.markdown

Created July 27, 2016 12:21
Show Gist options
  • Save ErnestK/c75abbbf7669150d26abaa1de63f6f4f to your computer and use it in GitHub Desktop.
Save ErnestK/c75abbbf7669150d26abaa1de63f6f4f to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox table with const header
Raw
flexbox-table-with-const-header.markdown
Raw
index.html
<div class="page">
<div class="page-header">
<div class="table-row">
<div class="column index">#</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Title</div>
<div class="column comment">Comment</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Module</div>
<div class="column reporter">Reporter</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status">Status</div>
<div class="column owner">Owner</div>
</div>
<div class="column severity">Severity</div>
</div>
</div>
<div class="wrapper icons">
<div title="Watch" class="column watch">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
<div title="Add comment" class="column add-comment">
<span class="glyphicon glyphicon-comment"></span>
</div>
</div>
<div class="wrapper dates">
<div class="column date">Created</div>
<div class="column date">Updated</div>
<div class="column date">Due</div>
</div>
</div>
</div>
<div class="page-content">
<div class="table-row">
<div class="column index">1</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">App crashes when dragged by title bar</div>
<div class="column comment">Eddie, can you please take a look. We want this fixed pretty soon.</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Main App</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-primary">Open</span></div>
<div class="column owner">Eddie</div>
</div>
<div class="column severity high">High</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open active" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Feb-1, 2016</div>
<div class="column date">Mar-13, 2016</div>
<div class="column date">Apr-4, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">2</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Unable to save the data when using Enter key instead of clicking on submit button.</div>
<div class="column comment">Let me take this up.</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Save Screen</div>
<div class="column reporter">Kiran</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-primary">Open</span></div>
<div class="column owner">Vasan</div>
</div>
<div class="column severity medium">Medium</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open active" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Mar-3, 2016</div>
<div class="column date">Apr-4, 2016</div>
<div class="column date">May-15, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">3</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">4</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">5</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">6</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">7</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">8</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">9</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">10</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">11</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">12</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">13</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">14</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">15</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">16</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">17</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">18</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
<div class="table-row">
<div class="column index">19</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Improper alignment in Export section</div>
<div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Exports</div>
<div class="column reporter">Ravan</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label label-success">In Progress</span></div>
<div class="column owner">Pieta</div>
</div>
<div class="column severity low">Low</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
</div>
<div class="wrapper dates">
<div class="column date">Apr-14, 2016</div>
<div class="column date">May-5, 2016</div>
<div class="column date">Jun-6, 2016</div>
</div>
</div>
</div>
</div>
Raw
style.less
/*
* Define the widths: play around with these
* to get a best fit.
*/
@index-width: 25px;
@title-width: 220px;
@comment-width: 120px;
@module-width: 110px;
@reporter-width: 85px;
@status-width: 95px;
@owner-width: 75px;
@severity-width: 80px;
@icon-width: 18px;
@date-width: 120px;
@margin-width: 30px;
/*
* Basic styles, good for a large display. Everything fits in
* one row, no wrapping. All text based cells grow equally.
*/
// Main container - row container
.table-row {
display: flex; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row;
flex-wrap: no-wrap; -webkit-flex-wrap: no-wrap;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
// Wrappers around cells and other wrappers
.wrapper {
display: flex; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row;
}
// leaf level containers (cells): common properties
.column {
flex-grow: 0; -webkit-flex-grow: 0;
flex-shrink: 0; -webkit-flex-shrink: 0;
vertical-align: top;
}
// leaf level containers: widths
.index { width: @index-width; }
.title { width: @title-width; }
.module { width: @module-width; }
.reporter { width: @reporter-width; }
.status { width: @status-width; }
.owner { width: @owner-width; }
.severity { width: @severity-width; }
.watch, .add-comment { width: @icon-width; }
.date { width: @date-width; }
// leaf level containers (cells): special properties
.index {
text-align: center;
}
.title {
font-weight: bold;
color: #337AB5;
}
.comment {
width: @comment-width;
}
// these are growable text containers, with ellipsis to show truncated text
.title, .comment {
flex-grow: 1; -webkit-flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 4px;
}
.date {
width: @date-width;
text-align: right;
padding-right: 4px;
}
/* growable wrappers */
.title-comment, .title-comment-module-reporter, .attributes {
flex-grow: 1; -webkit-flex-grow: 1;
}
/*
* Media queries: optimize for different screen widths.
*/
// Wrapper widths
@title-comment-width: max(@title-width, @comment-width);
@module-reporter-width: max(@module-width, @reporter-width);
@status-owner-width: max(@status-width, @owner-width);
@title-comment-module-reporter-width: max(@title-width, @comment-width,
(@module-width + @reporter-width) );
@status-owner-severity-width: max(@status-width, @owner-width,
@severity-width);
@all-attributes-width: max(@title-width, @comment-width,
(@module-width + @reporter-width), (@status-width + @owner-width));
.horizontal() {
flex-direction: row; -webkit-flex-direction: row;
}
.vertical() {
// Let the wrapper flex vertically, so we get 2 rows
flex-direction: column; -webkit-flex-direction: column;
// can't have the children grow, since this now means vertical growth
div {
flex-grow: 0; -webkit-flex-grow: 0;
}
}
.vertical-growing() {
.vertical();
> div {
// Let immediate child divs grow horizontally, 100% to fill the wrapper
width: 100%;
}
}
/*
* Media breaks.
*/
// First break: as many 2-row fields as possible. This will leave Severity
// and Dates still horizontal, as they are odd numbered
@media all and (max-width: (@margin-width * 2 + @index-width
+ @title-width + @comment-width + @module-width + @reporter-width
+ @status-width + @owner-width + @severity-width + @icon-width * 2
+ @date-width * 3) ) {
.title-comment {
.vertical-growing();
width: @title-comment-width;
}
.module-reporter, .status-owner {
.vertical();
}
}
// Next: as many 3-rows as possible
@media all and (max-width: (@margin-width * 2 + @index-width
+ @title-comment-width + @module-reporter-width
+ @status-owner-width + @severity-width
+ @icon-width * 2 + @date-width * 3) ) {
// Change module-report back to horizontal, keep it under title and comment
// So, we have 3 rows: title, comment, module-reporter
.module-reporter {
.horizontal();
}
.title-comment-module-reporter {
.vertical-growing();
width: @title-comment-module-reporter-width;
}
// Line up status, owner, severity into the next column
.status-owner-severity {
.vertical();
}
// Line up all icons in one column, even though there's only two of them
.icons {
.vertical();
}
// Line up all dates in one column
.dates {
.vertical();
}
}
// Last break: 4 columns: index, attributes, icons, dates
@media all and (max-width: (@margin-width * 2 + @index-width
+ @title-comment-module-reporter-width + @status-owner-severity-width
+ @icon-width + @date-width) ) {
// looks better with a little padding on mobile devices
// .table-row {
// padding-left: 4px;
// padding-right: 4px;
// }
// All attributes: title, comment, module-reporter, status-owner, severity
.attributes {
.vertical-growing();
width: @all-attributes-width;
}
.module-reporter, .status-owner {
.horizontal();
}
}
/*
* General good-look styles
*/
.table-row {
border-bottom: 1px solid #e0e0e0;
border-collapse: collapse;
padding-top: 2px;
}
html,
body,
.page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
.page {
display: flex;
flex-direction: column;
}
.page-header {
flex: 0 0 auto;
background-color: #dcdcdc;
}
.page-content {
flex: 1 1 auto;
position: relative;/* need this to position inner content */
overflow-y: scroll;
}
.glyphicon {
color: #DDDDDD;
}
.header .glyphicon {
color: #333
}
.glyphicon-eye-open.active {
color: blue;
}
.glyphicon-comment.active {
color: #3EBB0D;
}
.glyphicon:hover {
color: #666;
cursor: pointer;
text-decoration: underline;
}
.reporter {
color: #999999;
}
.comment {
font-style: italic;
}
.severity.high { color: red; }
.severity.medium { color: blue; }
.severity.low { color: green; }
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment