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

squares; how do they work

Browse source
This commit is contained in:
danielgrippi 2012-04-20 19:34:00 -07:00 committed by Dennis Collinson
parent b4ca14ade4
commit e2adb8d26f
3 changed files with 38 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/canvas_view.js
View file

@ -8,7 +8,7 @@ app.views.Canvas = app.views.Base.extend(_.extend(app.views.infiniteScrollMixin,
renderTemplate : function() { renderTemplate : function() {
this.postRenderTemplate(); this.postRenderTemplate();
setTimeout(_.bind(this.mason, this), 1000) //setTimeout(_.bind(this.mason, this), 1000)
}, },
mason : function() { mason : function() {

51
app/assets/stylesheets/new_styles/_canvas.scss
View file

@ -1,13 +1,25 @@
$container-width : 1170;
$margin-between-columns : 20;
$column-width : 255 - $margin-between-columns;
$two-column-width : ($column-width * 2) + ($margin-between-columns * 2);
$margin-between-rows : 20;
$row-height : $column-width;
$two-row-height : $two-column-width;
@mixin tall() { @mixin tall() {
height : 405px; height : $two-column-width + px;
max-height : 405px; min-height : $two-column-width + px;
min-height : 405px; max-height : $two-column-width + px;
} }
@mixin wide() { @mixin wide() {
//width : 560px; width : $two-column-width + px;
//min-width : 560px; min-width : $two-column-width + px;
//max-width : 560px; max-width : $two-column-width + px;
} }
body { body {
@ -19,9 +31,8 @@ body {
} }
.canvas-frame { .canvas-frame {
float: left; float : left;
margin: 10px; margin : 10px;
width: 270px;
//clear : both; // here for testing! //clear : both; // here for testing!
@ -41,12 +52,15 @@ body {
position : relative; position : relative;
background-color : #fff; background-color : #fff;
min-height : 140px; min-height : $column-width + px;
max-height : 140px; max-height : $column-width + px;
width : $column-width + px;
min-width : $column-width + px;
max-width : $column-width + px;
overflow : hidden; overflow : hidden;
padding : 20px; padding : 10px;
margin-bottom : 5px;
/* used in masking photos with overflow: hidden; */ /* used in masking photos with overflow: hidden; */
.image-container { .image-container {
@ -95,10 +109,13 @@ body {
&.photo { &.photo {
&.one .content { &.one .content {
padding : 0; //padding : 0;
min-height : 180px; //
max-height : 180px; //min-height : $column-width + 10 + px;
//max-height : $column-width + 10 + px;
//
//min-width : $column-width + 10 + px;
//max-width : $column-width + 10 + px;
.text-content { .text-content {
position : absolute; position : absolute;

3
app/assets/templates/profile.jst.hbs
View file

@ -10,6 +10,9 @@
Birthday: {{birthday}} Birthday: {{birthday}}
</div> </div>
</section> </section>
<a href="/posts/new">COMPOSE</a>
<section id="canvas"> <section id="canvas">
</section> </section>