Updated demo and removed jshint task

michael-benin-CN · Sep 30, 2014 · 152dec2 · 152dec2
1 parent 64d45b8
commit 152dec2
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 38 deletions.
diff --git 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
@@ -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,34 +599,43 @@ 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 {
   font-family: 'Grand Hotel',cursive;
   font-size: 60px;
   color: #2c3e50;
 }
+.gifshot-images {
+  min-width: 620px;
+  min-height: 440px;
+}
 .gifshot-images .row {
   white-space: nowrap;
 }
 .gifshot-images .hl {
   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)
+  }
 }
diff --git a/demo/images/gifshot.svg b/demo/images/gifshot.svg
diff --git a/demo/index.html b/demo/index.html
@@ -21,12 +21,19 @@
         <!-- fixed-title -->
         <nav class="fixed-title text-center" role="navigation">
           <span class="gifshot-header-text-container">
-            <a class="gifshot-logo" href="index.html" role="banner">gifshot.js</a>
+            <a href="index.html" role="banner"><img class="gifshot-header-logo" src="images/gifshot.svg" alt="gifshot logo"></a>
             <span class="gifshot-header-text">Demo</span>
           </span>
           <span class="options-button-group">
             <button type="button" id="create-gif" class="btn btn-large btn-primary create-gif-button">Create GIF</button>
           </span>
+          <!-- main-header -->
+          <header class="main-navigation navbar demo-navigation">
+              <a href="index.html">HOME</a>
+              <a class="active" href="demo.html">DEMO</a>
+              <a href="https://github.com/yahoo/gifshot">CODE</a>
+              <a href="https://github.com/yahoo/gifshot#api-methods">DOCS</a>
+          </header>
         </nav>
       <!-- demo-section  -->
       <section class="demo-section v-center">

diff --git 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,15 +156,15 @@ 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'))
     .pipe(gulp.dest('demo/js/dependencies'))
 });
 
 // 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
diff --git 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",