From 2adf7d99db1ef22ef37e517e64f511495e6c83c4 Mon Sep 17 00:00:00 2001 From: czaks Date: Wed, 30 Apr 2014 00:13:04 +0200 Subject: integrate favelog into catalog theme; needs more work, code cleanup etc. --- js/catalog.js | 64 +++++ js/jquery.mixitup.min.js | 43 ++++ js/jquery.tooltipster.min.js | 1 + stylesheets/style.css | 39 +++ stylesheets/tooltipster/tooltipster.css | 274 +++++++++++++++++++++ templates/themes/catalog/catalog.html | 61 +++-- templates/themes/catalog/info.php | 11 +- templates/themes/catalog/theme.php | 11 +- templates/themes/favelog/catalog.css | 75 ------ templates/themes/favelog/catalog.html | 79 ------ templates/themes/favelog/favelog.js | 64 ----- templates/themes/favelog/info.php | 58 ----- templates/themes/favelog/jquery.mixitup.min.js | 43 ---- templates/themes/favelog/jquery.tooltipster.min.js | 1 - templates/themes/favelog/theme.php | 133 ---------- templates/themes/favelog/thumb.png | Bin 11543 -> 0 bytes templates/themes/favelog/tooltipster.css | 274 --------------------- 17 files changed, 488 insertions(+), 743 deletions(-) create mode 100644 js/catalog.js create mode 100644 js/jquery.mixitup.min.js create mode 100644 js/jquery.tooltipster.min.js create mode 100644 stylesheets/tooltipster/tooltipster.css delete mode 100644 templates/themes/favelog/catalog.css delete mode 100644 templates/themes/favelog/catalog.html delete mode 100644 templates/themes/favelog/favelog.js delete mode 100644 templates/themes/favelog/info.php delete mode 100644 templates/themes/favelog/jquery.mixitup.min.js delete mode 100644 templates/themes/favelog/jquery.tooltipster.min.js delete mode 100644 templates/themes/favelog/theme.php delete mode 100644 templates/themes/favelog/thumb.png delete mode 100644 templates/themes/favelog/tooltipster.css diff --git a/js/catalog.js b/js/catalog.js new file mode 100644 index 00000000..5497cb4a --- /dev/null +++ b/js/catalog.js @@ -0,0 +1,64 @@ +$().ready(function(){ + + $("#selectorzilla").change(function(){ + sheit = this.value; + $("#sort-"+sheit).trigger("click"); + }); + + $("#imgurzilla").change(function(){ + sheit = this.value; + if (sheit == "small") { + old = "large"; + } else { + old = "small"; + } + $(".grid-li").removeClass("grid-size-"+old); + $(".grid-li").addClass("grid-size-"+sheit); + }); + + $('#Grid').mixitup({ + onMixEnd: function(){ + if(use_tooltipster) { + buildTooltipster(); + } + } + }); + + if(use_tooltipster) { + buildTooltipster(); + } + +}); + +function buildTooltipster(){ + $(".thread-image").each(function(){ + subject = $(this).attr('data-subject'); + name = $(this).attr('data-name'); + muhdifference = $(this).attr('data-muhdifference'); + last_reply = $(this).attr('data-last-reply'); + last_subject = $(this).attr('data-last-subject'); + last_name = $(this).attr('data-last-name'); + last_difference = $(this).attr('data-last-difference'); + muh_body = ''; + + if (subject) { + muh_body = muh_body + subject + ' por'; + } else { + muh_body = muh_body + 'Postado por'; + }; + muh_body = muh_body + ' ' + name + ' ' + muhdifference + ''; + + if (last_reply) { + muh_body = muh_body + '
'; + if (last_subject) { + muh_body = muh_body + last_subject + ' por'; + } else{ + muh_body = muh_body + 'Última resposta por'; + }; + muh_body = muh_body + ' ' + last_name + ' ' + last_difference + ''; + } + $(this).tooltipster({ + content: $(muh_body) + }); + }); +} \ No newline at end of file diff --git a/js/jquery.mixitup.min.js b/js/jquery.mixitup.min.js new file mode 100644 index 00000000..5b4e4ce0 --- /dev/null +++ b/js/jquery.mixitup.min.js @@ -0,0 +1,43 @@ +/* +* MIXITUP - A CSS3 and JQuery Filter & Sort Plugin +* Version: 1.5.5 +* License: Creative Commons Attribution-NoDerivs 3.0 Unported - CC BY-ND 3.0 +* http://creativecommons.org/licenses/by-nd/3.0/ +* This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder. +* Author: Patrick Kunka +* Copyright 2012-2013 Patrick Kunka, Barrel LLC, All Rights Reserved +* +* http://mixitup.io +*/ + +(function(d){function r(e,c,l,b,a){function f(){n.unbind("webkitTransitionEnd transitionend otransitionend oTransitionEnd");c&&x(c,l,b,a);a.startOrder=[];a.newOrder=[];a.origSort=[];a.checkSort=[];v.removeStyle(a.prefix+"filter, filter, "+a.prefix+"transform, transform, opacity, display").css(a.clean).removeAttr("data-checksum");window.atob||v.css({display:"none",opacity:"0"});n.removeStyle(a.prefix+"transition, transition, "+a.prefix+"perspective, perspective, "+a.prefix+"perspective-origin, perspective-origin, "+ +(a.resizeContainer?"height":""));"list"==a.layoutMode?(p.css({display:a.targetDisplayList,opacity:"1"}),a.origDisplay=a.targetDisplayList):(p.css({display:a.targetDisplayGrid,opacity:"1"}),a.origDisplay=a.targetDisplayGrid);a.origLayout=a.layoutMode;setTimeout(function(){v.removeStyle(a.prefix+"transition, transition");a.mixing=!1;if("function"==typeof a.onMixEnd){var b=a.onMixEnd.call(this,a);a=b?b:a}})}clearInterval(a.failsafe);a.mixing=!0;a.filter=e;if("function"==typeof a.onMixStart){var g=a.onMixStart.call(this, +a);a=g?g:a}for(var k=a.transitionSpeed,g=0;2>g;g++){var h=0==g?h=a.prefix:"";a.transition[h+"transition"]="all "+k+"ms linear";a.transition[h+"transform"]=h+"translate3d(0,0,0)";a.perspective[h+"perspective"]=a.perspectiveDistance+"px";a.perspective[h+"perspective-origin"]=a.perspectiveOrigin}var w=a.targetSelector,v=b.find(w);v.each(function(){this.data={}});var n=v.parent();n.css(a.perspective);a.easingFallback="ease-in-out";"smooth"==a.easing&&(a.easing="cubic-bezier(0.25, 0.46, 0.45, 0.94)"); +"snap"==a.easing&&(a.easing="cubic-bezier(0.77, 0, 0.175, 1)");"windback"==a.easing&&(a.easing="cubic-bezier(0.175, 0.885, 0.320, 1.275)",a.easingFallback="cubic-bezier(0.175, 0.885, 0.320, 1)");"windup"==a.easing&&(a.easing="cubic-bezier(0.6, -0.28, 0.735, 0.045)",a.easingFallback="cubic-bezier(0.6, 0.28, 0.735, 0.045)");g="list"==a.layoutMode&&null!=a.listEffects?a.listEffects:a.effects;Array.prototype.indexOf&&(a.fade=-1t.length?s=s.add(b.find(w+":visible")):v.each(function(){var a=d(this);if(r){var b=0;d.each(t,function(d){this.length? +a.is("."+this.join(", ."))&&b++:0g;g++)h=0==g?h=a.prefix:"",e[h+"transform"]=a.scale+" "+a.rotateX+" "+a.rotateY+" "+a.rotateZ,e[h+"filter"]=a.blur+" "+a.grayscale;q.css(e);m.each(function(){var b=this.data,c=d(this);c.hasClass("mix_tohide")?(b.preTX=b.origPos.left-b.hideInterPos.left,b.preTY=b.origPos.top-b.hideInterPos.top):(b.preTX=b.origPos.left-b.preInterPos.left,b.preTY=b.origPos.top-b.preInterPos.top);for(var e={},k=0;2>k;k++){var h= +0==k?h=a.prefix:"";e[h+"transform"]="translate("+b.preTX+"px,"+b.preTY+"px)"}c.css(e)});"list"==a.layoutMode?(b.addClass(a.listClass),b.removeClass(a.gridClass)):(b.addClass(a.gridClass),b.removeClass(a.listClass));setTimeout(function(){if(a.resizeContainer){for(var b={},c=0;2>c;c++){var e=0==c?e=a.prefix:"";b[e+"transition"]="all "+k+"ms ease-in-out";b.height=a.newHeight+"px"}n.css(b)}u.css("opacity",a.fade);q.css("opacity",1);q.each(function(){var b=this.data;b.tX=b.finalPos.left-b.showInterPos.left; +b.tY=b.finalPos.top-b.showInterPos.top;for(var c={},e=0;2>e;e++){var h=0==e?h=a.prefix:"";c[h+"transition-property"]=h+"transform, "+h+"filter, opacity";c[h+"transition-timing-function"]=a.easing+", linear, linear";c[h+"transition-duration"]=k+"ms";c[h+"transition-delay"]="0";c[h+"transform"]="translate("+b.tX+"px,"+b.tY+"px)";c[h+"filter"]="none"}d(this).css("-webkit-transition","all "+k+"ms "+a.easingFallback).css(c)});m.each(function(){var b=this.data;b.tX=0!=b.finalPrePos.left?b.finalPrePos.left- +b.preInterPos.left:0;b.tY=0!=b.finalPrePos.left?b.finalPrePos.top-b.preInterPos.top:0;for(var c={},e=0;2>e;e++){var h=0==e?h=a.prefix:"";c[h+"transition"]="all "+k+"ms "+a.easing;c[h+"transform"]="translate("+b.tX+"px,"+b.tY+"px)"}d(this).css("-webkit-transition","all "+k+"ms "+a.easingFallback).css(c)});b={};for(c=0;2>c;c++)e=0==c?e=a.prefix:"",b[e+"transition"]="all "+k+"ms "+a.easing+", "+e+"filter "+k+"ms linear, opacity "+k+"ms linear",b[e+"transform"]=a.scale+" "+a.rotateX+" "+a.rotateY+" "+ +a.rotateZ,b[e+"filter"]=a.blur+" "+a.grayscale,b.opacity=a.fade;u.css(b);n.bind("webkitTransitionEnd transitionend otransitionend oTransitionEnd",function(a){if(-1e;e++){var d=0==e?d=a.prefix:"";c[d+"transition"]="height "+k+"ms ease-in-out";c.height=a.minHeight+"px"}n.css(c)}v.css(a.transition);if(s.length){c={};for(e=0;2>e;e++)d=0==e?d=a.prefix:"",c[d+"transform"]=a.scale+" "+a.rotateX+" "+a.rotateY+" "+a.rotateZ,c[d+"filter"]=a.blur+" "+a.grayscale,c.opacity=a.fade;u.css(c);n.bind("webkitTransitionEnd transitionend otransitionend oTransitionEnd",function(c){if(-1d?1:0}function f(a){"asc"==c?k.prepend(a).prepend(" "):k.append(a).append(" ")}function g(a){a=a.slice();for(var b=a.length,c=b;c--;){var e=parseInt(Math.random()*b),d=a[c];a[c]=a[e];a[e]=d}return a}l.find(b.targetSelector).wrapAll('
'); +var k=l.find(".mix_sorter");b.origSort.length||k.find(b.targetSelector+":visible").each(function(){d(this).wrap("");b.origSort.push(d(this).parent().html().replace(/\s+/g,""));d(this).unwrap()});k.empty();if("reset"==e)d.each(b.startOrder,function(){k.append(this).append(" ")});else if("default"==e)d.each(b.origOrder,function(){f(this)});else if("random"==e)b.newOrder.length||(b.newOrder=g(b.startOrder)),d.each(b.newOrder,function(){k.append(this).append(" ")});else if("custom"==e)d.each(c,function(){f(this)}); +else{if("undefined"===typeof b.origOrder[0].attr(e))return console.log("No such attribute found. Terminating"),!1;b.newOrder.length||(d.each(b.origOrder,function(){b.newOrder.push(d(this))}),b.newOrder.sort(a));d.each(b.newOrder,function(){f(this)})}b.checkSort=[];k.find(b.targetSelector+":visible").each(function(a){var c=d(this);0==a&&c.attr("data-checksum","1");c.wrap("");b.checkSort.push(c.parent().html().replace(/\s+/g,""));c.unwrap()});l.find(b.targetSelector).unwrap()}function B(e){for(var c= +["Webkit","Moz","O","ms"],d=0;df;f++)c=0==f?c=b.prefix:"",b.transition[c+"transition"]="all "+b.transitionSpeed+"ms ease-in-out",b.perspective[c+"perspective"]=b.perspectiveDistance+"px",b.perspective[c+"perspective-origin"]=b.perspectiveOrigin;for(f=0;2>f;f++)c=0==f?c=b.prefix:"",b.clean[c+"transition"]="none";"list"==b.layoutMode?(a.addClass(b.listClass), +b.origDisplay=b.targetDisplayList):(a.addClass(b.gridClass),b.origDisplay=b.targetDisplayGrid);b.origLayout=b.layoutMode;f=b.showOnLoad.split(" ");d.each(f,function(){d(b.filterSelector+'[data-filter="'+this+'"]').addClass("active")});a.find(b.targetSelector).addClass("mix_all");"all"==f[0]&&(f[0]="mix_all",b.showOnLoad="mix_all");var g=d();d.each(f,function(){g=g.add(d("."+this))});g.each(function(){var a=d(this);"list"==b.layoutMode?a.css("display",b.targetDisplayList):a.css("display",b.targetDisplayGrid); +a.css(b.transition)});setTimeout(function(){b.mixing=!0;g.css("opacity","1");setTimeout(function(){"list"==b.layoutMode?g.removeStyle(b.prefix+"transition, transition").css({display:b.targetDisplayList,opacity:1}):g.removeStyle(b.prefix+"transition, transition").css({display:b.targetDisplayGrid,opacity:1});b.mixing=!1;if("function"==typeof b.onMixLoad){var a=b.onMixLoad.call(this,b);b=a?a:b}},b.transitionSpeed)},10);b.filter=b.showOnLoad;d(b.sortSelector).bind(b.buttonEvent,function(){if(!b.mixing){var c= +d(this),e=c.attr("data-sort"),f=c.attr("data-order");if(!c.hasClass("active"))d(b.sortSelector).removeClass("active"),c.addClass("active");else if("random"!=e)return!1;a.find(b.targetSelector).each(function(){b.startOrder.push(d(this))});r(b.filter,e,f,a,b)}});d(b.filterSelector).bind(b.buttonEvent,function(){if(!b.mixing){var c=d(this);if(!1==b.multiFilter)d(b.filterSelector).removeClass("active"),c.addClass("active"),b.filter=c.attr("data-filter"),d(b.filterSelector+'[data-filter="'+b.filter+'"]').addClass("active"); +else{var e=c.attr("data-filter");c.hasClass("active")?(c.removeClass("active"),b.filter=b.filter.replace(RegExp("(\\s|^)"+e),"")):(c.addClass("active"),b.filter=b.filter+" "+e)}r(b.filter,null,null,a,b)}})})},toGrid:function(){return this.each(function(){var e=this.config;"grid"!=e.layoutMode&&(e.layoutMode="grid",r(e.filter,null,null,d(this),e))})},toList:function(){return this.each(function(){var e=this.config;"list"!=e.layoutMode&&(e.layoutMode="list",r(e.filter,null,null,d(this),e))})},filter:function(e){return this.each(function(){var c= +this.config;c.mixing||(d(c.filterSelector).removeClass("active"),d(c.filterSelector+'[data-filter="'+e+'"]').addClass("active"),r(e,null,null,d(this),c))})},sort:function(e){return this.each(function(){var c=this.config,l=d(this);if(!c.mixing){d(c.sortSelector).removeClass("active");if(d.isArray(e)){var b=e[0],a=e[1];d(c.sortSelector+'[data-sort="'+e[0]+'"][data-order="'+e[1]+'"]').addClass("active")}else d(c.sortSelector+'[data-sort="'+e+'"]').addClass("active"),b=e,a="desc";l.find(c.targetSelector).each(function(){c.startOrder.push(d(this))}); +r(c.filter,b,a,l,c)}})},multimix:function(e){return this.each(function(){var c=this.config,l=d(this);multiOut={filter:c.filter,sort:null,order:"desc",layoutMode:c.layoutMode};d.extend(multiOut,e);c.mixing||(d(c.filterSelector).add(c.sortSelector).removeClass("active"),d(c.filterSelector+'[data-filter="'+multiOut.filter+'"]').addClass("active"),"undefined"!==typeof multiOut.sort&&(d(c.sortSelector+'[data-sort="'+multiOut.sort+'"][data-order="'+multiOut.order+'"]').addClass("active"),l.find(c.targetSelector).each(function(){c.startOrder.push(d(this))})), +c.layoutMode=multiOut.layoutMode,r(multiOut.filter,multiOut.sort,multiOut.order,l,c))})},remix:function(e){return this.each(function(){var c=this.config,l=d(this);c.origOrder=[];l.find(c.targetSelector).each(function(){var b=d(this);b.addClass("mix_all");c.origOrder.push(b)});c.mixing||"undefined"===typeof e||(d(c.filterSelector).removeClass("active"),d(c.filterSelector+'[data-filter="'+e+'"]').addClass("active"),r(e,null,null,l,c))})}};d.fn.mixitup=function(d,c){if(y[d])return y[d].apply(this,Array.prototype.slice.call(arguments, +1));if("object"===typeof d||!d)return y.init.apply(this,arguments)};d.fn.removeStyle=function(e){return this.each(function(){var c=d(this);e=e.replace(/\s+/g,"");var l=e.split(",");d.each(l,function(){var b=RegExp(this.toString()+"[^;]+;?","g");c.attr("style",function(a,c){if(c)return c.replace(b,"")})})})}})(jQuery); \ No newline at end of file diff --git a/js/jquery.tooltipster.min.js b/js/jquery.tooltipster.min.js new file mode 100644 index 00000000..91c61639 --- /dev/null +++ b/js/jquery.tooltipster.min.js @@ -0,0 +1 @@ +/* Tooltipster v3.0.5 */;(function(e,t,n){function o(t,n){this.bodyOverflowX;this.checkInterval=null;this.content;this.$el=e(t);this.elProxyPosition;this.$elProxy;this.enabled=true;this.options=e.extend({},s,n);this.mouseIsOverProxy=false;this.namespace="tooltipster-"+Math.round(Math.random()*1e5);this.status="hidden";this.timerHide=null;this.timerShow=null;this.$tooltip;this.options.iconTheme=this.options.iconTheme.replace(".","");this.options.theme=this.options.theme.replace(".","");this.init()}function u(t,n){var r=true;e.each(t,function(e,i){if(typeof n[e]==="undefined"||t[e]!==n[e]){r=false;return false}});return r}function l(){return!f&&a}function c(){var e=n.body||n.documentElement,t=e.style,r="transition";if(typeof t[r]=="string"){return true}v=["Moz","Webkit","Khtml","O","ms"],r=r.charAt(0).toUpperCase()+r.substr(1);for(var i=0;i');t.$elProxy.text(t.options.icon)}else{if(t.options.iconCloning)t.$elProxy=t.options.icon.clone(true);else t.$elProxy=t.options.icon}t.$elProxy.insertAfter(t.$el)}else{t.$elProxy=t.$el}if(t.options.trigger=="hover"){t.$elProxy.on("mouseenter."+t.namespace,function(){if(!l()||t.options.touchDevices){t.mouseIsOverProxy=true;t.showTooltip()}}).on("mouseleave."+t.namespace,function(){if(!l()||t.options.touchDevices){t.mouseIsOverProxy=false}});if(a&&t.options.touchDevices){t.$elProxy.on("touchstart."+t.namespace,function(){t.showTooltipNow()})}}else if(t.options.trigger=="click"){t.$elProxy.on("click."+t.namespace,function(){if(!l()||t.options.touchDevices){t.showTooltip()}})}}},showTooltip:function(){var e=this;if(e.status!="shown"&&e.status!="appearing"){if(e.options.delay){e.timerShow=setTimeout(function(){if(e.options.trigger=="click"||e.options.trigger=="hover"&&e.mouseIsOverProxy){e.showTooltipNow()}},e.options.delay)}else e.showTooltipNow()}},showTooltipNow:function(){var n=this;clearTimeout(n.timerShow);n.timerShow=null;clearTimeout(n.timerHide);n.timerHide=null;if(n.enabled&&n.content!==null){if(n.options.onlyOne){e(".tooltipstered").not(n.$el).each(function(t,n){var i=e(n),s=i[r]("status"),o=i[r]("option","autoClose");if(s!=="hidden"&&s!=="disappearing"&&o){i[r]("hide")}})}n.options.functionBefore(n.$elProxy,function(){if(n.status!=="hidden"){var r=0;if(n.status==="disappearing"){n.status="appearing";if(c()){n.$tooltip.clearQueue().removeClass("tooltipster-dying").addClass("tooltipster-"+n.options.animation+"-show");if(n.options.speed>0)n.$tooltip.delay(n.options.speed);n.$tooltip.queue(function(){n.status="shown"})}else{n.$tooltip.stop().fadeIn(function(){n.status="shown"})}}}else{n.status="appearing";var r=n.options.speed;n.bodyOverflowX=e("body").css("overflow-x");e("body").css("overflow-x","hidden");var i="tooltipster-"+n.options.animation,s="-webkit-transition-duration: "+n.options.speed+"ms; -webkit-animation-duration: "+n.options.speed+"ms; -moz-transition-duration: "+n.options.speed+"ms; -moz-animation-duration: "+n.options.speed+"ms; -o-transition-duration: "+n.options.speed+"ms; -o-animation-duration: "+n.options.speed+"ms; -ms-transition-duration: "+n.options.speed+"ms; -ms-animation-duration: "+n.options.speed+"ms; transition-duration: "+n.options.speed+"ms; animation-duration: "+n.options.speed+"ms;",o=n.options.fixedWidth>0?"width:"+Math.round(n.options.fixedWidth)+"px;":"",u=n.options.maxWidth>0?"max-width:"+Math.round(n.options.maxWidth)+"px;":"",f=n.options.interactive?"pointer-events: auto;":"";n.$tooltip=e('
');if(c())n.$tooltip.addClass(i);n.insertContent();n.$tooltip.appendTo("body");n.positionTooltip();n.options.functionReady(n.$el,n.$tooltip);if(c()){n.$tooltip.addClass(i+"-show");if(n.options.speed>0)n.$tooltip.delay(n.options.speed);n.$tooltip.queue(function(){n.status="shown"})}else{n.$tooltip.css("display","none").fadeIn(n.options.speed,function(){n.status="shown"})}n.setCheckInterval();e(t).on("scroll."+n.namespace+" resize."+n.namespace,function(){n.positionTooltip()});if(n.options.autoClose){e("body").off("."+n.namespace);if(n.options.trigger=="hover"){if(a){setTimeout(function(){e("body").on("touchstart."+n.namespace,function(){n.hideTooltip()})},0)}if(n.options.interactive){if(a){n.$tooltip.on("touchstart."+n.namespace,function(e){e.stopPropagation()})}var l=null;n.$elProxy.add(n.$tooltip).on("mouseleave."+n.namespace+"-autoClose",function(){clearTimeout(l);l=setTimeout(function(){n.hideTooltip()},n.options.interactiveTolerance)}).on("mouseenter."+n.namespace+"-autoClose",function(){clearTimeout(l)})}else{n.$elProxy.on("mouseleave."+n.namespace+"-autoClose",function(){n.hideTooltip()})}}else if(n.options.trigger=="click"){setTimeout(function(){e("body").on("click."+n.namespace+" touchstart."+n.namespace,function(){n.hideTooltip()})},0);if(n.options.interactive){n.$tooltip.on("click."+n.namespace+" touchstart."+n.namespace,function(e){e.stopPropagation()})}}}}if(n.options.timer>0){n.timerHide=setTimeout(function(){n.timerHide=null;n.hideTooltip()},n.options.timer+r)}})}},setCheckInterval:function(){var t=this;t.checkInterval=setInterval(function(){if(e("body").find(t.$el).length===0||e("body").find(t.$elProxy).length===0||t.status=="hidden"||e("body").find(t.$tooltip).length===0){if(t.status=="shown"||t.status=="appearing")t.hideTooltip();t.cancelCheckInterval()}else{if(t.options.positionTracker){var n=t.positionInfo(t.$elProxy),r=false;if(u(n.dimension,t.elProxyPosition.dimension)){if(t.$elProxy.css("position")==="fixed"){if(u(n.position,t.elProxyPosition.position))r=true}else{if(u(n.offset,t.elProxyPosition.offset))r=true}}if(!r){t.positionTooltip()}}}},200)},cancelCheckInterval:function(){clearInterval(this.checkInterval);this.checkInterval=null},hideTooltip:function(){var n=this;clearTimeout(n.timerShow);n.timerShow=null;clearTimeout(n.timerHide);n.timerHide=null;if(n.status=="shown"||n.status=="appearing"){n.status="disappearing";var r=function(){n.status="hidden";n.$tooltip.remove();n.$tooltip=null;e(t).off("."+n.namespace);e("body").off("."+n.namespace).css("overflow-x",n.bodyOverflowX);n.$elProxy.off("."+n.namespace+"-autoClose");n.options.functionAfter(n.$elProxy)};if(c()){n.$tooltip.clearQueue().removeClass("tooltipster-"+n.options.animation+"-show").addClass("tooltipster-dying");if(n.options.speed>0)n.$tooltip.delay(n.options.speed);n.$tooltip.queue(r)}else{n.$tooltip.stop().fadeOut(n.options.speed,r)}}},setContent:function(e){if(typeof e==="object"&&e!==null&&this.options.contentCloning){e=e.clone(true)}this.content=e},insertContent:function(){var e=this,t=this.$tooltip.find(".tooltipster-content");if(typeof e.content==="string"&&!e.options.contentAsHTML){t.text(e.content)}else{t.empty().append(e.content)}},updateTooltip:function(e){var t=this;t.setContent(e);if(t.content!==null){if(t.status!=="hidden"){t.insertContent();t.positionTooltip();if(t.options.updateAnimation){if(c()){t.$tooltip.css({width:"","-webkit-transition":"all "+t.options.speed+"ms, width 0ms, height 0ms, left 0ms, top 0ms","-moz-transition":"all "+t.options.speed+"ms, width 0ms, height 0ms, left 0ms, top 0ms","-o-transition":"all "+t.options.speed+"ms, width 0ms, height 0ms, left 0ms, top 0ms","-ms-transition":"all "+t.options.speed+"ms, width 0ms, height 0ms, left 0ms, top 0ms",transition:"all "+t.options.speed+"ms, width 0ms, height 0ms, left 0ms, top 0ms"}).addClass("tooltipster-content-changing");setTimeout(function(){if(t.status!="hidden"){t.$tooltip.removeClass("tooltipster-content-changing");setTimeout(function(){if(t.status!=="hidden"){t.$tooltip.css({"-webkit-transition":t.options.speed+"ms","-moz-transition":t.options.speed+"ms","-o-transition":t.options.speed+"ms","-ms-transition":t.options.speed+"ms",transition:t.options.speed+"ms"})}},t.options.speed)}},t.options.speed)}else{t.$tooltip.fadeTo(t.options.speed,.5,function(){if(t.status!="hidden"){t.$tooltip.fadeTo(t.options.speed,1)}})}}}}else{t.hideTooltip()}},positionInfo:function(e){return{dimension:{height:e.outerHeight(false),width:e.outerWidth(false)},offset:e.offset(),position:{left:parseInt(e.css("left")),top:parseInt(e.css("top"))}}},positionTooltip:function(){var n=this;if(e("body").find(n.$tooltip).length!==0){n.$tooltip.css("width","");n.elProxyPosition=n.positionInfo(n.$elProxy);var r=null,s=e(t).width(),o=n.elProxyPosition,u=n.$tooltip.outerWidth(false),a=n.$tooltip.innerWidth()+1,f=n.$tooltip.outerHeight(false),l=null;if(n.$elProxy.is("area")){var c=n.$elProxy.attr("shape"),h=n.$elProxy.parent().attr("name"),p=e('img[usemap="#'+h+'"]'),d=p.offset().left,v=p.offset().top,m=n.$elProxy.attr("coords")!==undefined?n.$elProxy.attr("coords").split(","):undefined;if(c=="circle"){var g=parseInt(m[0]),y=parseInt(m[1]),b=parseInt(m[2]);o.dimension.height=b*2;o.dimension.width=b*2;o.offset.top=v+y-b;o.offset.left=d+g-b}else if(c=="rect"){var g=parseInt(m[0]),y=parseInt(m[1]),w=parseInt(m[2]),E=parseInt(m[3]);o.dimension.height=E-y;o.dimension.width=w-g;o.offset.top=v+y;o.offset.left=d+g}else if(c=="poly"){var S=[],x=[],T=0,N=0,C=0,k=0,L="even";for(i=0;iC){C=A;if(i===0){T=C}}if(Ak){k=A;if(i==1){N=k}}if(As){r=O-(s+n-u);O=s+n-u}}function j(n,r){if(o.offset.top-e(t).scrollTop()-f-D-12<0&&r.indexOf("top")>-1){H=n}if(o.offset.top+o.dimension.height+f+12+D>e(t).scrollTop()+e(t).height()&&r.indexOf("bottom")>-1){H=n;_=o.offset.top-f-D-12}}if(H=="top"){var F=o.offset.left+u-(o.offset.left+o.dimension.width);O=o.offset.left+P-F/2;_=o.offset.top-f-D-12;B();j("bottom","top")}if(H=="top-left"){O=o.offset.left+P;_=o.offset.top-f-D-12;B();j("bottom-left","top-left")}if(H=="top-right"){O=o.offset.left+o.dimension.width+P-u;_=o.offset.top-f-D-12;B();j("bottom-right","top-right")}if(H=="bottom"){var F=o.offset.left+u-(o.offset.left+o.dimension.width);O=o.offset.left-F/2+P;_=o.offset.top+o.dimension.height+D+12;B();j("top","bottom")}if(H=="bottom-left"){O=o.offset.left+P;_=o.offset.top+o.dimension.height+D+12;B();j("top-left","bottom-left")}if(H=="bottom-right"){O=o.offset.left+o.dimension.width+P-u;_=o.offset.top+o.dimension.height+D+12;B();j("top-right","bottom-right")}if(H=="left"){O=o.offset.left-P-u-12;M=o.offset.left+P+o.dimension.width+12;var I=o.offset.top+f-(o.offset.top+n.$elProxy.outerHeight(false));_=o.offset.top-I/2-D;if(O<0&&M+u>s){var q=parseFloat(n.$tooltip.css("border-width"))*2,R=u+O-q;n.$tooltip.css("width",R+"px");f=n.$tooltip.outerHeight(false);O=o.offset.left-P-R-12-q;I=o.offset.top+f-(o.offset.top+n.$elProxy.outerHeight(false));_=o.offset.top-I/2-D}else if(O<0){O=o.offset.left+P+o.dimension.width+12;r="left"}}if(H=="right"){O=o.offset.left+P+o.dimension.width+12;M=o.offset.left-P-u-12;var I=o.offset.top+f-(o.offset.top+n.$elProxy.outerHeight(false));_=o.offset.top-I/2-D;if(O+u>s&&M<0){var q=parseFloat(n.$tooltip.css("border-width"))*2,R=s-O-q;n.$tooltip.css("width",R+"px");f=n.$tooltip.outerHeight(false);I=o.offset.top+f-(o.offset.top+n.$elProxy.outerHeight(false));_=o.offset.top-I/2-D}else if(O+u>s){O=o.offset.left-P-u-12;r="right"}}if(n.options.arrow){var U="tooltipster-arrow-"+H;if(n.options.arrowColor.length<1){var z=n.$tooltip.css("background-color")}else{var z=n.options.arrowColor}if(!r){r=""}else if(r=="left"){U="tooltipster-arrow-right";r=""}else if(r=="right"){U="tooltipster-arrow-left";r=""}else{r="left:"+Math.round(r)+"px;"}if(H=="top"||H=="top-left"||H=="top-right"){var W=parseFloat(n.$tooltip.css("border-bottom-width")),X=n.$tooltip.css("border-bottom-color")}else if(H=="bottom"||H=="bottom-left"||H=="bottom-right"){var W=parseFloat(n.$tooltip.css("border-top-width")),X=n.$tooltip.css("border-top-color")}else if(H=="left"){var W=parseFloat(n.$tooltip.css("border-right-width")),X=n.$tooltip.css("border-right-color")}else if(H=="right"){var W=parseFloat(n.$tooltip.css("border-left-width")),X=n.$tooltip.css("border-left-color")}else{var W=parseFloat(n.$tooltip.css("border-bottom-width")),X=n.$tooltip.css("border-bottom-color")}if(W>1){W++}var V="";if(W!==0){var J="",K="border-color: "+X+";";if(U.indexOf("bottom")!==-1){J="margin-top: -"+Math.round(W)+"px;"}else if(U.indexOf("top")!==-1){J="margin-bottom: -"+Math.round(W)+"px;"}else if(U.indexOf("left")!==-1){J="margin-right: -"+Math.round(W)+"px;"}else if(U.indexOf("right")!==-1){J="margin-left: -"+Math.round(W)+"px;"}V=''}n.$tooltip.find(".tooltipster-arrow").remove();var Q='
'+V+'
';n.$tooltip.append(Q)}n.$tooltip.css({top:Math.round(_)+"px",left:Math.round(O)+"px"})}}};e.fn[r]=function(){var t=arguments;if(this.length===0){if(typeof t[0]==="string"){var n=true;switch(t[0]){case"setDefaults":e.extend(s,t[1]);break;default:n=false;break}if(n)return true;else return this}else{return this}}else{if(typeof t[0]==="string"){var r="#*$~&";this.each(function(){var n=e(this).data("tooltipster");if(n){switch(t[0]){case"content":case"update":if(typeof t[1]==="undefined"){r=n.content;return false}else{n.updateTooltip(t[1]);break};case"destroy":n.hideTooltip();if(n.$el[0]!==n.$elProxy[0])n.$elProxy.remove();var i=typeof n.content==="string"?n.content:e("
").append(n.content).html();n.$el.removeClass("tooltipstered").attr("title",i).removeData("tooltipster").off("."+n.namespace);break;case"disable":n.hideTooltip();n.enabled=false;break;case"elementIcon":r=n.$el[0]!==n.$elProxy[0]?n.$elProxy[0]:undefined;return false;case"elementTooltip":r=n.$tooltip?n.$tooltip[0]:undefined;return false;case"enable":n.enabled=true;break;case"hide":n.hideTooltip();break;case"option":r=n.options[t[1]];break;case"reposition":n.positionTooltip();break;case"show":n.showTooltipNow();break;case"status":r=n.status;return false;default:throw new Error('Unknown method .tooltipster("'+t[0]+'")');break}}else{throw new Error("You called Tooltipster's \""+t[0]+'" method on an uninitialized element')}});return r!=="#*$~&"?r:this}else{return this.each(function(){if(!e(this).data("tooltipster")){e(this).data("tooltipster",new o(this,t[0]))}})}}};var a=!!("ontouchstart"in t);var f=false;e("body").one("mousemove",function(){f=true})})(jQuery,window,document); \ No newline at end of file diff --git a/stylesheets/style.css b/stylesheets/style.css index df873e68..ea575e55 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -519,6 +519,45 @@ form.ban-appeal textarea { .theme-catalog div.thread strong { display: block; } +.theme-catalog div.threads{ + text-align: center; + margin-left: -20px; +} + +.theme-catalog div.grid-size-small { + width: 200px; + max-width: 200px; + max-height: 350px; +} + +.theme-catalog div.grid-size-large { + width: 300px; + max-width: 300px; + max-height: 450px; +} + +.theme-catalog img.thread-image { + height: auto; + max-width: 100%; +} + +@media (max-width: 420px) { + .theme-catalog ul#Grid { + padding-left: 18px; + } + .theme-catalog div.thread { + width: auto; + margin-left: 0; + margin-right: 0; + + } + .theme-catalog div.threads { + overflow: hidden; + } +} + +@include url("tooltipster/tooltipster.css"); + .compact-boardlist { padding: 3px; padding-bottom: 0px; diff --git a/stylesheets/tooltipster/tooltipster.css b/stylesheets/tooltipster/tooltipster.css new file mode 100644 index 00000000..e5c609cc --- /dev/null +++ b/stylesheets/tooltipster/tooltipster.css @@ -0,0 +1,274 @@ +/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */ +.tooltipster-default { + border-radius: 5px; + border: 2px solid #000; + background: #4c4c4c; + color: #fff; +} + +/* Use this next selector to style things like font-size and line-height: */ +.tooltipster-default .tooltipster-content { + font-family: Arial, sans-serif; + font-size: 14px; + line-height: 16px; + padding: 8px 10px; + overflow: hidden; +} + +/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */ +.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border { + /* border-color: ... !important; */ +} + + +/* If you're using the icon option, use this next selector to style them */ +.tooltipster-icon { + cursor: help; + margin-left: 4px; +} + + + + + + + + +/* This is the base styling required to make all Tooltipsters work */ +.tooltipster-base { + padding: 0; + font-size: 0; + line-height: 0; + position: absolute; + left: 0; + top: 0; + z-index: 9999999; + pointer-events: none; + width: auto; + overflow: visible; +} +.tooltipster-base .tooltipster-content { + overflow: hidden; +} + + +/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */ +.tooltipster-arrow { + display: block; + text-align: center; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +.tooltipster-arrow span, .tooltipster-arrow-border { + display: block; + width: 0; + height: 0; + position: absolute; +} +.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { + border-left: 8px solid transparent !important; + border-right: 8px solid transparent !important; + border-top: 8px solid; + bottom: -7px; +} +.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { + border-left: 9px solid transparent !important; + border-right: 9px solid transparent !important; + border-top: 9px solid; + bottom: -7px; +} + +.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { + border-left: 8px solid transparent !important; + border-right: 8px solid transparent !important; + border-bottom: 8px solid; + top: -7px; +} +.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { + border-left: 9px solid transparent !important; + border-right: 9px solid transparent !important; + border-bottom: 9px solid; + top: -7px; +} +.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { + left: 0; + right: 0; + margin: 0 auto; +} +.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { + left: 6px; +} +.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { + left: 5px; +} +.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { + right: 6px; +} +.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { + right: 5px; +} +.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { + border-top: 8px solid transparent !important; + border-bottom: 8px solid transparent !important; + border-left: 8px solid; + top: 50%; + margin-top: -7px; + right: -7px; +} +.tooltipster-arrow-left .tooltipster-arrow-border { + border-top: 9px solid transparent !important; + border-bottom: 9px solid transparent !important; + border-left: 9px solid; + margin-top: -8px; +} +.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { + border-top: 8px solid transparent !important; + border-bottom: 8px solid transparent !important; + border-right: 8px solid; + top: 50%; + margin-top: -7px; + left: -7px; +} +.tooltipster-arrow-right .tooltipster-arrow-border { + border-top: 9px solid transparent !important; + border-bottom: 9px solid transparent !important; + border-right: 9px solid; + margin-top: -8px; +} + + +/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */ + +.tooltipster-fade { + opacity: 0; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -o-transition-property: opacity; + -ms-transition-property: opacity; + transition-property: opacity; +} +.tooltipster-fade-show { + opacity: 1; +} + +.tooltipster-grow { + -webkit-transform: scale(0,0); + -moz-transform: scale(0,0); + -o-transform: scale(0,0); + -ms-transform: scale(0,0); + transform: scale(0,0); + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform; + -webkit-backface-visibility: hidden; +} +.tooltipster-grow-show { + -webkit-transform: scale(1,1); + -moz-transform: scale(1,1); + -o-transform: scale(1,1); + -ms-transform: scale(1,1); + transform: scale(1,1); + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); +} + +.tooltipster-swing { + opacity: 0; + -webkit-transform: rotateZ(4deg); + -moz-transform: rotateZ(4deg); + -o-transform: rotateZ(4deg); + -ms-transform: rotateZ(4deg); + transform: rotateZ(4deg); + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform; +} +.tooltipster-swing-show { + opacity: 1; + -webkit-transform: rotateZ(0deg); + -moz-transform: rotateZ(0deg); + -o-transform: rotateZ(0deg); + -ms-transform: rotateZ(0deg); + transform: rotateZ(0deg); + -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1); + -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); + -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); + -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); + -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); + transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); +} + +.tooltipster-fall { + top: 0; + -webkit-transition-property: top; + -moz-transition-property: top; + -o-transition-property: top; + -ms-transition-property: top; + transition-property: top; + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); +} +.tooltipster-fall-show { +} +.tooltipster-fall.tooltipster-dying { + -webkit-transition-property: all; + -moz-transition-property: all; + -o-transition-property: all; + -ms-transition-property: all; + transition-property: all; + top: 0px !important; + opacity: 0; +} + +.tooltipster-slide { + left: -40px; + -webkit-transition-property: left; + -moz-transition-property: left; + -o-transition-property: left; + -ms-transition-property: left; + transition-property: left; + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); +} +.tooltipster-slide.tooltipster-slide-show { +} +.tooltipster-slide.tooltipster-dying { + -webkit-transition-property: all; + -moz-transition-property: all; + -o-transition-property: all; + -ms-transition-property: all; + transition-property: all; + left: 0px !important; + opacity: 0; +} + + +/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */ +.tooltipster-content-changing { + opacity: 0.5; + -webkit-transform: scale(1.1, 1.1); + -moz-transform: scale(1.1, 1.1); + -o-transform: scale(1.1, 1.1); + -ms-transform: scale(1.1, 1.1); + transform: scale(1.1, 1.1); +} diff --git a/templates/themes/catalog/catalog.html b/templates/themes/catalog/catalog.html index 3bfd3e23..1df38287 100644 --- a/templates/themes/catalog/catalog.html +++ b/templates/themes/catalog/catalog.html @@ -5,6 +5,12 @@ {% include 'header.html' %} {{ settings.title }} @@ -15,20 +21,47 @@

{{ settings.title }} (/{{ board }}/)

{{ settings.subtitle }}
-
-
    - {% for post in recent_posts %} -
    - - - - - {% trans %}1 reply{% plural post.reply_count %}{{ count }} replies{% endtrans %}
    - {{ post.body }} -     -
    - {% endfor %} -
+
    +
  • {% trans 'Bump order' %}
    • +
  • {% trans 'Last reply' %}
    • +
  • {% trans 'Creation date' %}
    • +
  • {% trans 'Reply count' %}
    • +
  • {% trans 'Random' %}
    • +
+ + {% trans 'Sort by' %}: + + + {% trans 'Image size' %}: + +
+
    + {% for post in recent_posts %} +
  • +
    + + + +

    + + R: {{ post.reply_count }} / I: {{ post.image_count }}
    + {{ post.body }} +     +

    +
    +
    • + {% endfor %} +
+