Skip to content
Permalink
Browse files

Merge pull request #158 from inakijv/Tables_styling

EZP-28360: Design consistency for tables across the whole application
  • Loading branch information...
lserwatka committed Dec 12, 2017
2 parents 4fe3505 + fe9dba1 commit 7036e95808124d7ac3f2a7add09548785d970e4d
@@ -37,9 +37,16 @@
}

.ez-table-header {
.ez-icon-create,
.ez-icon-trash {
.btn {
line-height: .85;
padding: .5rem .55rem;
margin-left: .15rem;
margin-right: 0;

.ez-icon-create,
.ez-icon-trash {
margin-right: 0;
}
}
}

@@ -49,6 +49,14 @@
width: 1rem;
}

.ez-table-header {
.ez-icon {
width: 1.5rem;
height: 1.5rem;
fill: $white;
}
}

.ez-btn--extra-actions {
.ez-icon {
pointer-events: none;
@@ -5,42 +5,52 @@
justify-content: space-between;
background-color: $ez-ground-primary;
align-items: center;
padding: .5rem 1rem;
padding: 0 1.25rem;
min-height: 50px;
border-radius: .25rem .25rem 0 0;

h5 {
&__headline {
font-size: 1.0625rem;
margin-bottom: 0;
font-weight: bold;
color: $ez-black;
}
}

.ez-icon {
width: 1rem;
height: 1rem;
fill: $white;
}
.ez-table-header.ground-base {
background-color: $ez-color-base-pale;
}

&.round {
border-radius: 4px 4px 0 0;
.table {
margin-bottom: 3rem;

th, td {
padding: .7rem 1.4rem;
line-height: 20px;
}

&--label {
margin: 0;
padding: 0 .4375rem;
font-size: 1rem;
line-height: 2;
font-weight: bold;
thead th {
font-size: .9375rem;
vertical-align: top;
}
}

.ez-table-header.ground-base {
background-color: $ez-color-base-pale;
td {
font-size: .875rem;
vertical-align: middle;

.checkbox label {
margin-bottom: 0;
}
}
}

.ez-dashboard {
.table {
margin-bottom: 0;

thead {
background-color: $ez-ground-primary-inverted-light;
color: $white;
background-color: $ez-ground-primary;
color: $ez-black;

th {
border-bottom: none;
@@ -49,12 +59,6 @@
}
}

.ez-content-view {
.table {
margin-bottom: 3rem;
}
}

.ez-relations-box-list-no-content {
margin-bottom: 3rem;
padding: 0.75rem 0.5rem;
@@ -63,12 +67,6 @@
}

.ez-info-view {
.table {
th, td {
padding: .8rem 1.4rem;
}
}

.ez-table {
&--list {
background: none;
@@ -2,14 +2,14 @@

<section class="container mt-4 px-5">
<div class="ez-table-header">
<h4>{{ 'content_type.view.list.title'|trans({ '%identifier%': content_type_group.identifier })|desc('Content Types in %identifier%') }}</h4>
<div class="ez-table-header__headline">{{ 'content_type.view.list.title'|trans({ '%identifier%': content_type_group.identifier })|desc('Content Types in %identifier%') }}</div>

<a href="{{ path('ezplatform.content_type.add', {contentTypeGroupId: content_type_group.id}) }}" class="btn btn-primary">
{{ 'content_type.view.list.action.add'|trans|desc('Create a Content Type') }}
</a>
</div>

<table class="table table-striped table-hover">
<table class="table">
<thead>
<tr>
<th>{{ 'content_type.view.list.column.name'|trans|desc('Name') }}</th>
@@ -25,10 +25,10 @@
{% block content %}
<section class="container mt-4 px-5">
<header class="ez-table-header">
<h4>Global properties</h4>
<div class="ez-table-header__headline">Global properties</div>
</header>

<table class="table table-striped table-hover">
<table class="table">
<colgroup>
<col width="30%"/>
<col />
@@ -84,15 +84,15 @@

<section class="container mt-4 px-5">
<header class="ez-table-header">
<h4>Field definitions</h4>
<div class="ez-table-header__headline">Content field definitions</div>
</header>

{% for group, field_definitions in field_definitions_by_group %}
<header class="ez-table-header">
<h5>{{ group }}</h5>
<div class="ez-table-header__headline">{{ group }}</div>
</header>

<table class="table table-striped table-hover">
<table class="table">
<thead>
<tr>
<th>Name</th>
@@ -21,15 +21,15 @@
{% block content %}
<section class="container mt-4 px-5">
<div class="ez-table-header">
<h5>{{ 'content_type_group.view.list.title'|trans|desc('Content Type Groups') }}</h5>
<div class="ez-table-header__headline">{{ 'content_type_group.view.list.title'|trans|desc('Content Type Groups') }}</div>
<div>
<a href="{{ path('ezplatform.content_type_group.create') }}" class="btn btn-primary">
{{ 'content_type_group.view.list.action.add'|trans|desc('Create a Content Type Group') }}
</a>
</div>
</div>

<table class="table table-hover">
<table class="table">
<thead>
<tr>
<th>{{ 'content_type_group.view.list.column.identifier'|trans|desc('Name') }}</th>
@@ -22,8 +22,8 @@

{% block content %}
<section class="container mt-4 px-5">
<div class="ez-table-header round">
<h5>{{ 'language.list'|trans|desc('Languages') }}</h5>
<div class="ez-table-header">
<div class="ez-table-header__headline">{{ 'language.list'|trans|desc('Languages') }}</div ="ez-table-header__headline">
<div>
<a title="{{ 'language.new'|trans|desc('Create a new Language') }}"
href="{{ path('ezplatform.language.create') }}"
@@ -1,8 +1,8 @@
{% trans_default_domain 'role' %}

<section class="container mt-4 px-5">
<div class="ez-table-header round">
<h5>{{ 'policy.view.list.title.count'|trans({'%count%': role.policies|length})|desc('Policies (%count%)') }}</h5>
<div class="ez-table-header">
<div class="ez-table-header__headline">{{ 'policy.view.list.title.count'|trans({'%count%': role.policies|length})|desc('Policies (%count%)') }}</div>
<div>
<a title="{{ 'policy.view.list.action.add'|trans|desc('Add a new Policy') }}"
href="{{ path('ezplatform.policy.create', {roleId: role.id}) }}"
@@ -24,7 +24,7 @@
'action': path('ezplatform.policy.bulk_delete', {"roleId": role.id} ),
'attr': { 'class': 'ez-toggle-btn-state', 'data-toggle-button-id': '#delete-policies' }
}) }}
<table class="table table-hover">
<table class="table">
<thead>
<tr>
<th></th>
@@ -26,8 +26,8 @@
'action': path('ezplatform.role.bulk_delete'),
'attr': { 'class': 'ez-toggle-btn-state', 'data-toggle-button-id': '#delete-roles' }
}) }}
<div class="ez-table-header round">
<h5>{{ 'role.view.list.title'|trans|desc('Roles') }}</h5>
<div class="ez-table-header">
<div class="ez-table-header__headline">{{ 'role.view.list.title'|trans|desc('Roles') }}</div>
<div>
<a title="{{ 'role.view.list.action.add'|trans|desc('Create a Role') }}" href="{{ path('ezplatform.role.create') }}" class="btn btn-primary">
<svg class="ez-icon ez-icon-create">
@@ -44,7 +44,7 @@
</div>
</div>

<table class="table table-hover">
<table class="table">
<thead>
<tr>
<th></th>
@@ -1,8 +1,8 @@
{% trans_default_domain 'role' %}

<section class="container mt-4 px-5">
<div class="ez-table-header round">
<h5>{{ 'role_assignment.view.list.header'|trans|desc('Users and Groups') }}</h5>
<div class="ez-table-header">
<div class="ez-table-header__headline">{{ 'role_assignment.view.list.header'|trans|desc('Users and Groups') }}</div>
<div>
<a href="{{ path('ezplatform.role_assignment.create', {roleId: role.id}) }}" class="btn btn-secondary">
<svg class="ez-icon ez-icon-relations ez-icon--secondary">
@@ -23,7 +23,7 @@
'action': path('ezplatform.role_assignment.bulk_delete', {"roleId": role.id} ),
'attr': { 'class': 'ez-toggle-btn-state', 'data-toggle-button-id': '#delete-role-assignments' }
}) }}
<table class="table table-hover round">
<table class="table">
<thead>
<tr>
<th></th>
@@ -18,7 +18,7 @@
{% include '@EzPlatformAdminUi/admin/search/search_form.html.twig' with { form: form } %}

