Use media objects for mobile posts/comments/notifications

This commit is contained in:
Steffen van Bergerem 2015-06-04 14:10:24 +02:00 committed by Jonne Haß
parent 676c0ab611
commit cc58c66e3d
5 changed files with 36 additions and 40 deletions

View file

@ -9,12 +9,6 @@
@import "header"; @import "header";
@import "mobile/tags"; @import "mobile/tags";
.col-xs-1{
width: 50px;
padding-right: 0;
}
.col-xs-11{ width: calc(100% - 50px); }
a { a {
color: #2489ce; color: #2489ce;
text-decoration: none; text-decoration: none;
@ -44,7 +38,7 @@ h3 { margin-top: 0; }
} }
.stream_element, .stream_element,
.comments{ .comments {
overflow: auto; overflow: auto;
position: relative; position: relative;
text-align: left; text-align: left;
@ -162,6 +156,8 @@ h3 { margin-top: 0; }
padding-top: 10px; padding-top: 10px;
} }
.stream_element .media { padding: 0; }
.photo_attachments { .photo_attachments {
position: relative; position: relative;
left: 0; left: 0;
@ -602,14 +598,14 @@ select {
overflow: hidden; overflow: hidden;
} }
.stream_element{ padding: 0; } .stream_element { padding: 0; }
.notifications { .notifications {
list-style: none; list-style: none;
margin: 0; margin: 0;
clear: right; clear: right;
&, & ul{ padding: 0; } &, & ul { padding: 0; }
} }
.notifications_for_day { .notifications_for_day {
@ -755,7 +751,7 @@ form#new_user.new_user input.btn {
} }
} }
.media{ padding: 12px 0 } .media { padding: 12px 0 }
.conversation_error { .conversation_error {
color: #DF0101; color: #DF0101;
@ -857,7 +853,7 @@ form p.checkbox_select {
} }
} }
#birth-date{ #birth-date {
text-align: center; text-align: center;
select{ select{
width: 32%; width: 32%;
@ -917,7 +913,7 @@ form#update_profile_form {
padding: 3px; padding: 3px;
} }
.submit_block{ margin-bottom: 20px; } .submit_block { margin-bottom: 20px; }
} }
select#user_language, #user_auto_follow_back_aspect_id, #aspect_ids_ { select#user_language, #user_auto_follow_back_aspect_id, #aspect_ids_ {
@ -1093,7 +1089,7 @@ select#aspect_ids_ {
} }
.remove_post { opacity: 0.5; } .remove_post { opacity: 0.5; }
.remove_comment{ opacity: 0.5; } .remove_comment { opacity: 0.5; }
.center { .center {
text-align: center; text-align: center;
@ -1133,14 +1129,14 @@ select#aspect_ids_ {
word-wrap: break-word; word-wrap: break-word;
} }
#email_prefs{ #email_prefs {
.checkbox{ .checkbox{
margin: 15px 0; margin: 15px 0;
} }
} }
.small-horizontal-spacer{ margin: 15px 0; } .small-horizontal-spacer { margin: 15px 0; }
.form-control, .form-control:active, .form-control:focus{ box-shadow: none; } .form-control, .form-control:active, .form-control:focus { box-shadow: none; }
.form-control:active, .form-control:focus{ border-color: #999999; } .form-control:active, .form-control:focus { border-color: #999999; }
.tag_following_action { margin: 5px 0 10px 0; } .tag_following_action { margin: 5px 0 10px 0; }

View file

@ -24,7 +24,7 @@
.settings_visibilty { margin-left: 10px; } .settings_visibilty { margin-left: 10px; }
#profile_bio{ #profile_bio {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;

View file

@ -4,20 +4,20 @@
%li.comment{data:{guid:comment.id}, class: ("hidden" if(defined? hidden))} %li.comment{data:{guid:comment.id}, class: ("hidden" if(defined? hidden))}
.content .content
.col-xs-1 .media
= person_image_link(comment.author, size: :thumb_small) .media-left
.col-xs-11 = person_image_link(comment.author, size: :thumb_small, class: "media-object")
.from.pull-left .media-body
= person_link(comment.author) .from.pull-left
.info = person_link(comment.author)
%span .info
= timeago(comment.created_at ? comment.created_at : Time.now) %span
.remove_comment = timeago(comment.created_at ? comment.created_at : Time.now)
.pull-right .remove_comment
- if user_signed_in? && comment.author == current_user.person .pull-right
= link_to(raw("<i class='entypo trash'></i>"), comment_path(comment), method: :delete, - if user_signed_in? && comment.author == current_user.person
data: { confirm: "#{t('are_you_sure')}" }, class: "remove") = link_to(raw("<i class='entypo trash'></i>"), comment_path(comment), method: :delete,
.clearfix data: { confirm: "#{t('are_you_sure')}" }, class: "remove")
%div{class: direction_for(comment.text)} %div{class: direction_for(comment.text)}
= comment.message.markdownified = comment.message.markdownified

View file

@ -16,10 +16,10 @@
%ul.notifications_for_day %ul.notifications_for_day
- notes.each do |note| - notes.each do |note|
.stream_element{:data=>{guid: note.id}, class: "#{note.unread ? 'unread' : 'read'}"} .stream_element{:data=>{guid: note.id}, class: "#{note.unread ? 'unread' : 'read'}"}
.content.from .content.from.media
.col-xs-1 .media-left
= person_image_link(note.actors.last, size: :thumb_small) = person_image_link(note.actors.last, size: :thumb_small, class: "media-object")
.col-xs-11 .media-body
= notification_message_for(note) = notification_message_for(note)
.time_notif .time_notif
= timeago(note.created_at) = timeago(note.created_at)

View file

@ -2,10 +2,10 @@
-# licensed under the Affero General Public License version 3 or later. See -# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file. -# the COPYRIGHT file.
.from .from.media
.col-xs-1 .media-left
= person_image_link(post.author, size: :thumb_small) = person_image_link(post.author, size: :thumb_small, class: "media-object")
.col-xs-11 .media-body
.pull-left .pull-left
= person_link(post.author) = person_link(post.author)