From 9fc7a0f4066a4106b089509b4cf9ec11ebf2342a Mon Sep 17 00:00:00 2001
From: Inaki Juaniz-Velilla <inaki.juanizvelilla@gmail.com>
Date: Tue, 13 Mar 2018 11:12:00 -0400
Subject: [PATCH] EZP-28386: Update Create & Edit design

---
 .../Resources/public/scss/_content-edit.scss  | 11 +++-
 .../scss/fieldType/edit/_ezgmaplocation.scss  |  5 +-
 .../component/preview_unavailable.html.twig   |  2 +-
 .../content_edit/content_create.html.twig     | 44 +++++++++------
 .../content_edit/content_edit.html.twig       | 50 ++++++++++-------
 .../content_edit/content_edit_base.html.twig  | 56 +++++++++----------
 .../content_edit/user_create.html.twig        | 40 +++++++------
 .../content/content_edit/user_edit.html.twig  | 40 +++++++------
 8 files changed, 143 insertions(+), 105 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_content-edit.scss b/src/bundle/Resources/public/scss/_content-edit.scss
index bde89d0da2..66da4df9e5 100644
--- a/src/bundle/Resources/public/scss/_content-edit.scss
+++ b/src/bundle/Resources/public/scss/_content-edit.scss
@@ -1,14 +1,21 @@
+.ez-content-item-status {
+    font-size: 1.125rem;
+    color: $ez-color-base-light;
+}
+
 .ez-content-edit-container {
     position: relative;
 
     &__close {
         position: absolute;
-        right: 1rem;
-        top: 1rem;
+        left: 0;
+        top: 0;
         font-size: 2rem;
         color: $ez-black;
         width: 2rem;
         height: 2rem;
+        margin-left: .5rem;
+        padding: 1rem;
 
         &:before,
         &:after {
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezgmaplocation.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezgmaplocation.scss
index 7937ffe3d3..88b056abf4 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_ezgmaplocation.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_ezgmaplocation.scss
@@ -66,13 +66,14 @@
 
     .btn--search-by-address {
         border-radius: 0 .25rem .25rem 0;
-        padding: .3rem .5rem;
+        padding: .075rem .5rem;
         cursor: pointer;
+        align-self: start;
 
         .ez-icon {
             width: 1.4rem;
             height: 1.4rem;
-            margin-top: 2px;
+            margin-top: 5px;
         }
     }
 }
diff --git a/src/bundle/Resources/views/content/content_edit/component/preview_unavailable.html.twig b/src/bundle/Resources/views/content/content_edit/component/preview_unavailable.html.twig
index 895f78a472..5516a20c1e 100644
--- a/src/bundle/Resources/views/content/content_edit/component/preview_unavailable.html.twig
+++ b/src/bundle/Resources/views/content/content_edit/component/preview_unavailable.html.twig
@@ -1,6 +1,6 @@
 {% trans_default_domain 'content_edit_component_preview_unavailable' %}
 
-<div class="alert alert-info mt-3 ez-alert ez-alert--info" role="alert">
+<div class="alert alert-info mt-3 mx-5 ez-alert ez-alert--info" role="alert">
     <svg class="ez-icon ez-icon--small ez-icon-warning">
         <use xmlns:xlink="http://www.w3.org/1999/xlink"
              xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#warning"></use>
diff --git a/src/bundle/Resources/views/content/content_edit/content_create.html.twig b/src/bundle/Resources/views/content/content_edit/content_create.html.twig
index c1c27e5969..f83c7bbd61 100644
--- a/src/bundle/Resources/views/content/content_edit/content_create.html.twig
+++ b/src/bundle/Resources/views/content/content_edit/content_create.html.twig
@@ -7,28 +7,36 @@
 {% endblock %}
 
 {% block details %}
-    <h2 class="text-muted">{{ 'creating_in_language'|trans({'%contentTypeName%': contentType.name, '%languageName%': language.name})|desc('Creating - %contentTypeName% in %languageName%') }}</h2>
-    <h1>
-        <svg class="ez-icon ez-icon-{{ contentType.identifier }}">
-            <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ contentType.identifier }}"></use>
-        </svg>
-        {{ 'new_content_item'|trans({'%contentType%': contentType.name})|desc('New %contentType%') }}
-    </h1>
-
-    <div class="small">
-        {{ contentType.name }} / Parent Location ID: {{ parentLocation.id }}
+    <div class="container mt-5 px-5">
+        <h2 class="ez-content-item-status">{{ 'creating_in_language'|trans({'%contentTypeName%': contentType.name, '%languageName%': language.name})|desc('Creating - %contentTypeName% in %languageName%') }}</h2>
+        <h1>
+            <svg class="ez-icon ez-icon-{{ contentType.identifier }}">
+                <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ contentType.identifier }}"></use>
+            </svg>
+            {{ 'new_content_item'|trans({'%contentType%': contentType.name})|desc('New %contentType%') }}
+        </h1>
+
+        <div class="small">
+            {{ contentType.name }} / Parent Location ID: {{ parentLocation.id }}
+        </div>
+        {# @todo remove if statement once getDescription() bug is resolved in kernel #}
+        {% if contentType.descriptions is not empty %}
+            <div class="small text-muted">{{ contentType.description }}</div>
+        {% endif %}
     </div>
-    {# @todo remove if statement once getDescription() bug is resolved in kernel #}
-    {% if contentType.descriptions is not empty %}
-        <div class="small text-muted">{{ contentType.description }}</div>
-    {% endif %}
 {% endblock %}
 
 {% block form_fields %}
-    {{ parent() }}
-    {{ form_widget(form.publish, {'attr': {'hidden': 'hidden'}}) }}
-    {{ form_widget(form.saveDraft, {'attr': {'hidden': 'hidden'}}) }}
-    {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }}
+    <section class="container mt-4 px-5">
+        <div class="card ez-card">
+            <div class="card-body">
+                {{ parent() }}
+                {{ form_widget(form.publish, {'attr': {'hidden': 'hidden'}}) }}
+                {{ form_widget(form.saveDraft, {'attr': {'hidden': 'hidden'}}) }}
+                {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }}
+            </div>
+        </div>
+    </section>
 {% endblock %}
 
 {% block right_sidebar %}
diff --git a/src/bundle/Resources/views/content/content_edit/content_edit.html.twig b/src/bundle/Resources/views/content/content_edit/content_edit.html.twig
index 0acf48573b..33fddef039 100644
--- a/src/bundle/Resources/views/content/content_edit/content_edit.html.twig
+++ b/src/bundle/Resources/views/content/content_edit/content_edit.html.twig
@@ -13,32 +13,40 @@
 {% endblock %}
 
 {% block details %}
-    {% if baseLanguage is defined and baseLanguage is not null %}
-        <h2 class="text-muted">{{ 'editing_in_language_based_on'|trans({'%contentName%': content.name, '%languageName%': language.name, '%baseLanguageName%': baseLanguage.name})|desc('Editing - %contentName% in %languageName% based on %baseLanguageName%') }}</h2>
-    {% else %}
-        <h2 class="text-muted">{{ 'editing_in_language'|trans({'%contentName%': content.name, '%languageName%': language.name})|desc('Editing - %contentName% in %languageName%') }}</h2>
-    {% endif %}
-    <h1>
-        <svg class="ez-icon ez-icon-{{ contentType.identifier }}">
-            <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ contentType.identifier }}"></use>
-        </svg>
-        {{ content.name }}
-    </h1>
+    <div class="container mt-5 px-5">
+        {% if baseLanguage is defined and baseLanguage is not null %}
+            <h2 class="ez-content-item-status">{{ 'editing_in_language_based_on'|trans({'%contentName%': content.name, '%languageName%': language.name, '%baseLanguageName%': baseLanguage.name})|desc('Editing - %contentName% in %languageName% based on %baseLanguageName%') }}</h2>
+        {% else %}
+            <h2 class="ez-content-item-status">{{ 'editing_in_language'|trans({'%contentName%': content.name, '%languageName%': language.name})|desc('Editing - %contentName% in %languageName%') }}</h2>
+        {% endif %}
+        <h1>
+            <svg class="ez-icon ez-icon-{{ contentType.identifier }}">
+                <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ contentType.identifier }}"></use>
+            </svg>
+            {{ content.name }}
+        </h1>
 
-    <div class="small">
-        {{ contentType.name }} / {{ 'created_by'|trans({'%name%': 'Administrator'})|desc('Created by %name%') }} / {{ content.versionInfo.creationDate|localizeddate('medium', 'medium', app.request.locale) }} / {{ 'content_id'|trans({'%contentId%': content.id})|desc('Content ID: %contentId%') }}, {{ 'location_id'|trans({'%locationId%': locationId})|desc('Location ID: %locationId%') }}
+        <div class="small">
+            {{ contentType.name }} / {{ 'created_by'|trans({'%name%': 'Administrator'})|desc('Created by %name%') }} / {{ content.versionInfo.creationDate|localizeddate('medium', 'medium', app.request.locale) }} / {{ 'content_id'|trans({'%contentId%': content.id})|desc('Content ID: %contentId%') }}, {{ 'location_id'|trans({'%locationId%': locationId})|desc('Location ID: %locationId%') }}
+        </div>
+        {# @todo remove if statement once getDescription() bug is resolved in kernel #}
+        {% if contentType.descriptions is not empty %}
+            <div class="small text-muted">{{ contentType.description }}</div>
+        {% endif %}
     </div>
-    {# @todo remove if statement once getDescription() bug is resolved in kernel #}
-    {% if contentType.descriptions is not empty %}
-        <div class="small text-muted">{{ contentType.description }}</div>
-    {% endif %}
 {% endblock %}
 
 {% block form_fields %}
-    {{ parent() }}
-    {{ form_widget(form.publish, {'attr': {'hidden': 'hidden'}}) }}
-    {{ form_widget(form.saveDraft, {'attr': {'hidden': 'hidden'}}) }}
-    {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }}
+    <section class="container mt-4 px-5">
+        <div class="card ez-card">
+            <div class="card-body">
+                {{ parent() }}
+                {{ form_widget(form.publish, {'attr': {'hidden': 'hidden'}}) }}
+                {{ form_widget(form.saveDraft, {'attr': {'hidden': 'hidden'}}) }}
+                {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }}
+            </div>
+        </div>
+    </section>
 {% endblock %}
 
 {% block right_sidebar %}
diff --git a/src/bundle/Resources/views/content/content_edit/content_edit_base.html.twig b/src/bundle/Resources/views/content/content_edit/content_edit_base.html.twig
index c84b380ba1..2b6b654305 100644
--- a/src/bundle/Resources/views/content/content_edit/content_edit_base.html.twig
+++ b/src/bundle/Resources/views/content/content_edit/content_edit_base.html.twig
@@ -10,37 +10,35 @@
 {% block content %}
     <div class="row align-items-stretch ez-main-row">
         {% block left_sidebar %}{% endblock left_sidebar %}
-        <div class="col-sm-11 px-0 pb-4 mt-5 ez-content-edit-container">
-            <div class="container">
-                {% block close_button %}{% endblock %}
-                {% block details %}{% endblock %}
-
-                {% block form_before %}{% endblock %}
-
-                {% block form %}
-                    {{ form_start(form, {'attr': {'class': 'ez-form-validate'}}) }}
-
-                    {% block form_fields %}
-                        {% for field in form.fieldsData if not field.rendered -%}
-                            {% if field.value is defined %}
-                                {{- form_widget(field) -}}
-                            {% else %}
-                                <div>
-                                    {{- form_label(field) -}}
-                                    <p class="non-editable">
-                                        {{ "content.field.non_editable"|trans|desc('Field type is not editable') }}
-                                    </p>
-                                    {% do field.setRendered() %}
-                                </div>
-                            {% endif %}
-                        {%- endfor %}
-                    {% endblock %}
-
-                    {{ form_end(form) }}
+        <div class="container px-0 pb-4 mt-3 ez-content-edit-container">
+            {% block close_button %}{% endblock %}
+            {% block details %}{% endblock %}
+
+            {% block form_before %}{% endblock %}
+
+            {% block form %}
+                {{ form_start(form, {'attr': {'class': 'ez-form-validate'}}) }}
+
+                {% block form_fields %}
+                    {% for field in form.fieldsData if not field.rendered -%}
+                        {% if field.value is defined %}
+                            {{- form_widget(field) -}}
+                        {% else %}
+                            <div>
+                                {{- form_label(field) -}}
+                                <p class="non-editable">
+                                    {{ "content.field.non_editable"|trans|desc('Field type is not editable') }}
+                                </p>
+                                {% do field.setRendered() %}
+                            </div>
+                        {% endif %}
+                    {%- endfor %}
                 {% endblock %}
 
-                {% block form_after %}{% endblock %}
-            </div>
+                {{ form_end(form) }}
+            {% endblock %}
+
+            {% block form_after %}{% endblock %}
         </div>
         {% block right_sidebar_wrapper %}
             <div class="col-sm-1 pt-4 bg-secondary ez-context-menu">
diff --git a/src/bundle/Resources/views/content/content_edit/user_create.html.twig b/src/bundle/Resources/views/content/content_edit/user_create.html.twig
index 9749f22104..539161fa51 100644
--- a/src/bundle/Resources/views/content/content_edit/user_create.html.twig
+++ b/src/bundle/Resources/views/content/content_edit/user_create.html.twig
@@ -3,27 +3,35 @@
 {% trans_default_domain 'user_create' %}
 
 {% block details %}
-    <h4 class="text-muted">{{ 'creating'|trans({'%contentType%': contentType.name})|desc('Creating - %contentType%') }}</h4>
-    <h1>
-        <svg class="ez-icon ez-icon-{{ contentType.identifier }}">
-            <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ contentType.identifier }}"></use>
-        </svg>
-        {{ 'new_content_item'|trans({'%contentType%': contentType.name})|desc('New %contentType%') }}
-    </h1>
+    <div class="container mt-5 px-5">
+        <h4 class="ez-content-item-status">{{ 'creating'|trans({'%contentType%': contentType.name})|desc('Creating - %contentType%') }}</h4>
+        <h1>
+            <svg class="ez-icon ez-icon-{{ contentType.identifier }}">
+                <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ contentType.identifier }}"></use>
+            </svg>
+            {{ 'new_content_item'|trans({'%contentType%': contentType.name})|desc('New %contentType%') }}
+        </h1>
 
-    <div class="small">
-        {{ contentType.name }} / {{ 'group_id'|trans({'%groupId%': parentGroup.id})|desc('Group ID: %groupId%') }}
+        <div class="small">
+            {{ contentType.name }} / {{ 'group_id'|trans({'%groupId%': parentGroup.id})|desc('Group ID: %groupId%') }}
+        </div>
+        {# @todo remove if statement once getDescription() bug is resolved in kernel #}
+        {% if contentType.descriptions is not empty %}
+            <div class="small text-muted">{{ contentType.description }}</div>
+        {% endif %}
     </div>
-    {# @todo remove if statement once getDescription() bug is resolved in kernel #}
-    {% if contentType.descriptions is not empty %}
-        <div class="small text-muted">{{ contentType.description }}</div>
-    {% endif %}
 {% endblock %}
 
 {% block form_fields %}
-    {{ parent() }}
-    {{ form_widget(form.create, {'attr': {'hidden': 'hidden'}}) }}
-    {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }}
+    <section class="container mt-4 px-5">
+        <div class="card ez-card">
+            <div class="card-body">
+                {{ parent() }}
+                {{ form_widget(form.create, {'attr': {'hidden': 'hidden'}}) }}
+                {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }}
+            </div>
+        </div>
+    </section>
 {% endblock %}
 
 {% block right_sidebar %}
diff --git a/src/bundle/Resources/views/content/content_edit/user_edit.html.twig b/src/bundle/Resources/views/content/content_edit/user_edit.html.twig
index 72edc2ba10..6cc4072bdb 100644
--- a/src/bundle/Resources/views/content/content_edit/user_edit.html.twig
+++ b/src/bundle/Resources/views/content/content_edit/user_edit.html.twig
@@ -3,27 +3,35 @@
 {% trans_default_domain 'user_edit' %}
 
 {% block details %}
-    <h4 class="text-muted">{{ 'editing'|trans({'%contentType%': contentType.name})|desc('Editing - %contentType%') }}</h4>
-    <h1>
-        <svg class="ez-icon ez-icon-{{ contentType.identifier }}">
-            <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ contentType.identifier }}"></use>
-        </svg>
-        {{ user.name }}
-    </h1>
+    <div class="container mt-5 px-5">
+        <h4 class="ez-content-item-status">{{ 'editing'|trans({'%contentType%': contentType.name})|desc('Editing - %contentType%') }}</h4>
+        <h1>
+            <svg class="ez-icon ez-icon-{{ contentType.identifier }}">
+                <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ contentType.identifier }}"></use>
+            </svg>
+            {{ user.name }}
+        </h1>
 
-    <div class="small">
-        {{ contentType.name }} / {{ 'created_by'|trans({'%name%': 'Administrator'})|desc('Created by %name%') }} / {{ user.versionInfo.creationDate|localizeddate('medium', 'medium', app.request.locale) }} / {{ 'content_id'|trans({'%contentId%': user.id})|desc('Content ID: %contentId%') }}{% if user.versionInfo.contentInfo.mainLocationId %}, {{ 'location_id'|trans({'%locationId%': user.versionInfo.contentInfo.mainLocationId})|desc('Location ID: %locationId%') }}{% endif %}
+        <div class="small">
+            {{ contentType.name }} / {{ 'created_by'|trans({'%name%': 'Administrator'})|desc('Created by %name%') }} / {{ user.versionInfo.creationDate|localizeddate('medium', 'medium', app.request.locale) }} / {{ 'content_id'|trans({'%contentId%': user.id})|desc('Content ID: %contentId%') }}{% if user.versionInfo.contentInfo.mainLocationId %}, {{ 'location_id'|trans({'%locationId%': user.versionInfo.contentInfo.mainLocationId})|desc('Location ID: %locationId%') }}{% endif %}
+        </div>
+        {# @todo remove if statement once getDescription() bug is resolved in kernel #}
+        {% if contentType.descriptions is not empty %}
+            <div class="small text-muted">{{ contentType.description }}</div>
+        {% endif %}
     </div>
-    {# @todo remove if statement once getDescription() bug is resolved in kernel #}
-    {% if contentType.descriptions is not empty %}
-        <div class="small text-muted">{{ contentType.description }}</div>
-    {% endif %}
 {% endblock %}
 
 {% block form_fields %}
-    {{ parent() }}
-    {{ form_widget(form.update, {'attr': {'hidden': 'hidden'}}) }}
-    {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }}
+    <section class="container mt-4 px-5">
+        <div class="card ez-card">
+            <div class="card-body">
+                {{ parent() }}
+                {{ form_widget(form.update, {'attr': {'hidden': 'hidden'}}) }}
+                {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }}
+            </div>
+        </div>
+    </section>
 {% endblock %}
 
 {% block right_sidebar %}