Ray's changes in structure

app/assets/javascripts/lib/jquery.pageslide.js

@@ -142,6 +142,8 @@
                             });
                         }
                     }
+                    $pageName = $self.parents('.item-title').children('a').text();
+                    $('.page-name').text($pageName);
                 } else if($('.tags-groups').length) {
                     $(this).parents('li').addClass("active").siblings().removeClass("active").parent('ul').siblings().children('li').removeClass("active");
                 } else {

app/assets/stylesheets/basic/global.css.erb

@@ -441,30 +441,78 @@ legend {
 
 
 /* Edit link in structure */
+.page_content {
+
+}
 .editable {
   position: relative;
   padding: 0px;
   margin: 0px;
   min-height: 50px;
+  width: 100%;
+  height: 100%;
 }
 .edit_link {
-  display: none;
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: 2px;
+  bottom: 2px;
+  border: 2px dashed #1769ff;
+  border-radius: 5px;
+  z-index: 1000;
+  opacity: .3;
+  filter: alpha(opacity = 30);
+  background-color: #FFF;
+  -webkit-transition: all .2s linear;
+     -moz-transition: all .2s linear;
+       -o-transition: all .2s linear;
+          transition: all .2s linear;
 }
 .edit_link a {
   position: absolute;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  text-indent: -9999px;
-  background: url(<%= asset_path 'editicon.png' %>) no-repeat center center rgba(255,255,255,.8);
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 1);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 1);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 1);
+  left: 0px;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  text-indent: -99999px;
+}
+.edit_link a:before {
+  content: "\f044";
+  font-family: FontAwesome;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  font-size: 1.5em;
+  width: 24px;
+  height: 24px;
+  margin: -12px 0 0 -12px;
+  text-indent: 0px;
+  opacity: .4;
+  filter: alpha(opacity = 40);
+  -webkit-transition: all .2s linear;
+     -moz-transition: all .2s linear;
+       -o-transition: all .2s linear;
+          transition: all .2s linear;
 }
 .editable:hover .edit_link {
-  display: block;
+  opacity: .8;
+  border: 3px dashed #1769ff;
+  border-radius: 8px;
+  filter: alpha(opacity = 80);
+}
+.editable:hover .edit_link a:before {
+  font-size: 1.8em;
+  width: 28px;
+  height: 28px;
+  margin: -14px 0 0 -14px;
+  opacity: 1;
+  filter: alpha(opacity = 100);
+  -webkit-transition: all .2s linear;
+     -moz-transition: all .2s linear;
+       -o-transition: all .2s linear;
+          transition: all .2s linear;
 }
 
 

app/assets/stylesheets/lib/items.css

@@ -100,7 +100,7 @@
 	content: '';*/
 }
 #items .sortable .navbar .item-title em {
-	display: inline-block;
+	float: right;
 	padding: 0 5px;
 	max-width: 300px;
 	overflow: hidden;

app/assets/stylesheets/lib/pageslide.css

@@ -17,11 +17,15 @@
      -moz-box-shadow: inset 0 0 5px 5px #222;
           box-shadow: inset 0 0 5px 5px #222;
 }
+#pageslide .well {
+  color: #333333;
+}
 #pageslide .content {
   padding: 15px;
 }
 #items #pageslide #view-page .content,
 #items #pageslide #view-page .pane {
+  outline: none;
   padding: 0px;
   margin-top: 57px;
 }
@@ -48,6 +52,9 @@
 #pageslide form {
   margin-bottom: 0;
 }
+#view-page > .content > form {
+  padding: 0 15px 15px;
+}
 #pageslide legend {
   color: #FFFFFF;
   border-bottom: 1px solid #949494;