nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert "Use Bootstrap media objects for posts"

Browse source 
This reverts commit bd73214219.
This commit is contained in:
Steffen van Bergerem 2015-09-24 19:36:38 +02:00
parent be67415269
commit 18c3f298c6
12 changed files with 160 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/_application.scss
View file

@ -6,6 +6,7 @@
/* core */ /* core */
@import 'media-box';
@import 'entypo'; @import 'entypo';
@import 'icons'; @import 'icons';
@import 'mentions'; @import 'mentions';

5
app/assets/stylesheets/comments.scss
View file

@ -1,11 +1,12 @@
.comment_stream { .comment_stream {
.show_comments { .show_comments {
margin-top: 5px;
border-top: 1px solid $border-grey; border-top: 1px solid $border-grey;
padding: 10px;
a { a {
color: $text-grey; color: $text-grey;
font-size: 13px; font-size: 13px;
} }
.media { margin-top: 10px; }
} }
.comments > .comment, .comment.new_comment_form_wrapper { .comments > .comment, .comment.new_comment_form_wrapper {
.avatar { .avatar {
@ -33,9 +34,11 @@
float: right; float: right;
} }
padding-left: 12px; padding-left: 12px;
width: 95%;
display: none; display: none;
} }
.comment_box { .comment_box {
width: 95%;
height: 35px; height: 35px;
resize: none; resize: none;
} }

17
app/assets/stylesheets/media-box.scss Normal file
View file

@ -0,0 +1,17 @@
.media { margin: 10px; }
.media,
.bd {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.media .img {
float: left;
margin-right: 10px;
}
.media .img img { display: block }
.media .imgEt { float: right; margin-left: 10px; }

3
app/assets/stylesheets/single-post-view.scss
View file

@ -19,6 +19,9 @@
line-height: $font-size-base; line-height: $font-size-base;
} }
} }
.bd {
padding-left: 10px;
}
} }
.near-from { .near-from {
color: $text-grey; color: $text-grey;

57
app/assets/stylesheets/stream_element.scss
View file

@ -1,5 +1,8 @@
#main_stream .stream_element, #main_stream .stream_element,
#main_stream > div > .photo { #main_stream > div > .photo {
& > .media {
margin: 0px;
}
&.deleting { &.deleting {
> .media { opacity: 0.3; } > .media { opacity: 0.3; }
.control-icons { display: none !important; } .control-icons { display: none !important; }
@ -8,43 +11,48 @@
#main_stream > div > .photo { #main_stream > div > .photo {
& > .media { & > .media {
background: $white; overflow: visible;
box-shadow: $card-shadow; > .bd {
margin: 0 0 15px; position: relative;
padding: 10px; overflow: inherit;
> .control-icons { > .control-icons {
border-radius: 4px; border-radius: 4px;
padding-left: 5px; padding-left: 5px;
position: absolute; position: absolute;
right: 20px; right: 6px;
text-align: center; text-align: center;
top: 1px; top: 1px;
}
} }
&:hover > .control-icons { background: $white; } &:hover > .bd > .control-icons { background: $white; }
} }
.thumbnail { .thumbnail {
border: none; padding: 10px;
margin: 0 0 15px;
background: $white;
border-radius: 0; border-radius: 0;
margin: 0; box-shadow: $card-shadow;
padding: 0;
img.big_photo { max-height: 200px; } img.big_photo { max-height: 200px; }
} }
} }
#main_stream .stream_element { #main_stream .stream_element {
padding: 10px;
margin-bottom: 20px;
background-color: $white; background-color: $white;
border: 1px solid $light-grey; border: 1px solid $light-grey;
box-shadow: $card-shadow; box-shadow: $card-shadow;
margin-bottom: 20px;
padding: 10px;
& > .media { & > .media {
&.shield-active .nsfw-hidden { display: none; } &.shield-active .nsfw-hidden { display: none; }
&:not(.shield-active) .nsfw-shield { display: none; } &:not(.shield-active) .nsfw-shield { display: none; }
&:not(.shield-off) .nsfw-off { display: none; } &:not(.shield-off) .nsfw-off { display: none; }
> .media-object .avatar.small { & > .img > .avatar {
height: 50px; margin-top: 5px;
width: 50px; &.small {
height: 50px;
width: 50px;
}
} }
.author-name { .author-name {
font-weight: bold; font-weight: bold;
@ -58,10 +66,10 @@
line-height: $font-size-small; line-height: $font-size-small;
} }
.likes { .likes {
margin: 10px; margin-top: 10px;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
.author-name { display: inline-block; } .author-name, .bd { display: inline-block; }
.author-name { margin-right: 3px; } .author-name { margin-right: 3px; }
.entypo-heart { .entypo-heart {
display: inline-block; display: inline-block;
@ -70,7 +78,6 @@
margin-top: -2px; margin-top: -2px;
margin-right: 5px; margin-right: 5px;
} }
.media-left { padding-right: 0; }
} }
.stream_photo { .stream_photo {
float: left; float: left;
@ -96,10 +103,10 @@
div.reshare { div.reshare {
border-left: 2px solid $border-grey; border-left: 2px solid $border-grey;
padding-left: 10px; margin-top: 3px;
& > .media .avatar { & > .media .avatar {
margin-top: 3px; margin-top: 5px;
height: 30px; height: 30px;
width: 30px; width: 30px;
} }

14
app/assets/templates/comment-stream_tpl.jst.hbs
View file

@ -12,15 +12,13 @@
{{#if loggedIn}} {{#if loggedIn}}
<div class="comment media new_comment_form_wrapper {{#unless commentsCount}} hidden {{/unless}}"> <div class="comment media new_comment_form_wrapper {{#unless commentsCount}} hidden {{/unless}}">
<div class="media-object media-left"> {{#with current_user}}
{{#with current_user}} <a href="/people/{{guid}}" class="img">
<a href="/people/{{guid}}"> {{{personImage this}}}
{{{personImage this}}} </a>
</a> {{/with}}
{{/with}}
</div>
<div class="media-body"> <div class="bd">
<form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post"> <form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
<textarea class="comment_box form-control" id="comment_text_on_{{id}}" name="text" rows="1" required placeholder="{{t "stream.comment"}}" /> <textarea class="comment_box form-control" id="comment_text_on_{{id}}" name="text" rows="1" required placeholder="{{t "stream.comment"}}" />
<div class="submit_button"> <div class="submit_button">

6
app/assets/templates/comment_tpl.jst.hbs
View file

@ -1,11 +1,11 @@
<div id="{{guid}}" class="media"> <div id="{{guid}}">
<div class="media-object media-left"> <div class="img">
{{#linkToAuthor author}} {{#linkToAuthor author}}
{{{personImage this "small" "small"}}} {{{personImage this "small" "small"}}}
{{/linkToAuthor}} {{/linkToAuthor}}
</div> </div>
<div class="media-body"> <div class="bd">
<div class="control-icons"> <div class="control-icons">
{{#if loggedIn}} {{#if loggedIn}}
{{#if canRemove}} {{#if canRemove}}

30
app/assets/templates/likes-info_tpl.jst.hbs
View file

@ -1,23 +1,23 @@
{{#if likesCount}} {{#if likesCount}}
<div class="media"> <div class="comment">
<div class="media-object media-left"> <div class="media">
<i class="entypo-heart"></i> <i class="entypo-heart"></i>
</div>
<div class="media-body"> <div class="bd">
{{#unless likes_fetched}} {{#unless likes_fetched}}
<a href="#" class="expand_likes grey"> <a href="#" class="expand_likes grey">
{{t "stream.likes" count=likesCount}} {{t "stream.likes" count=likesCount}}
</a> </a>
{{else}} {{else}}
{{#each likes}} {{#each likes}}
{{#linkToAuthor author}} {{#linkToAuthor author}}
{{{personImage this 'small' 'micro'}}} {{{personImage this 'small' 'micro'}}}
{{/linkToAuthor}} {{/linkToAuthor}}
{{/each}} {{/each}}
{{/unless}} {{/unless}}
</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}

48
app/assets/templates/photo_tpl.jst.hbs
View file

@ -1,27 +1,29 @@
<div class="media"> <div class="media">
{{#if loggedIn}} <div class="bd">
<div class="control-icons"> {{#if loggedIn}}
{{#if authorIsCurrentUser}} <div class="control-icons">
<a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}"> {{#if authorIsCurrentUser}}
<i class="entypo-trash"></i> <a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
</a> <i class="entypo-trash"></i>
{{else}} </a>
<a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}"> {{else}}
<i class="entypo-warning"></i> <a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}">
</a> <i class="entypo-warning"></i>
<a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}"> </a>
<i class="entypo-block"></i> <a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
</a> <i class="entypo-block"></i>
<a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}"> </a>
<i class="entypo-cross"></i> <a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}">
</a> <i class="entypo-cross"></i>
{{/if}} </a>
</div> {{/if}}
{{/if}} </div>
{{/if}}
<div class="thumbnail img-thumbnail"> <div class="thumbnail img-thumbnail">
<a href="{{sizes.large}}" class="photo-link gallery-picture"> <a href="{{sizes.large}}" class="photo-link gallery-picture">
<img src="{{sizes.large}}" class="photo big_photo"> <img src="{{sizes.large}}" class="photo big_photo">
</a> </a>
</div>
</div> </div>
</div> </div>

10
app/assets/templates/reshare_tpl.jst.hbs
View file

@ -2,13 +2,11 @@
<div class="media"> <div class="media">
{{#if root}} {{#if root}}
{{#with root}} {{#with root}}
<div class="media-object media-left"> <a href="/people/{{author.guid}}" class="img {{{hovercardable this}}}">
<a href="/people/{{author.guid}}" class="{{{hovercardable this}}}"> {{{personImage author 'small'}}}
{{{personImage author 'small'}}} </a>
</a>
</div>
<div class="media-body"> <div class="bd">
<div> <div>
{{#linkToAuthor author}} {{#linkToAuthor author}}
{{name}} {{name}}

90
app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs
View file

@ -2,67 +2,65 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="row"> <div class="row">
<div id="post-info" class="col-md-8"> <div id="post-info" class="col-md-8">
<div class="media"> <div class="img pull-left">
<div class="media-object media-left"> {{#if root}}
{{#linkToAuthor root.author}}
{{{personImage this "medium"}}}
{{/linkToAuthor}}
{{else}}
{{#linkToAuthor author}}
{{{personImage this "medium"}}}
{{/linkToAuthor}}
{{/if}}
</div>
<div class="bd">
<span class="author">
{{#if root}} {{#if root}}
{{#linkToAuthor root.author}} {{#linkToAuthor root.author}}
{{{personImage this "medium"}}} {{name}}
{{/linkToAuthor}} {{/linkToAuthor}}
{{else}} {{else}}
{{#linkToAuthor author}} {{#linkToAuthor author}}
{{{personImage this "medium"}}} {{name}}
{{/linkToAuthor}} {{/linkToAuthor}}
{{/if}} {{/if}}
</div> </span>
<div class="media-body"> <div class="info">
<span class="author"> {{#if public}}
<span class="post_scope" title="{{t "stream.public"}}">
<i class="entypo-globe small"></i>
</span>
{{else}}
<span class="post_scope" title="{{t "stream.limited"}}">
<i class="entypo-lock small"></i>
</span>
{{/if}}
<span class="post-time">
{{#if root}} {{#if root}}
{{#linkToAuthor root.author}} <a href="/posts/{{root.id}}">
{{name}} <time datetime="{{root.created_at}}" title="{{localTime root.created_at}}" />
{{/linkToAuthor}} </a>
{{else}} {{else}}
{{#linkToAuthor author}} <a href="/posts/{{id}}">
{{name}} <time datetime="{{created_at}}" title="{{localTime created_at}}" />
{{/linkToAuthor}} </a>
{{/if}} {{/if}}
</span> </span>
{{#if root}}
<div class="info"> {{#if root.provider_display_name}}
{{#if public}} {{t "stream.via" provider=root.provider_display_name}}
<span class="post_scope" title="{{t "stream.public"}}">
<i class="entypo-globe small"></i>
</span>
{{else}}
<span class="post_scope" title="{{t "stream.limited"}}">
<i class="entypo-lock small"></i>
</span>
{{/if}} {{/if}}
<span class="post-time"> {{else}}
{{#if root}} {{#if provider_display_name}}
<a href="/posts/{{root.id}}"> {{t "stream.via" provider=provider_display_name}}
<time datetime="{{root.created_at}}" title="{{localTime root.created_at}}" />
</a>
{{else}}
<a href="/posts/{{id}}">
<time datetime="{{created_at}}" title="{{localTime created_at}}" />
</a>
{{/if}}
</span>
{{#if root}}
{{#if root.provider_display_name}}
{{t "stream.via" provider=root.provider_display_name}}
{{/if}}
{{else}}
{{#if provider_display_name}}
{{t "stream.via" provider=provider_display_name}}
{{/if}}
{{/if}} {{/if}}
</div> {{/if}}
{{#unless root}}
<div id="single-post-moderation" />
{{/unless}}
</div> </div>
{{#unless root}}
<div id="single-post-moderation" />
{{/unless}}
</div> </div>
</div> </div>
{{#unless root}} {{#unless root}}

14
app/assets/templates/stream-element_tpl.jst.hbs
View file

@ -1,13 +1,11 @@
<div class="media {{#if showPost}} {{#if nsfw}} shield-off {{/if}} {{else}} shield-active {{/if}}"> <div class="media {{#if showPost}} {{#if nsfw}} shield-off {{/if}} {{else}} shield-active {{/if}}">
<div class="media-object media-left"> {{#with author}}
{{#with author}} <a href="/people/{{guid}}" class="img {{{hovercardable this}}}">
<a href="/people/{{guid}}" class="{{{hovercardable this}}}"> {{{personImage this}}}
{{{personImage this}}} </a>
</a> {{/with}}
{{/with}}
</div>
<div class="media-body"> <div class="bd">
{{#if loggedIn}} {{#if loggedIn}}
<div class="control-icons"> <div class="control-icons">
{{#if authorIsCurrentUser}} {{#if authorIsCurrentUser}}