From 2b3a9a0b8fe60dfb52ea65420afa82c9cc5787a2 Mon Sep 17 00:00:00 2001
From: Anders Stentebjerg <anders@umbraco.dk>
Date: Thu, 7 Nov 2013 16:04:07 +0000
Subject: [PATCH] U4-3449 Polish UX so it matches grid

---
 src/Umbraco.Web.UI.Client/src/less/forms.less |  3 +--
 src/Umbraco.Web.UI.Client/src/less/grid.less  |  4 ++-
 src/Umbraco.Web.UI.Client/src/less/navs.less  | 14 +++++-----
 src/Umbraco.Web.UI.Client/src/less/panel.less | 27 +++++++++++++++----
 .../src/less/sections.less                    |  2 +-
 .../src/views/content/edit.html               | 10 +++----
 6 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index 5139a42b73..fc4a56b62e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -629,11 +629,10 @@ input[type="checkbox"][readonly] {
 // -----------
 
 input.search-query {
-  padding-right: 14px;
   padding-right: 4px \9;
   padding-left: 14px;
   padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
-  margin-bottom: 0; // Remove the default margin on all inputs
+  margin: 0; // Remove the default margin on all inputs
   .border-radius(0px);
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/grid.less b/src/Umbraco.Web.UI.Client/src/less/grid.less
index 5621323022..fc4c00c593 100644
--- a/src/Umbraco.Web.UI.Client/src/less/grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/grid.less
@@ -97,7 +97,9 @@ body {
   right: 0;
 }
 
-#search-form form{margin-top: 15px;}
+#search-form form{
+  margin-top: 9px;
+}
 
 #navigation {
   left: 80px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less
index e92c481615..f4e5b9c610 100644
--- a/src/Umbraco.Web.UI.Client/src/less/navs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/navs.less
@@ -112,8 +112,8 @@
 }
 .nav-tabs > li > a,
 .nav-pills > li > a {
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
   margin-right: 2px;
   line-height: 14px; // keeps the overall height an even number
 }
@@ -133,14 +133,14 @@
 .nav-tabs > li > a {
   -webkit-border-radius: @tabsBorderRadius;
   border-radius: @tabsBorderRadius;
-  color: @black;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  color: @gray;
+  padding-top: 5px;
+  padding-bottom: 4px;
   line-height: @baseLineHeight;
   border: 1px solid transparent;
   .border-radius(4px 4px 0 0);
   &:hover {
-      color: @blue;
+      color: @black;
   }
   &:hover,
   &:focus {
@@ -151,7 +151,7 @@
 .nav-tabs > .active > a,
 .nav-tabs > .active > a:hover,
 .nav-tabs > .active > a:focus {
-  color: @gray;
+  color: @black;
   background-color: @bodyBackground;
   border: 1px solid #ddd;
   border-bottom-color: transparent;
diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less
index 060c541449..4db77b7d0f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/panel.less
@@ -37,12 +37,28 @@
   cursor: text;
 }
 
-.umb-headline-editor-wrapper, 
-h1.headline{
+.umb-headline-editor-wrapper h1.headline{
   height: 20px; padding: 30px 0 0 20px;
   position: relative;
 }
 
+.umb-panel-header .umb-headline {
+  font-size: 18px;
+  border: none;
+  background: none;
+  margin: 25px 0 0 20px;
+  padding: 0 0 3px 0;
+  height: auto;
+  width: 100%;
+  border-bottom: 1px dotted #f8f8f8;
+}
+
+.umb-panel-header .umb-headline:hover {
+  border-bottom: 1px dotted #ccc;
+  padding: 0 0 3px 0
+}
+/*
+
 .umb-headline-editor-wrapper h1, h1.headline {
   margin: 0;
   font-size: 14px;
@@ -58,6 +74,9 @@ h1.headline{
   margin: -10px 0 0 -7px;
   padding: 10px 0 0 7px
 }
+*/
+
+
 
 .umb-headline-editor-wrapper 
   .help-inline{
@@ -120,11 +139,9 @@ h1.headline{
 
 .umb-panel-header .umb-btn-toolbar {
     float: right;
-    padding: 20px 20px 0 0;
+    padding: 15px 20px 0 0;
 }
 
-
-
 .umb-panel-footer {
   margin: 0;
   padding: 20px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less
index 3f6f10ae74..8b6a6941b5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/sections.less
+++ b/src/Umbraco.Web.UI.Client/src/less/sections.less
@@ -64,7 +64,7 @@ ul.sections:hover a span {
 
 ul.sections li.avatar {
 	height: 69px;
-	padding: 30px 0 0 0;
+	padding: 28px 0 2px 0;
 	text-align: center;
 	margin: 0 0 0 -4px;
 	border-bottom: 1px solid @grayDark;
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
index ca34a15b25..1746841354 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
@@ -6,7 +6,7 @@
     <umb-panel>
         <umb-header tabs="content.tabs">
 
-            <div class="span4">
+            <div class="span7">
                 <input type="text" 
                     class="umb-headline" 
                     localize="placeholder" 
@@ -14,7 +14,7 @@
                     ng-model="content.name" />
             </div>
 
-            <div class="span8">
+            <div class="span5">
                 
                 <div class="btn-toolbar pull-right umb-btn-toolbar">
                     <div class="btn-group" ng-animate="'fade'" ng-show="formStatus">
@@ -24,11 +24,7 @@
                     <div class="btn-group" ng-class="{dimmed: content.id === 0}">
                         <!-- options button -->
                         <a class="btn" href="#" ng-click="options(content)" prevent-default data-toggle="dropdown">
-                           <i class="icon-settings" style="line-height: 14px"></i> Options
-                        </a>
-                        
-                        <a class="btn dropdown-toggle" ng-click="options(content)" data-toggle="dropdown">
-                            <span class="caret"></span>
+                            Options <span class="caret"></span>
                         </a>
                         
                         <!-- actions -->