Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Next iteration

  • Loading branch information...
commit a962c3420175ec2febce8c185edc1654b0a27c6a 1 parent 2477be7
@pablomolnar authored
Showing with 64 additions and 50 deletions.
  1. +12 −2 app.js
  2. +20 −4 feed.js
  3. +20 −30 public/css/styles.css
  4. +12 −14 views/index.jade
View
14 app.js
@@ -65,10 +65,20 @@ app.post('/callback', function(req, res){
// Web sockets
io.sockets.on('connection', function (socket) {
socket.emit('news', { msg: 'connected' });
+ if(feed.last30pics.length > 0) {
+ socket.emit('pics', feed.last30pics);
+ }
+
+ socket.on('disconnect', function () {
+ io.sockets.emit('news','user disconnected');
+ console.log('user disconnected');
+ });
+
socket.on('my other event', function (data) {
- console.log(data);
+ console.log(data);
+ socket.emit('news', { msg: 'ping' });
});
-});
+});
app.listen(port);
console.log("Server listening on port %d in %s mode", port, app.settings.env);
View
24 feed.js
@@ -2,10 +2,12 @@ var settings = require('./settings'),
request = require('request'),
async = require('async');
-var minIds = {};
+var minIds = {};
+var last30pics = [];
exports.settings = settings;
-exports.minIds = minIds;
+exports.minIds = minIds;
+exports.last30pics = last30pics;
// Process the feed updates data and return the new pics
function process(updates, picsCallback) {
@@ -35,9 +37,23 @@ function process(updates, picsCallback) {
var pic = {};
pic.thumbnail = media.images.thumbnail;
- pic.user = media.user.username;
+ pic.user = media.user.full_name;
+ pic.text = "";
+ if(media.caption != null) {
+ pic.text = media.caption.text;
+ if(pic.text.length > 25) {
+ pic.text = pic.text.substring(0, 25) + "...";
+ }
+ }
- pics.push(pic);
+ pic.user = escape(pic.user)
+ pic.text = escape(pic.text)
+
+ pics.push(pic);
+
+ // Track last 15 pics
+ last30pics.push(pic);
+ if(last30pics.length > 15) last30pics.shift();
}
return callback(null, update);
View
50 public/css/styles.css
@@ -365,7 +365,7 @@ li.dmenu3 {
.portfoliocontainer {
width:1052px;
- height: 695px;
+ /*height: 695px;*/
overflow: hidden;
display: block;
float: left;
@@ -376,18 +376,31 @@ li.dmenu3 {
float: left;
padding-bottom: 20px;
padding-right: 20px;
- width: 210px;
- height: 140px;
+ width: 162px;
+ height: 162px;
position: relative;
padding-left: 15px;
padding-top: 15px;
-}
+}
+/*
.portfoliocontainer li img {
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .25);
border-bottom: 1px solid #000000;
+} */
+
+.imagedropshadow {
+ padding: 5px;
+ border: solid 1px #EFEFEF;
}
+a:hover img.imagedropshadow {
+ border: solid 1px #CCC;
+ -moz-box-shadow: 1px 1px 5px #999;
+ -webkit-box-shadow: 1px 1px 5px #999;
+ box-shadow: 1px 1px 5px #999;
+}
+
.portfoliocontainer ul{
overflow:hidden;
}
@@ -396,14 +409,14 @@ li.dmenu3 {
display:none;
}
.portfoliohover {
- width: 210px;
+ width: 162px;
height: 54px;
background-image: url(../images/portfolio/workhover.png);
background-position: 0 0;
background-repeat: no-repeat;
position: absolute;
opacity: 0;
- top: 101px;
+ top: 122px;
left: 15px;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
@@ -432,8 +445,7 @@ li.dmenu3 {
color: #343434;
text-shadow: 0px 1px 0px rgba(255,255,255,.5);
filter: dropshadow(color=rgba(255,255,255,.5), offx=0, offy=1);
- float: left;
- margin-top: 4px;
+ margin-top: 35px;
margin-left: 9px;
}
@@ -517,28 +529,6 @@ footer #log {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
/***#stage li a:before .portfoliohover {
content: '';
width: 22px;
View
26 views/index.jade
@@ -9,7 +9,7 @@ html
script(src='http://code.jquery.com/jquery-1.6.4.min.js')
script(src='/js/jquery.quicksand.js')
- script(src='/js/script.js')
+ //script(src='/js/script.js')
script(src='/socket.io/socket.io.js')
script
var socket = io.connect();
@@ -17,9 +17,15 @@ html
append('#log', 'msg', data.msg);
});
- socket.on('pics', function (pics) {
+ socket.on('pics', function (pics) {
jQuery.each(pics, function() {
- append('#log', 'feed', JSON.stringify(this));
+ append('#log', 'feed', JSON.stringify(this));
+ var e = $('<li><a href="#"><span class="portfoliohover"><h1 class="porthover1"></h1><h1 class="porthover2"></h1></span><img src="" class="imagedropshadow"></a></li>');
+ $('.porthover1',e).text(unescape(this.user));
+ $('.porthover2',e).text(unescape(this.text));
+ $('img',e).attr('src', this.thumbnail.url);
+ $('#stage').append(e);
+ //$('#stage').quicksand($('#stage').find('li'));
});
});
@@ -39,7 +45,7 @@ html
#dropdown
.container
img(src="images/logo.png", alt="Instaflow", class="logo")
- h4 Instagram with style...
+ h4 Instagram with salt & pepper...
img(src="images/avatar.jpg",alt="Instaflow", class="dropavatar")
h2 The Turkey Leg and Me!
p(class="dpara1 dparas") Pure weekend experimental project to apply some emerging technologies.
@@ -57,19 +63,11 @@ html
.container
img(src="images/logo.png", alt="Instaflow", class="logo")
- h1(class="subtitle") Instagram with style...
+ h1(class="subtitle") Instagram with salt & pepper...
nav(id="filter")
.portfolioseperator
.portfoliocontainer
- ul(id="stage")
- - var items = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
- each item in items
- li(data-tags="Set #{item%(Math.floor(Math.random()*5))}, Set #{item%(Math.floor(Math.random()*5))}")
- a(href="#")
- span(class="portfoliohover")
- h1(class="porthover1") Cool Rollover Titles
- h1(class="porthover2") As well as some nifty sub-titles
- img(src="images/portfolio/work#{item}.png")
+ ul(id="stage")
.footerseperator
footer

0 comments on commit a962c34

Please sign in to comment.
Something went wrong with that request. Please try again.