diff --git a/README.md b/README.md index c479937f..0145df7a 100644 --- a/README.md +++ b/README.md @@ -328,7 +328,7 @@ If your PR is a code change: 5. Verify that the minified output file has been updated in `build/gifshot.js` and `build/gifshot.min.js` and that no unit tests are failing. 6. Send the PR! -**Note:** There is a gulp `watch` task set up that will automatically build, lint, test, and minify gifshot whenever a module inside of the `src/modules` directory is changed. We recommend using it. +**Note:** There is a gulp `watch` task set up that will automatically build, test, and minify gifshot whenever a module inside of the `src/modules` directory is changed. We recommend using it. ## Credits diff --git a/demo/css/style.css b/demo/css/style.css index c4e9b708..34c54d85 100644 --- a/demo/css/style.css +++ b/demo/css/style.css @@ -26,11 +26,11 @@ a:hover { } h1, .h1 { - font-size: 62.006px /* 64px */; + font-size: 64px; } h2, .h2 { - font-size: 51.996px /* 52px */; + font-size: 52px; } h3, .h3 { @@ -125,9 +125,10 @@ p { padding: 12px 18px 13px; } .lead { - font-size: 28px; - line-height: 1.5; + font-size: 22px; + line-height: 1.1; font-weight: 300; + padding: 0 15px; } .main-header .leader { padding: 0 0 20px; @@ -140,6 +141,11 @@ footer { -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; } + +.main-navigation { + margin-bottom: 0; +} + .navbar a { padding: 29px 10px 0; font-size: 13px; @@ -253,12 +259,13 @@ section * { .container { position: relative; z-index: 2; + max-width: 650px; } .main-header { text-align: center; } .main-header h3 { - padding: 30px 0; + padding: 30px 0 20px 0; } .nav-visible .navbar .nav-collapse .nav > li > a:hover, .nav-visible .navbar .nav-collapse .nav > li > li a:focus { @@ -592,20 +599,24 @@ section * { } .gifshot-logo { - text-decoration: none; - color: inherit; - font-family: 'Grand Hotel',cursive; - font-size: 28px; - padding-left: 10px; + width: 100%; + max-width: 540px; +} + +.gifshot-header-logo { + height: 40px; } .gifshot-header-text-container { position: absolute; - left: 20px; + left:0; } .gifshot-header-text { font-weight: 100; + margin-left: -25px; + display: inline-block; + vertical-align: middle; } .gifshot-brand { @@ -613,6 +624,10 @@ section * { font-size: 60px; color: #2c3e50; } +.gifshot-images { + min-width: 620px; + min-height: 440px; +} .gifshot-images .row { white-space: nowrap; } @@ -620,6 +635,7 @@ section * { display: inline-block; white-space: nowrap; padding-right: 5px; + width: 30%; } /* Team Section */ @@ -671,6 +687,10 @@ section * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } +.background-section .row { + padding: 0 15px; +} + .background-yahoo-sports { width: 100px; float: right; @@ -843,9 +863,6 @@ progress:not([value])::-webkit-progress-bar { .demo-navigation { display: none; } - .gifshot-header-text { - display: none; - } .fixed-title { text-align: right; } @@ -854,9 +871,15 @@ progress:not([value])::-webkit-progress-bar { .preview-section { height: 400px; } + .options-button-group { + padding-right: 15px; + } } @media (max-width: 698px) { + body { + padding: 0 10px; + } .background-yahoo-sports { display: none; } @@ -866,16 +889,83 @@ progress:not([value])::-webkit-progress-bar { .teammate { margin-left: 0px; } - .gifshot-images { - overflow-x: auto; - } .demo-navigation { display: none; } - .gifshot-header-text { - display: none; - } .fixed-title { text-align: right; } + .gifshot-images { + min-width: inherit; + min-height: inherit; + } +} + +.gifshot-loader { + height: 75px; + width: 75px; + vertical-align: middle; + display: inline-block; + -webkit-animation: rotation .4s infinite linear; + -moz-animation: rotation .4s infinite linear; + animation: rotation .4s infinite linear; + border: 3px solid rgba(0,0,0,0.2); + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; +} +.gifshot-loader:before { + content: ""; + display: block; + position: absolute; + left: -3px; + top: -3px; + height: 100%; + width: 100%; + border: 3px solid transparent; + border-top-color: #005580; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100% +} +.gifshot-images .gifshot-loader { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; +} + +@-webkit-keyframes rotation { + from { + -webkit-transform: rotate(0deg) + } + to { + -webkit-transform: rotate(359deg) + } +} +@-moz-keyframes rotation { + from { + -moz-transform: rotate(0deg) + } + to { + -moz-transform: rotate(359deg) + } +} +@-o-keyframes rotation { + from { + -o-transform: rotate(0deg) + } + to { + -o-transform: rotate(359deg) + } +} +@keyframes rotation { + from { + transform: rotate(0deg) + } + to { + transform: rotate(359deg) + } } \ No newline at end of file diff --git a/demo/images/gifshot.svg b/demo/images/gifshot.svg new file mode 100644 index 00000000..872f40b5 --- /dev/null +++ b/demo/images/gifshot.svg @@ -0,0 +1 @@ +GifShot \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index f93314c8..951062d6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -21,12 +21,19 @@
diff --git a/gulpfile.js b/gulpfile.js index bc74820b..795d9135 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,7 +9,6 @@ var gulp = require('gulp'), rename = require('gulp-rename'), mocha = require('gulp-mocha'), istanbul = require('gulp-istanbul'), - jshint = require('gulp-jshint'), rimraf = require('gulp-rimraf'), _ = require('lodash'), rjs = require('requirejs'), @@ -114,18 +113,9 @@ gulp.task('concat', function(cb) { }); }); -// JSHint task that checks src/gifshot.js -gulp.task('lint', ['concat'], function() { - gulp.src('src/gifshot.js') - .pipe(jshint({ - 'loopfunc': true - })) - .pipe(jshint.reporter('default')); -}); - // Task that creates a customized gifshot.js file (only including modules that are testable) // and runs the Mocha unit tests and Instanbul test coverage -gulp.task('test', ['concat', 'lint'], function(cb) { +gulp.task('test', ['concat'], function(cb) { var outputFile = 'tests/gifshot.test.js', rjsOptions = _.merge(_.clone(configs.rjs), { 'out': outputFile @@ -166,7 +156,7 @@ gulp.task('test', ['concat', 'lint'], function(cb) { }); // Copies src/gifshot.js to build/gifshot.js and demo/gifshot.js -gulp.task('copy', ['concat', 'lint', 'test'], function() { +gulp.task('copy', ['concat', 'test'], function() { gulp.src(['src/gifshot.js']) .pipe(insert.prepend(licenseText)) .pipe(gulp.dest('build')) @@ -174,7 +164,7 @@ gulp.task('copy', ['concat', 'lint', 'test'], function() { }); // Uglify.js task that minifies build/gifshot.js and adds gifshot.min.js to the build folder -gulp.task('minify', ['concat', 'lint', 'test', 'copy'], function() { +gulp.task('minify', ['concat', 'test', 'copy'], function() { gulp.src(['src/gifshot.js']) .pipe(uglify()) .pipe(rename('gifshot.min.js')) @@ -183,7 +173,7 @@ gulp.task('minify', ['concat', 'lint', 'test', 'copy'], function() { }); // Cleanup task that removes certain temporary files -gulp.task('cleanup', ['concat', 'lint', 'test', 'copy', 'minify'], function() { +gulp.task('cleanup', ['concat', 'test', 'copy', 'minify'], function() { gulp.src(['src/gifshot.js', 'tests/gifshot.test.js'], { read: false }) @@ -242,7 +232,7 @@ gulp.task('custom-build', function() { }); // The default build task (called when you run `gulp`) -gulp.task('default', ['concat', 'lint', 'test', 'copy', 'minify', 'cleanup']); +gulp.task('default', ['concat', 'test', 'copy', 'minify', 'cleanup']); // The watch task that runs the default task on any gifshot module file changes gulp.task('watch', function() { diff --git a/images/gifshot.svg b/images/gifshot.svg new file mode 100644 index 00000000..872f40b5 --- /dev/null +++ b/images/gifshot.svg @@ -0,0 +1 @@ +GifShot \ No newline at end of file diff --git a/package.json b/package.json index 7dff2fe9..d6037487 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "gulp-insert": "^0.3.0", "gulp-install": "^0.2.0", "gulp-istanbul": "^0.3.1", - "gulp-jshint": "^1.6.0", "gulp-mocha": "^1.1.0", "gulp-rename": "^1.2.0", "gulp-rimraf": "^0.1.0",