From e330c63034e491323fe84de01afa0c4dc4698111 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 27 Aug 2015 14:25:01 +0200
Subject: [PATCH] header: add wrapper to limit input width. Rename some styles

---
 src/Umbraco.Web.UI.Client/src/less/panel.less | 18 +++++++----
 .../components/editor/umb-editor-header.html  | 32 +++++++++----------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less
index 46447f96c7..85dd5a891f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/panel.less
@@ -346,28 +346,33 @@
 
 /* --------- UMB PANEL HEADER ---------- */
 
-.umb-panel-content {
+.umb-panel-header-content-wrapper {
   display: flex;
   flex-direction: column;
   height: 100px;
   padding: 0 20px;
 }
 
-.umb-panel-meta {
+.umb-panel-header-content {
   display: flex;
   align-items: center;
   flex: 1;
 }
 
-.umb-panel-meta.-top-position {
+.umb-panel-header-content.-top-position {
   position: relative;
   top: -20px;
 }
 
+.umb-panel-header-meta {
+   display: flex;
+   flex: 1;
+   flex-direction: row;
+}
+
 .umb-panel-header-icon {
   cursor: pointer;
   margin-right: 5px;
-  //width: 50px;
   height: 55px;
   display: flex;
   justify-content: center;
@@ -380,9 +385,8 @@
 }
 
 .umb-panel-header-title-wrapper {
-  flex: 1;
-  //margin-right: 70px;
-  position: relative;
+   position: relative;
+   width: 80%;
 }
 
 .umb-panel-header-alias {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
index ae74106304..7041c1df7d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -1,27 +1,25 @@
 <div class="umb-panel-header">
 
-    <div class="umb-panel-content">
+    <div class="umb-panel-header-content-wrapper">
 
-        <div class="umb-panel-meta" ng-class="{'-top-position': tabs }">
+        <div class="umb-panel-header-content" ng-class="{'-top-position': tabs }">
 
-            <div class="umb-panel-header-icon" ng-if="icon!==undefined" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}">
-                <i class="icon {{$parent.icon}}"  ng-if="$parent.icon!=='' && $parent.icon!==null"></i>
-                <div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">Add icon</div>
-            </div>
+            <div class="umb-panel-header-meta">
 
-            <div class="umb-panel-header-title-wrapper">
-                <!--
-                <umb-content-name
-                        ng-disabled="content.isSystem == 1"
-                        placeholder="@placeholders_entername"
-                        ng-model="name">
-                </umb-content-name>
-                -->
-                <input type="text" class="umb-panel-header-name" placeholder="Enter name..." ng-if="name!==undefined" ng-disabled="content.isSystem == 1" ng-model="$parent.name"  ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}" umb-auto-focus focus-on-filled="true" />
+               <div class="umb-panel-header-icon" ng-if="icon!==undefined" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}">
+                   <i class="icon {{$parent.icon}}"  ng-if="$parent.icon!=='' && $parent.icon!==null"></i>
+                   <div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">Add icon</div>
+               </div>
 
-                <umb-generate-alias class="umb-panel-header-alias" ng-if="alias!==undefined" alias="$parent.alias" alias-from="$parent.name" enable-lock="true"></umb-generate-alias>
+               <div class="umb-panel-header-title-wrapper">
 
-                <input type="text" class="umb-panel-header-description" placeholder="Enter description..." ng-if="description!==undefined" ng-model="$parent.description" />
+                  <input type="text" class="umb-panel-header-name" placeholder="Enter name..." ng-if="name!==undefined" ng-disabled="content.isSystem == 1" ng-model="$parent.name"  ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}" umb-auto-focus focus-on-filled="true" />
+
+                  <umb-generate-alias class="umb-panel-header-alias" ng-if="alias!==undefined" alias="$parent.alias" alias-from="$parent.name" enable-lock="true"></umb-generate-alias>
+
+                  <input type="text" class="umb-panel-header-description" placeholder="Enter description..." ng-if="description!==undefined" ng-model="$parent.description" />
+
+               </div>
 
             </div>