Unverified Commit 4c443713 authored by Serge S. Koval's avatar Serge S. Koval Committed by GitHub

Merge pull request #2012 from michaelbukachi/bootstrap4

fix: Correct navbar styling issue
parents c5f44b10 012ec957
......@@ -12,7 +12,7 @@ app = Flask(__name__)
# Create dummy secrey key so we can use sessions
app.config['SECRET_KEY'] = '123456790'
app.config['FLASK_ADMIN_SWATCH'] = 'Flatly'
app.config['FLASK_ADMIN_SWATCH'] = 'flatly'
# Create in-memory database
app.config['DATABASE_FILE'] = 'sample_db.sqlite'
......@@ -48,6 +48,8 @@ class CustomView(ModelView):
class UserAdmin(CustomView):
column_searchable_list = ('name',)
column_filters = ('name', 'email')
can_export = True
export_types = ['csv', 'xlsx']
# Flask views
......@@ -62,8 +64,8 @@ def index():
admin = admin.Admin(app, 'Example: Bootstrap4', template_mode='bootstrap4')
# Add views
admin.add_view(UserAdmin(User, db.session))
admin.add_view(CustomView(Page, db.session))
admin.add_view(UserAdmin(User, db.session, category='Menu'))
admin.add_view(CustomView(Page, db.session, category='Menu'))
def build_sample_db():
......
......@@ -39,7 +39,7 @@
<body>
{% block page_body %}
<div class="container{% if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#admin-navbar-collapse"
aria-controls="admin-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
......
{% macro menu_icon(item) -%}
{% set icon_type = item.get_icon_type() %}
{%- if icon_type %}
{% set icon_value = item.get_icon_value() %}
{% if icon_type == 'glyph' %}
<i class="glyphicon {{ icon_value }}"></i>
{% elif icon_type == 'fa' %}
<i class="fa {{ icon_value }}"></i>
{% elif icon_type == 'image' %}
<img src="{{ url_for('static', filename=icon_value) }}" alt="menu image">
{% elif icon_type == 'image-url' %}
<img src="{{ icon_value }}" alt="menu image">
{% set icon_type = item.get_icon_type() %}
{%- if icon_type %}
{% set icon_value = item.get_icon_value() %}
{% if icon_type == 'glyph' %}
<i class="glyphicon {{ icon_value }}"></i>
{% elif icon_type == 'fa' %}
<i class="fa {{ icon_value }}"></i>
{% elif icon_type == 'image' %}
<img src="{{ url_for('static', filename=icon_value) }}" alt="menu image">
{% elif icon_type == 'image-url' %}
<img src="{{ icon_value }}" alt="menu image">
{% endif %}
{% endif %}
{% endif %}
{%- endmacro %}
{% macro menu(menu_root=None) %}
{% if menu_root is none %}{% set menu_root = admin_view.admin.menu() %}{% endif %}
......@@ -21,49 +21,52 @@
{%- if children %}
{% set class_name = item.get_class_name() or '' %}
{%- if item.is_active(admin_view) %}
<li class="active dropdown{% if class_name %} {{class_name}}{% endif %}">
{% else -%}
<li class="dropdown{% if class_name %} {{class_name}}{% endif %}">
<li class="active dropdown{% if class_name %} {{ class_name }}{% endif %}">
{% else -%}
<li class="dropdown{% if class_name %} {{ class_name }}{% endif %}">
{%- endif %}
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="javascript:void(0)">
{% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}
{{ menu_icon(item) }}{{ item.name }}
{%- if 'dropdown-submenu' in class_name -%}
<i class="glyphicon glyphicon-chevron-right small"></i>
{%- else -%}
<i class="glyphicon glyphicon-chevron-down small"></i>
{%- endif -%}
</a>
<ul class="dropdown-menu">
{%- for child in children -%}
{%- if child.is_category() -%}
{{ menu(menu_root=[child]) }}
{% else %}
{% set class_name = child.get_class_name() %}
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="javascript:void(0)">
{% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}
{{ menu_icon(item) }}{{ item.name }}
{%- if 'dropdown-submenu' in class_name -%}
<i class="glyphicon glyphicon-chevron-right small"></i>
{%- else -%}
<i class="glyphicon glyphicon-chevron-down small"></i>
{%- endif -%}
</a>
<ul class="dropdown-menu">
{%- for child in children -%}
{%- if child.is_category() -%}
{{ menu(menu_root=[child]) }}
{% else %}
{% set class_name = child.get_class_name() %}
<li{% if class_name %} class="{{ class_name }}"{% endif %}>
{%- if child.is_active(admin_view) %}
<li class="active{% if class_name %} {{class_name}}{% endif %}">
<a class="dropdown-item active" href="{{ child.get_url() }}"{% if child.target %}
target="{{ child.target }}"{% endif %}>
{{ menu_icon(child) }}{{ child.name }}</a>
{% else %}
<li{% if class_name %} class="{{class_name}}"{% endif %}>
<a class="dropdown-item" href="{{ child.get_url() }}"{% if child.target %}
target="{{ child.target }}"{% endif %}>
{{ menu_icon(child) }}{{ child.name }}</a>
{%- endif %}
<a class="nav-link" href="{{ child.get_url() }}"{% if child.target %}
target="{{ child.target }}"{% endif %}>
{{ menu_icon(child) }}{{ child.name }}</a>
</li>
{%- endif %}
{%- endfor %}
</ul>
</li>
</li>
{%- endif %}
{%- endfor %}
</ul>
</li>
{% endif %}
{%- else %}
{%- if item.is_accessible() and item.is_visible() -%}
{% set class_name = item.get_class_name() %}
{%- if item.is_active(admin_view) %}
<li class="active{% if class_name %} {{class_name}}{% endif %}">
{%- else %}
<li{% if class_name %} class="{{class_name}}"{% endif %}>
<li class="active{% if class_name %} {{ class_name }}{% endif %}">
{%- else %}
<li{% if class_name %} class="{{ class_name }}"{% endif %}>
{%- endif %}
<a class="nav-link" href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}>{{ menu_icon(item) }}{{ item.name }}</a>
</li>
<a class="nav-link" href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}>
{{ menu_icon(item) }}{{ item.name }}</a>
</li>
{%- endif -%}
{% endif -%}
{% endfor %}
......@@ -86,15 +89,15 @@
{% if messages %}
{% for category, m in messages %}
{% if category %}
{# alert-error changed to alert-danger in bootstrap 3, mapping is for backwards compatibility #}
{% set mapping = {'message': 'info', 'error': 'danger'} %}
<div class="alert alert-{{ mapping.get(category, category) }} alert-dismissable">
{# alert-error changed to alert-danger in bootstrap 3, mapping is for backwards compatibility #}
{% set mapping = {'message': 'info', 'error': 'danger'} %}
<div class="alert alert-{{ mapping.get(category, category) }} alert-dismissable">
{% else %}
<div class="alert alert-dismissable">
<div class="alert alert-dismissable">
{% endif %}
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
{{ m }}
</div>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
{{ m }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
......
......@@ -22,7 +22,7 @@
</li>
{% else %}
<li>
<a href="{{ get_url('.export', export_type=admin_view.export_types[0], **request.args) }}"
<a class="nav-link" href="{{ get_url('.export', export_type=admin_view.export_types[0], **request.args) }}"
title="{{ _gettext('Export') }}">{{ _gettext('Export') }}</a>
</li>
{% endif %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment