From 48d3a3defd19a8e481aa1fbadc939a36cce0c362 Mon Sep 17 00:00:00 2001
From: Zsolt <zla@umbraco.com>
Date: Tue, 5 Sep 2017 11:57:22 +0200
Subject: [PATCH] Made timeline more responsive + restructured the date in the
 footer

---
 .../src/less/properties.less                  | 42 ++++++++++++++++++-
 .../src/views/components/content/edit.html    | 40 +++++++++---------
 2 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/properties.less b/src/Umbraco.Web.UI.Client/src/less/properties.less
index 87a0857b57..79846e5024 100644
--- a/src/Umbraco.Web.UI.Client/src/less/properties.less
+++ b/src/Umbraco.Web.UI.Client/src/less/properties.less
@@ -58,7 +58,23 @@
     background-color: @gray-8;
 }
 
-//--------- HISTORY ----------
+
+//--------- PUBLISH DATE IN THE FOOTER ---------
+
+.umb-editor-footer__date-container {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    font-size: 13px;
+    line-height: 13px;
+    color: @gray-2;
+}
+
+.umb-editor-footer__date-container div {
+    margin-right: 20px;
+}
+
+//------------------- HISTORY ------------------
 
 
 .history-line {
@@ -85,6 +101,7 @@
 .name-date-container {
     margin: 0 30px 0 7px;
     height: 30px;
+    min-width: 170px;
 }
 
 .last-history-item .history-line {
@@ -120,6 +137,7 @@
 .history-item__break {
     display: flex;
     align-items: center;
+    min-width: 230px;
 }
 @media (max-width: 979px) {
     
@@ -132,6 +150,28 @@
         padding: 7px 0;
     }
 
+    .history-line {
+        display: none;
+    }
+}
+@media (max-width: 1535px) {
+    
+    .history-line {
+        visibility: hidden;
+    }
+}
+
+@media (min-width: 1101px) and (max-width: 1365px) {
+    
+    .history-row {
+        display: block;
+        padding: 10px 0;
+    }
+
+    .history-item__break {
+        padding: 7px 0;
+    }
+
     .history-line {
         display: none;
     }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
index 9cbf0a3baf..461a59515c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
@@ -54,30 +54,32 @@
                </umb-breadcrumbs>
 
             </umb-editor-footer-content-left>
-
+            
+            
 
             <umb-editor-footer-content-right>              
                 
-                <span ng-if="content.removeDate != null && content.releaseDate != null">Publish and unpublish date: <i class="icon-calendar"></i>{{ content.releaseDate }} and {{ content.removeDate }}</span>
-                <span ng-if="content.removeDate == null && content.releaseDate != null">Publish date only: <i class="icon-calendar"></i> {{ content.releaseDate }}</span>
-                <span ng-if="content.removeDate != null && content.releaseDate == null">Remove date only: <i class="icon-calendar"></i> {{ content.removeDate }}</span>
+                <span class="umb-editor-footer__date-container">
+                    <div ng-if="content.releaseDate != null"><i class="icon-calendar"></i> Publish date: {{ content.releaseDate }}</div>
+                    <div ng-if="content.removeDate != null"><i class="icon-calendar"></i> Unpublish date: {{ content.removeDate }}</div>
+                </span>
 
-               <umb-button
-                  ng-if="page.listViewPath"
-                  type="link"
-                  href="#{{page.listViewPath}}"
-                  label="Return to list"
-                  label-key="buttons_returnToList">
-               </umb-button>
+                <umb-button
+                    ng-if="page.listViewPath"
+                    type="link"
+                    href="#{{page.listViewPath}}"
+                    label="Return to list"
+                    label-key="buttons_returnToList">
+                </umb-button>
 
-               <umb-button
-                  ng-if="!page.isNew && content.allowPreview"
-                  type="button"
-                  button-style="info"
-                  action="preview(content)"
-                  label="Preview page"
-                  label-key="buttons_showPage">
-               </umb-button>
+                <umb-button
+                    ng-if="!page.isNew && content.allowPreview"
+                    type="button"
+                    button-style="info"
+                    action="preview(content)"
+                    label="Preview page"
+                    label-key="buttons_showPage">
+                </umb-button>
 
                <umb-button-group
                   ng-if="defaultButton"