From 3f3087c77f5bfa92147fc29c77d0a3f4b14a2273 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Fri, 22 Aug 2014 03:26:31 +0200 Subject: [PATCH] Port tags page to Bootstrap --- Changelog.md | 1 + .../app/views/tag_following_action_view.js | 12 +- app/assets/stylesheets/application.css.sass | 10 +- app/assets/stylesheets/comments.css.scss | 41 +++ app/assets/stylesheets/default.css.scss | 1 - app/assets/stylesheets/new-templates.css.scss | 4 + .../stylesheets/new_styles/_buttons.css.scss | 26 ++ .../stylesheets/new_styles/_interactions.scss | 230 ++----------- .../stylesheets/single-post-view.css.scss | 85 +---- app/assets/stylesheets/stream.css.scss | 6 + .../stylesheets/stream_element.css.scss | 308 +++++------------- .../stream_element_blueprint.css.scss | 288 ++++++++++++++++ app/assets/stylesheets/tag.css.scss | 4 + app/assets/stylesheets/tags.css.scss | 20 -- app/assets/templates/likes-info_tpl.jst.hbs | 2 +- .../tag_following_action_tpl.jst.hbs | 12 +- app/controllers/tags_controller.rb | 3 + app/views/people/_index.html.haml | 20 +- app/views/people/tag_index.js.erb | 2 +- .../publisher/_publisher_bootstrap.html.haml | 2 +- app/views/tags/show.haml | 47 ++- features/step_definitions/custom_web_steps.rb | 2 +- spec/integration/tag_people_spec.rb | 2 +- .../views/tag_following_action_view_spec.js | 4 +- 24 files changed, 532 insertions(+), 600 deletions(-) create mode 100644 app/assets/stylesheets/comments.css.scss create mode 100644 app/assets/stylesheets/stream.css.scss create mode 100644 app/assets/stylesheets/stream_element_blueprint.css.scss delete mode 100644 app/assets/stylesheets/tags.css.scss diff --git a/Changelog.md b/Changelog.md index 5c4fc0683..98f8ae0ba 100644 --- a/Changelog.md +++ b/Changelog.md @@ -19,6 +19,7 @@ The default for including jQuery from a CDN has changed. If you want to continue * Redesign contacts page [#5153](https://github.com/diaspora/diaspora/pull/5153) * Improve profile page design on mobile [#5084](https://github.com/diaspora/diaspora/pull/5084) * Port testsuite to RSpec 3 [#5170](https://github.com/diaspora/diaspora/pull/5170) +* Port tag stream to Bootstrap [#5138](https://github.com/diaspora/diaspora/pull/5138) ## Bug fixes * orca cannot see 'Add Contact' button [#5158](https://github.com/diaspora/diaspora/pull/5158) diff --git a/app/assets/javascripts/app/views/tag_following_action_view.js b/app/assets/javascripts/app/views/tag_following_action_view.js index fbfe2bae2..ce8dc8e30 100644 --- a/app/assets/javascripts/app/views/tag_following_action_view.js +++ b/app/assets/javascripts/app/views/tag_following_action_view.js @@ -3,9 +3,9 @@ app.views.TagFollowingAction = app.views.Base.extend({ templateName: "tag_following_action", events : { - "mouseenter .button.red_on_hover": "mouseIn", - "mouseleave .button.red_on_hover": "mouseOut", - "click .button": "tagAction" + "mouseenter .btn.followed": "mouseIn", + "mouseleave .btn.followed": "mouseOut", + "click .btn": "tagAction" }, initialize : function(options){ @@ -41,12 +41,12 @@ app.views.TagFollowingAction = app.views.Base.extend({ }, mouseIn : function(){ - this.$("input").removeClass("in_aspects"); + this.$("input").removeClass("green").addClass("btn-danger"); this.$("input").val( Diaspora.I18n.t('stream.tags.stop_following', {tag: this.model.attributes.name} ) ); }, mouseOut : function() { - this.$("input").addClass("in_aspects"); + this.$("input").removeClass("btn-danger").addClass("green"); this.$("input").val( Diaspora.I18n.t('stream.tags.following', {"tag" : this.model.attributes.name} ) ); }, @@ -59,4 +59,4 @@ app.views.TagFollowingAction = app.views.Base.extend({ app.tagFollowings.create(this.model); } } -}); \ No newline at end of file +}); diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index cbe7ee39f..376babb34 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -19,7 +19,7 @@ @import 'aspects' @import 'stream-faces' @import 'popover' -@import 'stream_element' +@import 'stream_element_blueprint' @import 'report' @import 'new_styles/_forms' @import 'tag' @@ -769,12 +769,10 @@ ul#press_logos :color $text-grey .likes - .icons-heart - :height 12px - :width 13px - :display inline-block + .entypo.heart + :font-size 16px + :line-height 16px :vertical-align top - :margin-top 3px :margin-right 5px .bd diff --git a/app/assets/stylesheets/comments.css.scss b/app/assets/stylesheets/comments.css.scss new file mode 100644 index 000000000..681bca066 --- /dev/null +++ b/app/assets/stylesheets/comments.css.scss @@ -0,0 +1,41 @@ +.comment_stream { + .show_comments { + margin-top: 5px; + border-top: 1px solid $border-grey; + a { + color: $text-grey; + font-size: 13px; + } + .media { margin-top: 10px; } + } + .comments > .comment { + .avatar { + height: 30px; + width: 30px; + } + margin: 0; + border-top: 1px dotted $border-grey; + &.no-border { border: none; } + padding: 10px 0; + .comment-content p:last-of-type { margin-bottom: 0; } + + .info { + margin-top: 5px; + font-size: 11px; + line-height: 11px; + } + + >.highlighted { + border-left: 3px solid $blue; + padding-left: 3px; + } + } + .submit_button { + input { + float: right; + } + padding-left: 12px; + width: 95%; + } + .comment_box { width: 95%; } +} diff --git a/app/assets/stylesheets/default.css.scss b/app/assets/stylesheets/default.css.scss index d981555da..5dd0f979a 100644 --- a/app/assets/stylesheets/default.css.scss +++ b/app/assets/stylesheets/default.css.scss @@ -3,7 +3,6 @@ *= require lightbox *= require autocomplete *= require mentions -*= require tags *= require hovercard *= require vendor/interim-bootstrap diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index e98b7bc6b..98b38fdc3 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -10,6 +10,7 @@ @import 'new_styles/base'; @import 'new_styles/buttons'; +@import 'new_styles/interactions'; /* font overrides */ @import 'new_styles/typography'; @@ -62,6 +63,9 @@ /* stream */ @import 'tag'; @import 'stream-faces'; +@import 'stream'; +@import 'stream_element'; +@import 'comments'; /* contacts */ @import 'contacts'; diff --git a/app/assets/stylesheets/new_styles/_buttons.css.scss b/app/assets/stylesheets/new_styles/_buttons.css.scss index 2b0817086..b8257ca8f 100644 --- a/app/assets/stylesheets/new_styles/_buttons.css.scss +++ b/app/assets/stylesheets/new_styles/_buttons.css.scss @@ -29,3 +29,29 @@ } .btn.delete { color: desaturate($red,10%); } + +// TODO remove this when everything has been ported to Bootstrap +.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/new_styles/_interactions.scss b/app/assets/stylesheets/new_styles/_interactions.scss index a0e12d638..63858cb6b 100644 --- a/app/assets/stylesheets/new_styles/_interactions.scss +++ b/app/assets/stylesheets/new_styles/_interactions.scss @@ -1,224 +1,32 @@ -@import '../mixins'; - -#post-info { - text-align: center; - z-index: 10; - - margin-top: -33px; - - #post-info-container { - @include info-container(); - } - - .well { - -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); - -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); - box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); - - margin: 5px; - padding: 5px; - text-align: left; - - max-height: 20px; - overflow: hidden; - - background: { - color: #222; - color: rgba(0,0,0,0.2); - } - - border: { - left: 1px solid #444; - right: 1px solid #444; - bottom: 1px solid #555; - top: 1px solid #111; - } - - .img { - margin-right: 5px; - } - - i { - margin-top: 1px; - } - - .avatar { - @include border-radius(); - margin-right: 0; - } - } - - #post-comments { - text-align: left; - padding-top: 0; - } - - #new-post-comment-container { - position: relative; - - padding: 10px; - - textarea{ - height: 18px; - width: 318px; - padding: 4px; - } - - form { - margin-bottom: 0; - } - - .btn { - position: absolute; - right: 10px; - bottom: 10px; - font-size: 11px; - line-height: 16px; - padding: 5px 9px; - } - } -} - -.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 { - color: white; - text-shadow: 1px 1px black; - text-rendering: optimizelegibility; -} - -.post-comment { - -moz-box-shadow: 0 1px 2px -2px #999; - -webkit-box-shadow: 0 1px 2px -2px #999; - box-shadow: 0 1px 2px -2px #999; - - border-bottom: 1px solid #333; - - p:last-child { - margin-bottom: 0; - } - - &:last-child { - box-shadow: none; - border-bottom: none; - } - - padding: 10px; - padding-right: 40px; - margin: 0px; - - .avatar { - @include border-radius(); - - border: { - top: 1px solid #222; - right: 1px solid #444; - left: 1px solid #444; - bottom: 1px solid $text-dark-grey; - } - } - - text-shadow: 0 1px 3px rgba(0,0,0,0.3); - - a:hover { - color: #99CCFF - } - - time { - color: $text-dark-grey; - font-size: smaller; - } - +.stream_container, #single-post-interactions { .controls { - @include transition(opacity); - @include opacity(0); - + z-index: 6; float: right; - margin-right: -40px; - - a { - padding: 3px 5px; - &:hover { - text-decoration: none; + .comment_report { + display: inline-block; + .icons-report { + height: 14px; + width: 14px; } } - } - - &:hover { - .controls { - @include opacity(0.4); - - &:hover { - @include opacity(1); + .delete { + display: inline-block; + .icons-deletelabel { + height: 14px; + width: 14px; } } - } -} - -.permalink-wrapper, -#user-controls { - height: 30px; - - .avatar { - vertical-align: top; - height: 27px; - width: 27px; - } - - a { - @include opacity(0.6); - @include transition(opacity, 0.3s); - - position: relative; - - z-index: 20; - - padding: 1px 4px 0; - margin-right: 5px; - line-height: 24px; - - i { - padding: 0; - margin: 0; - } - - color: #fff; - - &.label { - @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9)); - background-color: #000; - } - - &.comment { - padding-right: 5px; - margin-right: 0; - } - - &:hover { - @include opacity(1); + & > a:hover { text-decoration: none; } } -} -/* stream specific wrapper */ -#stream-interactions { - position : fixed; - top : 0; - bottom : 0; - overflow-y : auto; + .stream_element, .comment, .stream_element:hover .comment { + .controls > a { @include opacity(0); } - #post-info { - text-align : left; - margin-top : 10px; - } - - #user-controls { - padding : 7px; + &:hover .controls { + & > a { @include opacity(0.3); } + & > a:hover { @include opacity(1); } + } } } - -.permalink-wrapper { - float : right; - margin-top : 9px; - margin-right : -5px; - margin-left : 4px; -} diff --git a/app/assets/stylesheets/single-post-view.css.scss b/app/assets/stylesheets/single-post-view.css.scss index cf6ffa3d6..2fbb51001 100644 --- a/app/assets/stylesheets/single-post-view.css.scss +++ b/app/assets/stylesheets/single-post-view.css.scss @@ -135,9 +135,11 @@ padding-left: 15px; .comments .comment { + border-top: none; border-bottom: solid 1px #cccccc; padding-top: 10px; padding-bottom: 10px; + margin: 10px; p { margin: 0 0 1em 0; word-wrap: break-word; @@ -145,6 +147,10 @@ margin-bottom: 0; } } + .avatar { + height: 35px; + width: 35px; + } } .no_comments { padding-top: 10px; @@ -155,18 +161,12 @@ margin-bottom: 30px; } - textarea { - width: 95%; - } .new_comment_form_wrapper { border-bottom: none; } a { color: #3f8fba; } - .timeago { - font-size: smaller; - } .count { i { display: inline-block; @@ -186,76 +186,3 @@ margin-bottom: 8px; } } - -.comment { - &:hover { - .controls { - @include opacity(0.3); - } - } - - >.highlighted { - border-left: 3px solid $blue; - padding-left: 3px; - } - - .controls { - @include transition(opacity); - @include opacity(0); - z-index: 6; - float: right; - &:hover { - @include opacity(1); - } - .comment_report { - display: inline-block; - .icons-report { - height: 14px; - width: 14px; - } - } - .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/stream.css.scss b/app/assets/stylesheets/stream.css.scss new file mode 100644 index 000000000..ca012bfe3 --- /dev/null +++ b/app/assets/stylesheets/stream.css.scss @@ -0,0 +1,6 @@ +.stream_container { + #publisher { + margin-bottom: 30px; + } + .well#ignore-info { text-align: center; } +} diff --git a/app/assets/stylesheets/stream_element.css.scss b/app/assets/stylesheets/stream_element.css.scss index 249bab9db..f40c606bf 100644 --- a/app/assets/stylesheets/stream_element.css.scss +++ b/app/assets/stylesheets/stream_element.css.scss @@ -1,251 +1,91 @@ -.stream { - audio { - display: block; - margin: 5px 0; - } +#main_stream .stream_element { + padding: 10px; + border-bottom: 1px solid $border-grey; - .stream_element { - border-bottom: 1px solid $border-grey; - - h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; - word-break: break-word; + & > .media { + margin: 0; + & > .img > .avatar.small { + height: 50px; + width: 50px; } - - p { - &:last-child { - padding-bottom: 0; - margin-bottom: 0; + .author { + font-weight: bold; + margin-bottom: 4px; + unicode-bidi: bidi-override; + } + .feedback { + margin-top: 5px; + font-size: 11px; + line-height: 11px; + } + .likes { + margin-top: 10px; + font-size: 12px; + line-height: 16px; + .bd { display: inline-block; } + .entypo.heart { + display: inline-block; + font-size: 16px; + vertical-align: top; + margin-top: -2px; + margin-right: 5px; } } - - &:first-child { - border-top: none; - } - - ul { - li { - list-style: disc; - } - } - .youtube-player, .vimeo-player { border: none; height: 304px; width: 410px; } - } -} - -.stream_element { - &.highlighted { border-left: 3px solid $blue; } - - a.author { - font-weight: bold; - unicode-bidi: bidi-override; + .photo_attachments { + margin-top: 7px; + padding-bottom: 10px; + text-align: center; + img { + &.big_stream_photo { + display: block; + max-width: 90%; + } + &.thumb_small { + display: inline; + max-width: 50px; + max-height: 50px; + } + margin-left: auto; + margin-right: auto; + padding-bottom: 5px; + } + } + .stream_photo { + float: left; + margin-top: 6px; + } + .status-message-location .near-from { + font-size: 11px; + color: $text-grey; + } + .grey { color: $text-grey; } + .post-content p:last-of-type { margin-bottom: 0; } + .nsfw-shield { + color: $text-grey; + padding: 5px 10px; + background-color: $background-grey; + border: 1px solid $border-grey; + border-radius: 3px; + } } - .photo_attachments { - margin-top: 7px; - } - - img { - max-width: 100%; - } - - .bd { - > img { + .reshare > .media { + border-left: 2px solid $border-grey; + .avatar { height: 30px; width: 30px; - float: left; - margin-right: 10px; } } - .info { - font-size: 11px; - } - - .stream_photo { - float: left; - margin-top: 6px; - } - - .controls:first-child { - .control_icon { - @include transition(opacity); - @include opacity(0); - } - } - - &:hover { - .controls:first-child { - .control_icon { - @include opacity(0.3); - } - .control_icon:hover { - @include opacity(1); - } - } - } -} - -.status_message_show { - .comment_box { - width: 653px; - margin-bottom: 5px; - } -} - -.post_scope { - cursor: default; -} - -.stream_element .reshare, -.comment { - .avatar { - width: 30px; - height: 30px; - } -} - -.likes, -.stream_element div.reshare { - font-size: 12px; -} - -.comment, .stream_element { - >.highlighted { - border-left: 3px solid $blue; - padding-left: 3px; - } -} - -.comment.no-border { - &.media { - border: none; - padding: 0; - } -} - -.comment { - &.media { - margin-left: 0; - margin-right: 0; - - border-top: 1px dotted #aaa; - - padding-top: 10px; - - .controls { - .comment_delete, .comment_report { - @include transition(opacity); - @include opacity(0); - } - } - &:hover { - .controls { - .comment_delete, .comment_report { - @include opacity(0.3); - } - .comment_delete:hover, .comment_report:hover { - @include opacity(1); - } - } - } - } - - .youtube-player, .vimeo-player { - border: none; - height: 250px; - width: 400px; - } - - .ltr { - ol, ul { - padding-left: 2em; - li { - padding: 0px; - border: none; - list-style: inherit; - } - } - } - - .right { - right: 4px; - } -} - -.stream_element { - .new_comment_form_wrapper { - width: 415px; - } -} - -.stream_element .bd { - & > .likes, & > .comments { - margin-right: 15px; - } -} - -.status-message-location { - .near-from { - font-size: smaller; - color: #aaa; - width: 100%; - float: left; - } - .address { - font-size: 11px; - color: #bbb; - } -} - -.stream_element .post-content .reshare { - border-left: 2px solid $border-grey; -} - -.stream_element.loaded .media .bd .feedback { - clear: both; -} - -form.new_comment { - input { - display: none; - } - - textarea { - height: 21px; - font-size: 12px; - width: 364px; - } - - &.open { - input { - display: block; - } - } -} - -.stream_element { - .subject { - font-size: 13px; - font-weight: bold; - color: #444; - overflow: hidden; - white-space: nowrap; - } - - .last_author { - font-size: 12px; - color: $text-dark-grey; - } - .collapsible { overflow: hidden; position: relative; - + p { margin: 0 0 0.8em; } @@ -285,4 +125,14 @@ form.new_comment { } } } + + &.highlighted { + padding-left: 8px; + border-left: 3px solid $creation-blue; + } + + &.post_preview { + background-color: lighten($creation-blue,45%); + border: 1px solid $creation-blue; + } } diff --git a/app/assets/stylesheets/stream_element_blueprint.css.scss b/app/assets/stylesheets/stream_element_blueprint.css.scss new file mode 100644 index 000000000..0867dc5c4 --- /dev/null +++ b/app/assets/stylesheets/stream_element_blueprint.css.scss @@ -0,0 +1,288 @@ +.stream { + audio { + display: block; + margin: 5px 0; + } + + .stream_element { + border-bottom: 1px solid $border-grey; + + h1, h2, h3, h4, h5, h6 { + word-wrap: break-word; + word-break: break-word; + } + + p { + &:last-child { + padding-bottom: 0; + margin-bottom: 0; + } + } + + &:first-child { + border-top: none; + } + + ul { + li { + list-style: disc; + } + } + + .youtube-player, .vimeo-player { + border: none; + height: 304px; + width: 410px; + } + } +} + +.stream_element { + &.highlighted { border-left: 3px solid $blue; } + + a.author { + font-weight: bold; + unicode-bidi: bidi-override; + } + + .photo_attachments { + margin-top: 7px; + } + + img { + max-width: 100%; + } + + .bd { + > img { + height: 30px; + width: 30px; + float: left; + margin-right: 10px; + } + } + + .info { + font-size: 11px; + } + + .stream_photo { + float: left; + margin-top: 6px; + } + + .controls:first-child { + .control_icon { + @include transition(opacity); + @include opacity(0); + } + } + + &:hover { + .controls:first-child { + .control_icon { + @include opacity(0.3); + } + .control_icon:hover { + @include opacity(1); + } + } + } +} + +.status_message_show { + .comment_box { + width: 653px; + margin-bottom: 5px; + } +} + +.post_scope { + cursor: default; +} + +.stream_element .reshare, +.comment { + .avatar { + width: 30px; + height: 30px; + } +} + +.likes, +.stream_element div.reshare { + font-size: 12px; +} + +.comment, .stream_element { + >.highlighted { + border-left: 3px solid $blue; + padding-left: 3px; + } +} + +.comment.no-border { + &.media { + border: none; + padding: 0; + } +} + +.comment { + &.media { + margin-left: 0; + margin-right: 0; + + border-top: 1px dotted #aaa; + + padding-top: 10px; + + .controls { + .comment_delete, .comment_report { + @include transition(opacity); + @include opacity(0); + } + } + &:hover { + .controls { + .comment_delete, .comment_report { + @include opacity(0.3); + } + .comment_delete:hover, .comment_report:hover { + @include opacity(1); + } + } + } + } + + .youtube-player, .vimeo-player { + border: none; + height: 250px; + width: 400px; + } + + .ltr { + ol, ul { + padding-left: 2em; + li { + padding: 0px; + border: none; + list-style: inherit; + } + } + } + + .right { + right: 4px; + } +} + +.stream_element { + .new_comment_form_wrapper { + width: 415px; + } +} + +.stream_element .bd { + & > .likes, & > .comments { + margin-right: 15px; + } +} + +.status-message-location { + .near-from { + font-size: smaller; + color: #aaa; + width: 100%; + float: left; + } + .address { + font-size: 11px; + color: #bbb; + } +} + +.stream_element .post-content .reshare { + border-left: 2px solid $border-grey; +} + +.stream_element.loaded .media .bd .feedback { + clear: both; +} + +form.new_comment { + input { + display: none; + } + + textarea { + height: 21px; + font-size: 12px; + width: 364px; + } + + &.open { + input { + display: block; + } + } +} + +.stream_element { + .subject { + font-size: 13px; + font-weight: bold; + color: #444; + overflow: hidden; + white-space: nowrap; + } + + .last_author { + font-size: 12px; + color: $text-dark-grey; + } + + .collapsible { + overflow: hidden; + position: relative; + + p { + margin: 0 0 0.8em; + } + p:last-of-type { + margin: 0; + } + + .expander { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 30px; + text-align: center; + line-height: 48px; + font-size: .8em; + color: $grey; + text-shadow: 0 0 7px #FFF; + cursor: pointer; + border-bottom: 2px solid $border-grey; + @include border-radius(0, 0, 3px, 3px); + @include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%); + background-color: transparent; + } + + .oembed { + background: image-url('ajax-loader2.gif') no-repeat center center; + float: left; + width: 100%; + + .thumb { + @include video-overlay(); + } + + iframe, .thumb img { + width: 100%; + } + } + } +} diff --git a/app/assets/stylesheets/tag.css.scss b/app/assets/stylesheets/tag.css.scss index 3c5b54cc5..1ee8427bb 100644 --- a/app/assets/stylesheets/tag.css.scss +++ b/app/assets/stylesheets/tag.css.scss @@ -20,3 +20,7 @@ h1.tag { &:hover { border-bottom: 1px solid $border-dark-grey; } } } + +#tags_show { + .span3 { border-right: 1px solid $border-grey; } +} diff --git a/app/assets/stylesheets/tags.css.scss b/app/assets/stylesheets/tags.css.scss deleted file mode 100644 index 189531472..000000000 --- a/app/assets/stylesheets/tags.css.scss +++ /dev/null @@ -1,20 +0,0 @@ -// Copyright (c) 2010-2011, Diaspora Inc. This file is -// licensed under the Affero General Public License version 3 or later. See -// the COPYRIGHT file. - -.tags_show { - .side_stream { - .stream_element { - .add_contact { - display: inline; - float: right; - font-size: 10px; - .button { - padding: 5px 1px 4px 1px; - margin-right: 3px; - font-size: 10px; - } - } - } - } -} diff --git a/app/assets/templates/likes-info_tpl.jst.hbs b/app/assets/templates/likes-info_tpl.jst.hbs index 0af32bb90..c9cfceee1 100644 --- a/app/assets/templates/likes-info_tpl.jst.hbs +++ b/app/assets/templates/likes-info_tpl.jst.hbs @@ -1,7 +1,7 @@ {{#if likesCount}}
-
+
{{#unless likes_fetched}} diff --git a/app/assets/templates/tag_following_action_tpl.jst.hbs b/app/assets/templates/tag_following_action_tpl.jst.hbs index 606f6778f..134996113 100644 --- a/app/assets/templates/tag_following_action_tpl.jst.hbs +++ b/app/assets/templates/tag_following_action_tpl.jst.hbs @@ -1,10 +1,12 @@ -
+
-
-
\ No newline at end of file +
diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb index 9cea03112..0ac704c32 100644 --- a/app/controllers/tags_controller.rb +++ b/app/controllers/tags_controller.rb @@ -6,6 +6,9 @@ class TagsController < ApplicationController skip_before_action :set_grammatical_gender before_action :ensure_page, :only => :show + layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }, :only => [:show] + use_bootstrap_for :show + helper_method :tag_followed? respond_to :html, :only => [:show] diff --git a/app/views/people/_index.html.haml b/app/views/people/_index.html.haml index 0c90823e6..82c069364 100644 --- a/app/views/people/_index.html.haml +++ b/app/views/people/_index.html.haml @@ -1,11 +1,13 @@ -.people_stream +#people_stream - people.each do |person| - .stream_element{:id => person.id} - .media - .img - = person_image_tag(person) - .bg - %span.from - = person_link(person, :class => "hovercardable") + .media.stream_element{:id => person.id} + .media-object.pull-left + = person_image_link(person, :size => :thumb_small) + .media-body + = person_link(person, :class => 'name') + .info.diaspora_handle + = person.diaspora_handle + .info.tags + = Diaspora::Taggable.format_tags(person.profile.tag_string) - = will_paginate people, :inner_window => 3 + = will_paginate people, :renderer => WillPaginate::ActionView::BootstrapLinkRenderer diff --git a/app/views/people/tag_index.js.erb b/app/views/people/tag_index.js.erb index a683b2227..c30450e3e 100644 --- a/app/views/people/tag_index.js.erb +++ b/app/views/people/tag_index.js.erb @@ -1 +1 @@ -$(".people_stream").html("<%= escape_javascript(render("index", :people => @people)) %>"); +$("#people_stream").html("<%= escape_javascript(render("index", :people => @people)) %>"); diff --git a/app/views/publisher/_publisher_bootstrap.html.haml b/app/views/publisher/_publisher_bootstrap.html.haml index 3c2478cb9..627f7258e 100644 --- a/app/views/publisher/_publisher_bootstrap.html.haml +++ b/app/views/publisher/_publisher_bootstrap.html.haml @@ -57,7 +57,7 @@ = image_tag 'ajax-loader.gif' .row-fluid.options_and_submit .public_toggle - %button.btn.btn-default.pull-left#hide_publisher{:title => t('shared.publisher.discard_post')} + .btn.btn-default.pull-left#hide_publisher{:title => t('shared.publisher.discard_post')} %span.text =t('cancel') diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml index 4f0cc3469..d403efba8 100644 --- a/app/views/tags/show.haml +++ b/app/views/tags/show.haml @@ -8,37 +8,30 @@ - else = t('.whatup', :pod => @pod_url) +.container-fluid#tags_show + .row-fluid + .span3.offset1 + %h3 + = t('people', :count => @stream.tagged_people_count) -- content_for :body_class do - = "tags_show" + .side_stream.stream + = render :partial => 'people/index', :locals => {:people => @stream.tagged_people} -#leftNavBar - %h3 - = t('people', :count => @stream.tagged_people_count) + .span7 + .stream_container + #author_info + %h2 + = @stream.display_tag_name - .side_stream.stream - = render :partial => 'people/index', :locals => {:people => @stream.tagged_people} + - if current_user + = render 'publisher/publisher', :selected_aspects => @stream.aspect_ids, :aspect_ids => @stream.aspect_ids, :aspect => @stream.aspect - %br + %hr - - if user_signed_in? - = render "tags/followed_tags_listings" + #main_stream.stream -.span-15.last - .stream_container - #author_info - %h2 - = @stream.display_tag_name + #paginate + %span.loader.hidden - - if current_user - = render 'publisher/publisher', :selected_aspects => @stream.aspect_ids, :aspect_ids => @stream.aspect_ids, :aspect => @stream.aspect - - %hr - - #main_stream.stream - - #paginate - %span.loader.hidden - - %a{:id=>"back-to-top", :title=>"#{t('layouts.application.back_to_top')}", :href=>"#"} - ⇧ + %a{:id=>"back-to-top", :title=>"#{t('layouts.application.back_to_top')}", :href=>"#"} + ⇧ diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index 0660b918e..e74f7168f 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/features/step_definitions/custom_web_steps.rb @@ -165,7 +165,7 @@ end When /^I search for "([^\"]*)"$/ do |search_term| fill_in "q", :with => search_term find_field("q").native.send_key(:enter) - find("#leftNavBar") + find("#tags_show .span3") end Then /^the "([^"]*)" field(?: within "([^"]*)")? should be filled with "([^"]*)"$/ do |field, selector, value| diff --git a/spec/integration/tag_people_spec.rb b/spec/integration/tag_people_spec.rb index 86c86eb56..9dc6db029 100644 --- a/spec/integration/tag_people_spec.rb +++ b/spec/integration/tag_people_spec.rb @@ -22,7 +22,7 @@ describe TagsController, :type => :request do get "/tags/#{tag}", page: 2 expect(response.status).to eq(200) - expect(response.body).to match(/2<\/em>/) + expect(response.body).to match(/
  • 2<\/a><\/li>/) end end end diff --git a/spec/javascripts/app/views/tag_following_action_view_spec.js b/spec/javascripts/app/views/tag_following_action_view_spec.js index f2fbefc07..29f8b275c 100644 --- a/spec/javascripts/app/views/tag_following_action_view_spec.js +++ b/spec/javascripts/app/views/tag_following_action_view_spec.js @@ -14,8 +14,8 @@ describe("app.views.TagFollowingAction", function(){ it("should have the extra classes if the tag is followed", function(){ spyOn(this.view, "tag_is_followed").and.returnValue(true) - expect(this.view.render().$('input').hasClass("red_on_hover")).toBe(true) - expect(this.view.render().$('input').hasClass("in_aspects")).toBe(true) + expect(this.view.render().$('input').hasClass("followed")).toBe(true) + expect(this.view.render().$('input').hasClass("green")).toBe(true) }) })