Skip to content

Commit

Permalink
Improve superset list view content layout (#3031)
Browse files Browse the repository at this point in the history
* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* remove tabs from indentation

* fix merge conflicts

* adjust css after code merge
  • Loading branch information
Grace Guo authored and mistercrunch committed Aug 11, 2017
1 parent 144f516 commit c9c6bca
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 1 deletion.
77 changes: 76 additions & 1 deletion superset/assets/stylesheets/superset.less
Original file line number Diff line number Diff line change
Expand Up @@ -243,13 +243,88 @@ div.widget .slice_container {

/** table on both sides of the gap **/
.panel .table-responsive{
margin: 0 1%;
padding: 0 1%;
}
@media screen and (max-width: 767px) {
.panel .table-responsive{
width: 98%;
}
}

.list-container {
position: relative;
}

.list-search-container {
position: relative;
}

.list-search-container .dropdown-toggle {
position: absolute;
top: -43px;
right: 25px;
border: 0;
padding: 0 18px;
}

.list-search-container .fa-filter {
position: relative;
left: -8px;
}

.list-search-container .dropdown-menu {
top: -19px;
right: 0;
left: auto;
float: none;
}

.list-container .pagination-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-bottom: 20px;
}
.list-container .pagination-container .pagination {
margin: 0 15px;
}
.list-container .pagination-container strong {
margin-right: 5px;
}

.list-container .list-add-action {
position: absolute;
top: -30px;
right: 15px;
}

.list-container .form-actions-container {
padding: 0 0 20px 10px;
display: inline;
}

.list-container .filter-action {
margin: 10px 10px 0 10px;
padding-bottom: 15px;
}

.list-container .filters-container table tr:first-child td {
border-top: none;
}
.list-container .filters-container table tr:last-child td {
border-bottom: 1px solid #b3b3b3;
}

.list-add-action .btn.btn-sm {
padding: 5px 6px;
font-size: 10px;
line-height: 2px;
border-radius: 50%;
box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, 1);
}

iframe {
border: none;
width: 100%;
Expand Down
18 changes: 18 additions & 0 deletions superset/templates/appbuilder/general/model/list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{% extends "appbuilder/base.html" %}
{% import 'appbuilder/general/lib.html' as lib %}

{% block content %}
{{ lib.panel_begin(title) }}

<div class="panel-body list-container">
{% block list_search scoped %}
{{ widgets.get('search')()|safe }}
{% endblock %}

{% block list_list scoped %}
{{ widgets.get('list')()|safe }}
{% endblock %}
</div>

{{ lib.panel_end() }}
{% endblock %}
47 changes: 47 additions & 0 deletions superset/templates/appbuilder/general/widgets/base_list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{% import 'appbuilder/general/lib.html' as lib %}

{% set can_add = "can_add" | is_item_visible(modelview_name) %}
{% set can_show = "can_show" | is_item_visible(modelview_name) %}
{% set can_edit = "can_edit" | is_item_visible(modelview_name) %}
{% set can_delete = "can_delete" | is_item_visible(modelview_name) %}
{% set actions = actions | get_actions_on_list(modelview_name) %}

{% if can_add %}
<span class="list-add-action">
{% set path = url_for(modelview_name + '.add') %}
{% set path = path | set_link_filters(filters) %}
&nbsp;{{ lib.lnk_add(path) }}
</span>
{% endif %}

{% if count > 0 %}

{% block begin_content scoped %}
{% endblock %}

{% block begin_loop_header scoped %}
{% endblock %}

{% block begin_loop_values %}
{% endblock %}

{% block end_content scoped %}
{% endblock %}

<div class="form-actions-container">
{{ lib.render_actions(actions, modelview_name) }}
</div>
{{ lib.action_form(actions,modelview_name) }}

<div class="pagination-container pull-right">
<strong>{{ _('Record Count') }}:</strong> {{ count }}
{{ lib.render_pagination(page, page_size, count, modelview_name) }}
{{ lib.render_set_page_size(page, page_size, count, modelview_name) }}
</div>
<script language="javascript">
var modelActions = new AdminActions();
</script>

{% else %}
<b>{{_("No records found")}}</b>
{% endif %}
56 changes: 56 additions & 0 deletions superset/templates/appbuilder/general/widgets/search.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
{% import 'appbuilder/general/lib.html' as lib %}

<div class="list-search-container">
<form id="filter_form" class="form-search" method="get">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-filter text-primary" aria-hidden="true"></i> {{_("Add Filter")}}
</button>

<ul class="dropdown-menu">
{% for col in include_cols %}
<li><a href="javascript:void(0)" name={{col}} class="filter btn" onclick="return false;">
{{ label_columns[col] }}</a>
</li>
{% endfor %}
</ul>
<div class="filters-container">
<table class="table table-responsive table-hover filters">

</table>
<div class="filter-action" style="display:none">
<button type="submit" class="btn btn-sm btn-primary" id="search-action">
Search&nbsp;&nbsp;<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>

<script>
(function($) {
function checkSearchButton() {
var hasFilter = $('.filters tr').length;
if (hasFilter) {
$('.filters a.remove-filter').off('click', checkSearchButton);
$('.filters a.remove-filter').on('click', checkSearchButton);
$('.filter-action').toggle(true);
} else {
$('.filter-action').toggle(false);
}
}

$('.list-search-container').on('hidden.bs.dropdown', checkSearchButton);
$(document).ready(function() {
checkSearchButton();
});

var filter = new AdminFilters(
'#filter_form',
{{ label_columns | tojson | safe }},
{{ form_fields | tojson | safe }},
{{ search_filters | tojson | safe }},
{{ active_filters | tojson | safe }}
);
})(jQuery);

</script>

0 comments on commit c9c6bca

Please sign in to comment.