diff --git a/app/assets/javascripts/app/pages/profile.js b/app/assets/javascripts/app/pages/profile.js new file mode 100644 index 000000000..bd7fbd604 --- /dev/null +++ b/app/assets/javascripts/app/pages/profile.js @@ -0,0 +1,16 @@ +app.pages.Profile = app.views.Base.extend({ + + templateName : "profile", + + subviews : { + "#canvas" : "canvasView" + }, + + initialize : function() { + this.initViews() + }, + + initViews : function() { + this.canvasView = new app.views.Canvas() + } +}); \ No newline at end of file diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js index 23a6dfbf9..1cc84ac35 100644 --- a/app/assets/javascripts/app/router.js +++ b/app/assets/javascripts/app/router.js @@ -12,9 +12,11 @@ app.Router = Backbone.Router.extend({ "commented": "stream", "liked": "stream", "mentions": "stream", - "people/:id": "stream", + + "people/:id": "profile", + "u/:name": "profile", + "people/:id/photos": "photos", - "u/:name": "stream", "followed_tags": "stream", "tags/:name": "stream", @@ -24,7 +26,16 @@ app.Router = Backbone.Router.extend({ "framer": "framer" }, - stream : function() { + profile : function(page) { + this.isExperimental(page) ? this.newProfile() : this.stream() + }, + + newProfile : function() { + app.page = new app.pages.Profile(); + $("#container").html(app.page.render().el) + }, + + stream : function(page) { app.stream = new app.models.Stream(); app.stream.fetch(); app.page = new app.views.Stream({model : app.stream}); @@ -57,6 +68,10 @@ app.Router = Backbone.Router.extend({ singlePost : function(id) { var page = new app.pages.PostViewer({ id: id }); $("#container").html(page.el); - } + }, + + isExperimental : function(query) { + return query.search("ex=true") != -1 + } }); diff --git a/app/assets/javascripts/app/views.js b/app/assets/javascripts/app/views.js index 29f6c9fbb..7f114925d 100644 --- a/app/assets/javascripts/app/views.js +++ b/app/assets/javascripts/app/views.js @@ -44,6 +44,7 @@ app.views.Base = Backbone.View.extend({ if(!this.template) { console.log(this.templateName ? ("no template for " + this.templateName) : "no templateName specified") } + this.$el .html(this.template(presenter)) .attr("data-template", _.last(this.templateName.split("/"))); diff --git a/app/assets/javascripts/app/views/canvas_view.js b/app/assets/javascripts/app/views/canvas_view.js new file mode 100644 index 000000000..b17454418 --- /dev/null +++ b/app/assets/javascripts/app/views/canvas_view.js @@ -0,0 +1,14 @@ +app.views.Canvas = app.views.Base.extend({ + + templateName : 'canvas', + + postRenderTemplate : function() { + setTimeout(_.bind(this.mason, this), 0) + }, + + mason : function() { + this.$el.isotope({ + itemSelector : '.canvas-frame' + }) + } +}) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 07af1e265..5907a0411 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -19,6 +19,7 @@ //= require jquery.idle-timer //= require jquery.infinitescroll-custom //= require jquery.autocomplete-custom +//= require jquery.isotope.min //= require keycodes //= require fileuploader-custom //= require handlebars-1.0.0.beta.6 diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index e12dd3771..90a46501f 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -1,5 +1,10 @@ @import 'mixins'; + +/* mainly for the post viewer & composer */ @import 'new_styles/base'; @import 'new_styles/composer'; @import 'new_styles/interactions'; @import 'new_styles/viewer_nav'; + +/* profile */ +@import 'new_styles/canvas'; \ No newline at end of file diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss new file mode 100644 index 000000000..7db57446e --- /dev/null +++ b/app/assets/stylesheets/new_styles/_canvas.scss @@ -0,0 +1,35 @@ +body { + + background-color : #F6F6F6; +} + +#canvas { + margin-top : 100px; +} + +.canvas-frame { + float: left; + margin: 10px; + width: 270px; + + .content { + @include box-shadow(0,1px,3px,rgba(0,0,0,0.2)); + background-color : #fff; + min-height : 180px; + max-height : 180px; + + overflow : hidden; + padding : 10px; + margin-bottom : 5px; + } + + /* larger declarations */ + &.x2.width { + width : 560px; + } + + &.x2.height .content { + min-height : 429px; + max-height : 429px; + } +} \ No newline at end of file diff --git a/app/assets/templates/canvas.jst.hbs b/app/assets/templates/canvas.jst.hbs new file mode 100644 index 000000000..eba934a52 --- /dev/null +++ b/app/assets/templates/canvas.jst.hbs @@ -0,0 +1,173 @@ +
+
+ +
+
+ Daniel Grippi +
+
+ +
+
+

+ Here, he discusses how globalisation has exacerbated income inequalities and the control over politics exerted by the rich, citing the Occupy movement which he describes as a 'public relations hazard not a health hazard' +

+ +

+ Echo park wolf kale chips sunt, dolor scenester deserunt ad cray leggings 3 wolf moon thundercats direct trade. Banksy placeat odd future et, ex gastropub elit whatever. Messenger bag eu fanny pack, pitchfork locavore four loko yr marfa forage. Mcsweeney's hoodie terry richardson exercitation, consectetur commodo banh mi ullamco laboris cliche raw denim salvia selvage in nulla. Lo-fi chambray culpa, dreamcatcher fugiat squid portland nihil high life. Quis VHS blog sunt sint, salvia wes anderson fingerstache portland eiusmod ex consectetur synth enim. Tattooed aliquip proident id, lomo aliqua qui pitchfork hella cosby sweater pariatur vero.

+ +
+
+ Dennis Collinson +
+
+ +
+
+ +
+
+ Sarah Mei +
+
+ + +
+
+

+ sometimes, i say things loud. +

+
+
+ Sean Tilley +
+
+ +
+
+

+ this is a longish status but i don't have that much to say. i guess i can keep on typing or something like that or make this a run-on sentance. +

+
+
+ Daniel Grippi +
+
+ +
+
+

+ Echo park wolf kale chips sunt, dolor scenester deserunt ad cray leggings 3 wolf moon thundercats direct trade. Banksy placeat odd future et, ex gastropub elit whatever. Messenger bag eu fanny pack, pitchfork locavore four loko yr marfa forage. Mcsweeney's hoodie terry richardson exercitation, consectetur commodo banh mi ullamco laboris cliche raw denim salvia selvage in nulla. Lo-fi chambray culpa, dreamcatcher fugiat squid portland nihil high life. Quis VHS blog sunt sint, salvia wes anderson fingerstache portland eiusmod ex consectetur synth enim. Tattooed aliquip proident id, lomo aliqua qui pitchfork hella cosby sweater pariatur vero. +

+ +
+
+ Dennis Collinson +
+
+ +
+
+ +
+
+ Sarah Mei +
+
+ + +
+
+

+ #weinerjuice +

+
+
+ Sean Tilley +
+
+ +
+
+ +
+
+ Rosanna Yau +
+
+ +
+
+

+ Banksy placeat odd future et, ex gastropub elit whatever. Messenger bag eu fanny pack, pitchfork locavore four loko yr marfa forage. Mcsweeney's hoodie terry richardson exercitation, consectetur commodo banh mi ullamco laboris cliche raw denim salvia selvage + Banksy placeat odd future et, ex gastropub elit whatever. Messenger bag eu fanny pack, pitchfork. +

+
+
+ Sarah Mei +
+
+ +
+
+ +
+
+ Daniel Grippi +
+
+ + +
+
+

+ Banksy placeat odd future et, ex gastropub elit whatever. Messenger bag eu fanny pack, pitchfork locavore four loko yr marfa forage. Mcsweeney's hoodie terry richardson exercitation, consectetur commodo banh mi ullamco laboris cliche raw denim salvia selvage +

+
+
+ Daniel Grippi +
+
+ + + + +
+
+

+ skribblex. +

+
+
+ Rosanna Yau +
+
+ +
+
+ +
+
+ Sarah Mei +
+
+ +
+
+ hey there kids! +
+
+ Daniel Grippi +
+
+ + +
+
+ +
+
+ Rosanna Yau +
+
+ diff --git a/app/assets/templates/profile.jst.hbs b/app/assets/templates/profile.jst.hbs new file mode 100644 index 000000000..a63cf1831 --- /dev/null +++ b/app/assets/templates/profile.jst.hbs @@ -0,0 +1,8 @@ +
+

+ Daniel Grippi +

+ +
+
+ diff --git a/app/controllers/people_controller.rb b/app/controllers/people_controller.rb index 6b3ff5f2c..3a3880964 100644 --- a/app/controllers/people_controller.rb +++ b/app/controllers/people_controller.rb @@ -120,7 +120,14 @@ class PeopleController < ApplicationController end respond_to do |format| - format.all { respond_with @person, :locals => {:post_type => :all} } + format.all do + if params[:ex] + @page = :experimental + render 'experimental', :layout => 'post' + else + respond_with @person, :locals => {:post_type => :all} + end + end format.json{ render_for_api :backbone, :json => @stream.stream_posts, :root => :posts } end end diff --git a/app/helpers/layout_helper.rb b/app/helpers/layout_helper.rb index b7af2a3b5..d0d8ce659 100644 --- a/app/helpers/layout_helper.rb +++ b/app/helpers/layout_helper.rb @@ -46,6 +46,8 @@ module LayoutHelper end def current_user_atom_tag + return #temp hax + return unless @person.present? content_tag(:link, '', :rel => 'alternate', :href => "#{@person.public_url}.atom", :type => "application/atom+xml", :title => t('.public_feed', :name => @person.name)) end @@ -61,7 +63,7 @@ module LayoutHelper end def include_base_css_framework(use_bootstrap=false) - if use_bootstrap || @aspect == :getting_started || @page == :logged_out + if use_bootstrap || @aspect == :getting_started || @page == :logged_out || @page == :experimental stylesheet_link_tag 'bootstrap-complete' else stylesheet_link_tag 'blueprint', :media => 'screen' diff --git a/app/views/people/experimental.erb b/app/views/people/experimental.erb new file mode 100644 index 000000000..e69de29bb diff --git a/vendor/assets/javascripts/jquery.isotope.min.js b/vendor/assets/javascripts/jquery.isotope.min.js new file mode 100644 index 000000000..dc95630be --- /dev/null +++ b/vendor/assets/javascripts/jquery.isotope.min.js @@ -0,0 +1,11 @@ +/** + * Isotope v1.5.19 + * An exquisite jQuery plugin for magical layouts + * http://isotope.metafizzy.co + * + * Commercial use requires one-time license fee + * http://metafizzy.co/#licenses + * + * Copyright 2012 David DeSandro / Metafizzy + */ +(function(a,b,c){"use strict";var d=a.document,e=a.Modernizr,f=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},g="Moz Webkit O Ms".split(" "),h=function(a){var b=d.documentElement.style,c;if(typeof b[a]=="string")return a;a=f(a);for(var e=0,h=g.length;e"+d+"{#modernizr{height:3px}}"+"").appendTo("head"),f=b('
').appendTo("html");a=f.height()===3,f.remove(),e.remove()}return a},csstransitions:function(){return!!j}},l;if(e)for(l in k)e.hasOwnProperty(l)||e.addTest(l,k[l]);else{e=a.Modernizr={_version:"1.6ish: miniModernizr for Isotope"};var m=" ",n;for(l in k)n=k[l](),e[l]=n,m+=" "+(n?"":"no-")+l;b("html").addClass(m)}if(e.csstransforms){var o=e.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},p=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},g,h={},j;f[c]=d,b.extend(e,f);for(g in e)j=e[g],h[g]=o[g](j);var k=h.translate||"",l=h.scale||"",m=k+l;b.data(a,"isoTransform",e),a.style[i]=m};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){p(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a){b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssNumber.translate=!0,b.cssHooks.translate={set:function(a,b){p(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var q,r;e.csstransitions&&(q={WebkitTransitionProperty:"webkitTransitionEnd",MozTransitionProperty:"transitionend",OTransitionProperty:"oTransitionEnd",transitionProperty:"transitionEnd"}[j],r=h("transitionDuration"));var s=b.event,t;s.special.smartresize={setup:function(){b(this).bind("resize",s.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",s.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",t&&clearTimeout(t),t=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Isotope=function(a,c,d){this.element=b(c),this._create(a),this._init(d)};var u=["width","height"],v=b(a);b.Isotope.settings={resizable:!0,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:{opacity:0,scale:.001},visibleStyle:{opacity:1,scale:1},containerStyle:{position:"relative",overflow:"hidden"},animationEngine:"best-available",animationOptions:{queue:!1,duration:800},sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transformsEnabled:!b.browser.opera,itemPositionDataEnabled:!1},b.Isotope.prototype={_create:function(a){this.options=b.extend({},b.Isotope.settings,a),this.styleQueue=[],this.elemCount=0;var c=this.element[0].style;this.originalStyle={};var d=u.slice(0);for(var e in this.options.containerStyle)d.push(e);for(var f=0,g=d.length;fg?1:f0&&(i=function(a,b){b.$el[d](b.style,f).one(q,k)},j=!1)}}b.each(this.styleQueue,i),j&&k(),this.styleQueue=[]},resize:function(){this["_"+this.options.layoutMode+"ResizeChanged"]()&&this.reLayout()},reLayout:function(a){this["_"+this.options.layoutMode+"Reset"](),this.layout(this.$filteredAtoms,a)},addItems:function(a,b){var c=this._getAtoms(a);this.$allAtoms=this.$allAtoms.add(c),b&&b(c)},insert:function(a,b){this.element.append(a);var c=this;this.addItems(a,function(a){var d=c._filter(a);c._addHideAppended(d),c._sort(),c.reLayout(),c._revealAppended(d,b)})},appended:function(a,b){var c=this;this.addItems(a,function(a){c._addHideAppended(a),c.layout(a),c._revealAppended(a,b)})},_addHideAppended:function(a){this.$filteredAtoms=this.$filteredAtoms.add(a),a.addClass("no-transition"),this._isInserting=!0,this.styleQueue.push({$el:a,style:this.options.hiddenStyle})},_revealAppended:function(a,b){var c=this;setTimeout(function(){a.removeClass("no-transition"),c.styleQueue.push({$el:a,style:c.options.visibleStyle}),c._isInserting=!1,c._processStyleQueue(a,b)},10)},reloadItems:function(){this.$allAtoms=this._getAtoms(this.element.children())},remove:function(a,b){var c=this,d=function(){c.$allAtoms=c.$allAtoms.not(a),a.remove(),b&&b.call(c.element)};a.filter(":not(."+this.options.hiddenClass+")").length?(this.styleQueue.push({$el:a,style:this.options.hiddenStyle}),this.$filteredAtoms=this.$filteredAtoms.not(a),this._sort(),this.reLayout(d)):d()},shuffle:function(a){this.updateSortData(this.$allAtoms),this.options.sortBy="random",this._sort(),this.reLayout(a)},destroy:function(){var a=this.usingTransforms,b=this.options;this.$allAtoms.removeClass(b.hiddenClass+" "+b.itemClass).each(function(){var b=this.style;b.position="",b.top="",b.left="",b.opacity="",a&&(b[i]="")});var c=this.element[0].style;for(var d in this.originalStyle)c[d]=this.originalStyle[d];this.element.unbind(".isotope").undelegate("."+b.hiddenClass,"click").removeClass(b.containerClass).removeData("isotope"),v.unbind(".isotope")},_getSegments:function(a){var b=this.options.layoutMode,c=a?"rowHeight":"columnWidth",d=a?"height":"width",e=a?"rows":"cols",g=this.element[d](),h,i=this.options[b]&&this.options[b][c]||this.$filteredAtoms["outer"+f(d)](!0)||g;h=Math.floor(g/i),h=Math.max(h,1),this[b][e]=h,this[b][c]=i},_checkIfSegmentsChanged:function(a){var b=this.options.layoutMode,c=a?"rows":"cols",d=this[b][c];return this._getSegments(a),this[b][c]!==d},_masonryReset:function(){this.masonry={},this._getSegments();var a=this.masonry.cols;this.masonry.colYs=[];while(a--)this.masonry.colYs.push(0)},_masonryLayout:function(a){var c=this,d=c.masonry;a.each(function(){var a=b(this),e=Math.ceil(a.outerWidth(!0)/d.columnWidth);e=Math.min(e,d.cols);if(e===1)c._masonryPlaceBrick(a,d.colYs);else{var f=d.cols+1-e,g=[],h,i;for(i=0;id&&(e.x=0,e.y=e.height),c._pushPosition(a,e.x,e.y),e.height=Math.max(e.y+g,e.height),e.x+=f})},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResizeChanged:function(){return!0},_cellsByRowReset:function(){this.cellsByRow={index:0},this._getSegments(),this._getSegments(!0)},_cellsByRowLayout:function(a){var c=this,d=this.cellsByRow;a.each(function(){var a=b(this),e=d.index%d.cols,f=Math.floor(d.index/d.cols),g=(e+.5)*d.columnWidth-a.outerWidth(!0)/2,h=(f+.5)*d.rowHeight-a.outerHeight(!0)/2;c._pushPosition(a,g,h),d.index++})},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.$filteredAtoms.length/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.offset.top}},_cellsByRowResizeChanged:function(){return this._checkIfSegmentsChanged()},_straightDownReset:function(){this.straightDown={y:0}},_straightDownLayout:function(a){var c=this;a.each(function(a){var d=b(this);c._pushPosition(d,0,c.straightDown.y),c.straightDown.y+=d.outerHeight(!0)})},_straightDownGetContainerSize:function(){return{height:this.straightDown.y}},_straightDownResizeChanged:function(){return!0},_masonryHorizontalReset:function(){this.masonryHorizontal={},this._getSegments(!0);var a=this.masonryHorizontal.rows;this.masonryHorizontal.rowXs=[];while(a--)this.masonryHorizontal.rowXs.push(0)},_masonryHorizontalLayout:function(a){var c=this,d=c.masonryHorizontal;a.each(function(){var a=b(this),e=Math.ceil(a.outerHeight(!0)/d.rowHeight);e=Math.min(e,d.rows);if(e===1)c._masonryHorizontalPlaceBrick(a,d.rowXs);else{var f=d.rows+1-e,g=[],h,i;for(i=0;id&&(e.x=e.width,e.y=0),c._pushPosition(a,e.x,e.y),e.width=Math.max(e.x+f,e.width),e.y+=g})},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResizeChanged:function(){return!0},_cellsByColumnReset:function(){this.cellsByColumn={index:0},this._getSegments(),this._getSegments(!0)},_cellsByColumnLayout:function(a){var c=this,d=this.cellsByColumn;a.each(function(){var a=b(this),e=Math.floor(d.index/d.rows),f=d.index%d.rows,g=(e+.5)*d.columnWidth-a.outerWidth(!0)/2,h=(f+.5)*d.rowHeight-a.outerHeight(!0)/2;c._pushPosition(a,g,h),d.index++})},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.$filteredAtoms.length/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth}},_cellsByColumnResizeChanged:function(){return this._checkIfSegmentsChanged(!0)},_straightAcrossReset:function(){this.straightAcross={x:0}},_straightAcrossLayout:function(a){var c=this;a.each(function(a){var d=b(this);c._pushPosition(d,c.straightAcross.x,0),c.straightAcross.x+=d.outerWidth(!0)})},_straightAcrossGetContainerSize:function(){return{width:this.straightAcross.x}},_straightAcrossResizeChanged:function(){return!0}},b.fn.imagesLoaded=function(a){function h(){a.call(c,d)}function i(a){var c=a.target;c.src!==f&&b.inArray(c,g)===-1&&(g.push(c),--e<=0&&(setTimeout(h),d.unbind(".imagesLoaded",i)))}var c=this,d=c.find("img").add(c.filter("img")),e=d.length,f="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",g=[];return e||h(),d.bind("load.imagesLoaded error.imagesLoaded",i).each(function(){var a=this.src;this.src=f,this.src=a}),c};var w=function(b){a.console&&a.console.error(b)};b.fn.isotope=function(a,c){if(typeof a=="string"){var d=Array.prototype.slice.call(arguments,1);this.each(function(){var c=b.data(this,"isotope");if(!c){w("cannot call methods on isotope prior to initialization; attempted to call method '"+a+"'");return}if(!b.isFunction(c[a])||a.charAt(0)==="_"){w("no such method '"+a+"' for isotope instance");return}c[a].apply(c,d)})}else this.each(function(){var d=b.data(this,"isotope");d?(d.option(a),d._init(c)):b.data(this,"isotope",new b.Isotope(a,this,c))});return this}})(window,jQuery); \ No newline at end of file