EZP-29117: Improve Content Type view design

src/bundle/Resources/public/scss/_field-group.scss

@@ -1,5 +1,3 @@
-@import 'custom';
-
 .ez-view-rawcontentview {
 
     .ez-raw-content-title {
@@ -22,25 +20,18 @@
 
 .ez-fieldgroup {
 
-    .ez-fieldgroup-name {
+    &__name {
         color: $ez-color-secondary;
         border-bottom: 1px solid $ez-color-secondary;
         padding-bottom: .5rem;
         font-weight: 400;
+        font-size: 1.125rem;
     }
 
     .ez-content-field-name {
         background-color: $ez-color-base-pale;
     }
 
-    h2.ez-fieldgroup-name {
-        font-size: 1.125rem;
-    }
-
-    h3.ez-fieldgroup-name {
-        font-size: 1.0625rem;
-    }
-
     .ez-content-field {
         padding: 0 1rem;
         margin-bottom: 1.5rem;

src/bundle/Resources/public/scss/_general.scss

@@ -1,5 +1,3 @@
-@import 'custom';
-
 html {
     height: 100%;
     width: 100%;

src/bundle/Resources/public/scss/_header.scss

@@ -1,5 +1,3 @@
-@import 'custom';
-
 .ez-header {
     background-color: $ez-ground-base-dark;
 

src/bundle/Resources/public/scss/_icons.scss

@@ -1,5 +1,3 @@
-@import 'custom';
-
 .ez-icon {
     width: 2rem;
     height: 2rem;

src/bundle/Resources/public/scss/_main-nav.scss

@@ -1,5 +1,3 @@
-@import 'custom';
-
 .ez-main-nav {
     padding: 0;
     background-color: $ez-ground-base-medium;

src/bundle/Resources/public/scss/_tables.scss

@@ -1,4 +1,27 @@
-@import 'custom';
+.ez-table {
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        background-color: $ez-ground-primary;
+        align-items: center;
+        padding: 0 1.25rem;
+        min-height: 50px;
+        border-radius: .25rem .25rem 0 0;
+    }
+
+    &__headline {
+        font-size: 1.0625rem;
+        margin-bottom: 0;
+        font-weight: bold;
+        color: $ez-black;
+    }
+
+    &__cell {
+        &--field-definitions-head {
+            width: calc(100% / 3);
+        }
+    }
+}
 
 .ez-table-header {
     display: flex;
@@ -74,7 +97,9 @@
     color: $ez-color-base-dark;
 }
 
-.ez-info-view, .ez-link-manager-view {
+.ez-info-view,
+.ez-link-manager-view,
+.ez-content-type-view {
     .ez-table {
         &--list {
             background: none;

src/bundle/Resources/public/scss/_tabs.scss

@@ -1,5 +1,3 @@
-@import 'custom';
-
 .nav-tabs {
     border-bottom: 2px solid $ez-ground-base-dark;
     background-color: $ez-ground-base-dark;

src/bundle/Resources/translations/content_type.en.xliff

@@ -31,6 +31,16 @@
         <target state="new">Container</target>
         <note>key: content_type.container</note>
       </trans-unit>
+      <trans-unit id="694d6cbecfee848cf42a300c0b310f45ece6a09b" resname="content_type.content_field_definitions">
+        <source>Content field definitions</source>
+        <target state="new">Content field definitions</target>
+        <note>key: content_type.content_field_definitions</note>
+      </trans-unit>
+      <trans-unit id="3066b4a1b2277f4e299d9c91ad3134d725467b39" resname="content_type.content_type">
+        <source>Content Type</source>
+        <target state="new">Content Type</target>
+        <note>key: content_type.content_type</note>
+      </trans-unit>
       <trans-unit id="693f9ade0c2bb6a7c19b6f9b818d96aa23f1e013" resname="content_type.default_availability">
         <source>Default content availability</source>
         <target state="new">Default content availability</target>
@@ -47,8 +57,8 @@
         <note>key: content_type.default_availability.value</note>
       </trans-unit>
       <trans-unit id="5ebf6515da27060877064931a5ac1d5a8540e28d" resname="content_type.default_children_sorting">
-        <source>Default property for sorting children</source>
-        <target state="new">Default property for sorting children</target>
+        <source>Default field for sorting children</source>
+        <target state="new">Default field for sorting children</target>
         <note>key: content_type.default_children_sorting</note>
       </trans-unit>
       <trans-unit id="cefc13177fd81d4c9df6f8e86eb5278fccbe5a5a" resname="content_type.default_sort">
@@ -71,6 +81,11 @@
         <target state="new">Do you want to delete selected field definitions?</target>
         <note>key: content_type.field_definitions.modal.message</note>
       </trans-unit>
+      <trans-unit id="8bf6d91a6b0731a38103e04e03f3f9e8bf4459a1" resname="content_type.global_properties">
+        <source>Global properties</source>
+        <target state="new">Global properties</target>
+        <note>key: content_type.global_properties</note>
+      </trans-unit>
       <trans-unit id="238db0c5dee8ec13199b073f7cc78728f53ffa36" resname="content_type.identifier">
         <source>Identifier</source>
         <target state="new">Identifier</target>

src/bundle/Resources/translations/locationview.en.xliff

@@ -26,6 +26,11 @@
         <target state="new">Select language</target>
         <note>key: content.edit.select_language</note>
       </trans-unit>
+      <trans-unit id="9c91d85bc7658ec7dc6bbb07b720979177c0846a" resname="content.view.subitems">
+        <source>Sub-items</source>
+        <target state="new">Sub-items</target>
+        <note>key: content.view.subitems</note>
+      </trans-unit>
       <trans-unit id="c0b36efcf0ebbe2ac0f9861cae35e12e668cbcc0" resname="tab.details.content_details">
         <source>Content details</source>
         <target state="new">Content details</target>

src/bundle/Resources/views/admin/content_type/view.html.twig

@@ -25,100 +25,105 @@
 {% set language_code = content_type.mainLanguageCode %}
 
 {% block content %}
+    <div class="container mt-4 px-4">
+        <section class="ez-fieldgroup">
+            <h2 class="ez-fieldgroup__name">{{ "content_type.global_properties"|trans|desc("Global properties") }}</h2>
+        </section>
+    </div>
     <section class="container mt-4 px-5">
-        <header class="ez-table-header">
-            <div class="ez-table-header__headline">Global properties</div>
-            <div>
-                {{ macros.content_type_edit(content_type, content_type_group, 'btn btn-primary') }}
-            </div>
+        <header class="ez-table__header">
+            <div class="ez-table__headline">{{ "content_type.content_type"|trans|desc("Content Type") }}</div>
         </header>
 
-        <table class="table">
-            <colgroup>
-                <col width="30%"/>
-                <col />
-            </colgroup>
-
-            <tbody>
+        <table class="table mb-3">
+            <thead>
             <tr>
                 <th>{{ "content_type.name"|trans|desc("Name") }}</th>
-                <td>{{ content_type.name }}</td>
-            </tr>
-            <tr>
                 <th>{{ "content_type.identifier"|trans|desc("Identifier") }}</th>
-                <td>{{ content_type.identifier }}</td>
-            </tr>
-            <tr>
                 <th>{{ "content_type.description"|trans|desc("Description") }}</th>
-                <td>{{ content_type.descriptions[language_code]|default('') }}</td>
-            </tr>
-            <tr>
-                <th>{{ "content_type.name_schema"|trans|desc("Content name pattern") }}</th>
-                <td>{{ content_type.nameSchema }}</td>
-            </tr>
-            <tr>
-                <th>{{ "content_type.url_alias_schema"|trans|desc("URL alias name pattern") }}</th>
-                <td>{{ content_type.urlAliasSchema }}</td>
-            </tr>
-            <tr>
-                <th>{{ "content_type.container"|trans|desc("Container") }}</th>
-                <td>{{ 'yes_no'|transchoice(content_type.isContainer)|desc("{0}No|{1}Yes") }}</td>
-            </tr>
-            <tr>
-                <th>{{ "content_type.default_children_sorting"|trans|desc("Default property for sorting children") }}</th>
-                <td>
-                    {{ ("content_type.sort_field." ~ content_type.defaultSortField)|trans(domain="ezrepoforms_content_type") }} / {{ ("content_type.sort_order." ~ content_type.defaultSortOrder)|trans(domain="ezrepoforms_content_type") }}
-                </td>
-            </tr>
-            <tr>
-                <th>{{ "content_type.default_sort"|trans|desc("Default sort order") }}</th>
-                <td>{{ content_type.defaultSortOrder }}</td>
-            </tr>
-            <tr>
-                <th>
-                    {{ "content_type.default_availability"|trans|desc('Default content availability') }}
-                    <p class="text-secondary small">
-                        {{ "content_type.default_availability.help"|trans|desc("Default availability in primary language, if translation is absent") }}
-                    </p>
-                </th>
-                <td>{{ 'content_type.default_availability.value'|transchoice(content_type.defaultAlwaysAvailable)|desc("{0} Not available|{1} Available") }}</td>
+                <th></th>
             </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>{{ content_type.name }}</td>
+                    <td>{{ content_type.identifier }}</td>
+                    <td>{{ content_type.descriptions[language_code]|default('') }}</td>
+                    <td class="text-right">
+                        {{ macros.content_type_edit(content_type, content_type_group, 'btn btn-icon mx-3') }}
+                    </td>
+                </tr>
             </tbody>
         </table>
-    </section>
-
-<section class="container mt-4 px-5">
-    <header class="ez-table-header mb-5">
-        <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 ez-table-header">
-            <div class="ez-table-header__headline">{{ group|capitalize }}</div>
-        </header>
-
-        <table class="table">
-            <thead>
+        <table class="table ez-table--list">
+            <tbody>
                 <tr>
-                    <th>Name</th>
-                    <th>Identifier</th>
-                    <th>Type</th>
+                    <td>{{ "content_type.name_schema"|trans|desc("Content name pattern") }}</td>
+                    <td>{{ content_type.nameSchema }}</td>
                 </tr>
-            </thead>
-
-            <tbody>
-            {% for field_definition in field_definitions %}
                 <tr>
-                    <th>{{ field_definition.name }}</th>
-                    <td>{{ field_definition.identifier }}</td>
-                    <td>{{ field_definition.fieldTypeIdentifier }}</td>
+                    <td>{{ "content_type.url_alias_schema"|trans|desc("URL alias name pattern") }}</td>
+                    <td>{{ content_type.urlAliasSchema }}</td>
+                </tr>
+                <tr>
+                    <td>{{ "content_type.container"|trans|desc("Container") }}</td>
+                    <td>{{ 'yes_no'|transchoice(content_type.isContainer)|desc("{0}No|{1}Yes") }}</td>
+                </tr>
+                <tr>
+                    <td>{{ "content_type.default_children_sorting"|trans|desc("Default field for sorting children") }}</td>
+                    <td>
+                        {{ ("content_type.sort_field." ~ content_type.defaultSortField)|trans(domain="ezrepoforms_content_type") }} / {{ ("content_type.sort_order." ~ content_type.defaultSortOrder)|trans(domain="ezrepoforms_content_type") }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>{{ "content_type.default_sort"|trans|desc("Default sort order") }}</td>
+                    <td>
+                        {{ ("content_type.sort_order." ~ content_type.defaultSortOrder)|trans(domain="ezrepoforms_content_type") }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        {{ "content_type.default_availability"|trans|desc('Default content availability') }}
+                        <p class="text-secondary small">
+                            {{ "content_type.default_availability.help"|trans|desc("Default availability in primary language, if translation is absent") }}
+                        </p>
+                    </td>
+                    <td>{{ 'content_type.default_availability.value'|transchoice(content_type.defaultAlwaysAvailable)|desc("{0} Not available|{1} Available") }}</td>
                 </tr>
-            {% endfor %}
             </tbody>
         </table>
-    {% endfor %}
-</section>
+    </section>
 
-<br />
+    <div class="container mt-4 px-4">
+        <section class="ez-fieldgroup">
+            <h2 class="ez-fieldgroup__name">{{ "content_type.content_field_definitions"|trans|desc("Content field definitions") }}</h2>
+        </section>
+    </div>
+    <section class="container mt-4 px-5">
+        {% for group, field_definitions in field_definitions_by_group %}
+            <header class="ez-table__header">
+                <div class="ez-table__headline">{{ group|capitalize }}</div>
+            </header>
 
+            <table class="table ez-table">
+                <thead>
+                    <tr>
+                        <th class="ez-table__cell--field-definitions-head" scope="col">Name</th>
+                        <th class="ez-table__cell--field-definitions-head" scope="col">Identifier</th>
+                        <th class="ez-table__cell--field-definitions-head" scope="col">Type</th>
+                    </tr>
+                </thead>
+                <tbody>
+                {% for field_definition in field_definitions %}
+                    <tr>
+                        <th class="ez-table__cell" scope="row">{{ field_definition.name }}</th>
+                        <td class="ez-table__cell">{{ field_definition.identifier }}</td>
+                        <td class="ez-table__cell">{{ field_definition.fieldTypeIdentifier }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        {% endfor %}
+    </section>
 {% endblock %}

src/bundle/Resources/views/content/locationview.html.twig

@@ -60,7 +60,7 @@
                     {{ form_end(form_subitems_content_edit) }}
                     <div class="container px-5">
                         <section class="ez-fieldgroup">
-                            <h2 class="ez-fieldgroup-name">Sub-items</h2>
+                            <h2 class="ez-fieldgroup__name">{{ 'content.view.subitems'|trans|desc('Sub-items') }}</h2>
                             <div class="ez-sil" data-location="{{ location.id }}" data-items="{{ subitems_module.items }}" data-content-types="{{ subitems_module.content_type_info_list }}" data-limit="{{ subitems_module.limit }}"></div>
                         </section>
                     </div>

src/bundle/Resources/views/content/tab/content.html.twig

@@ -19,7 +19,7 @@
 
     {% for group in fieldDefinitionsByGroup if group.fieldDefinitions|length > 0 %}
         <section class="ez-fieldgroup container">
-            <h3 class="ez-fieldgroup-name">{{ group.name }}</h3>
+            <h2 class="ez-fieldgroup__name">{{ group.name }}</h2>
             {% for fieldDefinition in group.fieldDefinitions %}
                 <div class="ez-content-field">
                     <p class="ez-content-field-name">{{ fieldDefinition.name }}:</p>