Port tags page to Bootstrap
This commit is contained in:
Steffen van Bergerem
parent
31328e4722
commit
3f3087c77f
24 changed files with 532 additions and 600 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
41
app/assets/stylesheets/comments.css.scss
Normal file
41
app/assets/stylesheets/comments.css.scss
Normal file
|
|
@ -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%; }
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
*= require lightbox
|
||||
*= require autocomplete
|
||||
*= require mentions
|
||||
*= require tags
|
||||
*= require hovercard
|
||||
|
||||
*= require vendor/interim-bootstrap
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
6
app/assets/stylesheets/stream.css.scss
Normal file
6
app/assets/stylesheets/stream.css.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.stream_container {
|
||||
#publisher {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.well#ignore-info { text-align: center; }
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
288
app/assets/stylesheets/stream_element_blueprint.css.scss
Normal file
288
app/assets/stylesheets/stream_element_blueprint.css.scss
Normal file
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,3 +20,7 @@ h1.tag {
|
|||
&:hover { border-bottom: 1px solid $border-dark-grey; }
|
||||
}
|
||||
}
|
||||
|
||||
#tags_show {
|
||||
.span3 { border-right: 1px solid $border-grey; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{{#if likesCount}}
|
||||
<div class="comment">
|
||||
<div class="media">
|
||||
<div alt="Heart" class="icons-heart"></div>
|
||||
<i class="entypo heart"></i>
|
||||
|
||||
<div class="bd">
|
||||
{{#unless likes_fetched}}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<div class="right">
|
||||
<div class="pull-right">
|
||||
<form accept-charset="UTF-8" action="/tag_followings" method="post">
|
||||
<input type="submit" class="button take_action
|
||||
{{#if tag_is_followed }}
|
||||
red_on_hover in_aspects
|
||||
<input type="submit" class="btn
|
||||
{{#if tag_is_followed }}
|
||||
green followed
|
||||
{{else}}
|
||||
btn-default
|
||||
{{/if}}
|
||||
" type="submit" value="{{followString}}"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
$(".people_stream").html("<%= escape_javascript(render("index", :people => @people)) %>");
|
||||
$("#people_stream").html("<%= escape_javascript(render("index", :people => @people)) %>");
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
||||
|
|
|
|||
|
|
@ -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=>"#"}
|
||||
⇧
|
||||
|
|
|
|||
|
|
@ -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|
|
||||
|
|
|
|||
|
|
@ -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(/<em class="current">2<\/em>/)
|
||||
expect(response.body).to match(/<li class="active"><a href="\/tags\/diaspora\?page=2">2<\/a><\/li>/)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue