first import

This commit is contained in:
Bachir Soussi Chiadmi
2015-04-08 11:40:19 +02:00
commit 1bc61b12ad
8435 changed files with 1582817 additions and 0 deletions

View File

@@ -0,0 +1,22 @@
Copyright (c) 2011 Tyler Smith
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,30 @@
jQuery FlexSlider v1.4
http://flex.madebymufffin.com
A responsive jQuery slider plugin. The plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options, and all the navigation options you would expect, including touch gestures. It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well.
Copyright (c) 2011 Tyler Smith.
Released on http://flex.madebymufffin.com and Smashing Magazine.
---
Changelog:
v1.4 (2011-08-23)
- Added "manualControls" property to allow for custom, non-dynamic control navigation
- Added "show" animation to allow for instant transitions between slides
v1.3 (2011-08-18)
- Made slide animation a continuous scroll effect, rather than jumping back to start/end
- Cleaned up code and created better test cases for different slider scenarios. The slider is a lot more bulletproof as of this update.
--
v1.2 (2011-08-16)
- Fixed some code redundancies
- Added "randomize" property to randomize slide oder on pageLoad
- Added "touchSwipe" property for swipe gestures on iOS and Android devices (no Android device to test this, but it should work)
- Fixed minor bugs in jQuery 1.3.2 where navigation was not appending correctly
--
v1.0 2011-08-14 (Release)
- Free to use under the MIT license

View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8">
<title>FlexSlider Demo</title>
<!-- FlexSlider pieces -->
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
<!-- Includes for this demo -->
<link rel="stylesheet" href="demo-stuff/demo.css" type="text/css" media="screen" />
<!-- Hook up the FlexSlider -->
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<div id="container">
<h2>FlexSlider Demo - <a href="http://flex.madebymufffin.com">Visit the homepage for documentation details</a></h2>
<!--=============================
Markup for FADE animation
=================================-->
<div class="flexslider">
<ul class="slides">
<li>
<img src="demo-stuff/inacup_samoa.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="demo-stuff/inacup_donut.jpg" />
</li>
<li>
<img src="demo-stuff/inacup_vanilla.jpg" />
</li>
</ul>
</div>
<!--============================
Markup for SLIDE animation
You need to add an extra container element for the overflow: hidden property on the slider
Update your flexslider() function with the following properties:
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flexslider-container"
});
});
</script>
=================================
<div class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="demo-stuff/inacup_samoa.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href="#"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="demo-stuff/inacup_donut.jpg" />
</li>
<li>
<img src="demo-stuff/inacup_vanilla.jpg" />
</li>
</ul>
</div>
</div>
==================================-->
</div>
</body>
</html>

View File

