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

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

View file

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

View file

@ -1,10 +1,7 @@
<div class="activity-streams-photo backdrop">
<div class="photoset">
<div class="img-bounding-box">
<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" />
</a>
</div>
<div class="photoset">
<div class="img-bounding-box">
<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" />
</a>
</div>
</div>

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
{{#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">
<h1>
{{{../text}}}

View file

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

View file

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