<div class="ez-table-header mt-3">
<h5>{{ 'search.header'|trans({'%total%': pagerfanta.nbResults})|desc('Search results (%total%)') }}</h5>
<div ="ez-table-header__headline">{{ 'search.header'|trans({'%total%': pagerfanta.nbResults})|desc('Search results (%total%)') }}</div>
</div>

{% if results is empty %}
@@ -20,7 +20,7 @@

{% if results is defined %}
<div class="ez-table-header mt-3">
<h5>{{ 'search.header'|trans({'%total%': pager.nbResults})|desc('Search results (%total%)') }}</h5>
<div ="ez-table-header__headline">{{ 'search.header'|trans({'%total%': pager.nbResults})|desc('Search results (%total%)') }}</div>
</div>

{% if results is empty %}
@@ -4,12 +4,12 @@

<section class="container mt-4 px-5">
<div class="ez-table-header">
<h5>
<div class="ez-table-header__headline">
{{ 'section.assigned_content.header'|trans({
'%name%': section.name,
'%count%': pagerfanta.nbResults
} )|desc('Content items in %name% (%count%)') }}
</h5>
</div>

{{ form_start(form_section_content_assign, {
'action': path("ezplatform.section.assign_content", {"sectionId": section.id}),
@@ -20,7 +20,7 @@
{% block content %}
<section class="container mt-4 px-5">
<div class="ez-table-header">
<h5>{{ 'section.list.title'|trans|desc('Sections') }}</h5>
<div class="ez-table-header__headline">{{ 'section.list.title'|trans|desc('Sections') }}</div>
<div>
<a href="{{ path('ezplatform.section.create') }}" class="btn btn-primary"
data-icon="&#xe616;"{% if not can_edit %} data-disabled{% endif %}>{{ 'section.new'|trans|desc('Create a new Section') }}</a>
@@ -24,7 +24,7 @@
{% block content %}
<section class="container mt-4 px-5">
<header class="ez-table-header">
<h5>{{ 'section.information.header'|trans|desc('Section information') }}</h5>
<div class="ez-table-header__headline">{{ 'section.information.header'|trans|desc('Section information') }}</div>

<div>
{% if deletable %}
@@ -22,8 +22,8 @@
</tbody>
</table>

<div class="ez-table-header round">
<h2 class="ez-table-header--label">{{ 'packages'|trans|desc('Packages') }}</h2>
<div class="ez-table-header">
<div class="ez-table-header__headline">{{ 'packages'|trans|desc('Packages') }}</div>
</div>
<table class="table">
<thead>
@@ -50,8 +50,8 @@
</tbody>
</table>

<div class="ez-table-header round">
<h2 class="ez-table-header--label">{{ 'bundles'|trans|desc('Bundles') }}</h2>
<div class="ez-table-header">
<div class="ez-table-header__headline">{{ 'bundles'|trans|desc('Bundles') }}</div>
</div>
<table class="table">
<thead>
@@ -21,7 +21,7 @@
{{ form_start(form_trash_item_restore, {'action': path('ezplatform.trash.restore')}) }}
<div class="px-4">
<div class="ez-table-header mt-3">
<h5>{{ 'trash.table.header'|trans|desc('Trash') }}</h5>
<div class="ez-table-header__headline">{{ 'trash.table.header'|trans|desc('Trash') }}</div>
<div>
{% if can_restore and form_trash_item_restore.trash_items is not empty %}
{% set restore_under_new_parent_button_attr = form_trash_item_restore.location.select_content.vars.attr|merge({'attr': {'class': (form_trash_item_restore.location.select_content.vars.attr.class|default('') ~ ' d-inline-block')|trim, 'disabled': true}}) %}
@@ -1,5 +1,5 @@
<div class="ez-table-header {{ ground|default('') }}">
<h5>{{ headerText }}</h5>
<div class="ez-table-header__headline">{{ headerText }}</div>
{% if tools is defined %}
<div>
{{ tools|raw }}

0 comments on commit 7036e95

Please sign in to comment.
You can’t perform that action at this time.