diff --git a/Changelog.md b/Changelog.md index 0893c75e6..02bb4adef 100644 --- a/Changelog.md +++ b/Changelog.md @@ -60,6 +60,7 @@ * Add possibility to ask for Bitcoin donations [#4375](https://github.com/diaspora/diaspora/pull/4375) * Remove posts, comments and private conversations from the mobile site. [#4408](https://github.com/diaspora/diaspora/pull/4408) [#4409](https://github.com/diaspora/diaspora/pull/4409) * Added a link to user photos and thumbnails are shown in the left side bar [#4347](https://github.com/diaspora/diaspora/issues/4347) +* Rework the single post view # 0.1.1.0 diff --git a/Gemfile b/Gemfile index 4f8b46de3..eb898ab26 100644 --- a/Gemfile +++ b/Gemfile @@ -104,6 +104,9 @@ gem 'will_paginate', '3.0.4' group :assets do + # Icons + gem 'entypo-rails' + # CSS gem 'bootstrap-sass', '2.2.2.0' diff --git a/Gemfile.lock b/Gemfile.lock index 9ce8f3b21..10e4fcec1 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -97,6 +97,8 @@ GEM railties (>= 3.2.6, < 5) warden (~> 1.2.3) diff-lcs (1.2.4) + entypo-rails (2.0.2) + railties (>= 3.1, <= 5) erubis (2.7.0) ethon (0.5.12) ffi (>= 1.3.0) @@ -441,6 +443,7 @@ DEPENDENCIES cucumber-rails (= 1.3.1) database_cleaner (= 1.1.0) devise (= 3.0.2) + entypo-rails factory_girl_rails (= 4.2.1) faraday (= 0.8.8) faraday_middleware (= 0.9.0) diff --git a/app/assets/javascripts/app/pages/single-post-viewer.js b/app/assets/javascripts/app/pages/single-post-viewer.js new file mode 100644 index 000000000..a9d29030f --- /dev/null +++ b/app/assets/javascripts/app/pages/single-post-viewer.js @@ -0,0 +1,41 @@ +app.pages.SinglePostViewer = app.views.Base.extend({ + templateName: "single-post-viewer", + + subviews : { + "#single-post-content" : "singlePostContentView", + '#single-post-interactions' : 'singlePostInteractionsView' + }, + + initialize : function(options) { + this.model = new app.models.Post({ id : options.id }); + this.model.preloadOrFetch().done(_.bind(this.initViews, this)); + this.model.interactions.fetch() //async, yo, might want to throttle this later. + this.setupLightbox() + }, + + setupLightbox : function(){ + this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox"); + this.lightbox.set({ + imageParent: '.photo_attachments', + imageSelector: 'img.stream-photo' + }); + this.$el.delegate("a.stream-photo-link", "click", this.lightbox.lightboxImageClicked); + }, + + initViews : function() { + this.singlePostContentView = new app.views.SinglePostContent({model: this.model}); + this.singlePostInteractionsView = new app.views.SinglePostInteractions({model: this.model}); + this.render(); + }, + + postRenderTemplate : function() { + if(this.model.get("title")){ + // formats title to html... + var html_title = app.helpers.textFormatter(this.model.get("title"), this.model); + //... and converts html to plain text + document.title = $('
').html(html_title).text(); + app.hovercard.deactivate() // No hovercards for now. + } + }, + +}); diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js index 0d29cd9c8..9f54f7d66 100644 --- a/app/assets/javascripts/app/router.js +++ b/app/assets/javascripts/app/router.js @@ -25,7 +25,7 @@ app.Router = Backbone.Router.extend({ }, singlePost : function(id) { - this.renderPage(function(){ return new app.pages.PostViewer({ id: id })}); + this.renderPage(function(){ return new app.pages.SinglePostViewer({ id: id })}); }, siblingPost : function(){ //next or previous diff --git a/app/assets/javascripts/app/views/comment_view.js b/app/assets/javascripts/app/views/comment_view.js index 25d4a5c52..8ed7ff48a 100644 --- a/app/assets/javascripts/app/views/comment_view.js +++ b/app/assets/javascripts/app/views/comment_view.js @@ -33,3 +33,8 @@ app.views.Comment = app.views.Content.extend({ return app.currentUser.authenticated() && (this.ownComment() || this.postOwner()) } }); + +app.views.ExpandedComment = app.views.Comment.extend({ + postRenderTemplate : function(){ + } +}); diff --git a/app/assets/javascripts/app/views/content_view.js b/app/assets/javascripts/app/views/content_view.js index 68501ad8b..cf400b033 100644 --- a/app/assets/javascripts/app/views/content_view.js +++ b/app/assets/javascripts/app/views/content_view.js @@ -76,6 +76,11 @@ app.views.StatusMessage = app.views.Content.extend({ templateName : "status-message" }); +app.views.ExpandedStatusMessage = app.views.StatusMessage.extend({ + postRenderTemplate : function(){ + } +}); + app.views.Reshare = app.views.Content.extend({ templateName : "reshare" }); diff --git a/app/assets/javascripts/app/views/hovercard_view.js b/app/assets/javascripts/app/views/hovercard_view.js index 47a808b6a..28fd274da 100644 --- a/app/assets/javascripts/app/views/hovercard_view.js +++ b/app/assets/javascripts/app/views/hovercard_view.js @@ -15,6 +15,11 @@ app.views.Hovercard = Backbone.View.extend({ this.hashtags = this.$('.hashtags'); this.person_link = this.$('a.person'); this.person_handle = this.$('p.handle'); + this.active = true; + }, + + deactivate: function() { + this.active = false; }, href: function() { @@ -22,6 +27,7 @@ app.views.Hovercard = Backbone.View.extend({ }, _mouseenterHandler: function(event) { + if(this.active == false) { return false } var el = $(event.target); if( !el.is('a') ) { el = el.parents('a'); @@ -38,6 +44,7 @@ app.views.Hovercard = Backbone.View.extend({ }, _mouseleaveHandler: function(event) { + if(this.active == false) { return false } this.show_me = false; if( this.$el.is(':visible') ) { this.$el.fadeOut('fast'); @@ -112,4 +119,4 @@ app.views.Hovercard = Backbone.View.extend({ left: p_pos.left }); } -}); \ No newline at end of file +}); diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_actions.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_actions.js new file mode 100644 index 000000000..7e066389c --- /dev/null +++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_actions.js @@ -0,0 +1,22 @@ +app.views.SinglePostActions = app.views.Feedback.extend({ + templateName: "single-post-viewer/single-post-actions", + tooltipSelector: "time", + + events: function() { + return _.defaults({ + "click .focus-comment" : "focusComment" + }, app.views.Feedback.prototype.events); + }, + + renderPluginWidgets : function() { + app.views.Base.prototype.renderPluginWidgets.apply(this); + this.$('a').tooltip({placement: 'bottom'}); + }, + + focusComment: function() { + $('.comment_stream .comment_box').focus(); + $('html,body').animate({scrollTop: $('.comment_stream .comment_box').offset().top - ($('.comment_stream .comment_box').height() + 20)}); + return false; + } + +}); diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js new file mode 100644 index 000000000..5bd99b54f --- /dev/null +++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js @@ -0,0 +1,26 @@ +app.views.SinglePostCommentStream = app.views.CommentStream.extend({ + tooltipSelector: "time, .controls a", + + postRenderTemplate: function() { + app.views.CommentStream.prototype.postRenderTemplate.apply(this) + this.$(".new_comment_form_wrapper").removeClass('hidden') + }, + + appendComment: function(comment) { + // Set the post as the comment's parent, so we can check + // on post ownership in the Comment view. + comment.set({parent : this.model.toJSON()}) + + this.$(".comments").append(new app.views.ExpandedComment({ + model: comment + }).render().el); + }, + + presenter: function(){ + return _.extend(this.defaultPresenter(), { + moreCommentsCount : 0, + showExpandCommentsLink : false, + commentsCount : this.model.interactions.commentsCount() + }) + }, +}) diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js new file mode 100644 index 000000000..155ebda80 --- /dev/null +++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js @@ -0,0 +1,38 @@ +app.views.SinglePostContent = app.views.Base.extend({ + templateName: 'single-post-viewer/single-post-content', + + subviews : { + "#single-post-actions" : "singlePostActionsView", + '#real-post-content' : 'postContentView', + ".oembed" : "oEmbedView", + ".opengraph" : "openGraphView", + ".status-message-location" : "postLocationStreamView" + }, + + initialize : function() { + this.singlePostActionsView = new app.views.SinglePostActions({model: this.model}); + this.oEmbedView = new app.views.OEmbed({model : this.model}); + this.openGraphView = new app.views.OpenGraph({model : this.model}); + this.postContentView = new app.views.ExpandedStatusMessage({model: this.model}); + }, + + postLocationStreamView : function(){ + return new app.views.LocationStream({ model : this.model}); + }, + + presenter : function() { + return _.extend(this.defaultPresenter(), { + authorIsCurrentUser : this.authorIsCurrentUser(), + showPost : this.showPost(), + text : app.helpers.textFormatter(this.model.get("text"), this.model) + }) + }, + + authorIsCurrentUser : function() { + return app.currentUser.authenticated() && this.model.get("author").id == app.user().id + }, + + showPost : function() { + return (app.currentUser.get("showNsfw")) || !this.model.get("nsfw") + } +}); diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js new file mode 100644 index 000000000..17925c0f0 --- /dev/null +++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js @@ -0,0 +1,25 @@ +app.views.SinglePostInteractions = app.views.Base.extend({ + templateName: "single-post-viewer/single-post-interactions", + tooltipSelector: ".avatar.micro", + + subviews: { + '#comments': 'commentStreamView' + }, + + initialize : function() { + this.model.interactions.on('change', this.render, this); + this.commentStreamView = new app.views.SinglePostCommentStream({model: this.model}) + }, + + presenter : function(){ + var interactions = this.model.interactions + return { + likes : interactions.likes.toJSON(), + comments : interactions.comments.toJSON(), + reshares : interactions.reshares.toJSON(), + commentsCount : interactions.commentsCount(), + likesCount : interactions.likesCount(), + resharesCount : interactions.resharesCount(), + } + }, +}); diff --git a/app/assets/stylesheets/_flash_messages.scss b/app/assets/stylesheets/_flash_messages.scss index 577d236aa..0a5827ee9 100644 --- a/app/assets/stylesheets/_flash_messages.scss +++ b/app/assets/stylesheets/_flash_messages.scss @@ -11,7 +11,6 @@ width : 100%; text-align : center; - font-weight: bold; color: #666; &.expose { @@ -23,13 +22,17 @@ @include box-shadow(0, 1px, 4px, rgba(0,0,0,0.8)); display : inline-block; - padding: 45px 12px 8px; + padding: 10px 12px; min-width: 400px; max-width: 800px; color : #fff; background-color : rgba(0,0,0,0.8); border : 1px solid rgba(255,255,255,0.7); + + font-weight: bold; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 13px; } } diff --git a/app/assets/stylesheets/_mixins.css.scss b/app/assets/stylesheets/_mixins.css.scss index b81e0309c..1e56a06d1 100644 --- a/app/assets/stylesheets/_mixins.css.scss +++ b/app/assets/stylesheets/_mixins.css.scss @@ -48,9 +48,9 @@ $default-border-radius: 3px; /* Browser compatability */ @mixin box-shadow($left, $top, $blur, $color:#000){ - -webkit-box-shadow: $left $top $blur $color; - -moz-box-shadow: $left $top $blur $color; - box-shadow: $left $top $blur $color; + -webkit-box-shadow: $left $top $blur $color; + -moz-box-shadow: $left $top $blur $color; + box-shadow: $left $top $blur $color; } @mixin linear-gradient($from, $to, $start:0%, $end:100%){ @@ -58,7 +58,7 @@ $default-border-radius: 3px; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})"; - + background-image: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to)); background-image: -moz-linear-gradient(top, $from $start, $to $end); background-image: -o-linear-gradient(top, $from $start, $to $end); @@ -66,7 +66,7 @@ $default-border-radius: 3px; @mixin horizontal-linear-gradient($from, $to, $start:0%, $end:100%){ background-image: mix($from,$to); - + background-image: -moz-linear-gradient(left, $from $start, $to $end); background-image: -o-linear-gradient(left, $from $start, $to $end); background-image: -webkit-linear-gradient(left, $from $start, $to $end); @@ -108,6 +108,9 @@ $default-border-radius: 3px; } @mixin video-overlay(){ + position: relative; + cursor: pointer; + .video-overlay { background : { color: rgba(0,0,0, .65); @@ -124,7 +127,7 @@ $default-border-radius: 3px; top : 50%; left : 10%; right : 10%; - + height: 60px; margin-top: -40px; padding: 10px 7px 10px 80px; diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index f6dfa4c8b..234b7c2f1 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -1,20 +1,16 @@ @import 'compass' -@import 'ui.css.scss' -@import '_mixins.css.scss' -@import '_flash_messages.scss' +@import 'ui' +@import '_mixins' +@import '_flash_messages' @import 'new_styles/_spinner' -@import 'sidebar.css.scss' -@import 'header.css.scss' + +@import 'sidebar' +@import 'header' +@import 'footer' +@import 'sprites' +@import 'opengraph' + @import 'profile.css.scss' - -/* ===== sprites ===== */ - -@import 'icons/*.png' -@import 'branding/*.png' -@import 'social_media_logos/*.png' -@include all-icons-sprites -@include all-branding-sprites -@include all-social_media_logos-sprites /* ====== media ====== */ .media :margin 10px @@ -496,7 +492,7 @@ form p form#update_profile_form p.checkbox_select label - :top 0 + :top 0 form p.checkbox_select label @@ -1122,47 +1118,6 @@ ul#request_result :top 2px :right 1em -footer - :width 100% - :left 0 - :bottom 0 - :color #999 - - .container - :margin - :top 4em - :padding 0 - :top 0.5em - :border - :top 1px solid #ddd - - .branding-powered_by_diaspora - :display inline-block - :margin-top 3px - :height 11px - :width 145px - - ul#footer_nav - :margin 0 - :padding 0 - :display inline-block - :float right - - > li - :display inline - :margin - :right 1em - - &.separator - :margin-left -.35em - :margin-right .65em - @include opacity(.6) - - &:last-child - :margin 0 - a - :color #777 - #signup_field :margin :top -200px @@ -1562,32 +1517,11 @@ ul#press_logos :width 100% .thumb - :position relative - :cursor pointer @include video-overlay() iframe, .thumb img :width 100% - .opengraph - :width 100% - a - :display block - :text-decoration none - :color #000 - :margin 10px 0px 10px 0px - :border-top solid 1px #DDD - :border-bottom solid 1px #DDD - :padding 10px 0px 5px 0px - :overflow hidden - - img - :margin 0px 5px 5px 0px - :float left - :max-width 155px - .og-title - :margin-bottom 5px - .conversation_participants :background :color $background @@ -1700,7 +1634,7 @@ ul#press_logos :clear right :float right :color #aaa - + .icons-users :display block :width 25px @@ -2691,11 +2625,11 @@ body #fileInfo :font-size small :text-align right - :margin 5px 2px - + :margin 5px 2px + .post_preview_button :padding 3px 9px 4px - + .post_preview :padding :top 5px @@ -2744,5 +2678,5 @@ body a#hide_location:hover @include opacity(0) :-khtml-opacity 1 - :opacity 1 + :opacity 1 :cursor pointer diff --git a/app/assets/stylesheets/bootstrap-headerfix.sass b/app/assets/stylesheets/bootstrap-headerfix.sass new file mode 100644 index 000000000..6dfdecbb2 --- /dev/null +++ b/app/assets/stylesheets/bootstrap-headerfix.sass @@ -0,0 +1,40 @@ +// A temporary fix for displaying the header in the single post view. +// Should be removed once everything uses Bootstrap. + +header + .container + width: 950px + .header-nav + span + a + font-weight: bold + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif + font-size: 13px + li + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif + font-size: 13px + + #notification_badge.active + @include border-radius(0) + + #global_search + form + input + height: 15px + color: black + + #notification_dropdown + h4 + margin: 0 + .right + a + font-weight: bold + .notification_element + font-size: 13px + .timeago + color: #aaa + text-decoration: none + border: medium none + cursor: text + .unread-setter + display: none diff --git a/app/assets/stylesheets/default.css b/app/assets/stylesheets/default.css index 4fd8a7622..d981555da 100644 --- a/app/assets/stylesheets/default.css +++ b/app/assets/stylesheets/default.css @@ -10,4 +10,6 @@ *= require vendor/facebox *= require vendor/fileuploader *= require vendor/autoSuggest -*/ \ No newline at end of file +*= require entypo-fonts +*= require entypo +*/ diff --git a/app/assets/stylesheets/entypo.css.scss b/app/assets/stylesheets/entypo.css.scss new file mode 100644 index 000000000..648b7574b --- /dev/null +++ b/app/assets/stylesheets/entypo.css.scss @@ -0,0 +1,42 @@ +.entypo { + font-family: 'entypo'; + font-style: normal; + color: black; + + &.heart:before { + content: '\2665'; + } + + &.heart-empty:before { + content: '\2661'; + } + + &.retweet:before { + content: '\e717'; + } + + &.comment:before { + content: '\e718'; + } + + &.red { + color: #A40802; + } + &.white { + color: white; + } + &.gray { + color: #aaa; + } + &.blue { + color: #3f8fba; + } + + &.large { + font-size: 2.5em; + } + + &.middle { + font-size: 1.5em; + } +} diff --git a/app/assets/stylesheets/footer.css.scss b/app/assets/stylesheets/footer.css.scss new file mode 100644 index 000000000..15d5df9d7 --- /dev/null +++ b/app/assets/stylesheets/footer.css.scss @@ -0,0 +1,46 @@ +footer { + width: 100%; + left: 0; + bottom: 0; + color: #999; + + .container { + width: 95%; + margin: 4em auto 0 auto; + padding: 0.5em 0 1em 0; + border-top: 1px solid #ddd; + } + + .branding-powered_by_diaspora { + display: inline-block; + margin-top: 3px; + height: 11px; + width: 145px; + } + + ul#footer_nav { + margin: 0; + padding: 0; + display: inline-block; + float: right; + + > li { + display: inline; + margin-right: 1em; + + &.separator { + margin-left: -.35em; + margin-right: .65em; + @include opacity(.6); + } + + &:last-child { + margin: 0; + } + } + + a { + color: #777; + } + } +} diff --git a/app/assets/stylesheets/header.css.scss b/app/assets/stylesheets/header.css.scss index f3eea7d72..cf58dc3fc 100644 --- a/app/assets/stylesheets/header.css.scss +++ b/app/assets/stylesheets/header.css.scss @@ -1,3 +1,5 @@ +body > #container { margin-top: 50px; } /* to avoid being hidden under the header in the SPV */ + body > header { @include box-shadow(0,1px,3px,rgba(0,0,0,0.9)); background: url('header-bg.png') rgb(40,35,35); @@ -7,6 +9,7 @@ body > header { height: 26px; position: fixed; width: 100%; + min-width: 620px; top: 0; left: 0; border-bottom: 1px solid #000; diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index 43444ad8b..1768491e1 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -3,11 +3,10 @@ @import 'new_styles/variables'; /* core */ -@import 'new_styles/flash_messages'; -@import 'header.css.scss'; +@import 'flash_messages'; +@import 'sprites'; @import 'new_styles/base'; -@import 'new_styles/interactions'; @import 'new_styles/viewer_nav'; /* font overrides */ @@ -20,5 +19,9 @@ @import 'new_styles/forms'; - -@include video-overlay(); +/* new SPV */ +@import 'header'; +@import 'footer'; +@import 'bootstrap-headerfix'; +@import 'opengraph'; +@import 'single-post-view'; diff --git a/app/assets/stylesheets/new_styles/_animations.scss b/app/assets/stylesheets/new_styles/_animations.scss index 3ccb0219b..3a60309be 100644 --- a/app/assets/stylesheets/new_styles/_animations.scss +++ b/app/assets/stylesheets/new_styles/_animations.scss @@ -53,28 +53,28 @@ 100% { @include opacity(0); -o-transform : scale(1.3); } } -/* flash message animations */ +/* flash message animations - header height is about 40px */ @-webkit-keyframes expose { 0% { top : -100px; } - 15% { top : 0; } - 85% { top : 0; } + 15% { top : 34px; } + 85% { top : 34px; } 100% { top : -100px; } } @-moz-keyframes expose { 0% { top : -100px; } - 15% { top : 0; } - 85% { top : 0; } + 15% { top : 34px; } + 85% { top : 34px; } 100% { top : -100px; } } @-ms-keyframes expose { 0% { top : -100px; } - 15% { top : 0; } - 85% { top : 0; } + 15% { top : 34px; } + 85% { top : 34px; } 100% { top : -100px; } } @-o-keyframes expose { 0% { top : -100px; } - 15% { top : 0; } - 85% { top : 0; } + 15% { top : 34px; } + 85% { top : 34px; } 100% { top : -100px; } } diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index 42520e3cb..4904c2987 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/app/assets/stylesheets/new_styles/_base.scss @@ -5,7 +5,6 @@ body { } body { - background-image : image_url("texture/light-bg.png"); padding : none; &.lock { @@ -33,6 +32,11 @@ a { color : $link-blue } } } +#login { + background-image : image_url("texture/light-bg.png"); + height: 100%; +} + .author-name { font-family : Roboto; color: inherit; @@ -86,7 +90,7 @@ a { color : $link-blue } display: table; position: absolute; - height: 100%; + height: 93%; width: 100%; img, diff --git a/app/assets/stylesheets/opengraph.css.scss b/app/assets/stylesheets/opengraph.css.scss new file mode 100644 index 000000000..950f72011 --- /dev/null +++ b/app/assets/stylesheets/opengraph.css.scss @@ -0,0 +1,24 @@ +.opengraph { + width: 100%; + + a { + display: block; + text-decoration: none;; + color: #000; + margin: 10px 0px 10px 0px; + border-top: solid 1px #DDD; + border-bottom: solid 1px #DDD; + padding: 10px 0px 5px 0px; + overflow: hidden; + + img { + margin: 0px 5px 5px 0px; + float: left; + max-width: 155px; + } + + .og-title { + margin-bottom: 5px; + } + } +} diff --git a/app/assets/stylesheets/single-post-view.css.scss b/app/assets/stylesheets/single-post-view.css.scss new file mode 100644 index 000000000..cd99ebafd --- /dev/null +++ b/app/assets/stylesheets/single-post-view.css.scss @@ -0,0 +1,190 @@ +#single-post-container { + padding-top: 20px; +} + +#single-post-content { + #head { + color: #aaaaaa; + font-size: 12px; + #author { + .img { + max-width: 25%; + } + .avatar {} + .bd { + padding-left: 10px; + .retweet { + i { + margin: 0 3px; + } + } + } + } + #single-post-actions { + .buttons { + position: relative; + top: 6px; + clear: right; + } + .public-info > i { + float: left; + margin: 2px 4px 0 0; + } + i.comment:hover { + color: #424242; + } + i.heart.gray:hover { + color: #a40802; + } + i.heart.red:hover { + color: #f55f5a; + } + i.retweet:hover { + color: #3f8fba; + } + time { + float: right; + margin-left: 3px; + } + a { + margin: 0 0 0 6px; + &:hover { + text-decoration: none; + } + } + } + } + border-right: solid 1px #cccccc; + padding-right: 10px; + #body { + margin-left: 20px; + padding-top: 20px; + width: auto; + .photo_attachments { + padding-bottom: 10px; + img { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 5px; + max-width: 90%; + } + } + .oembed { + background: image-url("ajax-loader2.gif") no-repeat center center; + float: left; + width: 95%; + .thumb { + @include video-overlay; + } + iframe, .thumb img { + width: 100%; + min-height: 60%; + } + } + } +} + +#single-post-interactions { + border-left: 1px solid #cccccc; + position: relative; + left: -1px; + margin-left: 0; + padding-left: 2.5%; + .comments .comment { + border-bottom: solid 1px #cccccc; + padding-top: 10px; + padding-bottom: 10px; + p { + margin: 0; + } + } + textarea { + width: 95%; + } + .new_comment_form_wrapper { + border-bottom: none; + } + a { + color: #3f8fba; + } + .timeago { + color: #aaaaaa; + text-decoration: none; + font-size: smaller; + } + .count { + width: 12.8%; + text-align: right; + i { + display: inline-block; + text-align: center; + width: 25px; + vertical-align: middle; + } + } + #reshares .count i { text-align: left; } + .persons { + margin-left: 5px; + } +} + +.comment { + &:hover { + .controls { + @include opacity(0.3); + } + } + .controls { + @include transition(opacity); + @include opacity(0); + z-index: 6; + float: right; + &:hover { + @include opacity(1); + } + .delete { + display: inline-block; + .icons-deletelabel { + height: 14px; + width: 14px; + } + } + a:hover { + text-decoration: none; + } + } + .submit_button { + input { + float: right; + } + padding-left: 12px; + width: 95%; + } + + .button.creation { + $button-border-color: #aaa; + @include border-radius(3px); + @include box-shadow(0,1px,1px,#cfcfcf); + @include transition(border); + @include button-gradient($creation-blue); + font: { + size: 12px; + } + color: #fff; + padding: 4px 9px; + min-width: 90px; + min-height: 10px; + border: 1px solid darken($button-border-color,20%); + + cursor: pointer; + white-space: nowrap; + + &:hover { + @include button-gradient-hover($creation-blue); + border: 1px solid darken($button-border-color,35%); + text-decoration: none; + } + } +} + diff --git a/app/assets/stylesheets/sprites.css.scss b/app/assets/stylesheets/sprites.css.scss new file mode 100644 index 000000000..686161f75 --- /dev/null +++ b/app/assets/stylesheets/sprites.css.scss @@ -0,0 +1,7 @@ +/* ===== sprites ===== */ +@import 'icons/*.png'; +@import 'branding/*.png'; +@import 'social_media_logos/*.png'; +@include all-icons-sprites; +@include all-branding-sprites; +@include all-social_media_logos-sprites; diff --git a/app/assets/templates/post-viewer_tpl.jst.hbs b/app/assets/templates/post-viewer_tpl.jst.hbs index 8301ac213..dada78ec9 100644 --- a/app/assets/templates/post-viewer_tpl.jst.hbs +++ b/app/assets/templates/post-viewer_tpl.jst.hbs @@ -1,16 +1,4 @@
- -
- - - - - {{t "viewer.home"}} - - - -
- -
-
-
+
+
+
diff --git a/app/assets/templates/single-post-viewer/single-post-actions_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-actions_tpl.jst.hbs new file mode 100644 index 000000000..40b234bab --- /dev/null +++ b/app/assets/templates/single-post-viewer/single-post-actions_tpl.jst.hbs @@ -0,0 +1,35 @@ +
+ + {{#unless public}} + + {{/unless}} + + + +
+ + + + + + + {{#if userCanReshare}} + + + + {{else}} + {{#if userReshare}} + + + + {{/if}} + {{/if}} +
+
diff --git a/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs new file mode 100644 index 000000000..3435cc17d --- /dev/null +++ b/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs @@ -0,0 +1,31 @@ +