Merge branch 'betastrip' of git://github.com/DeadSuperHero/diaspora
This commit is contained in:
Jonne Haß
commit
ffde639f4d
37 changed files with 14 additions and 3044 deletions
|
|
@ -1,154 +0,0 @@
|
|||
//= require ../views/post/small_frame
|
||||
|
||||
app.pages.Framer = app.views.Base.extend({
|
||||
templateName : "flow",
|
||||
|
||||
id : "post-content",
|
||||
|
||||
subviews : {
|
||||
".flow-content" : "framerContent",
|
||||
".flow-controls .controls" : "framerControls"
|
||||
},
|
||||
|
||||
initialize : function(){
|
||||
this.model = app.frame
|
||||
if(!this.model.get("frame_name")) this.model.setFrameName()
|
||||
|
||||
this.model.authorIsCurrentUser = function(){ return true }
|
||||
this.model.bind("sync", this.navigateNext, this)
|
||||
|
||||
this.framerContent = new app.views.framerContent({model : this.model})
|
||||
this.framerControls = new app.views.framerControls({model : this.model})
|
||||
},
|
||||
|
||||
unbind : function(){
|
||||
this.model.off()
|
||||
},
|
||||
|
||||
navigateNext : function(){
|
||||
if(parent.location.pathname == '/new_bookmarklet') {
|
||||
this.bookmarkletNavigation()
|
||||
} else {
|
||||
this.defaultNavigation()
|
||||
}
|
||||
},
|
||||
|
||||
bookmarkletNavigation : function() {
|
||||
parent.close()
|
||||
},
|
||||
|
||||
defaultNavigation : function() {
|
||||
var url = app.currentUser.expProfileUrl()
|
||||
app.router.navigate(url, {trigger: true, replace: true})
|
||||
}
|
||||
});
|
||||
|
||||
app.views.framerContent = app.views.Base.extend({
|
||||
templateName : "framer-content",
|
||||
|
||||
events : {
|
||||
"change input" : "setFormAttrs"
|
||||
},
|
||||
|
||||
subviews : {
|
||||
".preview" : "smallFrameView",
|
||||
".template-picker" : 'templatePicker'
|
||||
},
|
||||
|
||||
formAttrs : {
|
||||
"input.mood:checked" : "frame_name"
|
||||
},
|
||||
|
||||
initialize : function(){
|
||||
this.model.bind("change:frame_name", this.render, this)
|
||||
},
|
||||
|
||||
smallFrameView : function() {
|
||||
return new app.views.Post.EditableSmallFrame({model : this.model})
|
||||
},
|
||||
|
||||
presenter : function() {
|
||||
var selectedFrame = this.model.get("frame_name")
|
||||
, templates = this.model.applicableTemplates(); //new app.models.Post.TemplatePicker(this.model).frameMoods;
|
||||
|
||||
return _.extend(this.defaultPresenter(), {
|
||||
templates : _.map(templates, function(template) {
|
||||
return {
|
||||
name : template,
|
||||
checked : selectedFrame === template
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
app.views.Post.EditableSmallFrame = app.views.Post.SmallFrame.extend({
|
||||
className : "canvas-frame editable",
|
||||
|
||||
events : {
|
||||
"keyup [contentEditable]" : "setFormAttrs"
|
||||
},
|
||||
|
||||
formAttrs : {
|
||||
".text-content p" : "text"
|
||||
},
|
||||
|
||||
postRenderTemplate : function(){
|
||||
this.$(".text-content p").attr("contentEditable", true)
|
||||
}
|
||||
});
|
||||
|
||||
app.views.framerControls = app.views.Base.extend({
|
||||
templateName : 'framer-controls',
|
||||
|
||||
events : {
|
||||
"click input.done" : "saveFrame",
|
||||
"click input.back" : "editFrame",
|
||||
"change input" : "setFormAttrs"
|
||||
},
|
||||
|
||||
subviews:{
|
||||
".aspect-selector" : "aspectsDropdown",
|
||||
".service-selector" : "servicesSelector"
|
||||
},
|
||||
|
||||
formAttrs : {
|
||||
"input.aspect_ids" : "aspect_ids[]",
|
||||
"input.services" : "services[]"
|
||||
},
|
||||
|
||||
initialize : function(){
|
||||
this.aspectsDropdown = new app.views.AspectsDropdown({model:this.model});
|
||||
this.servicesSelector = new app.views.ServicesSelector({model:this.model});
|
||||
},
|
||||
|
||||
saveFrame : function(){
|
||||
this.setFormAttrs()
|
||||
if(this.inValidFrame()) {
|
||||
return false;
|
||||
}
|
||||
this.$('input').prop('disabled', 'disabled')
|
||||
this.model.save()
|
||||
|
||||
this.trackPost()
|
||||
},
|
||||
|
||||
trackPost : function() {
|
||||
var model = this.model
|
||||
|
||||
app.instrument("track", "Posted", {
|
||||
text : model.hasText(),
|
||||
photos : model.hasPhotos(),
|
||||
template : model.get("frame_name")
|
||||
})
|
||||
},
|
||||
|
||||
inValidFrame : function(){
|
||||
return (this.model.get('text').trim().length == 0) && (this.model.get('photos').length == 0)
|
||||
},
|
||||
|
||||
editFrame : function(){
|
||||
app.router.renderPage(function(){return new app.pages.Composer({model : app.frame})})
|
||||
app.router.navigate("/posts/new")
|
||||
}
|
||||
});
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
//= require ../views/profile_info_view
|
||||
|
||||
app.pages.Profile = app.views.Base.extend({
|
||||
templateName : "profile",
|
||||
id : "profile",
|
||||
|
||||
subviews : {
|
||||
"#profile-info" : "profileInfo",
|
||||
"#canvas" : "canvasView",
|
||||
"#wallpaper-upload" : "wallpaperForm",
|
||||
"#composer" : "composerView"
|
||||
},
|
||||
|
||||
events : {
|
||||
"click #edit-mode-toggle" : "toggleEdit",
|
||||
"click #logout-button" : "logOutConfirm",
|
||||
"click #composer-button" : "showComposer"
|
||||
},
|
||||
|
||||
tooltipSelector : "*[rel=tooltip]",
|
||||
|
||||
personGUID : null,
|
||||
editMode : false,
|
||||
composeMode : false,
|
||||
|
||||
initialize : function(options) {
|
||||
this.personGUID = options.personId
|
||||
|
||||
this.model = this.model || app.models.Profile.preloadOrFetch(this.personGUID)
|
||||
this.stream = options && options.stream || new app.models.Stream()
|
||||
this.stream.preloadOrFetch()
|
||||
|
||||
this.initViews()
|
||||
|
||||
/* binds */
|
||||
this.stream.items.bind("remove", this.pulsateNewPostControl, this)
|
||||
$(window).on("keydown", _.bind(this.closeComposer, this))
|
||||
},
|
||||
|
||||
initViews : function(){
|
||||
this.canvasView = new app.views.Canvas({ model : this.stream })
|
||||
this.wallpaperForm = new app.forms.Wallpaper()
|
||||
this.profileInfo = new app.views.ProfileInfo({ model : this.model })
|
||||
this.composerView = new app.pages.Composer();
|
||||
},
|
||||
|
||||
render :function () {
|
||||
var self = this;
|
||||
this.model.deferred
|
||||
.done(function () {
|
||||
self.setPageTitleAndBackground()
|
||||
app.views.Base.prototype.render.call(self)
|
||||
})
|
||||
.done(function () {
|
||||
self.stream.deferred.done(_.bind(self.pulsateNewPostControl, self));
|
||||
})
|
||||
|
||||
return self
|
||||
},
|
||||
|
||||
presenter : function(){
|
||||
var bio = this.model.get("bio") || ''
|
||||
|
||||
return _.extend(this.defaultPresenter(),
|
||||
{text : this.model && app.helpers.textFormatter(bio, this.model) })
|
||||
},
|
||||
|
||||
pulsateNewPostControl : function() {
|
||||
this.$("#composer-button")[
|
||||
this.stream.items.length == 0
|
||||
? 'addClass'
|
||||
: 'removeClass'
|
||||
]("pulse")
|
||||
},
|
||||
|
||||
setPageTitleAndBackground : function() {
|
||||
console.log(this.model.attributes)
|
||||
if(this.model.get("name")) {
|
||||
document.title = this.model.get("name")
|
||||
this.$el.css("background-image", "url(" + this.model.get("wallpaper") + ")")
|
||||
}
|
||||
},
|
||||
|
||||
toggleEdit : function(evt) {
|
||||
if(evt) { evt.preventDefault() }
|
||||
this.editMode = !this.editMode
|
||||
this.$el.toggleClass("edit-mode")
|
||||
},
|
||||
|
||||
showComposer : function(evt) {
|
||||
if(evt) { evt.preventDefault() }
|
||||
|
||||
this.toggleComposer()
|
||||
this.$("#post_text").focus()
|
||||
|
||||
app.router.navigate("/posts/new")
|
||||
},
|
||||
|
||||
closeComposer : function(evt) {
|
||||
if(!evt) { return }
|
||||
|
||||
if(this.composeMode && evt.keyCode == 27) {
|
||||
this.toggleComposer()
|
||||
evt.preventDefault()
|
||||
|
||||
// we should check for text and fire a warning prompt before exiting & clear the form
|
||||
app.router.navigate(app.currentUser.expProfileUrl(), {replace : true})
|
||||
}
|
||||
},
|
||||
|
||||
toggleComposer : function(){
|
||||
this.composeMode = !this.composeMode
|
||||
$("body").toggleClass("lock")
|
||||
|
||||
if(!this.composeMode) {
|
||||
this.$("#composer").toggleClass("zoom-out")
|
||||
setTimeout('this.$("#composer").toggleClass("hidden").toggleClass("zoom-out")', 200)
|
||||
} else {
|
||||
this.$("#composer").toggleClass("hidden")
|
||||
}
|
||||
this.$("#composer").toggleClass("zoom-in")
|
||||
},
|
||||
|
||||
logOutConfirm : function(evt) {
|
||||
if(!confirm("Are you sure you want to log out?"))
|
||||
evt.preventDefault();
|
||||
},
|
||||
});
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
app.pages.Stream = app.views.Base.extend({
|
||||
templateName : "stream",
|
||||
|
||||
events : {
|
||||
'activate .stream-frame-wrapper' : 'triggerInteractionLoad'
|
||||
},
|
||||
|
||||
subviews : {
|
||||
"#stream-content" : "streamView",
|
||||
"#stream-interactions" : "interactionsView"
|
||||
},
|
||||
|
||||
initialize : function(){
|
||||
this.stream = this.model = new app.models.Stream()
|
||||
this.stream.preloadOrFetch()
|
||||
|
||||
this.streamView = new app.pages.Stream.InfiniteScrollView({ model : this.stream })
|
||||
this.interactionsView = new app.views.StreamInteractions()
|
||||
|
||||
this.streamView.on('loadMore', this.updateUrlState, this);
|
||||
this.stream.on("fetched", this.refreshScrollSpy, this)
|
||||
this.stream.on("frame:interacted", this.selectFrame, this)
|
||||
},
|
||||
|
||||
postRenderTemplate : function() {
|
||||
this.$("#header").css("background-image", "url(" + app.currentUser.get("wallpaper") + ")")
|
||||
_.defer(function(){$('body').scrollspy({target : '.stream-frame-wrapper', offset : 205})})
|
||||
},
|
||||
|
||||
selectFrame : function(post){
|
||||
if(this.selectedPost == post) { return }
|
||||
this.selectedPost = post
|
||||
|
||||
this.$(".stream-frame-wrapper").removeClass("selected-frame")
|
||||
this.$(".stream-frame-wrapper[data-id=" + this.selectedPost.id +"]").addClass("selected-frame")
|
||||
this.interactionsView.setInteractions(this.selectedPost)
|
||||
},
|
||||
|
||||
updateUrlState : function(){
|
||||
var post = this.stream.items.last();
|
||||
if(post){
|
||||
this.navigateToPost(post)
|
||||
}
|
||||
},
|
||||
|
||||
navigateToPost : function(post){
|
||||
app.router.navigate(location.pathname + "?ex=true&max_time=" + post.createdAt(), {replace: true})
|
||||
},
|
||||
|
||||
triggerInteractionLoad : function(evt){
|
||||
this._throttledInteractions = this._throttledInteractions || _.bind(_.throttle(function(id){
|
||||
this.selectFrame(this.stream.items.get(id))
|
||||
}, 500), this)
|
||||
|
||||
this._throttledInteractions($(evt.target).data("id"))
|
||||
},
|
||||
|
||||
refreshScrollSpy : function(){
|
||||
_.defer($('body').scrollspy('refresh'))
|
||||
}
|
||||
},
|
||||
|
||||
//static methods
|
||||
{
|
||||
InfiniteScrollView : app.views.InfScroll.extend({
|
||||
initialize: function(){
|
||||
this.stream = this.model
|
||||
this.collection = this.stream.items
|
||||
this.postClass = app.views.Post.StreamFrame
|
||||
this.setupInfiniteScroll()
|
||||
}
|
||||
})
|
||||
});
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
app.views.Canvas = app.views.InfScroll.extend({
|
||||
initialize: function(){
|
||||
this.stream = this.model
|
||||
this.collection = this.stream.items
|
||||
this.postClass = app.views.Post.CanvasFrame
|
||||
this.postViews = []
|
||||
this.setupInfiniteScroll()
|
||||
this.stream.bind("reLayout", this.reLayout, this)
|
||||
this.stream.bind("fetched", this.triggerRelayoutAfterImagesLoaded, this)
|
||||
},
|
||||
|
||||
renderTemplate : function() {
|
||||
this.stream.deferred.done(_.bind(function(){
|
||||
if(this.stream.items.isEmpty()){
|
||||
var message
|
||||
, person = app.page.model
|
||||
if(person.get("is_own_profile")){
|
||||
message = "Make something to start the magic."
|
||||
} else {
|
||||
var name = person.get("name") || ""
|
||||
message = name + " hasn't posted anything yet."
|
||||
}
|
||||
|
||||
this.$el.html("<p class='no-post-message'>" + message + "</p>")
|
||||
} else {
|
||||
this.renderInitialPosts()
|
||||
}
|
||||
|
||||
//needs to be deferred so it happens after html rendering finishes
|
||||
_.defer(_.bind(this.mason, this))
|
||||
}, this))
|
||||
},
|
||||
|
||||
addPostView : function(post) {
|
||||
_.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
|
||||
},
|
||||
|
||||
mason : function() {
|
||||
var el = this.$el;
|
||||
|
||||
/* make two calls to isotope
|
||||
1) on dom ready
|
||||
2) on images ready
|
||||
*/
|
||||
triggerIsotope(el) && el.imagesLoaded(_.bind(function(){
|
||||
this.reLayout()
|
||||
},this))
|
||||
|
||||
function triggerIsotope(element) {
|
||||
return element.isotope({
|
||||
itemSelector : '.canvas-frame',
|
||||
visibleStyle : {scale : 1},
|
||||
hiddenStyle : {scale : 0.001},
|
||||
containerStyle : {position : "relative"},
|
||||
masonry : {
|
||||
columnWidth : 292.5
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
triggerRelayoutAfterImagesLoaded : function(){
|
||||
//event apparently only fires once
|
||||
this.$el.imagesLoaded(_.bind(this.reLayout, this))
|
||||
},
|
||||
|
||||
reLayout : function(){
|
||||
this.$el.isotope("reLayout")
|
||||
}
|
||||
});
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
@import 'mixins';
|
||||
@import 'new_styles/new_mixins';
|
||||
@import 'new_styles/variables';
|
||||
|
||||
/* core */
|
||||
@import 'new_styles/flash_messages';
|
||||
|
||||
/* custom animations */
|
||||
@import 'new_styles/animations';
|
||||
|
||||
/* 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';
|
||||
@import 'new_styles/spinner';
|
||||
@import 'new_styles/profile';
|
||||
|
||||
/* font overrides */
|
||||
@import 'new_styles/typography';
|
||||
|
||||
/* isotope */
|
||||
@import 'new_styles/isotope_transitions';
|
||||
|
||||
/* login */
|
||||
@import 'new_styles/login';
|
||||
@import 'new_styles/registration';
|
||||
@import 'new_styles/landing';
|
||||
|
||||
@import 'new_styles/forms';
|
||||
|
||||
|
||||
@include video-overlay();
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
@-webkit-keyframes opacity-pulse {
|
||||
0% { @include opacity(0.3); }
|
||||
65% { @include opacity(0.9); }
|
||||
100% { @include opacity(0.3); }
|
||||
}
|
||||
@-moz-keyframes opacity-pulse {
|
||||
0% { @include opacity(0.3); }
|
||||
65% { @include opacity(0.9); }
|
||||
100% { @include opacity(0.3); }
|
||||
}
|
||||
@-ms-keyframes opacity-pulse {
|
||||
0% { @include opacity(0.3); }
|
||||
65% { @include opacity(0.9); }
|
||||
100% { @include opacity(0.3); }
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes ease-over {
|
||||
0% { @include opacity(0); -webkit-transform : scale(1.3); }
|
||||
100% { @include opacity(1); -webkit-transform : scale(1); }
|
||||
}
|
||||
@-moz-keyframes ease-over {
|
||||
0% { @include opacity(0); -moz-transform : scale(1.3); }
|
||||
100% { @include opacity(1); -moz-transform : scale(1); }
|
||||
}
|
||||
@-ms-keyframes ease-over {
|
||||
0% { @include opacity(0); -ms-transform : scale(1.3); }
|
||||
100% { @include opacity(1); -ms-transform : scale(1); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes ease-out {
|
||||
0% { @include opacity(1); -webkit-transform : scale(1); }
|
||||
100% { @include opacity(0); -webkit-transform : scale(1.3); }
|
||||
}
|
||||
@-moz-keyframes ease-out {
|
||||
0% { @include opacity(1); -moz-transform : scale(1); }
|
||||
100% { @include opacity(0); -moz-transform : scale(1.3); }
|
||||
}
|
||||
@-ms-keyframes ease-out {
|
||||
0% { @include opacity(1); -ms-transform : scale(1); }
|
||||
100% { @include opacity(0); -ms-transform : scale(1.3); }
|
||||
}
|
||||
|
||||
/* flash message animations */
|
||||
@-webkit-keyframes expose {
|
||||
0% { top : -100px; }
|
||||
15% { top : 0; }
|
||||
85% { top : 0; }
|
||||
100% { top : -100px; }
|
||||
}
|
||||
@-moz-keyframes expose {
|
||||
0% { top : -100px; }
|
||||
15% { top : 0; }
|
||||
85% { top : 0; }
|
||||
100% { top : -100px; }
|
||||
}
|
||||
@-ms-keyframes expose {
|
||||
0% { top : -100px; }
|
||||
15% { top : 0; }
|
||||
85% { top : 0; }
|
||||
100% { top : -100px; }
|
||||
}
|
||||
|
|
@ -1,327 +0,0 @@
|
|||
html,
|
||||
body {
|
||||
/* hack to ensure fixed elements at height: 100%; are in relation to the window */
|
||||
max-height : 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image : image_url("texture/light-bg.png");
|
||||
padding : none;
|
||||
|
||||
&.lock {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* new link color */
|
||||
$link-blue : rgb(42,156,235);
|
||||
a { color : $link-blue }
|
||||
|
||||
/* bootstrap extentions */
|
||||
.icon-red { background-image: image_url("img/glyphicons-halflings-red.png"); }
|
||||
.icon-blue { background-image: image_url("img/glyphicons-halflings-blue.png"); }
|
||||
|
||||
.avatar {
|
||||
&.micro {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-family : Roboto;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#author-info {
|
||||
position : absolute;
|
||||
z-index : 300;
|
||||
|
||||
.author-name {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.bd {
|
||||
margin-top : 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.post-time,
|
||||
.icon-retweet {
|
||||
color: #555;
|
||||
@include opacity(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
#post-author {
|
||||
margin : 0;
|
||||
padding : 10px;
|
||||
|
||||
&.status-with-photo-backdrop,
|
||||
&.Wallpaper {
|
||||
.author-name {
|
||||
color : #fff;
|
||||
}
|
||||
|
||||
.post-time,
|
||||
.icon-retweet {
|
||||
color: #fff;
|
||||
@include opacity(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-view {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#post-content {
|
||||
display: table;
|
||||
position: absolute;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
img,
|
||||
iframe {
|
||||
@include photo-shadow();
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 857px;
|
||||
height: 480px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
article { //mood posts
|
||||
//default frame show styles
|
||||
$big-text-size : 2.5em;
|
||||
$medium-text-size : 1.5em;
|
||||
$small-text-size: 1em;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
max-height: 70%;
|
||||
border : 10px solid #fff;
|
||||
}
|
||||
|
||||
.photo_viewer {
|
||||
margin-bottom : 20px;
|
||||
}
|
||||
|
||||
@include centered-frame();
|
||||
.container {
|
||||
padding: 70px 0;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
header {
|
||||
padding : 0 100px;
|
||||
}
|
||||
|
||||
header, header p{
|
||||
//big text
|
||||
@include media-text();
|
||||
font-size: $big-text-size;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
section.body{
|
||||
p { font-size: $small-text-size; }
|
||||
|
||||
&.short_body{
|
||||
p{
|
||||
font-size: $medium-text-size;
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.night{
|
||||
background-color : $night-background-color;
|
||||
color : $night-text-color;
|
||||
|
||||
#author-info {
|
||||
color : $night-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.newspaper {
|
||||
@include newspaper-type();
|
||||
|
||||
text-align: left;
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.photo_viewer {
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.body p {
|
||||
@include newspaper-type();
|
||||
font-size: 1.2em;
|
||||
line-height: 1.7em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
&.wallpaper{
|
||||
color : #fff;
|
||||
}
|
||||
|
||||
.img-bounding-box {
|
||||
margin : 10px;
|
||||
display : inline-block;
|
||||
text-align : left;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 400px;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.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();
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
$bring-dark-accent-forward-color: #DDD;
|
||||
|
||||
#top-right-nav {
|
||||
z-index: 10;
|
||||
position : absolute;
|
||||
right : 10px;
|
||||
top : 10px;
|
||||
|
||||
& > a {
|
||||
@include transition(opacity);
|
||||
@include opacity(0.4);
|
||||
|
||||
margin-left : 5px;
|
||||
|
||||
&:hover {
|
||||
@include opacity(0.75);
|
||||
text-decoration : none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
position : fixed;
|
||||
top : 0;
|
||||
width : 100%;
|
||||
padding : 15px;
|
||||
z-index : 30;
|
||||
|
||||
-webkit-box-shadow : inset 0 -10px 10px -8px rgba(0,0,0,0.8);
|
||||
-moz-box-shadow : inset 0 -10px 10px -8px rgba(0,0,0,0.8);
|
||||
|
||||
border-bottom : 1px solid #333;
|
||||
|
||||
color : #fff;
|
||||
background : {
|
||||
color : #333;
|
||||
size : cover;
|
||||
attachment : fixed;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include opacity(0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* bootstrap label fixes for Roboto */
|
||||
.label {
|
||||
padding : 2px 5px;
|
||||
padding-bottom : 3px;
|
||||
|
||||
span {
|
||||
display : inline-block;
|
||||
position : relative;
|
||||
top : 1px;
|
||||
font-family : Roboto-Bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media (max-width: 767px) {
|
||||
body {
|
||||
padding : 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,485 +0,0 @@
|
|||
@mixin wide() {
|
||||
width : $two-column-width + px;
|
||||
}
|
||||
|
||||
a.logo{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.no-post-message {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.canvas-frame {
|
||||
float : left;
|
||||
margin : 10px;
|
||||
margin-bottom : 18px;
|
||||
|
||||
max-width : 100%;
|
||||
|
||||
/* expand / contract cursor declarations */
|
||||
&.x2 .content {
|
||||
cursor : nw-resize;
|
||||
cursor : -moz-zoom-out;
|
||||
cursor : -webkit-zoom-out;
|
||||
}
|
||||
.content {
|
||||
cursor : nwse-resize;
|
||||
cursor : -moz-zoom-in;
|
||||
cursor : -webkit-zoom-in;
|
||||
}
|
||||
|
||||
.content {
|
||||
/* default height to be overridden */
|
||||
min-height : $column-width + px;
|
||||
}
|
||||
|
||||
&.has-media .content {
|
||||
min-height : 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include transition(-webkit-transform);
|
||||
@include box-shadow(0, 8px, 50px, rgba(0,0,0,0.9));
|
||||
|
||||
background-image : image_url("texture/paper.jpg");
|
||||
|
||||
&:hover {
|
||||
.info {
|
||||
top : 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
-webkit-transform : scale(0.99);
|
||||
}
|
||||
|
||||
img {
|
||||
border : none;
|
||||
}
|
||||
|
||||
//hax to deal with markdownify
|
||||
p {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
position : relative;
|
||||
|
||||
background-color : #fff;
|
||||
|
||||
width : $column-width + px;
|
||||
max-width : 100%;
|
||||
|
||||
overflow : hidden;
|
||||
|
||||
/* used in masking photos with overflow: hidden; */
|
||||
.image-container {
|
||||
overflow : hidden;
|
||||
width : 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width : 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed-frame {
|
||||
.thumb {
|
||||
position : relative;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
max-height: 222px;
|
||||
}
|
||||
}
|
||||
|
||||
.controls{
|
||||
position : absolute;
|
||||
z-index : 100;
|
||||
top : 10px;
|
||||
right : 10px;
|
||||
|
||||
display : none;
|
||||
|
||||
.edit-mode & {
|
||||
display : inline-block;
|
||||
}
|
||||
|
||||
a, span {
|
||||
display : inline-block;
|
||||
background-size : 30px 30px;
|
||||
height : 30px;
|
||||
width : 30px;
|
||||
text-decoration : none;
|
||||
}
|
||||
|
||||
.delete {
|
||||
background-image : image_url('buttons/delete.png');
|
||||
|
||||
&:hover {
|
||||
background-image : image_url('buttons/delete_hover.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
@include transition(top);
|
||||
@include box-shadow(0,1px,3px,rgba(0,0,0,0.3));
|
||||
@include opacity(0.8);
|
||||
|
||||
cursor : pointer;
|
||||
|
||||
background-color : rgba(255,255,255,0.8);
|
||||
border-bottom : 1px solid #fff;
|
||||
|
||||
color : #000;
|
||||
|
||||
position : absolute;
|
||||
top : -32px;
|
||||
right : 0;
|
||||
text-align : center;
|
||||
width : 100%;
|
||||
|
||||
z-index : 30;
|
||||
|
||||
padding : 5px 0;
|
||||
|
||||
&:hover {
|
||||
@include opacity(0.9);
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
|
||||
height : 29px;
|
||||
width : 29px;
|
||||
}
|
||||
|
||||
.timestamp,
|
||||
.permalink {
|
||||
margin : 1px 7px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
float : left;
|
||||
margin-top : 2px;
|
||||
}
|
||||
|
||||
.permalink {
|
||||
cursor : pointer;
|
||||
float : right;
|
||||
}
|
||||
}
|
||||
|
||||
.background-color {
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
position: absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
position : relative;
|
||||
z-index : 10;
|
||||
color : #000;
|
||||
|
||||
text-shadow : 0 2px 0 rgba(#fff,0.6), 0 -1px 2px rgba(#555, 0.1);
|
||||
font-size : 1.5em;
|
||||
line-height : 1.2em;
|
||||
|
||||
/* I'D DO ANYTHING FOR TEXT, BUT I WON'T DO THAT (see: http://www.youtube.com/watch?v=9GNhdQRbXhc) */
|
||||
max-height : 485.5px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
word-break : break-word;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.cyan .background-color { background-color : rgba($cyan, 0.2); }
|
||||
&.green .background-color { background-color : rgba($green, 0.2); }
|
||||
&.yellow .background-color { background-color : rgba($yellow, 0.2); }
|
||||
&.purple .background-color { background-color : rgba($purple, 0.2); }
|
||||
&.lime-green .background-color { background-color : rgba($lime-green, 0.2); }
|
||||
&.orange .background-color { background-color : rgba($orange, 0.2); }
|
||||
&.red .background-color { background-color : rgba($red, 0.2); }
|
||||
&.turquoise .background-color { background-color : rgba($turquoise, 0.2); }
|
||||
&.sand .background-color { background-color : rgba($sand, 0.8); }
|
||||
|
||||
&.blog-text {
|
||||
.text-content {
|
||||
padding : 10px;
|
||||
color : #222;
|
||||
|
||||
p {
|
||||
text-shadow : none;
|
||||
|
||||
font-family : Palatino, Georgia, Times, serif;
|
||||
font-weight : normal;
|
||||
font-size : 0.8em;
|
||||
line-height : 1.5em;
|
||||
text-align : justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:no-text {
|
||||
img {
|
||||
border : none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.wallpaper) {
|
||||
img {
|
||||
border-bottom : 1px solid #ddd;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
padding : 20px;
|
||||
font-size : 14px;
|
||||
line-height : 18px;
|
||||
color : #444;
|
||||
}
|
||||
}
|
||||
|
||||
&.editable:not(.has-media),
|
||||
&.big-text {
|
||||
.text-content {
|
||||
display : table;
|
||||
height : 225px;
|
||||
width : 225px;
|
||||
margin: 0px auto;
|
||||
|
||||
p {
|
||||
display : table-cell;
|
||||
vertical-align : middle;
|
||||
|
||||
font-size : 2.0em;
|
||||
line-height : 1.1em;
|
||||
text-align : center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.editable:not(.has-media) p {
|
||||
min-width : 225px;
|
||||
min-height : 225px;
|
||||
}
|
||||
|
||||
&.x2.big-text .text-content {
|
||||
width : $two-column-width - 40 + px;
|
||||
}
|
||||
|
||||
/* larger declarations */
|
||||
&.x2.width .content { @include wide(); }
|
||||
|
||||
&.sticky-note.x2.height .content {
|
||||
min-height : $two-row-height + px;
|
||||
}
|
||||
|
||||
&.wallpaper {
|
||||
.image-container {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
&.has-text{
|
||||
img {
|
||||
//image container background is black, lowering opacity darkens image
|
||||
@include opacity(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.text-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 40%;
|
||||
@include centered-frame();
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
|
||||
p {
|
||||
text-shadow : none;
|
||||
padding : 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* new styles go! */
|
||||
&.typist {
|
||||
.content {
|
||||
background : {
|
||||
image : image_url("texture/typist.png");
|
||||
color : transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.background-color {
|
||||
display : none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family : "American Typewriter", "Courier";
|
||||
letter-spacing : 1.5px;
|
||||
font-size : 0.9em;
|
||||
color : #111;
|
||||
}
|
||||
}
|
||||
|
||||
&.fridge {
|
||||
p {
|
||||
font : {
|
||||
family : "Noteworthy", "Marker Felt", "Comic Sans";
|
||||
style : italic;
|
||||
}
|
||||
font-size : 2em;
|
||||
line-height : 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
&.vanilla {
|
||||
.content {
|
||||
background :{
|
||||
color : #fff;
|
||||
image : image_url("texture/vanilla.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
.background-color {
|
||||
display : none;
|
||||
}
|
||||
|
||||
p {
|
||||
color : #111;
|
||||
text-shadow : none;
|
||||
font : {
|
||||
weight : normal;
|
||||
family : Roboto-Light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* new stream overrides */
|
||||
#stream {
|
||||
color : #fff;
|
||||
background-color : #222;
|
||||
|
||||
.background {
|
||||
@include box-shadow(-2px, 0, 7px, rgba(0,0,0,0.8));
|
||||
@include dark-hatched-bg();
|
||||
|
||||
position : fixed;
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
|
||||
#stream-interactions,
|
||||
#stream-content {
|
||||
padding-top : 90px;
|
||||
}
|
||||
}
|
||||
|
||||
#stream-content {
|
||||
.stream-frame {
|
||||
.stream-frame-wrapper {
|
||||
position: relative; //interactions scroll spy gets confused about div height when there are images without this line.
|
||||
}
|
||||
margin-bottom : 40px;
|
||||
|
||||
.stream-frame-feedback {
|
||||
float : right;
|
||||
margin-top : 8px;
|
||||
}
|
||||
|
||||
.photo-backdrop .text-content p,
|
||||
.status-with-photo-backdrop .text-content p {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.canvas-frame {
|
||||
.info {
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
|
||||
/* a media box object */
|
||||
.author {
|
||||
margin : 0;
|
||||
|
||||
.bd {
|
||||
margin-top : 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-frame {
|
||||
.content {
|
||||
border: 10px solid red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-frame {
|
||||
width: 100%;
|
||||
margin : 0;
|
||||
float : none;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
||||
/* cursor overrides */
|
||||
cursor : pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media (max-width: 767px) {
|
||||
body {
|
||||
padding : 0;
|
||||
}
|
||||
|
||||
.canvas-frame {
|
||||
width : 100%;
|
||||
margin-left : 0;
|
||||
margin-right : 0;
|
||||
|
||||
margin-bottom : 10px;
|
||||
|
||||
.content {
|
||||
font-size : 0.9em;
|
||||
margin : 0;
|
||||
width : auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
#composer.zoom-in #framer {
|
||||
-webkit-animation: ease-over 0.2s;
|
||||
-moz-animation: ease-over 0.2s;
|
||||
-ms-animation: ease-over 0.2s;
|
||||
}
|
||||
|
||||
#composer.zoom-out #framer {
|
||||
-webkit-animation: ease-out 0.2s;
|
||||
-moz-animation: ease-out 0.2s;
|
||||
-ms-animation: ease-out 0.2s;
|
||||
}
|
||||
|
||||
#composer #framer {
|
||||
padding-top : 100px;
|
||||
}
|
||||
|
||||
#framer {
|
||||
color : #fff;
|
||||
background-color : rgba(0,0,0,0.8);
|
||||
|
||||
background-image : image_url("texture/hatched-dark.png");
|
||||
|
||||
z-index : 200;
|
||||
|
||||
text-align : left;
|
||||
|
||||
position : absolute;
|
||||
left : 0;
|
||||
top : 0;
|
||||
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
|
||||
overflow : auto;
|
||||
|
||||
.new_picture{
|
||||
margin-top: 4%;
|
||||
}
|
||||
|
||||
.photos{
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input[disabled] {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
textarea#post_text{
|
||||
height: 100px;
|
||||
padding : 10px;
|
||||
}
|
||||
|
||||
.template-picker {
|
||||
float : left;
|
||||
margin-left : 10px;
|
||||
margin-right : -100px; // prevent the picker from being bumped down under the frame.
|
||||
|
||||
input {
|
||||
display : none;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
@include transition(background-color);
|
||||
@include border-radius();
|
||||
|
||||
display : inline-block;
|
||||
|
||||
cursor : pointer;
|
||||
|
||||
margin-right: 11px;
|
||||
padding: 7px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
line-height: 2em;
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
border : 4px solid rgba(255,255,255,1);
|
||||
}
|
||||
}
|
||||
|
||||
.template-name {
|
||||
text-align : center;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
|
||||
img {
|
||||
@include border-radius(5px);
|
||||
@include transition(border);
|
||||
|
||||
border : 4px solid transparent;
|
||||
background-color : #ddd;
|
||||
|
||||
height : 54px;
|
||||
width : 54px;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
.template-name {
|
||||
color : $link-blue;
|
||||
}
|
||||
|
||||
img {
|
||||
border : 4px solid $link-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
.canvas-frame {
|
||||
margin-left : 0;
|
||||
|
||||
&:hover {
|
||||
[contentEditable] {
|
||||
@include box-shadow(0,0,5px,$link-blue);
|
||||
}
|
||||
}
|
||||
|
||||
[contentEditable]:focus {
|
||||
@include box-shadow(0,0,0,rgba(0,0,0,0));
|
||||
outline : none;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
cursor : auto;
|
||||
|
||||
&:active {
|
||||
-webkit-transform : none;
|
||||
}
|
||||
|
||||
.info {
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flow-controls {
|
||||
padding: 20px 0;
|
||||
max-height: 68px;
|
||||
|
||||
.aspect-selector {
|
||||
display : inline-block;
|
||||
|
||||
.aspects_dropdown {
|
||||
display : inline-block;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
i, input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked + label i {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left : 3px;
|
||||
margin-top : 1px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin : 0;
|
||||
padding : 5px 0;
|
||||
|
||||
&:hover {
|
||||
background-color : #eee;
|
||||
}
|
||||
|
||||
span:not(.caret) {
|
||||
padding-left: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-selector {
|
||||
display : inline-block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
|
||||
// if you change this, check toggling the new publisher service broadcasts is still sensible
|
||||
// the checkbox should be hidden, and in the off state the service icons should be lighter
|
||||
// when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
|
||||
.magic-service-selector {
|
||||
margin : 0;
|
||||
|
||||
label { display : inline; }
|
||||
|
||||
img {
|
||||
@include transition(opacity);
|
||||
@include box-shadow(0,0,0,0);
|
||||
|
||||
cursor : pointer;
|
||||
height : 70px;
|
||||
width : 54px;
|
||||
}
|
||||
|
||||
input:not(:checked) + label {
|
||||
img {
|
||||
@include opacity(0.4);
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
&:hover img {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="image"] {
|
||||
height : 70px;
|
||||
width : 70px;
|
||||
|
||||
&:active {
|
||||
-webkit-transform : scale(0.95);
|
||||
-moz-transform : scale(0.95);
|
||||
-ms-transform : scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.flow-controls {
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.new_photo .photo{
|
||||
display: inline;
|
||||
max-width: 240px;
|
||||
max-height: 240px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#photo_upload_button {
|
||||
position: relative;
|
||||
margin-bottom : 9px;
|
||||
|
||||
input{
|
||||
@include opacity(0);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height:100%;
|
||||
cursor : pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
|
||||
@import '../_flash_messages';
|
||||
|
||||
#flash_notice,
|
||||
#flash_alert,
|
||||
#flash_error {
|
||||
.message {
|
||||
margin-top : 10px;
|
||||
padding : 10px 20px 8px;
|
||||
background-color : rgba(0,0,0,0.8);
|
||||
border : 1px solid rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
/* autocomplete colors */
|
||||
input:-webkit-autofill{
|
||||
background-color: #fff !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
|
||||
form.block-form {
|
||||
display : inline-block;
|
||||
|
||||
label {
|
||||
color : #555;
|
||||
}
|
||||
|
||||
input {
|
||||
&:invalid,
|
||||
&:invalid:required,
|
||||
&:invalid:required:focus {
|
||||
-webkit-box-shadow : none;
|
||||
-moz-box-shadow : none;
|
||||
box-shadow : none;
|
||||
box-shadow : none;
|
||||
|
||||
border : none;
|
||||
color : #555;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@include border-radius(5px);
|
||||
|
||||
-webkit-box-shadow : inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.7);
|
||||
|
||||
margin-bottom : 1em;
|
||||
|
||||
background-color : #fff;
|
||||
|
||||
border : 1px solid #888;
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
@include box-shadow(0,0,0,0);
|
||||
@include border-radius(0);
|
||||
|
||||
background : transparent;
|
||||
|
||||
padding : 10px;
|
||||
|
||||
margin-bottom : 0;
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* mainly bootstrap overrides */
|
||||
.control-group {
|
||||
margin : 0;
|
||||
border-bottom : 1px solid #ddd;
|
||||
|
||||
.control-label,
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
.field_with_errors label {
|
||||
padding : 10px;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
.controls { margin-left : 100px; position : relative; }
|
||||
.control-label { width : 80px; }
|
||||
|
||||
.controls .field_with_errors input {
|
||||
background : {
|
||||
image : image-url('invalid_fat@2x.png');
|
||||
repeat : no-repeat;
|
||||
position : 197px;
|
||||
size: 20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
text-align : center;
|
||||
display : block;
|
||||
width : 100%;
|
||||
padding : 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* buttons to be extracted? */
|
||||
.new-btn {
|
||||
@include transition(box-shadow);
|
||||
@include border-radius(5px);
|
||||
@include linear-gradient(#fff, rgb(233,233,233));
|
||||
@include box-shadow(0, 1px, 2px, rgba(0,0,0,0));
|
||||
|
||||
background-color : rgb(233,233,233);
|
||||
color : #888;
|
||||
border : 1px solid #888;
|
||||
|
||||
//font-family : Roboto-Bold;
|
||||
font-size : 14px;
|
||||
text-shadow : 0 1px 2px #eee;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0, 1px, 2px, rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow : inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,339 +0,0 @@
|
|||
@import '../mixins';
|
||||
|
||||
#post-interactions {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.permalink-wrapper,
|
||||
#user-controls {
|
||||
height: 30px;
|
||||
|
||||
.avatar {
|
||||
vertical-align: top;
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
a {
|
||||
@include opacity(0.6);
|
||||
@include transition(opacity, 0.3s);
|
||||
|
||||
position: relative;
|
||||
|
||||
z-index: 20;
|
||||
|
||||
padding: 5px;
|
||||
margin-right: 5px;
|
||||
line-height: 24px;
|
||||
|
||||
padding-top: 3px;
|
||||
padding-right: 2px;
|
||||
|
||||
i {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
color: #fff;
|
||||
|
||||
&.label {
|
||||
@include box-shadow(0, 0, 2px, rgba(255,255,255,0.9));
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
|
||||
/* stream specific wrapper */
|
||||
#stream-interactions {
|
||||
position : fixed;
|
||||
top : 0;
|
||||
bottom : 0;
|
||||
overflow-y : auto;
|
||||
|
||||
#post-info {
|
||||
text-align : left;
|
||||
margin-top : 10px;
|
||||
}
|
||||
|
||||
#user-controls {
|
||||
padding : 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.permalink-wrapper {
|
||||
float : right;
|
||||
margin-top : 9px;
|
||||
margin-right : -5px;
|
||||
margin-left : 4px;
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
/* Start: Recommended Isotope styles */
|
||||
|
||||
/**** Isotope Filtering ****/
|
||||
|
||||
.isotope-item {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.isotope-hidden.isotope-item {
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/**** Isotope CSS3 transitions ****/
|
||||
|
||||
.isotope,
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-duration: 0.4s;
|
||||
-moz-transition-duration: 0.4s;
|
||||
-ms-transition-duration: 0.4s;
|
||||
-o-transition-duration: 0.4s;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.isotope {
|
||||
-webkit-transition-property: height, width;
|
||||
-moz-transition-property: height, width;
|
||||
-ms-transition-property: height, width;
|
||||
-o-transition-property: height, width;
|
||||
transition-property: height, width;
|
||||
}
|
||||
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-property: -webkit-transform, opacity;
|
||||
-moz-transition-property: -moz-transform, opacity;
|
||||
-ms-transition-property: -ms-transform, opacity;
|
||||
-o-transition-property: top, left, opacity;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
/**** disabling Isotope CSS3 transitions ****/
|
||||
|
||||
.isotope.no-transition,
|
||||
.isotope.no-transition .isotope-item,
|
||||
.isotope .isotope-item.no-transition {
|
||||
-webkit-transition-duration: 0s;
|
||||
-moz-transition-duration: 0s;
|
||||
-ms-transition-duration: 0s;
|
||||
-o-transition-duration: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
/* End: Recommended Isotope styles */
|
||||
|
||||
|
||||
|
||||
/* disable CSS transitions for containers with infinite scrolling*/
|
||||
.isotope.infinite-scrolling {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
/* le declarations */
|
||||
#landing {
|
||||
overflow : hidden;
|
||||
position : absolute;
|
||||
min-height : 100%;
|
||||
width : 100%;
|
||||
top : 0;
|
||||
left : 0;
|
||||
|
||||
background : {
|
||||
color : #fff;
|
||||
}
|
||||
|
||||
#sign_up {
|
||||
text-align:center;
|
||||
position : relative;
|
||||
z-index : 20;
|
||||
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom:50px;
|
||||
|
||||
form {
|
||||
label.control-label { width : 80px !important; text-align:right; }
|
||||
.controls { margin-left : 100px; }
|
||||
|
||||
input[type='submit'] {
|
||||
@include transition(background);
|
||||
@include box-shadow(0,0,0,0);
|
||||
|
||||
font-size:1.2em;
|
||||
background : #99CC00;
|
||||
color : #fff;
|
||||
text-shadow : 0 -1px 0 #669900;
|
||||
border : 1px solid #999;
|
||||
|
||||
&:hover {
|
||||
background : desaturate(#99CC00, 15%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include box-shadow(0,0,0,0);
|
||||
background : darken(rgb(255, 77, 54), 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#invites {
|
||||
margin : 20px 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
padding : 10px 0;
|
||||
color : #333;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
#landing_banner {
|
||||
.container {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
text-align:center;
|
||||
padding:50px;
|
||||
margin-bottom:50px;
|
||||
color:#ccc;
|
||||
background:#222;
|
||||
|
||||
h2 {
|
||||
font-weight:100;
|
||||
}
|
||||
|
||||
.landing-logo {
|
||||
margin-bottom:15px;
|
||||
height:60px;
|
||||
}
|
||||
|
||||
.landing-banner-right {
|
||||
position:absolute;
|
||||
right:0;
|
||||
|
||||
a {
|
||||
color:#ccc;
|
||||
font-size:1.2em;
|
||||
font-weight:100;
|
||||
padding:5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
@include border-radius(3px);
|
||||
border:1px solid #666;
|
||||
background:#111;
|
||||
|
||||
&:hover {
|
||||
background:#222;
|
||||
border:1px solid #999;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#steps {
|
||||
text-align: center;
|
||||
p {
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
#login {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
padding-top : 200px;
|
||||
min-width : 100%;
|
||||
|
||||
//color : #fff;
|
||||
text-align : center;
|
||||
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
width : 120px;
|
||||
}
|
||||
|
||||
#huge-text {
|
||||
font-family : Roboto-Light;
|
||||
font-size : 200px;
|
||||
color : #ddd;
|
||||
text-shadow : 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
#forgot_password_link {
|
||||
margin : 40px;
|
||||
color : #999;
|
||||
clear : all;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
$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 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 info-container-base() {
|
||||
@include box-shadow(0, 6px, 20px, #000);
|
||||
@include dark-hatched-bg();
|
||||
|
||||
border-top: 1px solid #555;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
@mixin info-container() {
|
||||
@include info-container-base();
|
||||
@include border-radius(3px, 0px);
|
||||
@include pane-width();
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
border-right: 1px solid #444;
|
||||
border-left: 1px solid #444;
|
||||
|
||||
padding-top: 25px;
|
||||
|
||||
/* webkit acceleration */
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
@mixin dark-hatched-bg() {
|
||||
background-color: #444;
|
||||
background-image: image-url("texture/hatched-dark.png");
|
||||
}
|
||||
|
||||
@mixin photo-shadow() {
|
||||
@include box-shadow(0, 3px, 15px, rgba(0,0,0,0.7));
|
||||
}
|
||||
|
||||
@mixin media-text() {
|
||||
font-size: 2em;
|
||||
line-height: 1.2em;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@mixin newspaper-type() {
|
||||
font-family: Palatino, times, georgia, serif;
|
||||
}
|
||||
|
||||
@mixin centered-frame(){
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,245 +0,0 @@
|
|||
#profile {
|
||||
min-height : 100%;
|
||||
|
||||
color : #fff;
|
||||
background : {
|
||||
color : #333;
|
||||
|
||||
/* The background-image property will be user-generated and set in `app.pages.Profile` (app/assets/javascripts/app/pages/profile.js)
|
||||
and should ONLY be set once the image is fully loaded.
|
||||
|
||||
Optimal imagemagick manipulation settings for uploaded image (via trial & error):
|
||||
|
||||
`mogrify -brightness-contrast -40x-50`
|
||||
|
||||
NOTE: I noticed that just turning the brightness down had an adverse affect on contrast,
|
||||
thus the "washing out" at -50 contrast. For more info on this specific command, read the documentation
|
||||
on it here: http://www.imagemagick.org/script/command-line-options.php#brightness-contrast */
|
||||
|
||||
size : cover;
|
||||
attachment : fixed;
|
||||
}
|
||||
}
|
||||
|
||||
/* getting started pulse animation */
|
||||
#composer-button.pulse {
|
||||
-webkit-animation: opacity-pulse 1s infinite;
|
||||
-moz-animation: opacity-pulse 1s infinite;
|
||||
-ms-animation: opacity-pulse 1s infinite;
|
||||
}
|
||||
|
||||
/* functionality under edit mode */
|
||||
.edit-mode {
|
||||
#edit-mode-toggle.control {
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
.canvas-frame .info {
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
|
||||
#profile-header {
|
||||
text-align : center;
|
||||
padding : 50px;
|
||||
padding-bottom : 0;
|
||||
}
|
||||
|
||||
.profile-image-container {
|
||||
border-radius: 140px;
|
||||
border : 3px solid #fff;
|
||||
box-shadow : 0 0 2px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(255,255,255,0.3);
|
||||
background-size: cover;
|
||||
|
||||
height : 140px;
|
||||
width : 140px;
|
||||
background : {
|
||||
position : center;
|
||||
image : image-url('user/default.png');
|
||||
}
|
||||
|
||||
display : inline-block;
|
||||
|
||||
margin-bottom : 5px;
|
||||
|
||||
&.small {
|
||||
height : 40px;
|
||||
width : 40px;
|
||||
border : 2px solid #fff;
|
||||
}
|
||||
|
||||
&.smaller {
|
||||
height : 34px;
|
||||
width : 34px;
|
||||
border : 2px solid #ccc;
|
||||
}
|
||||
|
||||
&.micro {
|
||||
height : 24px;
|
||||
width : 24px;
|
||||
border : 2px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
#profile-controls {
|
||||
text-align : right;
|
||||
padding : 10px 16px;
|
||||
|
||||
/* when our buttons aren't there, we still want to maintain a persistent height */
|
||||
min-height : 40px;
|
||||
|
||||
.control {
|
||||
@include transition(opacity);
|
||||
@include opacity(0.6);
|
||||
@include border-radius(3px);
|
||||
@include box-shadow(0, 1px, 2px, rgba(0,0,0,0.8));
|
||||
|
||||
font-family : Roboto-Bold;
|
||||
color : #ccc;
|
||||
|
||||
position : relative;
|
||||
top : 11px;
|
||||
|
||||
background-color : #000;
|
||||
border : 1px solid #666;
|
||||
|
||||
padding : 10px;
|
||||
padding-top : 10px;
|
||||
margin-left : 8px;
|
||||
|
||||
&#composer-button {
|
||||
position : relative;
|
||||
font-size : 14px;
|
||||
line-height : 14px;
|
||||
padding-bottom : 8px;
|
||||
padding-top : 9px;
|
||||
padding-right : 8px;
|
||||
}
|
||||
|
||||
&#edit-mode-toggle {
|
||||
top : 10px;
|
||||
padding-bottom : 10px;
|
||||
img {
|
||||
margin-top : -5px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height : 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include opacity(1);
|
||||
background-color : #000;
|
||||
text-decoration : none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include opacity(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#profile-stats {
|
||||
i {
|
||||
@include transition(opacity);
|
||||
@include opacity(0.7);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration : none;
|
||||
}
|
||||
|
||||
a:hover > i,
|
||||
a:hover > img
|
||||
{
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
.divider {
|
||||
color : #999;
|
||||
}
|
||||
|
||||
.cake {
|
||||
@include opacity(0.63);
|
||||
|
||||
width : 11px;
|
||||
height : 15px;
|
||||
|
||||
margin-right : 2px;
|
||||
position : relative;
|
||||
top : -3px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
margin : 10px 5px;
|
||||
|
||||
&.services {
|
||||
.service {
|
||||
position : relative;
|
||||
margin-right : 2px;
|
||||
top : -2px;
|
||||
|
||||
img {
|
||||
@include transition(opacity);
|
||||
@include opacity(0.5);
|
||||
|
||||
height : 14px;
|
||||
width : 14px;
|
||||
}
|
||||
|
||||
& > img:hover {
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration : none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#profile-bio {
|
||||
display : none;
|
||||
|
||||
margin-top : 20px;
|
||||
text-align : center;
|
||||
|
||||
p {
|
||||
color : #777;
|
||||
display : inline-block;
|
||||
width : $two-column-width + px;
|
||||
text-align : center;
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media (max-width: 767px) {
|
||||
#profile {
|
||||
background-size : 767px;
|
||||
}
|
||||
|
||||
.profile-image-container {
|
||||
height : 100px;
|
||||
width : 100px;
|
||||
border-width : 2px;
|
||||
}
|
||||
|
||||
#profile-controls {
|
||||
display : none;
|
||||
}
|
||||
|
||||
#profile-header {
|
||||
padding : 20px;
|
||||
}
|
||||
|
||||
#wallpaper-upload,
|
||||
.edit-control {
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
#registration {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
background-color : #afc652;
|
||||
min-height : 100%;
|
||||
min-width : 100%;
|
||||
|
||||
color : #fff;
|
||||
|
||||
.container {
|
||||
margin-top : 100px;
|
||||
}
|
||||
|
||||
#create-something-text {
|
||||
font-family : Roboto-Light;
|
||||
font-size : 100px;
|
||||
line-height : 100px;
|
||||
white-space : nowrap;
|
||||
}
|
||||
|
||||
#diaspora-hearts {
|
||||
font-family : Roboto-Light;
|
||||
font-size : 24px;
|
||||
margin-top : 0.2em;
|
||||
margin-bottom : 1em;
|
||||
white-space : nowrap;
|
||||
}
|
||||
|
||||
#sign-up-text {
|
||||
font-family : Roboto-Bold;
|
||||
color : #7f9448;
|
||||
margin-bottom : 0.5em;
|
||||
}
|
||||
|
||||
#collage {
|
||||
width : 344px;
|
||||
height : auto;
|
||||
|
||||
max-width : 95%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@-webkit-keyframes fade-in {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes fade-in {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#paginate, #infscr-loading {
|
||||
margin-top: 10px;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.loaded {
|
||||
-webkit-animation: fade-in 0.16s linear;
|
||||
-moz-animation: fade-in 0.16s linear;
|
||||
}
|
||||
|
||||
.loader {
|
||||
-webkit-mask-image: image-url('static-loader.png');
|
||||
-webkit-animation: spin 1s infinite ease-in-out,
|
||||
fade-in 0.2s ease-in;
|
||||
-moz-animation: spin 1s infinite ease-in-out,
|
||||
fade-in 0.2s ease-in;
|
||||
|
||||
background-image : image-url("static-loader.png");
|
||||
|
||||
display: inline-block;
|
||||
width : 14px;
|
||||
height: 14px;
|
||||
|
||||
&.hidden{
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
/* Roboto */
|
||||
@font-face {
|
||||
font-family : Roboto;
|
||||
src : image-url('fonts/Roboto-Regular.ttf');
|
||||
weight : normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family : Roboto-Bold;
|
||||
src : image-url('fonts/Roboto-Bold.ttf');
|
||||
weight : normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family : Roboto-Light;
|
||||
src : image-url('fonts/Roboto-Light.ttf');
|
||||
weight : normal;
|
||||
}
|
||||
|
||||
body, p, h1, h2, h3, h4, h5, h6, textarea, input, * {
|
||||
font-family : Roboto, Helvetica, sans-serif;
|
||||
font-weight : normal;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family : inherit;
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
$container-width : 1170;
|
||||
|
||||
$margin-between-columns : 30;
|
||||
$column-width : 295 - $margin-between-columns;
|
||||
$raw-two-column-width : ($column-width * 2) + ($margin-between-columns * 2) ;
|
||||
$two-column-width : $raw-two-column-width - 30; //simply subtract an arbitrary ammount :)
|
||||
|
||||
$margin-between-rows : 20;
|
||||
|
||||
$row-height : $column-width;
|
||||
$two-row-height : $raw-two-column-width - 20;
|
||||
|
||||
/* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
|
||||
$cyan : rgb(8,204,249);
|
||||
$yellow : rgb(242,244,9);
|
||||
$green : rgb(29,235,134);
|
||||
$purple : rgb(220,23,166);
|
||||
$lime-green : rgb(143, 199,10);
|
||||
$orange : rgb(237, 165, 13);
|
||||
$red : rgb(246, 68, 60);
|
||||
$turquoise : rgb(8, 224, 173);
|
||||
$sand : rgb(245, 239, 237);
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
@import '../mixins';
|
||||
|
||||
#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)
|
||||
}
|
||||
}
|
||||
|
|
@ -6,9 +6,6 @@ class HomeController < ApplicationController
|
|||
def show
|
||||
if current_user
|
||||
flag = FeatureFlagger.new(current_user, current_user.person)
|
||||
|
||||
if flag.new_profile? && flag.following_enabled?
|
||||
redirect_to person_path(current_user.person.guid)
|
||||
else
|
||||
redirect_to stream_path
|
||||
end
|
||||
|
|
|
|||
|
|
@ -85,8 +85,6 @@ class PeopleController < ApplicationController
|
|||
|
||||
raise(ActiveRecord::RecordNotFound) if remote_profile_with_no_user_session?
|
||||
return redirect_to :back, :notice => t("people.show.closed_account") if @person.closed_account?
|
||||
return redirect_to person_path(@person) if cant_experimental
|
||||
return redirect_to person_path(@person, :ex => true) if needs_experimental
|
||||
|
||||
@post_type = :all
|
||||
@aspect = :profile
|
||||
|
|
@ -197,14 +195,6 @@ class PeopleController < ApplicationController
|
|||
@flag ||= FeatureFlagger.new(current_user, @person)
|
||||
end
|
||||
|
||||
def cant_experimental
|
||||
params[:ex] && !flag.new_profile?
|
||||
end
|
||||
|
||||
def needs_experimental
|
||||
!params[:ex] && flag.new_profile? && flag.new_hotness? && request.format == "text/html"
|
||||
end
|
||||
|
||||
def remote_profile_with_no_user_session?
|
||||
@person.try(:remote?) && !user_signed_in?
|
||||
end
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ class PostsController < ApplicationController
|
|||
|
||||
def new
|
||||
@feature_flag = FeatureFlagger.new(current_user, current_user.person) #I should be a global before filter so @feature_flag is accessible
|
||||
redirect_to "/stream" and return unless @feature_flag.new_publisher?
|
||||
redirect_to "/stream" and return
|
||||
render :text => "", :layout => true
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -64,30 +64,6 @@ class ProfilesController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
def upload_wallpaper_image
|
||||
unless params[:photo].present?
|
||||
respond_to do |format|
|
||||
format.json { render :json => {"success" => false} }
|
||||
end
|
||||
return
|
||||
end
|
||||
|
||||
if remotipart_submitted?
|
||||
profile = current_user.person.profile
|
||||
|
||||
profile.wallpaper.store! params[:photo][:user_file]
|
||||
if profile.save
|
||||
respond_to do |format|
|
||||
format.json { render :json => {"success" => true, "data" => {"wallpaper" => profile.wallpaper.url}} }
|
||||
end
|
||||
else
|
||||
respond_to do |format|
|
||||
format.json { render :json => {"success" => false} }
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
protected
|
||||
|
||||
def munge_tag_string
|
||||
|
|
|
|||
|
|
@ -36,11 +36,6 @@ class StreamsController < ApplicationController
|
|||
end
|
||||
|
||||
def multi
|
||||
if params[:ex] && flag.new_stream?
|
||||
@stream = Stream::Multi.new(current_user, :max_time => max_time)
|
||||
gon.stream = PostPresenter.collection_json(@stream.stream_posts, current_user)
|
||||
render :nothing => true, :layout => "post"
|
||||
else
|
||||
stream_responder(Stream::Multi)
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -4,26 +4,6 @@ class FeatureFlagger
|
|||
@person = person_being_viewed
|
||||
end
|
||||
|
||||
def new_publisher?
|
||||
beta? || admin? || developer?
|
||||
end
|
||||
|
||||
def new_profile?
|
||||
person_is_beta?
|
||||
end
|
||||
|
||||
def new_stream?
|
||||
admin? && beta?
|
||||
end
|
||||
|
||||
def new_hotness?
|
||||
ENV["NEW_HOTNESS"]
|
||||
end
|
||||
|
||||
def following_enabled?
|
||||
person_is_beta? && @current_user.contacts.receiving.count == 0
|
||||
end
|
||||
|
||||
protected
|
||||
|
||||
def developer?
|
||||
|
|
@ -34,12 +14,4 @@ class FeatureFlagger
|
|||
@current_user.try(:admin?)
|
||||
end
|
||||
|
||||
def beta?
|
||||
Role.is_beta?(@current_user.person)
|
||||
end
|
||||
|
||||
def person_is_beta?
|
||||
return unless @person.present?
|
||||
Role.is_beta?(@person) || Role.is_admin?(@person)
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ class PersonPresenter
|
|||
def as_json(options={})
|
||||
attrs = @person.as_api_response(:backbone).merge(
|
||||
{
|
||||
:wallpaper => @person.profile.wallpaper.url,
|
||||
:is_own_profile => is_own_profile
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ class UserPresenter
|
|||
:services => services,
|
||||
:following_count => self.user.contacts.receiving.count,
|
||||
:configured_services => self.configured_services,
|
||||
:wallpaper => self.wallpaper
|
||||
}
|
||||
).to_json(options)
|
||||
end
|
||||
|
|
@ -27,10 +26,6 @@ class UserPresenter
|
|||
user.services.map{|service| service.provider }
|
||||
end
|
||||
|
||||
def wallpaper
|
||||
user.person.profile.wallpaper.url
|
||||
end
|
||||
|
||||
def aspects
|
||||
AspectPresenter.as_collection(user.aspects)
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
class WallpaperUploader < CarrierWave::Uploader::Base
|
||||
include CarrierWave::MiniMagick
|
||||
|
||||
def store_dir
|
||||
"uploads/images/wallpaper"
|
||||
end
|
||||
|
||||
def extension_white_list
|
||||
%w(jpg jpeg png tiff)
|
||||
end
|
||||
|
||||
# Filename is associated with the user's diaspora handle, ensuring uniqueness
|
||||
# and that only one copy is kept in the filesystem.
|
||||
def filename
|
||||
Digest::MD5.hexdigest(model.diaspora_handle) + File.extname(@filename) if @filename
|
||||
end
|
||||
|
||||
process :darken
|
||||
|
||||
def darken
|
||||
manipulate! do |img|
|
||||
# img.brightness_contrast "-40x-50"
|
||||
# thanks, heroku.
|
||||
img.modulate "40,40"
|
||||
|
||||
img = yield(img) if block_given?
|
||||
img
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
class RemoveWallpaperFromProfile < ActiveRecord::Migration
|
||||
def up
|
||||
add_column :profiles, :wallpaper, :string
|
||||
end
|
||||
def down
|
||||
remove_column: profiles, :wallpaper
|
||||
end
|
||||
10
db/schema.rb
10
db/schema.rb
|
|
@ -1,4 +1,3 @@
|
|||
# encoding: UTF-8
|
||||
# This file is auto-generated from the current state of the database. Instead
|
||||
# of editing this file, please use the migrations feature of Active Record to
|
||||
# incrementally modify your database, and then regenerate this schema definition.
|
||||
|
|
@ -11,7 +10,7 @@
|
|||
#
|
||||
# It's strongly recommended to check this file into your version control system.
|
||||
|
||||
ActiveRecord::Schema.define(:version => 20120803143552) do
|
||||
ActiveRecord::Schema.define(:version => 20120909053122) do
|
||||
|
||||
create_table "account_deletions", :force => true do |t|
|
||||
t.string "diaspora_handle"
|
||||
|
|
@ -107,6 +106,8 @@ ActiveRecord::Schema.define(:version => 20120803143552) do
|
|||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
add_index "conversations", ["author_id"], :name => "conversations_author_id_fk"
|
||||
|
||||
create_table "invitation_codes", :force => true do |t|
|
||||
t.string "token"
|
||||
t.integer "user_id"
|
||||
|
|
@ -144,6 +145,7 @@ ActiveRecord::Schema.define(:version => 20120803143552) do
|
|||
t.string "target_type", :limit => 60, :null => false
|
||||
end
|
||||
|
||||
add_index "likes", ["author_id"], :name => "likes_author_id_fk"
|
||||
add_index "likes", ["guid"], :name => "index_likes_on_guid", :unique => true
|
||||
add_index "likes", ["target_id", "author_id", "target_type"], :name => "index_likes_on_target_id_and_author_id_and_target_type", :unique => true
|
||||
add_index "likes", ["target_id"], :name => "index_likes_on_post_id"
|
||||
|
|
@ -169,6 +171,7 @@ ActiveRecord::Schema.define(:version => 20120803143552) do
|
|||
end
|
||||
|
||||
add_index "messages", ["author_id"], :name => "index_messages_on_author_id"
|
||||
add_index "messages", ["conversation_id"], :name => "messages_conversation_id_fk"
|
||||
|
||||
create_table "notification_actors", :force => true do |t|
|
||||
t.integer "notification_id"
|
||||
|
|
@ -200,7 +203,7 @@ ActiveRecord::Schema.define(:version => 20120803143552) do
|
|||
t.text "data", :null => false
|
||||
end
|
||||
|
||||
add_index "o_embed_caches", ["url"], :name => "index_o_embed_caches_on_url"
|
||||
add_index "o_embed_caches", ["url"], :name => "index_o_embed_caches_on_url", :length => {"url"=>255}
|
||||
|
||||
create_table "participations", :force => true do |t|
|
||||
t.string "guid"
|
||||
|
|
@ -321,7 +324,6 @@ ActiveRecord::Schema.define(:version => 20120803143552) do
|
|||
t.string "location"
|
||||
t.string "full_name", :limit => 70
|
||||
t.boolean "nsfw", :default => false
|
||||
t.string "wallpaper"
|
||||
end
|
||||
|
||||
add_index "profiles", ["full_name", "searchable"], :name => "index_profiles_on_full_name_and_searchable"
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
@javascript
|
||||
Feature: Interacting with the stream
|
||||
Background:
|
||||
Given I am logged in as a beta user with email "bill@bill.com"
|
||||
And "bill@bill.com" is an admin
|
||||
And I make a new publisher post "I like it like that."
|
||||
And I make a new publisher post "yeah baby."
|
||||
And I make a new publisher post "I got soul."
|
||||
When I go to the new stream
|
||||
|
||||
Scenario: Visiting the stream
|
||||
Then "I got soul." should be frame 1
|
||||
Then "yeah baby." should be frame 2
|
||||
Then "I like it like that." should be frame 3
|
||||
|
||||
# Scenario: Clicking on a post show the interactions
|
||||
# And I wait for 5 seconds
|
||||
# When I click into the "I got soul." stream frame
|
||||
# And I make a show page comment "you're such a pip"
|
||||
# And I go to the new stream
|
||||
# When I click the "I got soul." stream frame
|
||||
# Then "you're such a pip" should be a comment for "I got soul."
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
#@javascript
|
||||
#Feature: Post Viewer
|
||||
# In order to make my content look really great
|
||||
# As a User
|
||||
# I want my posts to have a bunch of different templates that I can page through
|
||||
#
|
||||
# Background:
|
||||
# Given a user with email "alice@alice.com"
|
||||
# And I sign in as "alice@alice.com"
|
||||
#
|
||||
## Wip tag sad on new cucumber, commenting for now.
|
||||
## Scenario: Paging through posts
|
||||
## Given I have posts for each type of template
|
||||
## Then I visit all of my posts
|
||||
## And I should have seen all of my posts displayed with the correct template
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
@javascript
|
||||
Feature: Creating a new post
|
||||
Background:
|
||||
Given a user with username "bob"
|
||||
And I sign in as "bob@bob.bob"
|
||||
And I trumpet
|
||||
|
||||
Scenario: Posting a public message with a photo
|
||||
And I write "I love RMS"
|
||||
And I upload a fixture picture with filename "button.gif"
|
||||
When I start the framing process
|
||||
When I select "Public" in my aspects dropdown
|
||||
And I finalize my frame
|
||||
When I go to "/stream"
|
||||
Then I should see "I love RMS" as the first post in my stream
|
||||
And "I love RMS" should be a public post in my stream
|
||||
Then "I love RMS" should have the "button.gif" picture
|
||||
|
||||
Scenario: Posting to Aspects
|
||||
And I write "This is super skrunkle"
|
||||
And I start the framing process
|
||||
When I select "All Aspects" in my aspects dropdown
|
||||
And I finalize my frame
|
||||
When I go to "/stream"
|
||||
Then I should see "This is super skrunkle" as the first post in my stream
|
||||
Then "This is super skrunkle" should be a limited post in my stream
|
||||
|
||||
Scenario: Mention a contact
|
||||
Given a user named "Alice Smith" with email "alice@alice.alice"
|
||||
And a user with email "bob@bob.bob" is connected with "alice@alice.alice"
|
||||
And I trumpet
|
||||
And I wait for the ajax to finish
|
||||
And I type "@a" to mention "Alice Smith"
|
||||
And I start the framing process
|
||||
Then the post should mention "Alice Smith"
|
||||
When I finalize my frame
|
||||
Then the post should mention "Alice Smith"
|
||||
|
||||
Scenario: Uploading multiple photos
|
||||
When I write "check out these pictures"
|
||||
And I upload a fixture picture with filename "button.gif"
|
||||
And I upload a fixture picture with filename "button.gif"
|
||||
And I go through the default framer
|
||||
And I go to "/stream"
|
||||
Then "check out these pictures" should have 2 pictures
|
||||
|
||||
Scenario: Framing your frame
|
||||
When I write "This is hella customized"
|
||||
And I upload a fixture picture with filename "button.gif"
|
||||
|
||||
And I start the framing process
|
||||
#defaults to the prettiest mood
|
||||
Then the post's default mood should be "Wallpaper"
|
||||
Then it should be a wallpaper small frame with the background "button.gif"
|
||||
Then I should see "This is hella customized" in the framer preview
|
||||
|
||||
When I select the mood "Typist"
|
||||
Then the post's mood should be "Typist"
|
||||
And "button.gif" should be in the post's small frame
|
||||
|
||||
And I should see "This is hella customized" in the framer preview
|
||||
|
||||
And I go back to the composer
|
||||
And I write "It sure is a beautiful Day"
|
||||
And I start the framing process
|
||||
Then the post's mood should be "Typist"
|
||||
And I should see "It sure is a beautiful Day" in the framer preview
|
||||
|
||||
When I finalize my frame
|
||||
#on stream
|
||||
Then "It sure is a beautiful Day" should be the first canvas frame
|
||||
When I click into the "It sure is a beautiful Day" post
|
||||
|
||||
#on show page
|
||||
And the post's mood should still be "Typist"
|
||||
|
||||
Scenario: The Wallpaper mood
|
||||
When I write "This is a pithy status" with body "And this is a long body"
|
||||
And I upload a fixture picture with filename "button.gif"
|
||||
And I start the framing process
|
||||
When I select the mood "Wallpaper"
|
||||
Then it should be a wallpaper small frame with the background "button.gif"
|
||||
When I finalize my frame
|
||||
And I click into the "This is a pithy status" post
|
||||
And the frame's headline should be "This is a pithy status"
|
||||
And the frame's body should be "And this is a long body"
|
||||
Then it should be a wallpaper frame with the background "button.gif"
|
||||
|
||||
Loading…
Reference in a new issue