@@ -0,0 +1,39 @@
/*
* jQuery FlexSlider v1.4
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* FlexSlider Necessary Styles
*********************************/
.flexslider {width: 100%; margin: 0; padding: 0;}
.flexslider .slides li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
.flexslider .slides li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flexslider-container {position: relative;}
/* Caption style */
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 18px;}
/* Direction Nav */
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;} /* set negative margin-top equal to half the height on the directional-nav for perfect vertical centering */
.flex-direction-nav li a.next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li a.prev {background-position: 0 0; left: -21px;}
/* Control Nav */
.flex-control-nav {margin-left: -31px; position: absolute; bottom: -30px; left: 50%;} /* set negative margin-left equal to half the width on the control-nav for perfect centering */
.flex-control-nav li {margin: 0 0 0 5px; float: left;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

View File

@@ -0,0 +1,11 @@
/*
* jQuery FlexSlider v1.4
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* TouchWipe gesture credits: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
*/
(function(a){a.fn.extend({flexslider:function(q){var k={animation:"fade",slideshow:true,slideshowSpeed:7000,animationDuration:500,directionNav:true,controlNav:true,keyboardNav:true,touchSwipe:true,prevText:"Previous",nextText:"Next",randomize:false,slideToStart:0,pauseOnAction:true,pauseOnHover:false,controlsContainer:"",manualControls:""};var q=a.extend(k,q),d=this,c=a(".slides",d),b=a(".slides li",d),f=b.length;ANIMATING=false,currentSlide=q.slideToStart;if(q.randomize&&f>1){b.sort(function(){return(Math.round(Math.random())-0.5)});c.empty().append(b)}if(q.animation.toLowerCase()=="slide"&&f>1){d.css({overflow:"hidden"});c.append(b.filter(":first").clone().addClass("clone")).prepend(b.filter(":last").clone().addClass("clone"));c.width(((f+2)*d.width())+2000);var g=a(".slides li",d);setTimeout(function(){g.width(d.width()).css({"float":"left"}).show()},100);c.css({marginLeft:(-1*(currentSlide+1))*d.width()+"px"})}else{b.hide().eq(currentSlide).fadeIn(400)}function o(i){if(!ANIMATING){ANIMATING=true;if(q.animation.toLowerCase()=="slide"){if(currentSlide==0&&i==f-1){c.animate({marginLeft:"0px"},q.animationDuration,function(){c.css({marginLeft:(-1*f)*b.filter(":first").width()+"px"});ANIMATING=false;currentSlide=i})}else{if(currentSlide==f-1&&i==0){c.animate({marginLeft:(-1*(f+1))*b.filter(":first").width()+"px"},q.animationDuration,function(){c.css({marginLeft:-1*b.filter(":first").width()+"px"});ANIMATING=false;currentSlide=i})}else{c.animate({marginLeft:(-1*(i+1))*b.filter(":first").width()+"px"},q.animationDuration,function(){ANIMATING=false;currentSlide=i})}}}else{if(q.animation.toLowerCase()=="show"){b.eq(currentSlide).hide();b.eq(i).show();ANIMATING=false;currentSlide=i}else{d.css({minHeight:b.eq(currentSlide).height()});b.eq(currentSlide).fadeOut(q.animationDuration,function(){b.eq(i).fadeIn(q.animationDuration,function(){ANIMATING=false;currentSlide=i});d.css({minHeight:"inherit"})})}}}}if(q.controlNav&&f>1){if(q.manualControls!=""&&a(q.manualControls).length>0){var e=a(q.manualControls)}else{var e=a('<ol class="flex-control-nav"></ol>');var l=1;for(var m=0;m<f;m++){e.append("<li><a>"+l+"</a></li>");l++}if(q.controlsContainer!=""&&a(q.controlsContainer).length>0){a(q.controlsContainer).append(e)}else{d.append(e)}e=a(".flex-control-nav li a")}e.eq(currentSlide).addClass("active");e.click(function(j){j.preventDefault();if(a(this).hasClass("active")||ANIMATING){return}else{e.removeClass("active");a(this).addClass("active");var i=e.index(a(this));o(i);if(q.pauseOnAction){clearInterval(n)}}})}if(q.directionNav&&f>1){if(q.controlsContainer!=""&&a(q.controlsContainer).length>0){a(q.controlsContainer).append(a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+q.prevText+'</a></li><li><a class="next" href="#">'+q.nextText+"</a></li></ul>"))}else{d.append(a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+q.prevText+'</a></li><li><a class="next" href="#">'+q.nextText+"</a></li></ul>"))}a(".flex-direction-nav li a").click(function(i){i.preventDefault();if(ANIMATING){return}else{if(a(this).hasClass("next")){var j=(currentSlide==f-1)?0:currentSlide+1}else{var j=(currentSlide==0)?f-1:currentSlide-1}if(q.controlNav){e.removeClass("active");e.eq(j).addClass("active")}o(j);if(q.pauseOnAction){clearInterval(n)}}})}if(q.keyboardNav&&f>1){a(document).keyup(function(i){if(ANIMATING){return}else{if(i.keyCode!=39&&i.keyCode!=37){return}else{if(i.keyCode==39){var j=(currentSlide==f-1)?0:currentSlide+1}else{if(i.keyCode==37){var j=(currentSlide==0)?f-1:currentSlide-1}}if(q.controlNav){e.removeClass("active");e.eq(j).addClass("active")}o(j);if(q.pauseOnAction){clearInterval(n)}}}})}if(q.slideshow&&f>1){var n;function p(){if(ANIMATING){return}else{var i=(currentSlide==f-1)?0:currentSlide+1;if(q.controlNav){e.removeClass("active");e.eq(i).addClass("active")}o(i)}}if(q.pauseOnHover){d.hover(function(){clearInterval(n)},function(){n=setInterval(p,q.slideshowSpeed)})}if(f>1){n=setInterval(p,q.slideshowSpeed)}}if(q.touchSwipe&&"ontouchstart" in document.documentElement&&f>1){d.each(function(){var i,j=20;isMoving=false;function t(){this.removeEventListener("touchmove",r);i=null;isMoving=false}function r(y){if(isMoving){var u=y.touches[0].pageX,v=i-u;if(Math.abs(v)>=j){t();if(v>0){var w=(currentSlide==f-1)?0:currentSlide+1}else{var w=(currentSlide==0)?f-1:currentSlide-1}if(q.controlNav){e.removeClass("active");e.eq(w).addClass("active")}o(w);if(q.pauseOnAction){clearInterval(n)}}}}function s(u){if(u.touches.length==1){i=u.touches[0].pageX;isMoving=true;this.addEventListener("touchmove",r,false)}}if("ontouchstart" in document.documentElement){this.addEventListener("touchstart",s,false)}})}if(q.animation.toLowerCase()=="slide"&&f>1){var h;a(window).resize(function(){g.width(d.width());c.width(((f+2)*d.width())+2000);clearTimeout(h);h=setTimeout(function(){o(currentSlide)},300)})}}})})(jQuery);

