Skip to content
This repository has been archived by the owner on Dec 23, 2017. It is now read-only.

Feature/panel desktop #392

Merged
merged 4 commits into from
Aug 3, 2015
Merged

Feature/panel desktop #392

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c7edebf
Desktop panel
Aug 2, 2015
ba20982
Large screen indentation of tds and headers
Aug 2, 2015
f7a3747
Add highlight to active row.
Aug 3, 2015
196134b
Better todo comment on overly specific selector
Aug 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions static/js/modules/tables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,11 +149,14 @@ function modalAfterRender(template, api, data, response) {
var index = api.row($row).index();
$modal.find('.js-panel-content').html(template(response.results[index]));
$modal.attr('aria-hidden', 'false');
$row.siblings().toggleClass('row-active', false);
$row.toggleClass('row-active', true);
$('body').toggleClass('panel-active', true);
});

$modal.on('click', '.js-panel-close', function(ev) {
ev.preventDefault();
$('.js-panel-toggle tr').toggleClass('row-active', false);
$('body').toggleClass('panel-active', false);
});
}
Expand Down
6 changes: 3 additions & 3 deletions static/js/pages/receipts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ var columns = [
}
}
},
{data: 'contributor_state', orderable: false, className: 'min-desktop'},
{data: 'contributor_employer', orderable: false, className: 'min-desktop'},
{data: 'contributor_state', orderable: false, className: 'min-desktop hide-panel'},
{data: 'contributor_employer', orderable: false, className: 'min-desktop hide-panel'},
tables.currencyColumn({data: 'contributor_receipt_amount', className: 'min-tablet'}),
tables.dateColumn({data: 'contributor_receipt_date', className: 'min-tablet'}),
{
data: 'committee',
orderable: false,
className: 'all',
className: 'all hide-panel',
width: '30%',
render: function(data, type, row, meta) {
if (data) {
Expand Down
29 changes: 27 additions & 2 deletions static/styles/_base/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
table,
table.dataTable {
background: white;
border: 1px solid $light-gray;
border-collapse: collapse;
margin: 0;
Expand Down Expand Up @@ -43,6 +44,17 @@ table.dataTable {
&.active {
border: 2px solid $focus;
}

&:last-child {
td {
border-bottom: 0;
}
}

&.row-active {
background: $blue;
color: #fff;
}
}

td {
Expand Down Expand Up @@ -389,10 +401,23 @@ table.dataTable tbody tr.child {

.dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: 1px solid $light-gray;
box-shadow: inset 0px -1px 4px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px -1px 4px 0px rgba(0,0,0,0.75);
}

.panel-active .dataTables_wrapper {
overflow: hidden;
height: 118vh;
overflow: hidden;

@include media($medium) {
height: auto;
overflow: auto;

.dataTable {
width: 50% !important;
}

.hide-panel {
display: none;
}
}
}
40 changes: 39 additions & 1 deletion static/styles/_components/_panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,25 @@
&[aria-hidden="false"] {
@include transform(translateX(0%));
}

@include media($medium) {
&[aria-hidden="false"] {
@include transform(translateX(100%));
}

background: white;
border: 1px solid $light-gray;
width: 95%;
}
}

.panel {
background: $lightest-gray;
padding: 2rem 1rem;

@include media($medium) {
padding: 0;
}
}

.panel__row {
Expand All @@ -29,11 +43,35 @@
}

td {
border-bottom: 0;
border-bottom: 0 !important;
padding: .3rem 0 !important;

&:first-child {
font-weight: bold;
}
}

h4 {
@include font-size(1.6);
font-weight: 600;
}

@include media($medium) {
border-bottom: 1px solid $light-gray;
padding: 10px 18px;
margin-top: 0;

&:last-child {
border-bottom: none;
}
}
}

#datatable-modal .panel .panel__row {
// TODO this shit is broken.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's broken?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, I was supposed to go back to that and write a better comment, I'll do so now

@include media($medium) {
td {
padding-left: 0 !important;
}
}
}