nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove top-level divs from handlebars templates -- move that logic into the backbone view.

Browse source
This commit is contained in:
danielgrippi 2012-02-23 12:18:29 -08:00
parent 806487a5ff
commit e78ab14fc5
9 changed files with 39 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/javascripts/app/pages/post-viewer.js
View file

@ -24,7 +24,7 @@ app.pages.PostViewer = app.views.Base.extend({
this.postView = new app.views.Post({ this.postView = new app.views.Post({
model : this.model, model : this.model,
className : "post loaded", className : this.options.postTemplateName + " post loaded",
templateName : "post-viewer/content/" + this.options.postTemplateName, templateName : "post-viewer/content/" + this.options.postTemplateName,
attributes : {"data-template" : this.options.postTemplateName} attributes : {"data-template" : this.options.postTemplateName}
}); });

13
public/javascripts/app/templates/post-viewer/content/activity-streams-photo.handlebars
View file

@ -1,10 +1,7 @@
<div class="activity-streams-photo backdrop"> <div class="photoset">
<div class="photoset"> <div class="img-bounding-box">
<div class="img-bounding-box"> <a href="{{object_url}}" class="stream-photo-link">
<a href="{{object_url}}" class="stream-photo-link"> <img src="{{image_url}}" data-small-photo="{{image_url}}" data-full-photo="{{image_url}}" class="stream-photo" />
<img src="{{image_url}}" data-small-photo="{{image_url}}" data-full-photo="{{image_url}}" class="stream-photo" /> </a>
</a>
</div>
</div> </div>
</div> </div>

20
public/javascripts/app/templates/post-viewer/content/multi-photo.handlebars
View file

@ -1,13 +1,11 @@
<div class="multi-photo backdrop"> <h3>
<h3> {{{text}}}
{{{text}}} </h3>
</h3>
<div class="photoset"> <div class="photoset">
{{#each photos}} {{#each photos}}
<div class="img-bounding-box"> <div class="img-bounding-box">
<img src="{{sizes.large}}" /> <img src="{{sizes.large}}" />
</div> </div>
{{/each}} {{/each}}
</div>
</div> </div>

2
public/javascripts/app/templates/post-viewer/content/note.handlebars
View file

@ -1,4 +1,4 @@
<div class="note offset5"> <div class="note-content">
<h1> <h1>
A HEADING A HEADING
</h1> </h1>

2
public/javascripts/app/templates/post-viewer/content/photo-backdrop.handlebars
View file

@ -1,4 +1,4 @@
{{#each photos}} {{#each photos}}
<div class="status photo-backdrop" style="background-image: url({{sizes.large}})"> <div class="photo-fill" style="background-image: url({{sizes.large}})">
</div> </div>
{{/each}} {{/each}}

2
public/javascripts/app/templates/post-viewer/content/rich-media.handlebars
View file

@ -1,4 +1,4 @@
<div class="backdrop rich-media"> <div class="rich-media">
{{{o_embed_cache.data.html}}} {{{o_embed_cache.data.html}}}

2
public/javascripts/app/templates/post-viewer/content/status-with-photo-backdrop.handlebars
View file

@ -1,5 +1,5 @@
{{#each photos}} {{#each photos}}
<div class="status photo-backdrop" style="background-image: url({{sizes.large}})"> <div class="photo-fill" style="background-image: url({{sizes.large}})">
<div class="darken"> <div class="darken">
<h1> <h1>
{{{../text}}} {{{../text}}}

8
public/javascripts/app/templates/post-viewer/content/status.handlebars
View file

@ -1,5 +1,3 @@
<div class="status backdrop"> <h1>
<h1> {{{text}}}
{{{text}}} </h1>
</h1>
</div>

34
public/stylesheets/sass/new-templates.scss
View file

@ -111,10 +111,6 @@ $light-grey: #999;
} }
/* styles */ /* styles */
.bump-left { @include animation(bump-left) }
.bump-right { @include animation(bump-right) }
.multi-photo { .multi-photo {
.img-bounding-box { .img-bounding-box {
@include center(horizontal); @include center(horizontal);
@ -137,7 +133,7 @@ $light-grey: #999;
width: 100%; width: 100%;
} }
.note { .note-content {
width: 550px; width: 550px;
padding-bottom: 50px; padding-bottom: 50px;
@ -151,16 +147,19 @@ $light-grey: #999;
} }
} }
.status { .status,
.status-with-photo-backdrop
{
h1 { h1 {
font-weight: bold; font-weight: bold;
font-size: 40px; font-size: 40px;
} }
}
&.photo-backdrop { .status-with-photo-backdrop {
h1 { h1 {
font-size: 100px; font-size: 100px;
} color: #fff;
} }
} }
@ -175,10 +174,8 @@ $light-grey: #999;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
} }
.backdrop, .post {
.photo-backdrop {
@include center(); @include center();
@include background-cover();
position: absolute; position: absolute;
@ -189,6 +186,13 @@ $light-grey: #999;
height: 100%; height: 100%;
} }
.photo-fill {
@include background-cover();
position: absolute;
height: 100%;
width: 100%;
}
.photo-backdrop { .photo-backdrop {
h1 { h1 {
color: #fff; color: #fff;
@ -516,7 +520,3 @@ $light-grey: #999;
} }
} }
} }
#post-content {
padding-top: 50px;
}