Skip to content

Fix: dashboard tables return to line if window too small #419

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timotheeguerin merged 9 commits into from
Jun 2, 2017
Merged

Fix: dashboard tables return to line if window too small #419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2a7d12b
Fix dashboard tables return to line if window too small
timotheeguerin May 31, 2017
21914de
Merge branch 'master' into fix/dashboard-table-rtl
timotheeguerin May 31, 2017
f11e626
Move style
timotheeguerin May 31, 2017
9fa2a60
make table layout fixed to prevent overflow
timotheeguerin May 31, 2017
98414ba
Merge branch 'fix/dashboard-table-rtl' of https://github.com/Azure/Ba…
timotheeguerin May 31, 2017
d53c771
Fix
timotheeguerin May 31, 2017
5cccc3b
give job status a fixed size column
ascobie May 31, 2017
0e5a7a6
remove empty style attr
ascobie May 31, 2017
7c79952
Merge branch 'master' into fix/dashboard-table-rtl
timotheeguerin Jun 1, 2017
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
10 changes: 5 additions & 5 deletions app/components/account/details/account-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ <h2>Job status</h2>
</bl-no-item>
<bl-table class="dashboard">
<bl-row *ngFor="let job of (jobData.items | async)" [link]="['/jobs/', job.id]" [key]="job.id">
<bl-cell style="width:77%" [value]="job.id"></bl-cell>
<bl-cell style="text-align:right; color:steelblue;width:21%" [value]="job.state"></bl-cell>
<bl-cell [value]="job.id"></bl-cell>
<bl-cell style="text-align:right; color:steelblue;width:75px" [value]="job.state"></bl-cell>
</bl-row>
</bl-table>
</bl-loading>
Expand Down Expand Up @@ -62,9 +62,9 @@ <h2>Pool status</h2>
</bl-no-item>
<bl-table class="dashboard">
<bl-row *ngFor="let pool of (poolData.items | async)" [link]="['/pools/', pool.id]" [key]="pool.id">
<bl-cell style="width:68%;" [value]="pool.id"></bl-cell>
<bl-cell style="width:10%;"><i aria-hidden="true" class="fa fa-{{pool.osIconName()}}"></i></bl-cell>
<bl-cell style="text-align: right; width:19%;">
<bl-cell [value]="pool.id"></bl-cell>
<bl-cell style="width: 20px"><i aria-hidden="true" class="fa fa-{{pool.osIconName()}}"></i></bl-cell>
<bl-cell style="text-align: right; width: 60px">
<bl-pool-nodes-preview [pool]="pool"></bl-pool-nodes-preview>
</bl-cell>
</bl-row>
Expand Down
7 changes: 7 additions & 0 deletions app/components/account/details/account-details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,17 @@ bl-account-details {
text-align: justify;
margin-top: 8px;
margin-right: 4px;
padding: 12px;

.account-card-content {
height: 300px;
}
}
}

bl-table.dashboard {
bl-cell {
padding: 0 5px;
}
}
}
43 changes: 1 addition & 42 deletions app/components/base/table/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ bl-table {
border-collapse: collapse;
overflow: hidden;
display: table;
table-layout: fixed;
}

bl-thead {
Expand Down Expand Up @@ -114,48 +115,6 @@ bl-table {
}
}

/*
* Specifically for tables on the dashboard that need display: block & inline-block
* instead of display: table.
*/
bl-table.dashboard {
table {
display: block;
}

bl-thead {
display: block;
}

tbody {
display: block;

> tr {
display: block;
padding: 6px;
}
}

bl-cell,
bl-column {
&:first-child {
padding: 0;
}

&:last-child {
padding: 0;
}
}

bl-column {
display: inline-block;
}

bl-cell {
display: inline-block;
}
}

.cell-spinner {
color: map-get($primary, 400);
}