Merge pull request #2331 from awesomerobot/master

rearranging layout to better fit the new username placement

app/assets/javascripts/discourse/templates/embedded_post.js.handlebars

@@ -1,16 +1,16 @@
 <div class='row'>
-  <div class='topic-meta-data span2'>
+  <div class='topic-avatar span2'>
     <div class='contents'>
       <div>
         <a href='/users/{{unbound username}}'>{{avatar this imageSize="large"}}</a>
       </div>
-      <h5 {{bind-attr class="staff new_user"}}><a href='{{unbound usernameUrl}}'>{{{breakUp username name}}}</a></h5>
     </div>
   </div>
   <div class='span11 topic-body'>
-    <div class="topic-meta-data-inside">
-      <div class='post-info post-date'>{{unboundAgeWithTooltip created_at}}</div>
+    <div class="topic-meta-data">
+      <h5 {{bind-attr class="staff new_user"}}><a href='{{unbound usernameUrl}}'>{{{breakUp username name}}}</a></h5>
       {{#if view.parentView.previousPost}}<a href='{{unbound url}}' class="post-info arrow" title="{{i18n topic.jump_reply_up}}"><i class='fa fa-arrow-up'></i></a>{{/if}}
+      <div class='post-info post-date'>{{unboundAgeWithTooltip created_at}}</div>
     </div>
     {{{unbound cooked}}}
     {{#unless view.parentView.previousPost}}<a href='{{unbound url}}' class="arrow" title="{{i18n topic.jump_reply_down}}"><i class='fa fa-arrow-down'></i></a>{{/unless}}

app/assets/javascripts/discourse/templates/post.js.handlebars

@@ -17,10 +17,24 @@
         {{/if}}
       </a>
     {{/if}}
-    <div class='topic-meta-data span2'>
+    <div class='topic-avatar span2'>
       {{#unless userDeleted}}
         <div {{bind-attr class=":contents byTopicCreator:topic-creator :trigger-expansion"}}>
           <a class="main-avatar" href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{avatar this imageSize="large"}}</a>
+
+        </div>
+      {{else}}
+        <div class="contents">
+          <i class="fa fa-trash-o deleted-user-avatar"></i>
+          <div class="names">
+            <h3 class="deleted-username">{{i18n user.deleted}}</h3>
+          </div>
+        </div>
+      {{/unless}}
+    </div>
+
+    <div class='topic-body span14'>
+      <div class='topic-meta-data'>
         <div class="names">
           <h3 {{bind-attr class="staff new_user :username"}}><a href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{{breakUp username name}}}</a></h3>
 
@@ -35,28 +49,10 @@
               <div class="user-title" {{action showPosterExpansion this}}>{{unbound user_title}}</div>
             {{/if}}
           {{/if}}
-
         </div>
+          <div class='post-info'>
+            <a href='#' class='post-date' {{bind-attr data-share-url="shareUrl"}} {{bind-attr data-post-number="post_number"}}>{{unboundAgeWithTooltip created_at}}</a>
           </div>
-      {{else}}
-        <div class="contents">
-          <i class="fa fa-trash-o deleted-user-avatar"></i>
-          <div class="names">
-            <h3 class="deleted-username">{{i18n user.deleted}}</h3>
-          </div>
-        </div>
-      {{/unless}}
-    </div>
-
-    <div class='topic-body span14'>
-      <div {{bind-attr class=":select-posts controller.multiSelect::hidden"}}>
-        <button {{action toggledSelectedPostReplies this}} {{bind-attr class="view.canSelectReplies::hidden"}}>{{i18n topic.multi_select.select_replies}}</button>
-        <button {{action toggledSelectedPost this}} class="select-post">{{view.selectPostText}}</button>
-      </div>
-
-      <div {{bind-attr class="showUserReplyTab:avoid-tab view.repliesShown::bottom-round :contents :regular view.extraClass"}}>
-        {{#unless controller.multiSelect}}
-          <div class='topic-meta-data-inside'>
             {{#if hasHistory}}
               <div class='post-info edits'>
                 {{#if can_view_edit_history}}
@@ -72,10 +68,16 @@
                 {{/if}}
               </div>
             {{/if}}
-            <div class='post-info'>
-              <a href='#' class='post-date' {{bind-attr data-share-url="shareUrl"}} {{bind-attr data-post-number="post_number"}}>{{unboundAgeWithTooltip created_at}}</a>
       </div>
+
+      <div {{bind-attr class=":select-posts controller.multiSelect::hidden"}}>
+        <button {{action toggledSelectedPostReplies this}} {{bind-attr class="view.canSelectReplies::hidden"}}>{{i18n topic.multi_select.select_replies}}</button>
+        <button {{action toggledSelectedPost this}} class="select-post">{{view.selectPostText}}</button>
       </div>
+
+      <div {{bind-attr class="showUserReplyTab:avoid-tab view.repliesShown::bottom-round :contents :regular view.extraClass"}}>
+        {{#unless controller.multiSelect}}
+
         {{/unless}}
         <div class='cooked'>{{{cooked}}}</div>
         {{#if view.showExpandButton}}

app/assets/javascripts/discourse/views/poster_expansion_view.js

@@ -20,7 +20,7 @@ Discourse.PosterExpansionView = Discourse.View.extend({
     Em.run.schedule('afterRender', function() {
       if (post) {
         var $post = $('#' + post.get('postElementId')),
-            $avatar = $('.topic-meta-data img.avatar', $post),
+            $avatar = $('.topic-avatar img.avatar', $post),
             position = $avatar.offset();
 
         if (position) {

app/assets/stylesheets/desktop/poster_expansion.scss

@@ -50,6 +50,13 @@
     }
   }
 
+  .metadata {
+    float: right;
+    max-width: 180px;
+    text-align: right;
+    margin-top: 5px;
+  }
+
   .bottom {
     clear: both;
     padding-top: 10px;
@@ -85,10 +92,7 @@
       float: left;
     }
 
-    .metadata {
-      float: right;
-      max-width: 180px;
-    }
+
 
     h2 {
       line-height: 12px;

app/assets/stylesheets/desktop/topic-post.scss

@@ -49,12 +49,11 @@ h1 .topic-statuses .topic-status i {
     border-top: none;
   }
 
-
 .reply-to-tab {
   position: absolute;
   right: 330px;
   z-index: 400;
-  padding: 10px 6px 5px;
+  padding: 13px 6px 5px;
   border-top: 1px solid scale-color($primary, $lightness: 90%);
   font-size: 12px;
   color: scale-color($primary, $lightness: 50%);
@@ -66,14 +65,6 @@ h1 .topic-statuses .topic-status i {
   }
 }
 
-
-.topic-meta-data-inside {
-  float: right;
-  margin-top: -30px;
-  float: right;
-  font-size: 12px;
-}
-
 .gutter {
   .reply-new {
     .discourse-no-touch & {
@@ -218,7 +209,6 @@ nav.post-controls {
   h1, h2, h3 {margin: 10px 0;}
   a.mention {background: scale-color($primary, $lightness: 90%);}
   &.bottom {
-    .topic-meta-data {padding-left: 13px;}
     &.hidden {display: block; opacity: 0; }
 
   }
@@ -227,7 +217,6 @@ nav.post-controls {
 
     margin-left: 66px;
     max-width: 713px;
-    .topic-meta-data {padding-left: 13px;}
 
     @include medium-width {
     margin-left: 59px;
@@ -239,7 +228,10 @@ nav.post-controls {
     }
   }
   &.top.span14 {padding-left: 0;}
-  .topic-body, .topic-meta-data {border: none;}
+    .topic-body, .topic-avatar {border: none;}
+    .topic-avatar {padding-left: 15px;}
+    .post-date {color: scale-color($primary, $lightness: 50%);}
+    .fa-arrow-up {margin-left: 5px;}
     .row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;}
     .reply:first-of-type .row {border-top: none;}
 
@@ -252,28 +244,16 @@ nav.post-controls {
   &.bottom { margin-top: -11px;}
   .topic-meta-data {
     position: relative;
-    .avatar {
-      margin-top: -10px;
-    }
   }
   .topic-meta-data h5 {
     position: absolute;
-    left: 70px;
-    top: 4px;
     z-index: 1;
     font-size: 13px;
-    width: 300px;
     a {
       font-weight: bold;
       color: scale-color($primary, $lightness: 30%);
     }
   }
-  .topic-meta-data-inside {
-    margin: -15px 0 0 0;
-    color: scale-color($primary, $lightness: 50%);
-    a {color: scale-color($primary, $lightness: 50%);}
-  }
-  .topic-meta-data {padding-top: 20px;}
   .arrow {color: scale-color($primary, $lightness: 50%);}
 }
 
@@ -382,7 +362,7 @@ a.star {
     .number, i {
       color: $primary;
     }
-    .avatar + a {
+    .avatar  a {
       float: left;
     }
   }
@@ -557,77 +537,6 @@ iframe {
 
 }
 
-.topic-meta-data {
-  margin-bottom: 10px;
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
-  padding-top: 30px;
-  width: 92px;
-
-  .names {
-    position: absolute;
-    left: 66px;
-    top: 10px;
-    width: 400px;
-    z-index: 1;
-    @include medium-width {
-      left: 60px;
-    }
-
-    @include small-width {
-      left: 55px;
-    }
-  }
-
-  .names, .user-title {
-    display: inline;
-    font-size: 13px;
-  }
-
-  .main-avatar img {
-    width: 45px;
-    height: 45px;
-    position: absolute;
-    top: 16px;
-  }
-
-  .contents {
-
-    a {
-      font-weight: normal;
-      line-height: 1.3;
-    }
-
-    .username a {
-      font-weight: bold;
-      color: scale-color($primary, $lightness: 20%);
-      font-size: 13px;
-    }
-
-    .new-user a {
-      color: scale-color($primary, $lightness: 60%);
-    }
-
-    a.user-group {
-      color: scale-color($primary, $lightness: 50%);
-      width: 100%;
-    }
-
-    h3 a {
-      width: auto;
-    }
-
-    h3.full-name {
-      font-weight: normal;
-      font-size: 12px;
-      margin-top: 2px;
-      a {color: $primary;}
-    }
-  }
-
-  h3 { display: inline; }
-
-}
-
 .open >.dropdown-menu {
   display: block;
 }
@@ -652,7 +561,6 @@ iframe {
 
 .contents .cooked {
   margin-right: 30px;
-  margin-top: 20px;
   word-wrap: break-word;
 
   h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; }
@@ -729,16 +637,6 @@ iframe {
   background-color: scale-color($highlight, $lightness: 60%);
 }
 
-.topic-meta-data {
-  h3 {
-    font-size: 15px;
-    margin-top: 5px;
-    overflow: hidden;
-    line-height: 1.2em;
-  }
-}
-
-
 .user-title {
   margin-top: 5px;
   color: $primary;
@@ -805,7 +703,7 @@ blockquote { /* solo quotes */
 
 .gutter {
   float: left;
-  margin-top: 12px;
+  margin-top: 15px;
       ul {margin: 0;}
       padding-left: 10px;
 
@@ -837,7 +735,7 @@ blockquote { /* solo quotes */
   float: left;
   position: relative;
   border-top: 1px solid scale-color($primary, $lightness: 90%);
-  padding: 20px 0 15px 0;
+  padding: 12px 0 15px 0;
   &.highlighted {
     background-color: scale-color($tertiary, $lightness: 85%);
   }
@@ -845,6 +743,10 @@ blockquote { /* solo quotes */
     max-width: 100%;
   }
 }
+.topic-avatar {
+ border-top: 1px solid scale-color($primary, $lightness: 90%);
+ padding-top: 16px;
+}
 
 .bottom-round.contents.regular {
   -webkit-transition: background-color .25s linear;
@@ -1042,7 +944,6 @@ blockquote { /* solo quotes */
   }
   article.boxed {
     position: relative;
-    line-height: 21px;
 
     .select-posts {
       position: absolute;
@@ -1091,3 +992,36 @@ a.attachment:before {
 .private_message .gutter:before {
     content: "\f0e0";
 }
+
+
+ .names {
+   float: left;
+   .username {
+     a {
+       font-size: 13px;
+       color: scale-color($primary, $lightness: 20%);
+     }
+   }
+ }
+
+ .topic-meta-data {
+   margin-bottom: 10px;
+
+   &:after {
+       visibility: hidden;
+      display: block;
+      font-size: 0;
+      content: " ";
+      clear: both;
+      height: 0;
+   }
+
+   .post-info  {
+     display: inline-block;
+     float: right;
+     font-size: 12px;
+     margin-top: 1px;
+     a {color: scale-color($primary, $lightness: 50%);}
+   }
+
+ }

app/assets/stylesheets/desktop/topic.scss

@@ -1,8 +1,3 @@
-.post-info a {
-  color: scale-color($primary, $lightness: 60%);
-}
-
-
 .post-actions {
   @include unselectable;
   clear: both;
@@ -18,10 +13,6 @@
   margin-top: 20px;
 }
 
-.post-info  {
-  display: inline-block;
-}
-
 .edits {margin-right: 5px;}
 
 #topic-title {

app/assets/stylesheets/mobile/discourse.scss

@@ -30,21 +30,20 @@ body {
   }
   #main {
     .fa-star.starred {
-      color: $highlight;
+      color: $danger;
     }
     a.star {
       display: inline-block;
       font-size: 15px;
       line-height: 1;
-      color: $primary;
-      margin-right: 5px;
+      color: scale-color($primary, $lightness: 75%);
+      margin-right: 3px;
       &:before {
         font-family: "FontAwesome";
         content: "\f005";
       }
       &.starred {
-        color: #fe1;
-        text-shadow: 0 0 3px rgba($primary, 0.5);
+        color: $danger;
         @include hover {
           opacity: 1;
           &:before {
@@ -104,7 +103,6 @@ blockquote {
   margin: 0;
   padding: 0;
   .topic-status {
-    padding: 5px 2px 0 0;
     margin: 0;
     display: inline-block;
     i {

app/assets/stylesheets/mobile/header.scss

@@ -85,8 +85,8 @@
       position: relative;
       color: scale-color($primary, $lightness: 75%);
       background-color: $secondary;
+      border: 1px solid scale-color($primary, $lightness: 90%);
       cursor: default;
-      @include box-shadow((6px 0 6px -6px rgba($primary, 0.2), -6px 0 6px -6px rgba($primary, 0.2), inset 0 13px 13px -13px rgba($primary, 0.1)));
       &:after {
         display: block;
         position: absolute;
@@ -96,7 +96,7 @@
         width: 100%;
         height: 0;
         content: "";
-        border-top: 1px solid scale-color($primary, $lightness: 90%);
+        border-top: 1px solid $secondary;
       }
     }
     [class^="fa fa-"] {

app/assets/stylesheets/mobile/topic-list.scss

@@ -69,6 +69,7 @@
     line-height: 1.25;
     text-align: left;
     vertical-align: middle;
+    color: scale-color($primary, $lightness: 50%);
     &:first-of-type {
       padding-left: 5px;
     }
@@ -88,12 +89,12 @@
     }
   }
   td {
-    color: $primary;
     font-size: 14px;
   }
   .main-link {
     font-size: 16px;
-
+      a {color: $primary;}
+      a:visited {color: scale-color($primary, $lightness: 50%);}
     i.score {
       color: $success;
       cursor: pointer;
@@ -311,7 +312,7 @@
     float: left;
   }
   .category-dropdown-button {
-    padding: 4px 10px 3px 8px;
+    padding: 4px 10px 4px 8px;
     border-left: 1px solid rgba(0, 0, 0, 0.15);
     font-size: 16px;
     width: 10px;
@@ -393,7 +394,7 @@ span.posted {
   margin: 1px 0 0;
   list-style: none;
   background-color: $secondary;
-  border: 1px solid scale-color($primary, $lightness: 90%);;
+  border: 1px solid scale-color($primary, $lightness: 90%);
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@@ -413,9 +414,9 @@ span.posted {
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
-  color: $secondary;
+  color: $tertiary;
   text-decoration: none;
-  background-color: $tertiary;
+  background-color: scale-color($tertiary, $lightness: 75%);
 }
 .open > .dropdown-menu {
   display: block;
@@ -434,7 +435,7 @@ ol.category-breadcrumb {
   display: block;
   float: left;
   list-style: none;
-  margin: 0 10px 0 0;
+  margin: 5px 10px 0 0;
   padding: 0;
 
   li {
@@ -449,7 +450,6 @@ ol.category-breadcrumb {
   position: absolute;
   border: 1px solid scale-color($primary, $lightness: 90%);;
   background-color: $secondary;
-  width: 200px;
   height: 200px;
   padding: 8px 5px 0 7px;
   z-index: 100;
@@ -466,3 +466,9 @@ ol.category-breadcrumb {
     margin-bottom: 10px;
   }
 }
+
+.top-lists {margin-left: 15px;
+  #topic-list-bottom {
+    margin: 20px 0 0 0;
+  }
+}

app/assets/stylesheets/mobile/topic-post.scss

@@ -102,8 +102,8 @@ a.reply-to-tab {
 a.star {
   display: inline-block;
   float: left;
-  font-size: 1.4em !important;
-  margin-top: 3px;
+  font-size: 1.3em;
+  margin-top: 4px;
 }
 
 #main a.star.starred {
@@ -222,7 +222,7 @@ a.star {
       border-left: 1px solid scale-color($primary, $lightness: 95%);;
       padding: 0 23px;
       color: $primary;
-      background: scale-color($primary, $lightness: 75%);
+      background: scale-color($primary, $lightness: 90%);
       &:hover {
         background: scale-color($primary, $lightness: 75%);
         color: $primary;
@@ -258,6 +258,7 @@ a.star {
 
    a.badge-category, a.badge-category-parent {
     font-size: 10px;
+    vertical-align: top;
     }
 
    .title {
@@ -417,6 +418,7 @@ background-color: scale-color($danger, $lightness: 75%);
   background-color: lighten(yellow, 35%);
 }
 
+.username a { color: scale-color($primary, $lightness: 30%); }
 .new-user a {
   color: scale-color($primary, $lightness: 60%);
 }
@@ -480,5 +482,23 @@ blockquote {
 }
 
 .topic-body.highlighted {
-  background-color: scale-color($tertiary, $lightness: 40%);
+  background-color: scale-color($tertiary, $lightness: 75%);
+}
+
+.topic-avatar {
+  width: 100%;
+  float: left;
+  position: relative;
+  z-index: 2;
+}
+
+.topic-meta-data {
+  float: left;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+   .names {margin: 5px 0 0 70px; float: left;}
+   .post-info {float: right; font-size: 12px; margin: 21px 10px 0 0;
+     .edits {margin-right: 5px;}
+   }
 }

app/assets/stylesheets/mobile/topic.scss

@@ -1,12 +1,3 @@
-.topic-meta-data {
-  width: 100%;
-  h3 a {margin-left: 10px;}
-  a {float: left;
-  }
-
-}
-
-
 .post-info a {color: #aaa;}
 
 .topic-meta-data-inside {
@@ -31,6 +22,7 @@
     font-size: 1.5em;
     margin:0;
     a.edit-topic {font-size: 15px;}
+    a {color: $primary;}
   }
   .private-message-glyph { display: none; }
 }
@@ -74,7 +66,7 @@
     display: none;
   }
   border: none;
-  background-color: scale-color($secondary, $lightness: 75%);
+  background-color: scale-color($primary, $lightness: 90%);
   color: $primary;
   width: 130px;
   height: 34px;
@@ -124,7 +116,7 @@
     top: 0;
     bottom: 0;
     width: 0;
-    border-right: 1px solid scale-color($secondary, $lightness: 90%);
+    border-right: 1px solid scale-color($success, $lightness: 50%);
     background-color: scale-color($success, $lightness: 50%);
   }
 }