Merge pull request #175 from mistercrunch/chris/css-fixes
refactor dashboard chart html, make several css improvements.
This commit is contained in:
Chris Williams
commit
e1eb236cf4
|
|
@ -52,11 +52,13 @@ var Dashboard = function (dashboardData) {
|
|||
},
|
||||
refreshExcept: function (slice_id) {
|
||||
var immune = this.metadata.filter_immune_slices;
|
||||
this.slices.forEach(function (slice) {
|
||||
if (slice.data.slice_id !== slice_id && immune.indexOf(slice.data.slice_id) === -1) {
|
||||
slice.render();
|
||||
}
|
||||
});
|
||||
if (immune) {
|
||||
this.slices.forEach(function (slice) {
|
||||
if (slice.data.slice_id !== slice_id && immune.indexOf(slice.data.slice_id) === -1) {
|
||||
slice.render();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
clearFilters: function (slice_id) {
|
||||
delete this.filters[slice_id];
|
||||
|
|
@ -86,6 +88,7 @@ var Dashboard = function (dashboardData) {
|
|||
initDashboardView: function () {
|
||||
dashboard = this;
|
||||
var gridster = $(".gridster ul").gridster({
|
||||
autogrow_cols: true,
|
||||
widget_margins: [10, 10],
|
||||
widget_base_dimensions: [100, 100],
|
||||
draggable: {
|
||||
|
|
@ -95,7 +98,9 @@ var Dashboard = function (dashboardData) {
|
|||
enabled: true,
|
||||
stop: function (e, ui, element) {
|
||||
var slice_data = $(element).data('slice');
|
||||
dashboard.getSlice(slice_data.slice_id).resize();
|
||||
if (slice_data) {
|
||||
dashboard.getSlice(slice_data.slice_id).resize();
|
||||
}
|
||||
}
|
||||
},
|
||||
serialize_params: function (_w, wgd) {
|
||||
|
|
@ -160,10 +165,11 @@ var Dashboard = function (dashboardData) {
|
|||
$('#filters').click(function () {
|
||||
alert(dashboard.readFilters());
|
||||
});
|
||||
$("a.closeslice").click(function () {
|
||||
$("a.remove-chart").click(function () {
|
||||
var li = $(this).parents("li");
|
||||
gridster.remove_widget(li);
|
||||
});
|
||||
|
||||
$(".slice_info").click(function () {
|
||||
var widget = $(this).parents('.widget');
|
||||
var slice_description = widget.find('.slice_description');
|
||||
|
|
@ -171,12 +177,7 @@ var Dashboard = function (dashboardData) {
|
|||
widget.find('.refresh').click();
|
||||
});
|
||||
});
|
||||
$("table.slice_header").mouseover(function () {
|
||||
$(this).find("td.icons nobr").show();
|
||||
});
|
||||
$("table.slice_header").mouseout(function () {
|
||||
$(this).find("td.icons nobr").hide();
|
||||
});
|
||||
|
||||
editor.on("change", function () {
|
||||
var css = editor.getValue();
|
||||
$('#dash_css').val(css);
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ var px = (function () {
|
|||
if (slice_description.is(":visible")) {
|
||||
others += widget.find('.slice_description').height() + 25;
|
||||
}
|
||||
others += widget.find('.slice_header').height();
|
||||
others += widget.find('.chart-header').height();
|
||||
return widget.height() - others;
|
||||
},
|
||||
bindResizeToWindowResize: function () {
|
||||
|
|
|
|||
|
|
@ -196,11 +196,10 @@ img.loading {
|
|||
.gridster li.widget{
|
||||
list-style-type: none;
|
||||
border-radius: 0;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 2px 1px 5px -2px #aaa;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
.dashboard .gridster .dragging,
|
||||
|
|
@ -224,22 +223,35 @@ img.loading {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dashboard table.slice_header {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.dashboard div.nvtooltip {
|
||||
z-index: 888; /* this lets tool tips go on top of other slices */
|
||||
}
|
||||
.dashboard td.icons {
|
||||
width: 50px;
|
||||
}
|
||||
.dashboard td.icons nobr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.header {
|
||||
font-weight: bold;
|
||||
}
|
||||
li.widget:hover {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
li.widget .chart-header {
|
||||
padding: 5px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
li.widget .chart-controls {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
li.widget .chart-header:hover .chart-controls {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
li.widget .chart-controls a {
|
||||
margin-right: 5px;
|
||||
}
|
||||
li.widget .slice_container {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
g.dashed path {
|
||||
stroke-dasharray: 5, 5;
|
||||
}
|
||||
|
||||
.nvtooltip tr.highlight td {
|
||||
font-weight: bold;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -327,7 +327,7 @@ def load_birth_names():
|
|||
.navbar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.slice_header .header{
|
||||
.chart-header .header{
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -375,7 +375,7 @@ def load_birth_names():
|
|||
.navbar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.slice_header .header{
|
||||
.chart-header .header{
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,52 +70,61 @@
|
|||
{% for slice in dashboard.slices %}
|
||||
{% set pos = pos_dict.get(slice.id, {}) %}
|
||||
{% set viz = slice.viz %}
|
||||
|
||||
<li
|
||||
id="slice_{{ slice.id }}"
|
||||
slice_id="{{ slice.id }}"
|
||||
class="widget {{ slice.viz.viz_type }}"
|
||||
data-row="{{ pos.row or 1 }}"
|
||||
data-col="{{ pos.col or loop.index }}"
|
||||
data-sizex="{{ pos.size_x or 4 }}"
|
||||
data-sizey="{{ pos.size_y or 4 }}">
|
||||
<table class="slice_header">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="icons">
|
||||
<nobr class="icons">
|
||||
<a><i class="fa fa-arrows drag"></i></a>
|
||||
<a class="refresh"><i class="fa fa-refresh"></i></a>
|
||||
</nobr>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-center header">
|
||||
<nobr>
|
||||
{{ slice.slice_name }}
|
||||
{% if slice.description %}
|
||||
<i class="fa fa-info-circle slice_info" slice_id="{{ slice.id }}"></i>
|
||||
{% endif %}
|
||||
</nobr>
|
||||
</div>
|
||||
</td>
|
||||
<td class="icons text-right">
|
||||
<nobr>
|
||||
<a href="{{ slice.slice_url }}"><i class="fa fa-play"></i></a>
|
||||
<a href="{{ slice.edit_url }}"><i class="fa fa-edit"></i></a>
|
||||
<a class="closeslice"><i class="fa fa-close"></i></a>
|
||||
</br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="slice_description bs-callout bs-callout-default" style="{{ 'display: none;' if "{}".format(slice.id) not in dashboard.metadata_dejson.expanded_slices }}">
|
||||
{{ slice.description_markeddown | safe }}
|
||||
id="slice_{{ slice.id }}"
|
||||
slice_id="{{ slice.id }}"
|
||||
class="widget {{ slice.viz.viz_type }}"
|
||||
data-row="{{ pos.row or 1 }}"
|
||||
data-col="{{ pos.col or loop.index }}"
|
||||
data-sizex="{{ pos.size_x or 4 }}"
|
||||
data-sizey="{{ pos.size_y or 4 }}">
|
||||
|
||||
<div class="row chart-header">
|
||||
<div class="col-md-12 text-center header">
|
||||
{{ slice.slice_name }}
|
||||
{% if slice.description %}
|
||||
<i class="fa fa-info-circle slice_info" slice_id="{{ slice.id }}"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="chart-controls col-md-12">
|
||||
<a title="Move chart">
|
||||
<i class="fa fa-arrows drag"></i>
|
||||
</a>
|
||||
<a class="refresh" title="Refresh data">
|
||||
<i class="fa fa-repeat"></i>
|
||||
</a>
|
||||
<a href="{{ slice.edit_url }}" title="Edit chart">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</a>
|
||||
<a href="{{ slice.slice_url }}" title="Explore chart">
|
||||
<i class="fa fa-share"></i>
|
||||
</a>
|
||||
<a class="remove-chart" title="Remove chart from dashboard">
|
||||
<i class="fa fa-close"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div
|
||||
class="slice_description bs-callout bs-callout-default col-md-12"
|
||||
style="{{ 'display: none;' if "{}".format(slice.id) not in dashboard.metadata_dejson.expanded_slices }}">
|
||||
{{ slice.description_markeddown | safe }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row chart-container">
|
||||
<input type="hidden" slice_id="{{ slice.id }}" value="false">
|
||||
<div id="{{ viz.token }}" class="token">
|
||||
<div id="{{ viz.token }}" class="token col-md-12">
|
||||
<img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
|
||||
<div class="slice_container" id="{{ viz.token }}_con"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue