mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
Improve superset list view content layout (#3031)
* 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
This commit is contained in:
Grace Guo
Maxime Beauchemin
parent
144f516700
commit
c9c6bcaabe
@ -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%;
|
||||
|
||||
18
superset/templates/appbuilder/general/model/list.html
Normal file
18
superset/templates/appbuilder/general/model/list.html
Normal file
@ -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
superset/templates/appbuilder/general/widgets/base_list.html
Normal file
47
superset/templates/appbuilder/general/widgets/base_list.html
Normal file
@ -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) %}
|
||||
{{ 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
superset/templates/appbuilder/general/widgets/search.html
Normal file
56
superset/templates/appbuilder/general/widgets/search.html
Normal file
@ -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 <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>
|
||||
Loading…
Reference in New Issue
Block a user