rearranging layout to better fit the new username placement

This commit is contained in:
Kris Aubuchon 2014-05-10 02:09:04 -04:00
parent 20ba6e4b19
commit b2675a61ba
11 changed files with 136 additions and 189 deletions

View File

@ -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}}

View File

@ -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}}

View File

@ -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) {

View File

@ -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;

View File

@ -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%);}
}
}

View File

@ -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 {

View File

@ -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 {

View File

@ -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-"] {

View File

@ -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;
}
}

View File

@ -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;}
}
}

View File

@ -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%);
}
}