Fix layout issues for "object-helper" element
thanks flexbox!
This commit is contained in:
parent
e100e0ea72
commit
358ac1592b
|
@ -8,23 +8,6 @@ div.form-wrapper {
|
|||
}
|
||||
|
||||
|
||||
/******************************
|
||||
* "object helper" panel
|
||||
******************************/
|
||||
|
||||
.object-helper {
|
||||
border: 1px solid black;
|
||||
float: right;
|
||||
margin-top: 1em;
|
||||
padding: 1em;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.object-helper-content {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
|
||||
/******************************
|
||||
* Forms
|
||||
******************************/
|
||||
|
|
|
@ -151,6 +151,20 @@ body > #body-wrapper {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/******************************
|
||||
* "object helper" panel
|
||||
******************************/
|
||||
|
||||
.object-helper {
|
||||
border: 1px solid black;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.object-helper-content {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/******************************
|
||||
* Panels
|
||||
|
|
|
@ -124,6 +124,20 @@ header .level .theme-picker {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/******************************
|
||||
* "object helper" panel
|
||||
******************************/
|
||||
|
||||
.object-helper {
|
||||
border: 1px solid black;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.object-helper-content {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* /\****************************** */
|
||||
/* * Panels */
|
||||
|
|
|
@ -75,35 +75,43 @@
|
|||
% endif
|
||||
</%def>
|
||||
|
||||
<ul id="context-menu">
|
||||
${self.context_menu_items()}
|
||||
</ul>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
|
||||
% if status_breakdown is not Undefined and status_breakdown is not None:
|
||||
<div class="object-helper">
|
||||
<h3>Row Status Breakdown</h3>
|
||||
<div class="object-helper-content">
|
||||
% if status_breakdown:
|
||||
<div class="grid full">
|
||||
<table>
|
||||
% for i, (status, count) in enumerate(status_breakdown):
|
||||
<tr class="${'even' if i % 2 == 0 else 'odd'}">
|
||||
<td>${status}</td>
|
||||
<td>${count}</td>
|
||||
</tr>
|
||||
% endfor
|
||||
</table>
|
||||
</div>
|
||||
% else:
|
||||
<p>Nothing to report yet.</p>
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
<div class="form-wrapper">
|
||||
${form.render(form_id='batch-form', buttons=capture(buttons))|n}
|
||||
</div><!-- form-wrapper -->
|
||||
|
||||
<div class="form-wrapper">
|
||||
${form.render(form_id='batch-form', buttons=capture(buttons))|n}
|
||||
</div><!-- form-wrapper -->
|
||||
<div style="display: flex; align-items: flex-start;">
|
||||
|
||||
% if status_breakdown is not Undefined and status_breakdown is not None:
|
||||
<div class="object-helper">
|
||||
<h3>Row Status Breakdown</h3>
|
||||
<div class="object-helper-content">
|
||||
% if status_breakdown:
|
||||
<div class="grid full">
|
||||
<table>
|
||||
% for i, (status, count) in enumerate(status_breakdown):
|
||||
<tr class="${'even' if i % 2 == 0 else 'odd'}">
|
||||
<td>${status}</td>
|
||||
<td>${count}</td>
|
||||
</tr>
|
||||
% endfor
|
||||
</table>
|
||||
</div>
|
||||
% else:
|
||||
<p>Nothing to report yet.</p>
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
|
||||
<ul id="context-menu">
|
||||
${self.context_menu_items()}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
${rows_grid|n}
|
||||
|
||||
|
|
Loading…
Reference in a new issue