diff options
Diffstat (limited to 'static')
| -rwxr-xr-x | static/css/dump.css | 244 | ||||
| -rw-r--r-- | static/js/jquery.masonry.js | 308 |
2 files changed, 309 insertions, 243 deletions
diff --git a/static/css/dump.css b/static/css/dump.css index 93e1776..6d5a8d5 100755 --- a/static/css/dump.css +++ b/static/css/dump.css @@ -71,249 +71,7 @@ a.img_roll:hover{ display:block; background-image:url(http://dump.fm/static/img/dumppixelhover.png); } -.white a:hover { - text-decoration: none; - color: #fff; -} -.white a:active { - text-decoration: none; - - - color: #fff; -} -#header7{ - margin: 0px auto -1px auto; - top:-1px; -height:49px; - position:fixed;background-image:url(/static/img/bg.dither.gif); -background-color:#eee; -border:1px solid #000; -width:100%; -min-width:600px; -left:-1px; - box-shadow: 0 0 10px #d8dbde, 0px 0px 2px #000; - -webkit-box-shadow: 0 0 10px #d8dbde, 0px 0px 2px #000; - -moz-box-shadow: 0 0 10px #d8dbde, 0px 0px 2px #000; - -} -#bar7{ - top:19px; - position:absolute; - word-spacing:-1; - font-size: 16px; -height:22; -text-indent:14px; -line-height:1.9; - left: 125px; - margin-left: 0.1%; - margin-right: 8%; - letter-spacing:.2px; - z-index: 999; -} - -#bar7 img{ -margin-top:4;display:none; - vertical-align: top; -} -#bar7 a{ - text-decoration: none; - font-size:13; -padding:6px; -cursor:pointer; - color: #000; - - -} -#bar7 a:hover{ - text-decoration: none; -padding:6px;background-color:#fff; - color: #000; - -} -#logout7{ - top:-1px; -height:16px; -padding-left:4px;padding-right:3px; - - border-bottom-left-radius:3px; - -webkit-border-bottom-left-radius:3px; - -moz-border-radius-bottomleft:3px; - position:relative; - font-size:1px; -border-left:1px solid #999; -border-bottom:1px solid #999; -background-color:#eff5fb; - float:right; - font-family: Arial, Helvetica, sans-serif; - font-weight: normal; -} -#logout7 img{display:none; -} -#logout7 a{font-size:10px; color: #5a5858; - -} -#logout7 a:hover{font-size:10px; -color:#000; text-shadow: 0px 1px 0px #fff; -} -#toplogin{ -margin-top:8px; -margin-right:5px; - -} - -.white a:link { - text-decoration: none; - font-size:14px; - color: #fff; -} -.white a:visited { - text-decoration: none; - font-size:14px; - color: #fff; -} -#logo7{ - margin-left: 10px; - z-index:1050; text-decoration: none; - float:left; - margin-top:-1px; -} -#logo7 a{font-size:28px; - -letter-spacing:-1; -font-weight:bold; text-decoration: none; -color:#000; -} -#logo7 a:hover{ -color:#000; text-decoration: none; -text-shadow: -0.5px -0.5px 0px #f0e; -} -#dumplist{ -top:0px:width:100%;padding:0px;background-color:#fff; -color:#000;font-size:60%;text-transform:uppercase;text-decoration: none; -border-bottom:1px solid #999;text-align:right; -padding-right:70px;line-height:1.1;background-color:#eff5fb; -/*margin-left:40%; - border-bottom-left-radius:5px; - -webkit-border-bottom-left-radius:5px; - -moz-border-radius-bottomleft:5px;text-decoration: none; -border-left:1px solid #999;*/ -} -#dumplist a{color:#000;font-size:100%;text-transform:uppercase;text-decoration: none; -} -#dumplist a:hover{color:#000;text-decoration: none; - -} -#rapper7{ - top: 0px; - left:0px; - position:absolute; - width: 100%; - height: 62px; - z-index: 1000; -} -#logoicons{ -width:auto; -} -#registerlink{ - font-size: 16px; -word-spacing:2; -line-height:2.4; -font-weight:bold; -} - -#registerlink img{ -display:none; -} - -.no-cursor { cursor: none; } -.invisible { display: none !important; } -#cursor-big { position: absolute; z-index: 1000; } - -.thumb { - cursor:pointer; -} - -img.chat-thumb { - cursor:pointer; - position: absolute; - /*margin-top: -10px;*/ - width: 16px; - height: 16px; - bottom: 4px; - right: 4px; - /*left: 4px;*/ - display: block; - margin: 0; - padding: 0; -} - - -.dump .nick { - position: relative; - padding-right: 15px; -} - -.logged-dump { - position: relative; -} - -/* sharing */ -.buttons{ - cursor:pointer; - - -} -.buttons .share { - opacity: 0.8; -} -.buttons .share:hover { - opacity: 1; -} -.buttons .other-sites { - /*padding-left: 20px;*/ -} -img.thumb { - position: absolute; -image-rendering: -moz-crisp-edges; - margin-left: 0px; - margin-top: 0px; - height: 27px; - width: 27px; - left:110px; - bottom: 9px; - display: block; -} - -.thumb.favorite { - position: absolute; - margin-left: 0px; - margin-top: 0px; - height: 27px; - width: 27px; - display: block; -} - -a.youtube { - position: relative; -} - -.youtube .youtube-thumb { - width: 130px; - height: 97px; - padding-bottom: 22px; - margin: 0; -} -.youtube .youtube-controls { - position: absolute; - left: 0; - bottom: 0; - margin: 0; -} -.share-buttons{ -cursor:pointer; -width:100; -} /*searchstuff*/ #searchbox{ position:absolute; @@ -463,7 +221,7 @@ text-shadow: -0.5px -0.5px 0px #f0e; top:0px:width:100%;padding:0px;background-color:#fff; color:#000;font-size:60%;text-transform:uppercase;text-decoration: none; border-bottom:1px solid #999;text-align:right; -padding-right:70px;line-height:1.1;background-color:#eff5fb; +padding-right:44px;line-height:1.1;background-color:#eff5fb; /*margin-left:40%; border-bottom-left-radius:5px; -webkit-border-bottom-left-radius:5px; diff --git a/static/js/jquery.masonry.js b/static/js/jquery.masonry.js new file mode 100644 index 0000000..fbf8425 --- /dev/null +++ b/static/js/jquery.masonry.js @@ -0,0 +1,308 @@ +/************************************************* +** jQuery Masonry version 1.2.0 +** copyright David DeSandro, licensed GPL & MIT +** http://desandro.com/resources/jquery-masonry +**************************************************/ +;(function($){ + + /*! + * smartresize: debounced resize event for jQuery + * http://github.com/lrbabe/jquery-smartresize + * + * Copyright (c) 2009 Louis-Remi Babe + * Licensed under the GPL license. + * http://docs.jquery.com/License + * + */ + var event = $.event, + resizeTimeout; + + event.special[ "smartresize" ] = { + setup: function() { + $( this ).bind( "resize", event.special.smartresize.handler ); + }, + teardown: function() { + $( this ).unbind( "resize", event.special.smartresize.handler ); + }, + handler: function( event, execAsap ) { + // Save the context + var context = this, + args = arguments; + + // set correct event type + event.type = "smartresize"; + + if(resizeTimeout) + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(function() { + jQuery.event.handle.apply( context, args ); + }, execAsap === "execAsap"? 0 : 100); + } + }; + + $.fn.smartresize = function( fn ) { + return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] ); + }; + + + + // masonry code begin + $.fn.masonry = function(options, callback) { + + function getBricks(props, opts) { + props.$bricks = opts.itemSelector == undefined ? + opts.$brickParent.children() : + opts.$brickParent.find(opts.itemSelector); + } + + function placeBrick($brick, setCount, setY, setSpan, props, opts) { + var shortCol = 0; + + for ( i=0; i < setCount; i++ ) { + if ( setY[i] < setY[ shortCol ] ) shortCol = i; + } + + var position = { + left: props.colW * shortCol + props.posLeft, + top: setY[ shortCol ] + }; + + + if( props.masoned && opts.animate ) { + $brick.animate( position, { + duration: opts.animationOptions.duration, + easing: opts.animationOptions.easing, + complete: opts.animationOptions.complete, + step: opts.animationOptions.step, + queue: opts.animationOptions.queue, + specialEasing: opts.animationOptions.specialEasing + }); + } else { + $brick.css(position); + } + + for ( i=0; i < setSpan; i++ ) { + props.colY[ shortCol + i ] = setY[ shortCol ] + $brick.outerHeight(true) ; + } + }; + + + function masonrySetup($wall, opts, props) { + getBricks(props, opts); + + if ( opts.columnWidth == undefined) { + props.colW = props.masoned ? + $wall.data('masonry').colW : + props.$bricks.outerWidth(true); + } else { + props.colW = opts.columnWidth; + } + + props.colCount = Math.floor( $wall.width() / props.colW ) ; + props.colCount = Math.max( props.colCount, 1 ); + }; + + + function masonryArrange($wall, opts, props) { + // if masonry hasn't been called before + if( !props.masoned ) $wall.css( 'position', 'relative' ); + + if ( !props.masoned || opts.appendedContent != undefined ) { + // just the new bricks + props.$bricks.css( 'position', 'absolute' ); + } + + // get top left position of where the bricks should be + var cursor = $('<div />'); + $wall.prepend( cursor ); + props.posTop = Math.round( cursor.position().top ); + props.posLeft = Math.round( cursor.position().left ); + cursor.remove(); + + // set up column Y array + if ( props.masoned && opts.appendedContent != undefined ) { + // if appendedContent is set, use colY from last call + props.colY = $wall.data('masonry').colY; + + /* + * in the case that the wall is not resizeable, + * but the colCount has changed from the previous time + * masonry has been called + */ + for (i= $wall.data('masonry').colCount; i < props.colCount; i++) { + props.colY[i] = props.posTop; + }; + + } else { + props.colY = []; + for ( i=0; i < props.colCount; i++) { + props.colY[i] = props.posTop; + } + } + + + // layout logic + if ( opts.singleMode ) { + props.$bricks.each(function(){ + var $brick = $(this); + placeBrick($brick, props.colCount, props.colY, 1, props, opts); + }); + } else { + props.$bricks.each(function() { + var $brick = $(this); + + //how many columns does this brick span + var colSpan = Math.ceil( $brick.outerWidth(true) / props.colW); + colSpan = Math.min( colSpan, props.colCount ); + + + if ( colSpan == 1 ) { + // if brick spans only one column, just like singleMode + placeBrick($brick, props.colCount, props.colY, 1, props, opts); + } else { + // brick spans more than one column + + //how many different places could this brick fit horizontally + var groupCount = props.colCount + 1 - colSpan; + var groupY = [0]; + // for each group potential horizontal position + for ( i=0; i < groupCount; i++ ) { + groupY[i] = 0; + // for each column in that group + for ( j=0; j < colSpan; j++ ) { + // get the maximum column height in that group + groupY[i] = Math.max( groupY[i], props.colY[i+j] ); + } + } + + placeBrick($brick, groupCount, groupY, colSpan, props, opts); + } + }); // /props.bricks.each(function() { + } // /layout logic + + // set the height of the wall to the tallest column + props.wallH = 0; + for ( i=0; i < props.colCount; i++ ) { + props.wallH = Math.max( props.wallH, props.colY[i] ); + } + var wallCSS = { height: props.wallH - props.posTop }; + // $wall.height( props.wallH - props.posTop ); + if ( props.masoned && opts.animate ) { + $wall.animate(wallCSS, { + duration: opts.animationOptions.duration, + easing: opts.animationOptions.easing, + complete: opts.animationOptions.complete, + step: opts.animationOptions.step, + queue: opts.animationOptions.queue, + specialEasing: opts.animationOptions.specialEasing + }); + } else { + $wall.css(wallCSS); + } + + // add masoned class first time around + if ( !props.masoned ) $wall.addClass('masoned'); + + // provide props.bricks as context for the callback + callback.call( props.$bricks ); + + // set all data so we can retrieve it for appended appendedContent + // or anyone else's crazy jquery fun + $wall.data('masonry', props ); + + + }; // /masonryArrange function + + + function masonryResize($wall, opts, props) { + props.masoned = $wall.data('masonry') != undefined; + var prevColCount = $wall.data('masonry').colCount; + masonrySetup($wall, opts, props); + if ( props.colCount != prevColCount ) masonryArrange($wall, opts, props); + }; + + + /* + * let's begin + * IN A WORLD... + */ + return this.each(function() { + + var $wall = $(this); + + var props = $.extend( {}, $.masonry ); + + // checks if masonry has been called before on this object + props.masoned = $wall.data('masonry') != undefined; + + var previousOptions = props.masoned ? $wall.data('masonry').options : {}; + + var opts = $.extend( + {}, + props.defaults, + previousOptions, + options + ); + + // should we save these options for next time? + props.options = opts.saveOptions ? opts : previousOptions; + + //picked up from Paul Irish + callback = callback || function(){}; + + + if ( props.masoned && opts.appendedContent != undefined ) { + // if we're dealing with appendedContent + opts.$brickParent = opts.appendedContent; + } else { + opts.$brickParent = $wall; + } + + getBricks(props, opts); + + + if ( props.$bricks.length ) { + // call masonry layout + masonrySetup($wall, opts, props); + masonryArrange($wall, opts, props); + + // binding window resizing + var resizeOn = previousOptions.resizeable; + if ( !resizeOn && opts.resizeable ) { + $(window).bind('smartresize.masonry', function() { masonryResize($wall, opts, props); } ); + } + if ( resizeOn && !opts.resizeable ) $(window).unbind('smartresize.masonry'); + } else { + // brickParent is empty, do nothing, go back home and eat chips + return this; + } + + }); // /return this.each(function() + }; // /$.fn.masonry = function(options) + + + + $.masonry = { + defaults : { + singleMode: false, + columnWidth: undefined, + itemSelector: undefined, + appendedContent: undefined, + saveOptions: true, + resizeable: true, + animate: false, + animationOptions: {} + }, + colW: undefined, + colCount: undefined, + colY: undefined, + wallH: undefined, + masoned: undefined, + posTop: 0, + posLeft: 0, + options: undefined, + $bricks: undefined, + $brickParent: undefined + }; + +})(jQuery);
\ No newline at end of file |