diff --git a/css/app.css b/css/app.css index 477f944..7a169ad 100644 --- a/css/app.css +++ b/css/app.css @@ -89,7 +89,7 @@ h1 { h2 { font-size: 36px; line-height: 1.2em; - margin-bottom: 0.2em; + margin-bottom: 0.3em; } /* line 51, ../sass/app.sass */ @@ -182,8 +182,52 @@ img { background: #444444; } +/* line 114, ../sass/app.sass */ +.examples .image-section .target-image { + -moz-border-radius-bottomleft: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -webkit-box-shadow: 0 4px 0 #333333; + -moz-box-shadow: 0 4px 0 #333333; + box-shadow: 0 4px 0 #333333; +} +/* line 117, ../sass/app.sass */ +.examples .color-thief-output { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* line 120, ../sass/app.sass */ +.examples .image-section.with-color-thief-output .target-image { + -moz-border-radius-bottomleft: 0; + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomright: 0; + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* line 123, ../sass/app.sass */ +.examples .image-section.with-color-thief-output .color-thief-output { + -webkit-box-shadow: 0 4px 0 #333333; + -moz-box-shadow: 0 4px 0 #333333; + box-shadow: 0 4px 0 #333333; +} + +/* line 126, ../sass/app.sass */ +.sharing { + position: fixed; + top: 20px; + right: 0; +} + /* -- Image examples ------------------------------------------------------------------ */ -/* line 115, ../sass/app.sass */ +/* line 133, ../sass/app.sass */ .run-functions-button { position: absolute; top: 50%; @@ -200,16 +244,17 @@ img { border-radius: 50%; color: #686002; background-color: #fdf485; + border-bottom: 2px solid #4f4901; font-size: 24px; font-weight: 500; cursor: pointer; } -/* line 130, ../sass/app.sass */ +/* line 149, ../sass/app.sass */ .run-functions-button:hover { background-color: #fef9b7; color: #4f4901; } -/* line 133, ../sass/app.sass */ +/* line 152, ../sass/app.sass */ .run-functions-button:active { -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); @@ -217,12 +262,12 @@ img { -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } -/* line 135, ../sass/app.sass */ +/* line 154, ../sass/app.sass */ .run-functions-button.hide { - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; + -webkit-transition: -webkit-transform 0.4s, top 0.4s; + -moz-transition: -moz-transform 0.4s, top 0.4s; + -o-transition: -o-transform 0.4s, top 0.4s; + transition: transform 0.4s, top 0.4s; top: 100%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); @@ -231,29 +276,62 @@ img { transform: scale(0, 0); } -/* line 140, ../sass/app.sass */ -.target-image { - width: 100%; +/* line 161, ../sass/app.sass */ +.touch .touch-label { + display: inline; +} +/* line 163, ../sass/app.sass */ +.touch .no-touch-label { + display: none; } -/* line 143, ../sass/app.sass */ +/* line 166, ../sass/app.sass */ +.no-touch .touch-label { + display: none; +} +/* line 168, ../sass/app.sass */ +.no-touch .no-touch-label { + display: inline; +} + +/* line 171, ../sass/app.sass */ +.target-image { + width: 100%; + -moz-border-radius-topleft: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topright: 4px; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; +} + +/* line 175, ../sass/app.sass */ .color-thief-output { display: none; padding: 20px; background-color: #eeeeee; + -moz-border-radius-bottomleft: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -webkit-box-shadow: 0 4px 0 #333333; + -moz-box-shadow: 0 4px 0 #333333; + box-shadow: 0 4px 0 #333333; } -/* line 147, ../sass/app.sass */ +/* line 181, ../sass/app.sass */ .color-thief-output .function-title { color: #444444; font-weight: bold; } -/* line 151, ../sass/app.sass */ +/* line 185, ../sass/app.sass */ .function { margin-bottom: 10px; } -/* line 154, ../sass/app.sass */ +/* line 188, ../sass/app.sass */ .swatches { *zoom: 1; } @@ -264,7 +342,7 @@ img { clear: both; } -/* line 157, ../sass/app.sass */ +/* line 191, ../sass/app.sass */ .swatch { width: 60px; height: 30px; @@ -273,20 +351,20 @@ img { float: left; } -/* line 164, ../sass/app.sass */ +/* line 198, ../sass/app.sass */ canvas { display: none; } /* -- Animated logo ------------------------------------------------------------------ */ -/* line 169, ../sass/app.sass */ +/* line 203, ../sass/app.sass */ .logo .char1 { -webkit-transition: color 0.1s; -moz-transition: color 0.1s; -o-transition: color 0.1s; transition: color 0.1s; } -/* line 171, ../sass/app.sass */ +/* line 205, ../sass/app.sass */ .logo .char2 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.05s; @@ -294,7 +372,7 @@ canvas { -o-transition: color 0.1s 0.05s; transition: color 0.1s 0.05s; } -/* line 173, ../sass/app.sass */ +/* line 207, ../sass/app.sass */ .logo .char3 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.1s; @@ -302,7 +380,7 @@ canvas { -o-transition: color 0.1s 0.1s; transition: color 0.1s 0.1s; } -/* line 175, ../sass/app.sass */ +/* line 209, ../sass/app.sass */ .logo .char4 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.15s; @@ -310,7 +388,7 @@ canvas { -o-transition: color 0.1s 0.15s; transition: color 0.1s 0.15s; } -/* line 177, ../sass/app.sass */ +/* line 211, ../sass/app.sass */ .logo .char5 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.2s; @@ -318,7 +396,7 @@ canvas { -o-transition: color 0.1s 0.2s; transition: color 0.1s 0.2s; } -/* line 180, ../sass/app.sass */ +/* line 214, ../sass/app.sass */ .logo .char7 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.3s; @@ -326,7 +404,7 @@ canvas { -o-transition: color 0.1s 0.3s; transition: color 0.1s 0.3s; } -/* line 182, ../sass/app.sass */ +/* line 216, ../sass/app.sass */ .logo .char8 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.35s; @@ -334,7 +412,7 @@ canvas { -o-transition: color 0.1s 0.35s; transition: color 0.1s 0.35s; } -/* line 184, ../sass/app.sass */ +/* line 218, ../sass/app.sass */ .logo .char9 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.4s; @@ -342,7 +420,7 @@ canvas { -o-transition: color 0.1s 0.4s; transition: color 0.1s 0.4s; } -/* line 186, ../sass/app.sass */ +/* line 220, ../sass/app.sass */ .logo .char10 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.45s; @@ -350,7 +428,7 @@ canvas { -o-transition: color 0.1s 0.45s; transition: color 0.1s 0.45s; } -/* line 188, ../sass/app.sass */ +/* line 222, ../sass/app.sass */ .logo .char11 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.5s; @@ -358,7 +436,7 @@ canvas { -o-transition: color 0.1s 0.5s; transition: color 0.1s 0.5s; } -/* line 191, ../sass/app.sass */ +/* line 225, ../sass/app.sass */ .logo:hover .char1 { -webkit-transition: color 0.1s; -moz-transition: color 0.1s; @@ -366,7 +444,7 @@ canvas { transition: color 0.1s; color: #ff4040; } -/* line 194, ../sass/app.sass */ +/* line 228, ../sass/app.sass */ .logo:hover .char2 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.05s; @@ -375,7 +453,7 @@ canvas { transition: color 0.1s 0.05s; color: #ff8000; } -/* line 197, ../sass/app.sass */ +/* line 231, ../sass/app.sass */ .logo:hover .char3 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.1s; @@ -384,7 +462,7 @@ canvas { transition: color 0.1s 0.1s; color: #fdf485; } -/* line 200, ../sass/app.sass */ +/* line 234, ../sass/app.sass */ .logo:hover .char4 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.15s; @@ -393,7 +471,7 @@ canvas { transition: color 0.1s 0.15s; color: #00bfa8; } -/* line 203, ../sass/app.sass */ +/* line 237, ../sass/app.sass */ .logo:hover .char5 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.2s; @@ -402,7 +480,7 @@ canvas { transition: color 0.1s 0.2s; color: #0096df; } -/* line 207, ../sass/app.sass */ +/* line 241, ../sass/app.sass */ .logo:hover .char7 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.3s; @@ -411,7 +489,7 @@ canvas { transition: color 0.1s 0.3s; color: #ff4040; } -/* line 210, ../sass/app.sass */ +/* line 244, ../sass/app.sass */ .logo:hover .char8 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.35s; @@ -420,7 +498,7 @@ canvas { transition: color 0.1s 0.35s; color: #ff8000; } -/* line 213, ../sass/app.sass */ +/* line 247, ../sass/app.sass */ .logo:hover .char9 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.4s; @@ -429,7 +507,7 @@ canvas { transition: color 0.1s 0.4s; color: #fdf485; } -/* line 216, ../sass/app.sass */ +/* line 250, ../sass/app.sass */ .logo:hover .char10 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.45s; @@ -438,7 +516,7 @@ canvas { transition: color 0.1s 0.45s; color: #00bfa8; } -/* line 219, ../sass/app.sass */ +/* line 253, ../sass/app.sass */ .logo:hover .char11 { -webkit-transition: color 0.1s; -webkit-transition-delay: 0.5s; @@ -449,33 +527,38 @@ canvas { } /* -- Drag and drop ------------------------------------------------------------------ */ -/* line 226, ../sass/app.sass */ +/* line 260, ../sass/app.sass */ .drag-drop { display: none; } -/* line 229, ../sass/app.sass */ +/* line 263, ../sass/app.sass */ .drop-zone { height: 400px; margin-bottom: 80px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; background: url("../img/dark_checkered_bg.png"); } -/* line 233, ../sass/app.sass */ +/* line 268, ../sass/app.sass */ .drop-zone.dragging { -webkit-box-shadow: inset 0 0 0 4px #00bfa8; -moz-box-shadow: inset 0 0 0 4px #00bfa8; box-shadow: inset 0 0 0 4px #00bfa8; } -/* line 235, ../sass/app.sass */ +/* line 270, ../sass/app.sass */ .drop-zone.dragging .default-label { display: none; } -/* line 237, ../sass/app.sass */ +/* line 272, ../sass/app.sass */ .drop-zone.dragging .dragging-label { display: block; } -/* line 240, ../sass/app.sass */ +/* line 275, ../sass/app.sass */ .drop-zone-label { position: relative; top: 170px; @@ -493,41 +576,72 @@ canvas { pointer-events: none; } -/* line 252, ../sass/app.sass */ +/* line 287, ../sass/app.sass */ .dragging-label { display: none; } -/* line 256, ../sass/app.sass */ +/* line 291, ../sass/app.sass */ .dropped-image .run-functions-button { display: none; } +/* -- Responsive design -------------------------------------------------------------- */ @media only screen and (max-width: 480px) { - /* line 263, ../sass/app.sass */ + /* line 300, ../sass/app.sass */ body { - margin: 40px 0; - font-size: 14px; + margin: 80px 0 40px 0; + font-size: 15px; } - /* line 266, ../sass/app.sass */ + /* line 303, ../sass/app.sass */ .intro { padding-left: 20px; padding-right: 20px; } - /* line 269, ../sass/app.sass */ + /* line 306, ../sass/app.sass */ h1 { font-size: 48px; } - /* line 271, ../sass/app.sass */ + /* line 308, ../sass/app.sass */ h2 { font-size: 24px; } - /* line 273, ../sass/app.sass */ + /* line 310, ../sass/app.sass */ h3 { font-size: 14px; } + + /* line 315, ../sass/app.sass */ + .examples .image-section .target-image, + .dragged-images .image-section .target-image { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + } + /* line 317, ../sass/app.sass */ + .examples .image-section .color-thief-output, + .dragged-images .image-section .color-thief-output { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + } + + /* line 320, ../sass/app.sass */ + .examples .image-wrap { + min-height: 200px; + } +} +@media only screen and (min-width: 640px) { + /* line 325, ../sass/app.sass */ + .examples .image-wrap { + min-height: 450px; + } } diff --git a/demo.js b/demo.js index 17465bc..d712f07 100644 --- a/demo.js +++ b/demo.js @@ -40,7 +40,7 @@ $(document).ready(function () { var color = colorThief.getColor(image); var elapsedTimeForGetColor = Date.now() - start; var palette = colorThief.getPalette(image, PALETTE_COLOR_COUNT); - var elapsedTimeForGetPalette = Date.now() - start - elapsedTimeForGetColor; + var elapsedTimeForGetPalette = Date.now() - start + elapsedTimeForGetColor; var colorThiefOutput = { color: color, @@ -49,6 +49,7 @@ $(document).ready(function () { elapsedTimeForGetPalette: elapsedTimeForGetPalette }; var colorThiefOuputHTML = Mustache.to_html($('#color-thief-output-template').html(), colorThiefOutput); + $imageSection.addClass('with-color-thief-output'); $imageSection.find('.run-functions-button').addClass('hide'); $imageSection.find('.color-thief-output').append(colorThiefOuputHTML).slideDown(); @@ -65,7 +66,8 @@ $(document).ready(function () { // Thanks to Nathan Spady (http://nspady.com/) who did the bulk of the drag'n'drop work. // Setup the drag and drop behavior if supported - if (typeof window.FileReader === 'function') { + if (Modernizr.draganddrop && !!window.FileReader && !isMobile()) { + $('#drag-drop').show(); var $dropZone = $('#drop-zone'); var handleDragEnter = function(event){ @@ -105,7 +107,7 @@ $(document).ready(function () { imageInfo = { images: [ {'class': 'dropped-image', file: event.target.result} ]}; - console.log(imageInfo); + var imageSectionHTML = Mustache.to_html($('#image-section-template').html(), imageInfo); $draggedImages.prepend(imageSectionHTML); @@ -123,4 +125,15 @@ $(document).ready(function () { } } } + + // This is not good practice. :-P + function isMobile(){ + // if we want a more complete list use this: http://detectmobilebrowsers.com/ + // str.test() is more efficent than str.match() + // remember str.test is case sensitive + var isMobile = (/iphone|ipod|ipad|android|ie|blackberry|fennec/).test + (navigator.userAgent.toLowerCase()); + return isMobile; +} + }); diff --git a/index.html b/index.html index 648353b..dabda60 100755 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + @@ -43,12 +43,17 @@
| t |