Visual refactor in the wiki layout

app/coffee/modules/wiki/main.coffee

@@ -215,9 +215,9 @@ EditableWikiContentDirective = ($window, $document, $repo, $confirm, $loading, $
                                 $analytics) ->
     template = """
         <div class="view-wiki-content">
-            <section class="wiki-content wysiwyg"
+            <section class="wysiwyg"
                      tg-bind-html="wiki.html"></section>
-            <span class="edit icon icon-edit" href="" title="Edit"  style="display: none;"/>
+            <span class="edit icon icon-edit" title="Edit"></span>
         </div>
         <div class="edit-wiki-content" style="display: none;">
             <textarea placeholder="Write your wiki page here"
@@ -299,7 +299,9 @@ EditableWikiContentDirective = ($window, $document, $repo, $confirm, $loading, $
             return if not wikiPage
             $scope.wiki = wikiPage
 
-            if not isEditable()
+            if isEditable()
+                $el.addClass('editable')
+            else if not isEditable()
                 disableEdition()
             else if not wikiPage.id?
                 switchToEditMode()

app/partials/wiki.jade

@@ -18,6 +18,8 @@ block content
             div.summary.wiki-summary(tg-wiki-summary, ng-model="wiki", ng-if="wiki.id")
             section.wiki-content(tg-editable-wiki-content, ng-model="wiki")
 
-            button.remove(ng-click="ctrl.delete()", ng-if="wiki.id") Remove this wiki page.
-
             tg-attachments(ng-model="wiki", type="wiki_page", ng-if="wiki.id")
+
+            a.remove(href="", ng-click="ctrl.delete()", ng-if="wiki.id", title="Remove this wiki page")
+                span.icon.icon-delete
+                span Remove this wiki page

app/styles/layout/us-detail.scss

@@ -195,7 +195,6 @@
     }
     .edit {
         color: $grayer;
-
     }
     .view-description {
         .edit {

app/styles/layout/wiki.scss

@@ -1,3 +1,63 @@
+.wiki {
+    .remove {
+        @extend %small;
+        color: $gray-light;
+        &:hover {
+            span {
+                @include transition(color .2s linear);
+                color: $grayer;
+            }
+            .icon {
+                @include transition(color .2s linear);
+                color: $red;
+            }
+        }
+        .icon {
+            color: $gray-light;
+            margin-right: .3rem;
+        }
+    }
+}
+
 .wiki-content {
     margin-bottom: 2rem;
+    position: relative;
+    .view-wiki-content {
+        &:hover {
+            .wysiwyg {
+                background: $whitish;
+                cursor: pointer;
+            }
+            .edit {
+                @include transition(all .2s linear);
+                opacity: 1;
+                top: -1.5rem;
+            }
+        }
+        .edit {
+            @include transition(all .2s linear);
+            background: $whitish;
+            left: 0;
+            opacity: 0;
+            padding: .2rem .5rem;
+            position: absolute;
+            top: 0;
+        }
+    }
+    .edit-wiki-content {
+        .preview-icon {
+            position: absolute;
+            right: 3.5rem;
+        }
+        .action-container {
+            position: absolute;
+            right: 1rem;
+            top: .3rem;
+        }
+        .edit {
+            position: absolute;
+            right: 3.5rem;
+            top: .4rem;
+        }
+    }
 }