ui: start patternfly v4 migration
This commit is contained in:
Jens Langhammer
@ -1,133 +1,126 @@
|
||||
{% extends "base/skeleton.html" %}
|
||||
{% extends "base/skeleton_pf4.html" %}
|
||||
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
|
||||
{% load is_active %}
|
||||
{% load utils %}
|
||||
|
||||
{% block body %}
|
||||
<div class="toast-notifications-list-pf">
|
||||
{% include 'partials/messages.html' %}
|
||||
</div>
|
||||
<nav class="navbar navbar-pf-vertical">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">
|
||||
<img class="navbar-brand-icon" src="{% static 'img/logo.png' %}" alt="" />
|
||||
<img class="navbar-brand-name" src="{% static 'img/brand.svg' %}" alt="passbook" />
|
||||
</a>
|
||||
</div>
|
||||
<nav class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
|
||||
<a href="{% url 'passbook_core:auth-logout' %}" class="btn btn-link nav-item-iconic" aria-haspopup="true" aria-expanded="true">
|
||||
<span title="Username" class="fa fa-sign-out"></span>
|
||||
<span class="dropdown-title">
|
||||
{% trans 'Logout' %}
|
||||
</span>
|
||||
{% include 'partials/messages.html' %}
|
||||
<div class="pf-c-page" id="page-default-nav-example">
|
||||
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">{% trans 'Skip to content' %}</a>
|
||||
<header role="banner" class="pf-c-page__header">
|
||||
<div class="pf-c-page__header-brand">
|
||||
<div class="pf-c-page__header-brand-toggle">
|
||||
<button class="pf-c-button pf-m-plain" type="button" id="page-default-nav-example-nav-toggle"
|
||||
aria-label="Global navigation" aria-expanded="true"
|
||||
aria-controls="page-default-nav-example-primary-nav">
|
||||
<i class="fas fa-bars" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<a class="pf-c-page__header-brand-link">
|
||||
<img class="pf-c-brand" src="{% static 'passbook/logo.png' %}" alt="" />
|
||||
<img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" alt="passbook" />
|
||||
</a>
|
||||
<a href="{% url 'passbook_core:user-settings' %}" class="btn btn-link nav-item-iconic" aria-haspopup="true" aria-expanded="true">
|
||||
<span title="Username" class="fa pficon-user"></span>
|
||||
<span class="dropdown-title">
|
||||
</div>
|
||||
<div class="pf-c-page__header-tools">
|
||||
<div class="pf-c-page__header-tools-group pf-m-icons">
|
||||
<a href="{% url 'passbook_core:auth-logout' %}" class="pf-c-button pf-m-plain" type="button">
|
||||
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pf-c-page__header-tools-group">
|
||||
<a href="{% url 'passbook_core:user-settings' %}" class="pf-c-button">
|
||||
{{ user.username }}
|
||||
</span>
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</nav>
|
||||
<div class="nav-pf-vertical nav-pf-vertical-with-sub-menus hide-nav-pf">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item {% is_active_url 'passbook_core:overview' %}">
|
||||
<a href="{% url 'passbook_core:overview' %}">
|
||||
<span class="fa fa-dashboard" data-toggle="tooltip" title="{% trans 'Overview' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Overview' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% if user.is_superuser %}
|
||||
<li class="list-group-item {% is_active_url 'passbook_admin:overview' %}">
|
||||
<a href="{% url 'passbook_admin:overview' %}">
|
||||
<span class="fa pficon-build" data-toggle="tooltip" title="{% trans 'System Status' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'System Status' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:applications' 'passbook_admin:application-create' 'passbook_admin:application-update' 'passbook_admin:application-delete' %}">
|
||||
<a href="{% url 'passbook_admin:applications' %}">
|
||||
<span class="fa pficon-applications" data-toggle="tooltip" title="{% trans 'Applications' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Applications' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:sources' 'passbook_admin:source-create' 'passbook_admin:source-update' 'passbook_admin:source-delete' %}">
|
||||
<a href="{% url 'passbook_admin:sources' %}">
|
||||
<span class="fa pficon-resource-pool" data-toggle="tooltip" title="{% trans 'Sources' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Sources' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:providers' 'passbook_admin:provider-create' 'passbook_admin:provider-update' 'passbook_admin:provider-delete' %}">
|
||||
<a href="{% url 'passbook_admin:providers' %}">
|
||||
<span class="fa pficon-integration" data-toggle="tooltip" title="{% trans 'Providers' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Providers' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:property-mappings' 'passbook_admin:property-mapping-create' 'passbook_admin:property-mapping-update' 'passbook_admin:property-mapping-delete' %}">
|
||||
<a href="{% url 'passbook_admin:property-mappings' %}">
|
||||
<span class="fa fa-table" data-toggle="tooltip" title="{% trans 'Property Mappings' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Property Mappings' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:factors' 'passbook_admin:factor-create' 'passbook_admin:factor-update' 'passbook_admin:factor-delete' %}">
|
||||
<a href="{% url 'passbook_admin:factors' %}">
|
||||
<span class="fa pficon-plugged" data-toggle="tooltip" title="{% trans 'Factors' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Factors' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:policies' 'passbook_admin:policy-create' 'passbook_admin:policy-update' 'passbook_admin:policy-delete' 'passbook_admin:policy-test' %}">
|
||||
<a href="{% url 'passbook_admin:policies' %}">
|
||||
<span class="fa pficon-infrastructure" data-toggle="tooltip" title="{% trans 'Policies' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Policies' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:invitations' 'passbook_admin:invitation-create' 'passbook_admin:invitation-update' 'passbook_admin:invitation-delete' 'passbook_admin:invitation-test' %}">
|
||||
<a href="{% url 'passbook_admin:invitations' %}">
|
||||
<span class="fa pficon-migration" data-toggle="tooltip" title="{% trans 'Invitations' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Invitations' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:users' 'passbook_admin:user-update' 'passbook_admin:user-delete' %}">
|
||||
<a href="{% url 'passbook_admin:users' %}">
|
||||
<span class="fa pficon-users" data-toggle="tooltip" title="{% trans 'Users' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Users' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item {% is_active 'passbook_admin:groups' 'passbook_admin:group-update' 'passbook_admin:group-delete' %}">
|
||||
<a href="{% url 'passbook_admin:groups' %}">
|
||||
<span class="fa pficon-users" data-toggle="tooltip" title="{% trans 'Groups' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Groups' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item {% is_active 'passbook_admin:audit-log' %}">
|
||||
<a href="{% url 'passbook_admin:audit-log' %}">
|
||||
<span class="fa pficon-catalog" data-toggle="tooltip" title="{% trans 'Audit Log' %}"></span>
|
||||
<span class="list-group-item-value">{% trans 'Audit Log' %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical hide-nav-pf">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</a>
|
||||
</div>
|
||||
<img class="pf-c-avatar" src="{% gravatar user.email %}" alt="">
|
||||
</div>
|
||||
</header>
|
||||
<div class="pf-c-page__sidebar pf-m-dark">
|
||||
<div class="pf-c-page__sidebar-body">
|
||||
<nav class="pf-c-nav pf-m-dark" id="page-default-nav-example-primary-nav" aria-label="Global">
|
||||
<ul class="pf-c-nav__list">
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_core:overview' %}" class="pf-c-nav__link {% is_active_url 'passbook_core:overview' %}">
|
||||
{% trans 'Overview' %}
|
||||
</a>
|
||||
</li>
|
||||
{% if user.is_superuser %}
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:overview' %}" class="pf-c-nav__link {% is_active_url 'passbook_admin:overview' %}">
|
||||
{% trans 'System Status' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:applications' %}" class="pf-c-nav__link {% is_active 'passbook_admin:applications' 'passbook_admin:application-create' 'passbook_admin:application-update' 'passbook_admin:application-delete' %}">
|
||||
{% trans 'Applications' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:sources' %}" class="pf-c-nav__link {% is_active 'passbook_admin:sources' 'passbook_admin:source-create' 'passbook_admin:source-update' 'passbook_admin:source-delete' %}">
|
||||
{% trans 'Sources' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:providers' %}" class="pf-c-nav__link {% is_active 'passbook_admin:providers' 'passbook_admin:provider-create' 'passbook_admin:provider-update' 'passbook_admin:provider-delete' %}">
|
||||
{% trans 'Providers' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:property-mappings' %}" class="pf-c-nav__link {% is_active 'passbook_admin:property-mappings' 'passbook_admin:property-mapping-create' 'passbook_admin:property-mapping-update' 'passbook_admin:property-mapping-delete' %}">
|
||||
{% trans 'Property Mappings' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:factors' %}" class="pf-c-nav__link {% is_active 'passbook_admin:factors' 'passbook_admin:factor-create' 'passbook_admin:factor-update' 'passbook_admin:factor-delete' %}">
|
||||
{% trans 'Factors' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:policies' %}" class="pf-c-nav__link {% is_active 'passbook_admin:policies' 'passbook_admin:policy-create' 'passbook_admin:policy-update' 'passbook_admin:policy-delete' 'passbook_admin:policy-test' %}">
|
||||
{% trans 'Policies' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:invitations' %}" class="pf-c-nav__link {% is_active 'passbook_admin:invitations' 'passbook_admin:invitation-create' 'passbook_admin:invitation-update' 'passbook_admin:invitation-delete' 'passbook_admin:invitation-test' %}">
|
||||
{% trans 'Invitations' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:users' %}" class="pf-c-nav__link {% is_active 'passbook_admin:users' 'passbook_admin:user-update' 'passbook_admin:user-delete' %}">
|
||||
{% trans 'Users' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:groups' %}" class="pf-c-nav__link {% is_active 'passbook_admin:groups' 'passbook_admin:group-update' 'passbook_admin:group-delete' %}">
|
||||
{% trans 'Groups' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="pf-c-nav__item">
|
||||
<a href="{% url 'passbook_admin:audit-log' %}" class="pf-c-nav__link {% is_active 'passbook_admin:audit-log' %}">
|
||||
{% trans 'Audit Log' %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
|
||||
{% block content %}
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1>Main title</h1>
|
||||
<p>This is a demo of the Page component.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-page__main-section">
|
||||
|
||||
</section>
|
||||
{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -5,39 +5,53 @@
|
||||
{% block head %}
|
||||
{{ block.super }}
|
||||
<style>
|
||||
img.app-icon {
|
||||
max-height: 72px;
|
||||
}
|
||||
img.app-icon {
|
||||
max-height: 72px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row row-cards-pf">
|
||||
{% for app in applications %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<span class="fa fa-shield"></span> {{ app.name }}
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification">
|
||||
<a href="{{ app.launch_url }}" class="add" data-toggle="tooltip" data-placement="top" title="{% trans 'Open App...' %}">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1>{% trans 'Applications' %}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-page__main-section">
|
||||
{% if applications %}
|
||||
<div class="pf-l-gallery pf-m-gutter">
|
||||
{% for app in applications %}
|
||||
<a href="{{ app.launch_url }}" class="pf-c-card pf-m-hoverable pf-m-compact" id="card-1">
|
||||
<div class="pf-c-card__head">
|
||||
{% if not app.icon_url %}
|
||||
<span class="pficon pficon-arrow"></span>
|
||||
<i class="pf-icon pf-icon-arrow"></i>
|
||||
{% else %}
|
||||
<img class="app-icon" src="{{ app.icon_url }}" alt="{% trans 'Application Icon' %}">
|
||||
{% endif %}
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card__header pf-c-title pf-m-md">
|
||||
<p id="card-1-check-label">{{ app.name }}</p>
|
||||
<div class="pf-c-content">
|
||||
<small>{{ app.subtitle }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card__body">{% trans app.description %}</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% empty %}
|
||||
<h1>{% trans 'No Applications available.' %}</h1>
|
||||
{% endfor %}
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="pf-c-empty-state">
|
||||
<i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
|
||||
<h1 class="pf-c-title pf-m-lg">{% trans 'No Applications available.' %}</h1>
|
||||
<div class="pf-c-empty-state__body">
|
||||
{% trans "Either no applications are defined, or you don't have access to any." %}
|
||||
</div>
|
||||
{% if user.is_superuser %} {# todo: use guardian permissions instead #}
|
||||
<a href="{% url 'passbook_admin:application-create' %}" class="pf-c-button pf-m-primary" type="button">
|
||||
{% trans 'Create Application' %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user