changed handlebars "avatar" helper to "personImage"; added home button to interaction pane (only when sneaky -- needs further investigating on getting it showing up when the interaction pane is invoked); minor css tweaks.
This commit is contained in:
danielgrippi
parent
98a834884f
commit
896c098a07
13 changed files with 69 additions and 25 deletions
|
|
@ -14,7 +14,7 @@ Handlebars.registerHelper('linkToPerson', function(context, block) {
|
|||
return html
|
||||
})
|
||||
|
||||
Handlebars.registerHelper('avatar', function(person, size, imageClass) {
|
||||
Handlebars.registerHelper('personImage', function(person, size, imageClass) {
|
||||
size = (typeof(size) != "string" ? "small" : size);
|
||||
imageClass = (typeof(imageClass) != "string" ? size : imageClass);
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="media new_comment_form_wrapper {{#unless comments_count}} hidden {{/unless}}">
|
||||
{{#with current_user}}
|
||||
<a href="/people/{{guid}}" class="img">
|
||||
{{{avatar this}}}
|
||||
{{{personImage this}}}
|
||||
</a>
|
||||
{{/with}}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
{{/if}}
|
||||
|
||||
<div class="img">
|
||||
<a href="/people/{{author.guid}}">
|
||||
<img src="{{author.avatar.small}}" class="avatar smaller" />
|
||||
</a>
|
||||
{{#linkToPerson author}}
|
||||
{{{personImage this "small" "small"}}}
|
||||
{{/linkToPerson}}
|
||||
</div>
|
||||
|
||||
<div class="bd">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="img">
|
||||
{{#linkToPerson author}}
|
||||
{{{avatar this "small"}}}
|
||||
{{{personImage this "small"}}}
|
||||
{{/linkToPerson}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="img">
|
||||
{{#linkToPerson author}}
|
||||
{{{avatar this "small"}}}
|
||||
{{{personImage this "small" "small"}}}
|
||||
{{/linkToPerson}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,15 +34,19 @@
|
|||
|
||||
<!-- this acts as a dock underlay -->
|
||||
<div id="post-info-sneaky" class="passive">
|
||||
<a href="#" rel="invoke-interaction-pane">
|
||||
<div id="post-info-container-sneaky">
|
||||
<a href="#" rel="invoke-interaction-pane" class="invoker">
|
||||
<img src="/images/up-tick-inset.png" class="info-tick"/>
|
||||
</div>
|
||||
<a href="/" title="Home" class="home-button">
|
||||
<i class="icon-home icon-white"></i>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- this closes an open interaction pane -->
|
||||
<div id="close-reactions-pane-container">
|
||||
<a href="#" id="close-reactions-pane" rel="hide-interaction-pane"> </a>
|
||||
<a href="#" id="close-reactions-pane" rel="hide-interaction-pane">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
<div id="post-info" style="display:none;">
|
||||
<div id="post-info-container">
|
||||
|
||||
<img src="/images/down-tick-inset.png" class="info-tick"/>
|
||||
|
||||
<div id="post-reactions"> </div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<form class="form-inline">
|
||||
<textarea class="new-comment-text" id="new-comment-text" placeholder="Comment"></textarea>
|
||||
<button type="submit" class="btn btn-small">
|
||||
<i class="icon-comment"></i>
|
||||
Comment
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="bd">
|
||||
{{#each likes}}
|
||||
{{#linkToPerson author}}
|
||||
{{{avatar this "small" "micro"}}}
|
||||
{{{personImage this "small" "micro"}}}
|
||||
{{/linkToPerson}}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<div class="bd">
|
||||
{{#each participations}}
|
||||
{{#linkToPerson author}}
|
||||
{{{avatar this "small" "micro"}}}
|
||||
{{{personImage this "small" "micro"}}}
|
||||
{{/linkToPerson}}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="bd">
|
||||
{{#each reshares}}
|
||||
{{#linkToPerson author}}
|
||||
{{{avatar this "small" "micro"}}}
|
||||
{{{personImage this "small" "micro"}}}
|
||||
{{/linkToPerson}}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}" class="img">
|
||||
{{{avatar this}}}
|
||||
{{{personImage this}}}
|
||||
</a>
|
||||
{{/with}}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
|
|||
"click *[rel='hide-interaction-pane']" : "hidePane"
|
||||
},
|
||||
|
||||
tooltipSelector : ".label",
|
||||
tooltipSelector : ".label, .home-button",
|
||||
|
||||
postRenderTemplate : function() {
|
||||
this.sneakyVisiblity()
|
||||
|
|
|
|||
|
|
@ -30,15 +30,26 @@ app.views.PostViewerInteractions = app.views.Base.extend({
|
|||
togglePane : function(evt) {
|
||||
if(evt) { evt.preventDefault() }
|
||||
this.$("#post-info").slideToggle(300)
|
||||
this.$("#post-info-sneaky").toggleClass('passive')
|
||||
this.removeTooltips()
|
||||
},
|
||||
|
||||
invokePane : function() {
|
||||
if(!this.$("#post-info").is(":visible")) { this.togglePane() }
|
||||
if(!this.$("#post-info").is(":visible")) {
|
||||
this.$("#post-info-sneaky").addClass("passive")
|
||||
this.togglePane()
|
||||
}
|
||||
},
|
||||
|
||||
hidePane : function() {
|
||||
if(this.$("#post-info").is(":visible")) { this.togglePane() }
|
||||
if(this.$("#post-info").is(":visible")) {
|
||||
|
||||
/* it takes about 400ms for the pane to hide. we need to keep
|
||||
* the sneaky hidden until the slide is complete */
|
||||
setTimeout(function(){
|
||||
this.$("#post-info-sneaky").removeClass("passive")
|
||||
}, 400)
|
||||
|
||||
this.togglePane()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -424,9 +424,17 @@ body.idle {
|
|||
top: 1px solid #111;
|
||||
}
|
||||
|
||||
.img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@include border-radius();
|
||||
margin-right: 2px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -452,7 +460,7 @@ body.idle {
|
|||
|
||||
textarea{
|
||||
height: 18px;
|
||||
width: 300px;
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -488,6 +496,30 @@ body.idle {
|
|||
}
|
||||
}
|
||||
|
||||
.home-button {
|
||||
@include transition(opacity, 0.3s);
|
||||
@include opacity(0.6);
|
||||
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 4px;
|
||||
|
||||
padding: 4px 6px;
|
||||
|
||||
&:hover {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
.invoker {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#post-feedback:hover {
|
||||
#post-info-sneaky:not(.passive) {
|
||||
@include opacity(1);
|
||||
|
|
@ -495,7 +527,6 @@ body.idle {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.post-comment {
|
||||
-moz-box-shadow: 0 1px 2px -2px #999;
|
||||
-webkit-box-shadow: 0 1px 2px -2px #999;
|
||||
|
|
|
|||
Loading…
Reference in a new issue