From 75cf1a1953f9ecf023a02b04def09066a4f7871a Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <shout@k-ris.com>
Date: Wed, 8 Oct 2014 12:20:44 -0400
Subject: [PATCH] adding animation to extra-info title, and mild restructure

---
 .../discourse/templates/header.hbs            | 11 +++++-----
 .../stylesheets/desktop/topic-post.scss       | 22 ++++++++++++++-----
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/header.hbs b/app/assets/javascripts/discourse/templates/header.hbs
index d7d74fb1445..55d77cf59fb 100644
--- a/app/assets/javascripts/discourse/templates/header.hbs
+++ b/app/assets/javascripts/discourse/templates/header.hbs
@@ -95,9 +95,7 @@
     {{#if showExtraInfo}}
       <div class="extra-info-wrapper">
         <div {{bind-attr class=":extra-info topic.category.isUncategorizedCategory::has-category"}}>
-          {{#if showStarButton}}
-            <a {{bind-attr class=":star topic.starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
-          {{/if}}
+
           <div class="title-wrapper">
             <h1>
               {{#if showPrivateMessageGlyph}}
@@ -105,13 +103,16 @@
               {{/if}}
 
               {{#if topic.details.loaded}}
+                {{#if showStarButton}}
+                  <a {{bind-attr class=":star topic.starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
+                {{/if}}
                 {{topic-status topic=topic}}
                 <a class='topic-link' href='{{unbound topic.url}}' {{action "jumpToTopPost"}}>{{{topic.fancy_title}}}</a>
               {{else}}
                 {{#if topic.errorLoading}}
-                  {{topic.errorTitle}}
+                  <span class="error">{{topic.errorTitle}}</span>
                 {{else}}
-                  {{i18n topic.loading}}
+                  <span class="loading">{{i18n topic.loading}}</span>
                 {{/if}}
               {{/if}}
             </h1>
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 4bf3ce5a3a8..5424abb02c0 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -522,9 +522,24 @@ iframe {
   max-width: 100%;
 }
 
+@keyframes fadein {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+@-webkit-keyframes fadein {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
 .extra-info-wrapper {
   overflow: hidden;
 
+.star, .badge-wrapper, i,  .topic-link:not(.loading) {
+  -webkit-animation: fadein .7s;
+  animation-duration: .7s;
+  animation-name: fadein;
+}
+
   .topic-statuses {
     i  { color: $header_primary; }
     i.fa-envelope { color: $danger; }
@@ -549,8 +564,8 @@ iframe {
   }
 
   a.star {
-    margin: 6px 7px 20px 0;
-    font-size: 20px;
+    margin: 0 7px 20px 2px;
+    font-size: 17px;
     color: dark-light-diff($secondary, $primary, 80%, -20%) !important;
   }
   a.star.starred {color: $danger !important;}
@@ -583,9 +598,6 @@ iframe {
     line-height: 1.1em;
     margin: 0 0 2px 0;
   }
-  .star {
-    margin-top: 3px;
-  }
 }