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

Use Bootstrap media objects for posts

Browse source
This commit is contained in:
Steffen van Bergerem 2015-09-19 13:53:50 +02:00
parent b40d5362cf
commit bd73214219
12 changed files with 135 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

@ -1,17 +0,0 @@
.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,9 +19,6 @@
line-height: $font-size-base;
}
}
.bd {
padding-left: 10px;
}
}
.near-from {
color: $text-grey;

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

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

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

@ -12,13 +12,15 @@
{{#if loggedIn}}
<div class="comment media new_comment_form_wrapper {{#unless commentsCount}} hidden {{/unless}}">
<div class="media-object media-left">
{{#with current_user}}
<a href="/people/{{guid}}" class="img">
<a href="/people/{{guid}}">
{{{personImage this}}}
</a>
{{/with}}
</div>
<div class="bd">
<div class="media-body">
<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"}}" />
<div class="submit_button">

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

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

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

@ -1,9 +1,10 @@
{{#if likesCount}}
<div class="comment">
<div class="media">
<div class="media-object media-left">
<i class="entypo-heart"></i>
</div>
<div class="bd">
<div class="media-body">
{{#unless likes_fetched}}
<a href="#" class="expand_likes grey">
{{t "stream.likes" count=likesCount}}
@ -19,5 +20,4 @@
{{/unless}}
</div>
</div>
</div>
{{/if}}

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

@ -1,5 +1,4 @@
<div class="media">
<div class="bd">
{{#if loggedIn}}
<div class="control-icons">
{{#if authorIsCurrentUser}}
@ -25,5 +24,4 @@
<img src="{{sizes.large}}" class="photo big_photo">
</a>
</div>
</div>
</div>

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

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

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

@ -2,7 +2,8 @@
<div class="col-md-12">
<div class="row">
<div id="post-info" class="col-md-8">
<div class="img pull-left">
<div class="media">
<div class="media-object media-left">
{{#if root}}
{{#linkToAuthor root.author}}
{{{personImage this "medium"}}}
@ -14,7 +15,7 @@
{{/if}}
</div>
<div class="bd">
<div class="media-body">
<span class="author">
{{#if root}}
{{#linkToAuthor root.author}}
@ -63,6 +64,7 @@
{{/unless}}
</div>
</div>
</div>
{{#unless root}}
<div id="single-post-actions" class="col-md-4" />
{{/unless}}

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

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