diff --git a/app/assets/javascripts/app/models/post.js b/app/assets/javascripts/app/models/post.js index dd7c3671b..b023860af 100644 --- a/app/assets/javascripts/app/models/post.js +++ b/app/assets/javascripts/app/models/post.js @@ -107,13 +107,13 @@ app.models.Post = Backbone.Model.extend({ headline : function() { var headline = this.get("text").trim() - , newlineIdx = headline.lastIndexOf("\n") + , newlineIdx = headline.indexOf("\n") return (newlineIdx > 0 ) ? headline.substr(0, newlineIdx) : headline }, body : function(){ var body = this.get("text").trim() - , newlineIdx = body.lastIndexOf("\n") + , newlineIdx = body.indexOf("\n") return (newlineIdx > 0 ) ? body.substr(newlineIdx+1, body.length) : "" } }, { @@ -122,7 +122,8 @@ app.models.Post = Backbone.Model.extend({ frameMoods : [ "Day", "Night", - "Wallpaper" + "Wallpaper", + "Newspaper" ], legacyTemplateNames : [ diff --git a/app/assets/javascripts/app/views/post/mood_view.js b/app/assets/javascripts/app/views/post/mood_view.js index 424b6dc77..5fe33359f 100644 --- a/app/assets/javascripts/app/views/post/mood_view.js +++ b/app/assets/javascripts/app/views/post/mood_view.js @@ -33,10 +33,22 @@ app.views.Post.Day = app.views.Post.Mood.extend({ }) app.views.Post.Night = app.views.Post.Mood.extend({ - mood : "night" + mood : "night", +}) + +app.views.Post.Newspaper = app.views.Post.Mood.extend({ + mood : "newspaper" }) app.views.Post.Wallpaper = app.views.Post.Mood.extend({ mood : "wallpaper", - templateName : "wallpaper-mood" + templateName : "wallpaper-mood", + + + presenter : function(){ + var backgroundPhoto = _.first(this.model.get("photos") || []) + return _.extend(app.views.Post.Mood.prototype.presenter.call(this), { + backgroundUrl : backgroundPhoto && backgroundPhoto.sizes.large + }) + } }) diff --git a/app/assets/javascripts/app/views/post_view.js b/app/assets/javascripts/app/views/post_view.js index 952e34b84..42cc20efa 100644 --- a/app/assets/javascripts/app/views/post_view.js +++ b/app/assets/javascripts/app/views/post_view.js @@ -21,6 +21,16 @@ app.views.Post = app.views.StreamObject.extend({ showFactory : function(model) { var frameName = model.get("frame_name"); + //translate obsolete template names to the new Moods, should be removed when template picker comes cliente side. + var map = { + 'status-with-photo-backdrop' : 'Wallpaper', + 'status' : 'Day', + 'note' : 'Newspaper', + 'photo-backdrop' : 'Day' + } + + frameName = map[frameName] || frameName + if(_.include(app.models.Post.legacyTemplateNames, frameName)){ return legacyShow(model) } else { diff --git a/app/assets/javascripts/app/views/template_picker_view.js b/app/assets/javascripts/app/views/template_picker_view.js index 938872a52..4236a3ae3 100644 --- a/app/assets/javascripts/app/views/template_picker_view.js +++ b/app/assets/javascripts/app/views/template_picker_view.js @@ -19,7 +19,7 @@ app.views.TemplatePicker = app.views.Base.extend({ presenter : function() { return _.extend(this.defaultPresenter(), { - templates : _.union(app.models.Post.frameMoods, _.without(app.models.Post.legacyTemplateNames, ["status", "status-with-photo-backdrop", "photo-backdrop", "activity-streams-photo"])) //subtract re-implemented templates + templates : _.union(app.models.Post.frameMoods, _.without(app.models.Post.legacyTemplateNames, ["status", "status-with-photo-backdrop", "photo-backdrop", "activity-streams-photo", "note"])) //subtract re-implemented templates }) } }) \ No newline at end of file diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index cade5c52f..43d4544c7 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -1,834 +1,4 @@ - -/* variables */ - -$light-grey: #999; -$pane-width: 420px; -$night-background-color : #333; -$night-text-color : #999; - - -/* mixins */ -@mixin center($orient:vertical) { - display: -webkit-box; - -webkit-box-orient: $orient; - -webkit-box-pack: center; - -webkit-box-align: center; - - display: -moz-box; - -moz-box-orient: $orient; - -moz-box-pack: center; - -moz-box-align: center; - - display: box; - box-orient: $orient; - box-pack: center; - box-align: center; -} - -@mixin box-shadow($left, $top, $blur, $color) { - -webkit-box-shadow: $left $top $blur $color; - -moz-box-shadow: $left $top $blur $color; - box-shadow: $left $top $blur $color; -} - -@mixin pane-width() { - width: $pane-width; - max-width: 100%; -} - -@mixin background-cover() { - background: no-repeat center center fixed; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - -@mixin opacity($val) { - -moz-opacity: $val; - filter:alpha(opacity=$val*100); - opacity: $val; -} - -@mixin border-radius($top:3px, $bottom:$top) { - -webkit-border-radius: $top $top $bottom $bottom; - -moz-border-radius: $top $top $bottom $bottom; - border-radius: $top $top $bottom $bottom; -} - -@mixin transition($type, $speed:0.2s) { - -o-transition: $type $speed; - -moz-transition: $type $speed; - -webkit-transition: $type $speed; - transition: $type $speed; -} - -@mixin animation($name, $speed:0.2s, $easing:ease-in-out) { - -webkit-animation: $name $speed $easing; - -moz-animation: $name $speed $easing; - -ms-animation: $name $speed $easing; -} - -@mixin info-container() { - @include box-shadow(0, 6px, 20px, #000); - @include border-radius(3px, 0px); - @include dark-hatched-bg(); - @include pane-width(); - - display: inline-block; - position: relative; - - border-top: 1px solid #555; - border-right: 1px solid #444; - border-left: 1px solid #444; - - padding-top: 25px; - - color: #ddd; - - /* webkit acceleration */ - -webkit-transform: translateZ(0); -} - -@mixin dark-hatched-bg() { - background-color: #444; - background-image: image-url("hatched-bg-dark.png"); -} - -@mixin photo-shadow() { - @include box-shadow(0, 3px, 15px, #999); -} - -@mixin media-text() { - font: { - weight: bold; - size: 2em; - } - - line-height: 2em; - padding-bottom: 0; - margin-bottom: 0; -} - -/* bootstrap extentions */ -.icon-white { background-image: image_url("img/glyphicons-halflings-white.png"); } -.icon-black { background-image: image_url("img/glyphicons-halflings.png"); } -.icon-red { background-image: image-url("img/glyphicons-halflings-red.png"); } -.icon-green { background-image: image-url("img/glyphicons-halflings-green.png"); } -.icon-blue { background-image: image-url("img/glyphicons-halflings-blue.png"); } - -/* styles */ -.multi-photo { - display: table; - - p { - @include media-text(); - } - - .img-bounding-box { - display: table-cell; - text-align: center; - vertical-align: middle; - - padding: 20px; - height: 400px; - width: 300px; - } - - img { - @include photo-shadow(); - - max-width: 100%; - max-height: 100%; - } -} - -.photoset { - @include center(horizontal); - width: 100%; -} - -.note-content { - min-width: 250px; - width: 90%; - max-width: 550px; - padding-bottom: 2em; - display: inline-block; - text-align: left; - - p { - font-size: 1.25em; - line-height: 1.5em; - font-family: Palatino, times, georgia, serif; - margin-bottom: 1em; - padding: 0 5%; - } -} - -.status, -.status-with-photo-backdrop -{ - p { - @include media-text(); - } -} - -.status-with-photo-backdrop { - p { - color: #fff; - - a { - @include transition(background-color, 0.3s); - - color: #000; - background-color: #fff; - background-color: rgba(255,255,255,0.7); - padding: 0 5px; - - &:hover { - text-decoration: none; - background-color: #fff; - background-color: rgba(255,255,255,1); - } - } - } -} - -.darken { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: rgba(0,0,0,0.3); - - display: table; - - .darken-content { - display: table-cell; - vertical-align: middle; - text-align: center; - - padding: 70px 10%; - - height: 100%; - width: 100%; - } -} - -.post { - display: table-cell; - vertical-align: middle; - text-align: center; -} - -.photo-fill { - @include background-cover(); - z-index : -5000; //so the framer controls don't get lost - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; -} - -.photo-backdrop { - p { - color: #fff; - z-index: 2; - } - - img { - position: relative; - } - - .photo-fill { - @include opacity(0.2) - } -} - -.rich-media { - z-index : -5000; //so the framer controls don't get lost - position: absolute; - height: 100%; - width: 100%; - top: 0; - left: 0; - - text-align: center; - background-color: $night-background-color; - - p { - @include media-text(); - color: #999; - - a { - font-weight: normal; - font-size: smaller; - } - } - - iframe { - @include box-shadow(0, 3px, 15px, #000); - - width: 857px; - height: 480px; - max-width: 100%; - max-height: 100%; - } -} - -.rich-media-container { - display: table; - height: 100%; - width: 100%; -} - -.rich-media-container2 { - display: table-cell; - vertical-align: middle; -} - -#post-nav { - @include transition(opacity, 0.5s); - @include opacity(1); -} - -body.idle { - #post-nav { - @include opacity(0); - - .nav-arrow{ - &.right { - margin-right: -40px; - } - - &.left { - margin-left: -40px; - } - } - - } -} - -.nav-arrow { - @include opacity(0.8); - @include transition(all, 0.3s); - - display: table; - - position: fixed; - height: 100%; - z-index: 3; - top: 0; - padding: 0 1.2%; - - background-color: rgba(0,0,0,0); - - .nav-arrow-inner { - padding: 0; margin: 0; - display: table-cell; - vertical-align: middle; - } - - img { - @include opacity(0.5); - - height: 30px; - width: 30px; - - /* half the size of the nav arrows on mobile phones */ - @media (max-width: 480px) { - height: 15px; - width: 15px; - } - } - - &.left { - left: 0; - padding-right: 19px; - } - - &.right { - right: 0; - padding-left: 19px; - } - - &:hover { - background-color: rgba(0,0,0,0.1) - } -} - -.header { - - position: fixed; - - /* position absolute for mobile */ - @media (max-width: 480px) { - position: absolute !important; - } - - top: 0; - left: 0; - z-index: 10; - width: 100%; - overflow-x: hidden; -} - -#header-container { - padding: 1.2%; - - /* don't pad the header if we're mobile */ - @media (max-width: 480px) { - padding: 0 !important; - } -} - -.avatar { - &.micro { - height: 20px; - width: 20px; - } - - &.small { - height: 35px; - width: 35px; - } -} - -.author-name { - color: inherit; - font-weight: bold; -} - -#post-author { - @include border-radius(); - - border: 1px solid rgba(255,255,255,0.2); - border-top: 1px solid rgba(255,255,255,0.5); - - float: left; - margin: 0; - - padding: 5px; - padding-right: 10px; - - background-color: rgba(255,255,255,0.6); - - /* don't pad the header if we're mobile */ - @media (max-width: 480px) { - @include border-radius(0); - background-color: rgba(255,255,255,0.4); - width: 100% !important; - border: none !important; - padding: none !important; - } - - max-height: 35px; - - .avatar { - @include border-radius(); - } - - .post-time, - .icon-retweet { - color: #000; - @include opacity(0.5); - } -} - -#post-interactions { - position: fixed; - width: 100%; - bottom: 0; - left: 0; - text-align: center; - z-index: 100; -} - -#post-reactions { - height: 80%; - max-height: 350px; - overflow: auto; - margin-top: 5px; -} - -#post-info, -#post-info-sneaky { - text-align: center; - z-index: 10; - - margin-top: -33px; - - #post-info-container { - @include info-container(); - } - - .well { - -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); - -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); - box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); - - margin: 5px; - padding: 5px; - text-align: left; - - max-height: 20px; - overflow: hidden; - - background: { - color: #222; - color: rgba(0,0,0,0.2); - } - - border: { - left: 1px solid #444; - right: 1px solid #444; - bottom: 1px solid #555; - top: 1px solid #111; - } - - .img { - margin-right: 5px; - } - - i { - margin-top: 1px; - } - - .avatar { - @include border-radius(); - margin-right: 0; - } - } - - #post-comments { - text-align: left; - padding-top: 0; - } - - #new-post-comment { - -webkit-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8); - -moz-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8); - box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8); - - border-top: 1px solid #444; - text-align: left; - background-image: image-url("hatched-bg-dark.png"); - } - - #new-post-comment-container { - position: relative; - - padding: 10px; - - textarea{ - height: 18px; - width: 318px; - } - - form { - margin-bottom: 0; - } - - .btn { - position: absolute; - right: 10px; - bottom: 10px; - } - } -} - -#post-info-sneaky { - @include transition(all, 0.2s); - - z-index: 1; - position: fixed; - width: 100%; - margin: 0; - padding: 0; - bottom: 0; - - margin-bottom: -60px; - min-height: 20px; - - #post-info-container-sneaky { - @include info-container(); - - padding: 10px 0; - min-height: 20px; - } -} - -.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); - margin-bottom: -13px; - } -} - -.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 { -color: white; -text-shadow: 1px 1px black; -text-rendering: optimizelegibility; -} - -.post-comment { - -moz-box-shadow: 0 1px 2px -2px #999; - -webkit-box-shadow: 0 1px 2px -2px #999; - box-shadow: 0 1px 2px -2px #999; - - border-bottom: 1px solid #333; - - p:last-child { - margin-bottom: 0; - } - - &:last-child { - box-shadow: none; - border-bottom: none; - } - - padding: 10px; - padding-right: 40px; - margin: 0px; - - .avatar { - @include border-radius(); - - border: { - top: 1px solid #222; - right: 1px solid #444; - left: 1px solid #444; - bottom: 1px solid #666; - } - } - - text-shadow: 0 1px 3px rgba(0,0,0,0.3); - - a:hover { - color: #99CCFF - } - - time { - color: #666; - font-size: smaller; - } - - .controls { - @include transition(opacity); - @include opacity(0); - - float: right; - margin-right: -40px; - - a { - padding: 3px 5px; - &:hover { - text-decoration: none; - } - } - } - - &:hover { - .controls { - @include opacity(0.4); - - &:hover { - @include opacity(1); - } - } - } -} - -#user-controls { - height: 30px; - - .avatar { - vertical-align: top; - height: 27px; - width: 27px; - } - - .label { - @include opacity(0.6); - @include transition(opacity, 0.3s); - @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9)); - - position: relative; - - z-index: 20; - - padding: 5px; - margin-right: 5px; - line-height: 24px; - - padding-top: 3px; - padding-right: 2px; - - i { - padding: 0; - margin: 0; - } - - background-color: #000; - color: #fff; - - &.comment { - padding-right: 5px; - margin-right: 0; - } - - &:hover { - @include opacity(1); - text-decoration: none; - } - } -} - -#post-content { - display: table; - - - position: absolute; - height: 100%; - width: 100%; - - .post { - padding: 70px 10%; - } - - img { - @include photo-shadow(); - } -} - -#post-feedback { - /* fixes flicker on hover... no idea as to why */ - position: relative; - z-index: 30; -} - -#close-reactions-pane { - display: none; - - text-align: center; - position: absolute; - width: 100%; - left: 0; - top: -3px; - - #close-reactions-pane-container { - @include pane-width(); - top: 0; - - min-height: 30px; - display: inline-block; - position: relative; - } -} - -#post-interactions.active #close-reactions-pane { - display: block; -} - -.info-tick { - @include opacity(0.8); - - position: absolute; - right: 8px; - top: 8px; -} - -.aspects_dropdown { - i { - display: none; - } - - .selected i { - display: inline-block; - } - - a { - display : inline-block; - } -} - -.new_photo .photo{ - display: inline; - max-width: 200px; - max-height: 200px; -} - -.new-post-section { - margin-top: 100px; -} - -.aspect_selector { - float: right; -} - -.post-view { - display: table; - height: 100%; - width: 100%; -} - -#post-content { - button { - position: absolute; - } -} - -article { //mood posts - $big-text-size : 3em; - $medium-text-size : 2em; - $small-text-size: 1.5em; - - header, header p{ - //big text - @include media-text(); - font-size: $big-text-size; - } - - section.body{ - font-size: $small-text-size; - - &.short_body{ - font-size: $medium-text-size; - } - } - - &.night{ - background-color : $night-background-color; - color : $night-text-color; - } - - &.wallpaper{ - color : #fff; - } -} \ No newline at end of file +@import 'new_styles/base'; +@import 'new_styles/composer'; +@import 'new_styles/interactions'; +@import 'new_styles/viewer_nav'; diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss new file mode 100644 index 000000000..6dfb8c0b8 --- /dev/null +++ b/app/assets/stylesheets/new_styles/_base.scss @@ -0,0 +1,295 @@ +@import "_new_mixins"; + +/* variables */ +$light-grey: #999; +$pane-width: 420px; +$night-background-color : #333; +$night-text-color : #999; + +/* bootstrap extentions and overrides for asset pipeline */ +.icon-white { background-image: image_url("img/glyphicons-halflings-white.png"); } +.icon-black { background-image: image_url("img/glyphicons-halflings.png"); } +.icon-red { background-image: image_url("img/glyphicons-halflings-red.png"); } +.icon-green { background-image: image_url("img/glyphicons-halflings-green.png"); } +.icon-blue { background-image: image_url("img/glyphicons-halflings-blue.png"); } + +/* styles */ +.multi-photo { + display: table; + + p { + @include media-text(); + } + + .img-bounding-box { + display: table-cell; + text-align: center; + vertical-align: middle; + + padding: 20px; + height: 400px; + width: 300px; + } + + img { + @include photo-shadow(); + + max-width: 100%; + max-height: 100%; + } +} + +.photoset { + @include center(horizontal); + width: 100%; +} + +.rich-media { + z-index : -5000; //so the framer controls don't get lost + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + + text-align: center; + background-color: $night-background-color; + + p { + @include media-text(); + color: #999; + + a { + font-weight: normal; + font-size: smaller; + } + } + + iframe { + @include box-shadow(0, 3px, 15px, #000); + + width: 857px; + height: 480px; + max-width: 100%; + max-height: 100%; + } +} + +.rich-media-container { + display: table; + height: 100%; + width: 100%; +} + +.rich-media-container2 { + display: table-cell; + vertical-align: middle; +} + +.header { + position: fixed; + + /* position absolute for mobile */ + @media (max-width: 480px) { + position: absolute !important; + } + + top: 0; + left: 0; + z-index: 10; + width: 100%; + overflow-x: hidden; +} + +#header-container { + padding: 1.2%; + + /* don't pad the header if we're mobile */ + @media (max-width: 480px) { + padding: 0 !important; + } +} + +.avatar { + &.micro { + height: 20px; + width: 20px; + } + + &.small { + height: 35px; + width: 35px; + } +} + +.author-name { + color: inherit; + font-weight: bold; +} + +#post-author { + @include border-radius(); + + border: 1px solid rgba(255,255,255,0.2); + border-top: 1px solid rgba(255,255,255,0.5); + + float: left; + margin: 0; + + padding: 5px; + padding-right: 10px; + + background-color: rgba(255,255,255,0.6); + +/* don't pad the header if we're mobile */ + @media (max-width: 480px) { + @include border-radius(0); + background-color: rgba(255,255,255,0.4); + width: 100% !important; + border: none !important; + padding: none !important; + } + + max-height: 35px; + + .avatar { + @include border-radius(); + } + + .post-time, + .icon-retweet { + color: #000; + @include opacity(0.5); + } +} + + +.post-view { + display: table; + height: 100%; + width: 100%; +} + +//this is for the framer button, I should be removed +#post-content { + button { + position: absolute; + } +} + + +#post-content { + display: table; + position: absolute; + + height: 100%; + width: 100%; + + img { + @include photo-shadow(); + } +} + +article { //mood posts + //default frame show styles + $big-text-size : 3em; + $medium-text-size : 2em; + $small-text-size: 1.5em; + + @include centered-frame(); + + header, header p{ + //big text + @include media-text(); + font-size: $big-text-size; + } + + section.body{ + font-size: $small-text-size; + + &.short_body{ + font-size: $medium-text-size; + } + } + + &.night{ + background-color : $night-background-color; + color : $night-text-color; + } + + &.newspaper { + text-align: left; + @include newspaper-type(); + width: 960px; + .photo_viewer { + float: left; + } + } + + &.wallpaper{ + color : #fff; + } +} + +.status-with-photo-backdrop { + p { + color: #fff; + + a { + @include transition(background-color, 0.3s); + + color: #000; + background-color: #fff; + background-color: rgba(255,255,255,0.7); + padding: 0 5px; + + &:hover { + text-decoration: none; + background-color: #fff; + background-color: rgba(255,255,255,1); + } + } + } +} + +.darken { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(0,0,0,0.3); + + display: table; + + .darken-content { + @include centered-frame(); + height: 100%; + width: 100%; + } +} + +.photo-fill { + @include background-cover(); + z-index : -5000; //so the framer controls don't get lost + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.photo-backdrop { + p { + color: #fff; + z-index: 2; + } + + img { + position: relative; + } + + .photo-fill { + @include opacity(0.2) + } +} diff --git a/app/assets/stylesheets/new_styles/_composer.scss b/app/assets/stylesheets/new_styles/_composer.scss new file mode 100644 index 000000000..febec2c47 --- /dev/null +++ b/app/assets/stylesheets/new_styles/_composer.scss @@ -0,0 +1,27 @@ +.aspects_dropdown { + i { + display: none; + } + + .selected i { + display: inline-block; + } + + a { + display : inline-block; + } +} + +.new_photo .photo{ + display: inline; + max-width: 200px; + max-height: 200px; +} + +.new-post-section { + margin-top: 100px; +} + +.aspect_selector { + float: right; +} \ No newline at end of file diff --git a/app/assets/stylesheets/new_styles/_interactions.scss b/app/assets/stylesheets/new_styles/_interactions.scss new file mode 100644 index 000000000..7b1f210c2 --- /dev/null +++ b/app/assets/stylesheets/new_styles/_interactions.scss @@ -0,0 +1,311 @@ +@import "base"; + +#post-interactions { + position: fixed; + width: 100%; + bottom: 0; + left: 0; + text-align: center; + z-index: 100; +} + +#post-reactions { + height: 80%; + max-height: 350px; + overflow: auto; + margin-top: 5px; +} + +#post-info, +#post-info-sneaky { + text-align: center; + z-index: 10; + + margin-top: -33px; + + #post-info-container { + @include info-container(); + } + + .well { + -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); + -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); + box-shadow: inset 0 2px 2px rgba(0,0,0,0.10); + + margin: 5px; + padding: 5px; + text-align: left; + + max-height: 20px; + overflow: hidden; + + background: { + color: #222; + color: rgba(0,0,0,0.2); + } + + border: { + left: 1px solid #444; + right: 1px solid #444; + bottom: 1px solid #555; + top: 1px solid #111; + } + + .img { + margin-right: 5px; + } + + i { + margin-top: 1px; + } + + .avatar { + @include border-radius(); + margin-right: 0; + } + } + + #post-comments { + text-align: left; + padding-top: 0; + } + + #new-post-comment { + -webkit-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8); + -moz-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8); + box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8); + + border-top: 1px solid #444; + text-align: left; + background-image: image-url("hatched-bg-dark.png"); + } + + #new-post-comment-container { + position: relative; + + padding: 10px; + + textarea{ + height: 18px; + width: 318px; + } + + form { + margin-bottom: 0; + } + + .btn { + position: absolute; + right: 10px; + bottom: 10px; + } + } +} + +#post-info-sneaky { + @include transition(all, 0.2s); + + z-index: 1; + position: fixed; + width: 100%; + margin: 0; + padding: 0; + bottom: 0; + + margin-bottom: -60px; + min-height: 20px; + + #post-info-container-sneaky { + @include info-container(); + + padding: 10px 0; + min-height: 20px; + } +} + +.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); + margin-bottom: -13px; + } +} + +.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 { + color: white; + text-shadow: 1px 1px black; + text-rendering: optimizelegibility; +} + +.post-comment { + -moz-box-shadow: 0 1px 2px -2px #999; + -webkit-box-shadow: 0 1px 2px -2px #999; + box-shadow: 0 1px 2px -2px #999; + + border-bottom: 1px solid #333; + + p:last-child { + margin-bottom: 0; + } + + &:last-child { + box-shadow: none; + border-bottom: none; + } + + padding: 10px; + padding-right: 40px; + margin: 0px; + + .avatar { + @include border-radius(); + + border: { + top: 1px solid #222; + right: 1px solid #444; + left: 1px solid #444; + bottom: 1px solid #666; + } + } + + text-shadow: 0 1px 3px rgba(0,0,0,0.3); + + a:hover { + color: #99CCFF + } + + time { + color: #666; + font-size: smaller; + } + + .controls { + @include transition(opacity); + @include opacity(0); + + float: right; + margin-right: -40px; + + a { + padding: 3px 5px; + &:hover { + text-decoration: none; + } + } + } + + &:hover { + .controls { + @include opacity(0.4); + + &:hover { + @include opacity(1); + } + } + } +} + +#user-controls { + height: 30px; + + .avatar { + vertical-align: top; + height: 27px; + width: 27px; + } + + .label { + @include opacity(0.6); + @include transition(opacity, 0.3s); + @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9)); + + position: relative; + + z-index: 20; + + padding: 5px; + margin-right: 5px; + line-height: 24px; + + padding-top: 3px; + padding-right: 2px; + + i { + padding: 0; + margin: 0; + } + + background-color: #000; + color: #fff; + + &.comment { + padding-right: 5px; + margin-right: 0; + } + + &:hover { + @include opacity(1); + text-decoration: none; + } + } +} + +#post-feedback { +/* fixes flicker on hover... no idea as to why */ + position: relative; + z-index: 30; +} + +#close-reactions-pane { + display: none; + + text-align: center; + position: absolute; + width: 100%; + left: 0; + top: -3px; + + #close-reactions-pane-container { + @include pane-width(); + top: 0; + + min-height: 30px; + display: inline-block; + position: relative; + } +} + +#post-interactions.active #close-reactions-pane { + display: block; +} + +.info-tick { + @include opacity(0.8); + + position: absolute; + right: 8px; + top: 8px; +} \ No newline at end of file diff --git a/app/assets/stylesheets/new_styles/_new_mixins.scss b/app/assets/stylesheets/new_styles/_new_mixins.scss new file mode 100644 index 000000000..f133fa588 --- /dev/null +++ b/app/assets/stylesheets/new_styles/_new_mixins.scss @@ -0,0 +1,115 @@ + +/* mixins */ +@mixin center($orient:vertical) { + display: -webkit-box; + -webkit-box-orient: $orient; + -webkit-box-pack: center; + -webkit-box-align: center; + + display: -moz-box; + -moz-box-orient: $orient; + -moz-box-pack: center; + -moz-box-align: center; + + display: box; + box-orient: $orient; + box-pack: center; + box-align: center; +} + +@mixin box-shadow($left, $top, $blur, $color) { + -webkit-box-shadow: $left $top $blur $color; + -moz-box-shadow: $left $top $blur $color; + box-shadow: $left $top $blur $color; +} + +@mixin pane-width() { + width: $pane-width; + max-width: 100%; +} + +@mixin background-cover() { + background: no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +@mixin opacity($val) { + -moz-opacity: $val; + filter:alpha(opacity=$val*100); + opacity: $val; +} + +@mixin border-radius($top:3px, $bottom:$top) { + -webkit-border-radius: $top $top $bottom $bottom; + -moz-border-radius: $top $top $bottom $bottom; + border-radius: $top $top $bottom $bottom; +} + +@mixin transition($type, $speed:0.2s) { + -o-transition: $type $speed; + -moz-transition: $type $speed; + -webkit-transition: $type $speed; + transition: $type $speed; +} + +@mixin animation($name, $speed:0.2s, $easing:ease-in-out) { + -webkit-animation: $name $speed $easing; + -moz-animation: $name $speed $easing; + -ms-animation: $name $speed $easing; +} + +@mixin info-container() { + @include box-shadow(0, 6px, 20px, #000); + @include border-radius(3px, 0px); + @include dark-hatched-bg(); + @include pane-width(); + + display: inline-block; + position: relative; + + border-top: 1px solid #555; + border-right: 1px solid #444; + border-left: 1px solid #444; + + padding-top: 25px; + + color: #ddd; + +/* webkit acceleration */ + -webkit-transform: translateZ(0); +} + +@mixin dark-hatched-bg() { + background-color: #444; + background-image: image-url("hatched-bg-dark.png"); +} + +@mixin photo-shadow() { + @include box-shadow(0, 3px, 15px, #999); +} + +@mixin media-text() { + font: { + weight: bold; + size: 2em; + } + + line-height: 2em; + padding-bottom: 0; + margin-bottom: 0; +} + +@mixin newspaper-type() { + font-family: Palatino, times, georgia, serif; + margin-bottom: 1em; + padding: 0 5%; +} + +@mixin centered-frame(){ + display: table-cell; + vertical-align: middle; + text-align: center; +} diff --git a/app/assets/stylesheets/new_styles/_other.scss b/app/assets/stylesheets/new_styles/_other.scss new file mode 100644 index 000000000..e69de29bb diff --git a/app/assets/stylesheets/new_styles/_viewer_nav.scss b/app/assets/stylesheets/new_styles/_viewer_nav.scss new file mode 100644 index 000000000..a69857623 --- /dev/null +++ b/app/assets/stylesheets/new_styles/_viewer_nav.scss @@ -0,0 +1,71 @@ +@import "base"; + +#post-nav { + @include transition(opacity, 0.5s); + @include opacity(1); +} + +body.idle { + #post-nav { + @include opacity(0); + + .nav-arrow{ + &.right { + margin-right: -40px; + } + + &.left { + margin-left: -40px; + } + } + + } +} + +.nav-arrow { + @include opacity(0.8); + @include transition(all, 0.3s); + + display: table; + + position: fixed; + height: 100%; + z-index: 3; + top: 0; + padding: 0 1.2%; + + background-color: rgba(0,0,0,0); + + .nav-arrow-inner { + padding: 0; margin: 0; + display: table-cell; + vertical-align: middle; + } + + img { + @include opacity(0.5); + + height: 30px; + width: 30px; + + /* half the size of the nav arrows on mobile phones */ + @media (max-width: 480px) { + height: 15px; + width: 15px; + } + } + + &.left { + left: 0; + padding-right: 19px; + } + + &.right { + right: 0; + padding-left: 19px; + } + + &:hover { + background-color: rgba(0,0,0,0.1) + } +} diff --git a/app/assets/templates/post-viewer/content/status-with-photo-backdrop.jst.hbs b/app/assets/templates/post-viewer/content/status-with-photo-backdrop.jst.hbs deleted file mode 100644 index cc15b92a9..000000000 --- a/app/assets/templates/post-viewer/content/status-with-photo-backdrop.jst.hbs +++ /dev/null @@ -1,9 +0,0 @@ -{{#each photos}} -
-
-
- {{{../text}}} -
-
-
-{{/each}} diff --git a/app/assets/templates/wallpaper-mood.jst.hbs b/app/assets/templates/wallpaper-mood.jst.hbs index b3949f6c2..5a99bd8e8 100644 --- a/app/assets/templates/wallpaper-mood.jst.hbs +++ b/app/assets/templates/wallpaper-mood.jst.hbs @@ -1,10 +1,8 @@ -{{#each photos}} -
-
-
-
{{../headline}}
-
{{../body}}
-
+
+
+
+
{{headline}}
+
{{body}}
-{{/each}} +
diff --git a/spec/javascripts/app/views/post/newspaper_spec.js b/spec/javascripts/app/views/post/newspaper_spec.js new file mode 100644 index 000000000..0dc5f37b0 --- /dev/null +++ b/spec/javascripts/app/views/post/newspaper_spec.js @@ -0,0 +1,12 @@ +describe("app.views.Post.Newspaper", function(){ + beforeEach(function(){ + this.post = factory.post() + this.view = new app.views.Post.Newspaper({model : this.post}) + }) + + describe("rendering", function(){ + it("is happy", function(){ + this.view.render() + }) + }) +}) \ No newline at end of file