View File

@@ -0,0 +1,340 @@
/*
* jQuery FlexSlider v1.4
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* TouchWipe gesture credits: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
*/
(function ($) {
$.fn.extend({
flexslider: function(options) {
//Plugin options and their default values
var defaults = {
animation: "fade", //Select your animation type (fade/slide/show)
slideshow: true, //Should the slider animate automatically by default? (true/false)
slideshowSpeed: 7000, //Set the speed of the slideshow cycling, in milliseconds
animationDuration: 500, //Set the speed of animations, in milliseconds
directionNav: true, //Create navigation for previous/next navigation? (true/false)
controlNav: true, //Create navigation for paging control of each clide? (true/false)
keyboardNav: true, //Allow for keyboard navigation using left/right keys (true/false)
touchSwipe: true, //Touch swipe gestures for left/right slide navigation (true/false)
prevText: "Previous", //Set the text for the "previous" directionNav item
nextText: "Next", //Set the text for the "next" directionNav item
randomize: false, //Randomize slide order on page load? (true/false)
slideToStart: 0, //The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true, //Pause the slideshow when interacting with control elements, highly recommended. (true/false)
pauseOnHover: false, //Pause the slideshow when hovering over slider, then resume when no longer hovering (true/false)
controlsContainer: "", //Advanced property: Can declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "" //Advanced property: Can declare custom control navigation. Example would be ".flex-control-nav" or "#tabs-nav", etc. The number of elements in your controlNav should match the number of slides/tabs (obviously).
}
//Get slider, slides, and other useful variables
var options = $.extend(defaults, options),
slider = this,
container = $('.slides', slider),
slides = $('.slides li', slider),
length = slides.length;
ANIMATING = false,
currentSlide = options.slideToStart;
///////////////////////////////////////////////////////////////////
// FLEXSLIDER: RANDOMIZE SLIDES
if (options.randomize && length > 1) {
slides.sort(function() { return (Math.round(Math.random())-0.5); });
container.empty().append(slides);
}
///////////////////////////////////////////////////////////////////
//Slider animation initialize
if (options.animation.toLowerCase() == "slide" && length > 1) {
slider.css({"overflow": "hidden"});
container.append(slides.filter(':first').clone().addClass('clone')).prepend(slides.filter(':last').clone().addClass('clone'));
container.width(((length + 2) * slider.width()) + 2000); //extra width to account for quirks
//Timeout function to give browser enough time to get proper width initially
var newSlides = $('.slides li', slider);
setTimeout(function() {
newSlides.width(slider.width()).css({"float": "left"}).show();
}, 100);
container.css({"marginLeft": (-1 * (currentSlide + 1))* slider.width() + "px"});
} else { //Default to fade
slides.hide().eq(currentSlide).fadeIn(400);
}
///////////////////////////////////////////////////////////////////
// FLEXSLIDER: ANIMATION TYPE
function flexAnimate(target) {
if (!ANIMATING) {
ANIMATING = true;
if (options.animation.toLowerCase() == "slide") {
if (currentSlide == 0 && target == length - 1) {
container.animate({"marginLeft": "0px"}, options.animationDuration, function(){
container.css({"marginLeft": (-1 * length) * slides.filter(':first').width() + "px"});
ANIMATING = false;
currentSlide = target;
});
} else if (currentSlide == length - 1 && target == 0) {
container.animate({"marginLeft": (-1 * (length + 1)) * slides.filter(':first').width() + "px"}, options.animationDuration, function(){
container.css({"marginLeft": -1 * slides.filter(':first').width() + "px"});
ANIMATING = false;
currentSlide = target;
});
} else {
container.animate({"marginLeft": (-1 * (target + 1)) * slides.filter(':first').width() + "px"}, options.animationDuration, function(){
ANIMATING = false;
currentSlide = target;
});
}
} else if (options.animation.toLowerCase() == "show") {
slides.eq(currentSlide).hide();
slides.eq(target).show();
ANIMATING = false;
currentSlide = target;
} else { //Default to Fade
slider.css({"minHeight": slides.eq(currentSlide).height()});
slides.eq(currentSlide).fadeOut(options.animationDuration, function() {
slides.eq(target).fadeIn(options.animationDuration, function() {
ANIMATING = false;
currentSlide = target;
});
slider.css({"minHeight": "inherit"});
});
}
}
}
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
// FLEXSLIDER: CONTROL NAV
if (options.controlNav && length > 1) {
if (options.manualControls != "" && $(options.manualControls).length > 0) {
var controlNav = $(options.manualControls);
} else {
var controlNav = $('<ol class="flex-control-nav"></ol>');
var j = 1;
for (var i = 0; i < length; i++) {
controlNav.append('<li><a>' + j + '</a></li>');
j++;
}
//extra children check for jquery 1.3.2 - Drupal 6
if (options.controlsContainer != "" && $(options.controlsContainer).length > 0) {
$(options.controlsContainer).append(controlNav);
} else {
slider.append(controlNav);
}
controlNav = $('.flex-control-nav li a');
}
controlNav.eq(currentSlide).addClass('active');
controlNav.click(function(event) {
event.preventDefault();
if ($(this).hasClass('active') || ANIMATING) {
return;
} else {
controlNav.removeClass('active');
$(this).addClass('active');
var selected = controlNav.index($(this));
flexAnimate(selected);
if (options.pauseOnAction) {
clearInterval(animatedSlides);
}
}
});
}
///////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: DIRECTION NAV
if (options.directionNav && length > 1) {
//Create and append the nav
if (options.controlsContainer != "" && $(options.controlsContainer).length > 0) {
$(options.controlsContainer).append($('<ul class="flex-direction-nav"><li><a class="prev" href="#">' + options.prevText + '</a></li><li><a class="next" href="#">' + options.nextText + '</a></li></ul>'));
} else {
slider.append($('<ul class="flex-direction-nav"><li><a class="prev" href="#">' + options.prevText + '</a></li><li><a class="next" href="#">' + options.nextText + '</a></li></ul>'));
}
$('.flex-direction-nav li a').click(function(event) {
event.preventDefault();
if (ANIMATING) {
return;
} else {
if ($(this).hasClass('next')) {
var target = (currentSlide == length - 1) ? 0 : currentSlide + 1;
} else {
var target = (currentSlide == 0) ? length - 1 : currentSlide - 1;
}
if (options.controlNav) {
controlNav.removeClass('active');
controlNav.eq(target).addClass('active');
}
flexAnimate(target);
if (options.pauseOnAction) {
clearInterval(animatedSlides);
}
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: KEYBOARD NAV
if (options.keyboardNav && length > 1) {
$(document).keyup(function(event) {
if (ANIMATING) {
return;
} else if (event.keyCode != 39 && event.keyCode != 37){
return;
} else {
if (event.keyCode == 39) {
var target = (currentSlide == length - 1) ? 0 : currentSlide + 1;
} else if (event.keyCode == 37){
var target = (currentSlide == 0) ? length - 1 : currentSlide - 1;
}
if (options.controlNav) {
controlNav.removeClass('active');
controlNav.eq(target).addClass('active');
}
flexAnimate(target);
if (options.pauseOnAction) {
clearInterval(animatedSlides);
}
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: ANIMATION SLIDESHOW
if (options.slideshow && length > 1) {
var animatedSlides;
function animateSlides() {
if (ANIMATING) {
return;
} else {
var target = (currentSlide == length - 1) ? 0 : currentSlide + 1;
if (options.controlNav) {
controlNav.removeClass('active');
controlNav.eq(target).addClass('active');
}
flexAnimate(target);
}
}
//pauseOnHover
if (options.pauseOnHover) {
slider.hover(function() {
clearInterval(animatedSlides);
}, function() {
animatedSlides = setInterval(animateSlides, options.slideshowSpeed);
});
}
//Initialize animation
if (length > 1) {
animatedSlides = setInterval(animateSlides, options.slideshowSpeed);
}
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: TOUCHSWIPE GESTURES
//Credit of concept: TouchSwipe - http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
if (options.touchSwipe && 'ontouchstart' in document.documentElement && length > 1) {
slider.each(function() {
var startX,
min_move_x = 20;
isMoving = false;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
}
function onTouchMove(e) {
if (isMoving) {
var x = e.touches[0].pageX,
dx = startX - x;
if(Math.abs(dx) >= min_move_x) {
cancelTouch();
if(dx > 0) {
var target = (currentSlide == length - 1) ? 0 : currentSlide + 1;
}
else {
var target = (currentSlide == 0) ? length - 1 : currentSlide - 1;
}
if (options.controlNav) {
controlNav.removeClass('active');
controlNav.eq(target).addClass('active');
}
flexAnimate(target);
if (options.pauseOnAction) {
clearInterval(animatedSlides);
}
}
}
}
function onTouchStart(e) {
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: RESIZE FUNCTIONS (If necessary)
if (options.animation.toLowerCase() == "slide" && length > 1) {
var sliderTimer;
$(window).resize(function(){
newSlides.width(slider.width());
//clones.width(slider.width());
container.width(((length + 2) * slider.width()) + 2000); //extra width to account for quirks
//slider resize reset
clearTimeout(sliderTimer);
sliderTimer = setTimeout(function(){
flexAnimate(currentSlide);
}, 300);
});
}
//////////////////////////////////////////////////////////////////
}
});
})(jQuery);

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB