newspaper template WIP
This commit is contained in:
Dennis Collinson
danielgrippi
parent
9c337ac03e
commit
06110b8732
14 changed files with 870 additions and 857 deletions
|
|
@ -107,13 +107,13 @@ app.models.Post = Backbone.Model.extend({
|
||||||
|
|
||||||
headline : function() {
|
headline : function() {
|
||||||
var headline = this.get("text").trim()
|
var headline = this.get("text").trim()
|
||||||
, newlineIdx = headline.lastIndexOf("\n")
|
, newlineIdx = headline.indexOf("\n")
|
||||||
return (newlineIdx > 0 ) ? headline.substr(0, newlineIdx) : headline
|
return (newlineIdx > 0 ) ? headline.substr(0, newlineIdx) : headline
|
||||||
},
|
},
|
||||||
|
|
||||||
body : function(){
|
body : function(){
|
||||||
var body = this.get("text").trim()
|
var body = this.get("text").trim()
|
||||||
, newlineIdx = body.lastIndexOf("\n")
|
, newlineIdx = body.indexOf("\n")
|
||||||
return (newlineIdx > 0 ) ? body.substr(newlineIdx+1, body.length) : ""
|
return (newlineIdx > 0 ) ? body.substr(newlineIdx+1, body.length) : ""
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
|
|
@ -122,7 +122,8 @@ app.models.Post = Backbone.Model.extend({
|
||||||
frameMoods : [
|
frameMoods : [
|
||||||
"Day",
|
"Day",
|
||||||
"Night",
|
"Night",
|
||||||
"Wallpaper"
|
"Wallpaper",
|
||||||
|
"Newspaper"
|
||||||
],
|
],
|
||||||
|
|
||||||
legacyTemplateNames : [
|
legacyTemplateNames : [
|
||||||
|
|
|
||||||
|
|
@ -33,10 +33,22 @@ app.views.Post.Day = app.views.Post.Mood.extend({
|
||||||
})
|
})
|
||||||
|
|
||||||
app.views.Post.Night = 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({
|
app.views.Post.Wallpaper = app.views.Post.Mood.extend({
|
||||||
mood : "wallpaper",
|
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
|
||||||
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,16 @@ app.views.Post = app.views.StreamObject.extend({
|
||||||
showFactory : function(model) {
|
showFactory : function(model) {
|
||||||
var frameName = model.get("frame_name");
|
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)){
|
if(_.include(app.models.Post.legacyTemplateNames, frameName)){
|
||||||
return legacyShow(model)
|
return legacyShow(model)
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ app.views.TemplatePicker = app.views.Base.extend({
|
||||||
|
|
||||||
presenter : function() {
|
presenter : function() {
|
||||||
return _.extend(this.defaultPresenter(), {
|
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
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -1,834 +1,4 @@
|
||||||
|
@import 'new_styles/base';
|
||||||
/* variables */
|
@import 'new_styles/composer';
|
||||||
|
@import 'new_styles/interactions';
|
||||||
$light-grey: #999;
|
@import 'new_styles/viewer_nav';
|
||||||
$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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
295
app/assets/stylesheets/new_styles/_base.scss
Normal file
295
app/assets/stylesheets/new_styles/_base.scss
Normal file
|
|
@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
27
app/assets/stylesheets/new_styles/_composer.scss
Normal file
27
app/assets/stylesheets/new_styles/_composer.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
311
app/assets/stylesheets/new_styles/_interactions.scss
Normal file
311
app/assets/stylesheets/new_styles/_interactions.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
115
app/assets/stylesheets/new_styles/_new_mixins.scss
Normal file
115
app/assets/stylesheets/new_styles/_new_mixins.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
0
app/assets/stylesheets/new_styles/_other.scss
Normal file
0
app/assets/stylesheets/new_styles/_other.scss
Normal file
71
app/assets/stylesheets/new_styles/_viewer_nav.scss
Normal file
71
app/assets/stylesheets/new_styles/_viewer_nav.scss
Normal file
|
|
@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
{{#each photos}}
|
|
||||||
<div class="photo-fill" style="background-image: url({{sizes.large}})">
|
|
||||||
<div class="darken">
|
|
||||||
<div class="darken-content">
|
|
||||||
{{{../text}}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
{{#each photos}}
|
<div class="photo-fill" data-img-src="{{backgroundUrl}}" style="background-image: url({{backgroundUrl}})">
|
||||||
<div class="photo-fill" data-img-src="{{sizes.large}}" style="background-image: url({{sizes.large}})">
|
<div class="darken">
|
||||||
<div class="darken">
|
<div class="darken-content">
|
||||||
<div class="darken-content">
|
<header>{{headline}}</header>
|
||||||
<header>{{../headline}}</header>
|
<section class="body">{{body}}</section>
|
||||||
<section class="body">{{../body}}</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
</div>
|
||||||
|
|
|
||||||
12
spec/javascripts/app/views/post/newspaper_spec.js
Normal file
12
spec/javascripts/app/views/post/newspaper_spec.js
Normal file
|
|
@ -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()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in a new issue