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