Clean up

leandrowd · Mar 11, 2015 · 4914ea8 · 4914ea8
1 parent 5d7f735
commit 4914ea8
Show file tree

Hide file tree

Showing 12 changed files with 264 additions and 2,807 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,11 @@ To run it on your local environment just:
 To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder.
 
 
+## Contributing
+
+Please, feel free to contributing. You may file an issue or submit a pull request!
+
+
 ## Getting started
 
 ### Slider with controls
@@ -192,21 +197,3 @@ module.exports = React.createClass({
 });
 ```
 
-
-### Browser Support
-
-Although I have implemented css transformations for all the browsers and fallback to left when 3d isn't supported, I haven't had time to test in browsers other than chrome yet. I reckon than it should just work but minor issues can be found.
-
-### TODO:
-
-- [ ] Implement slides of content
-- [ ] Improve documentation
-- [ ] Improve tests
-- [ ] Improve swipe
-- [ ] Test cross-browser
-- [ ] ...?
-
-
-### Contributing
-
-Feel free to contribute. Just Fork -> Change -> Pull request!
diff --git a/dev/carousel.css b/dev/carousel.css
@@ -131,11 +131,11 @@ button {
   background: none; }
 
 .carousel .control-arrow, .carousel.carousel-slider .control-arrow {
-  -webkit-transition: opacity 0.15s ease-in;
-  -moz-transition: opacity 0.15s ease-in;
-  -ms-transition: opacity 0.15s ease-in;
-  -o-transition: opacity 0.15s ease-in;
-  transition: opacity 0.15s ease-in;
+  -webkit-transition: all 0.25s ease-in;
+  -moz-transition: all 0.25s ease-in;
+  -ms-transition: all 0.25s ease-in;
+  -o-transition: all 0.25s ease-in;
+  transition: all 0.25s ease-in;
   opacity: 0.4;
   filter: alpha(opacity=40);
   position: absolute;
@@ -193,9 +193,6 @@ button {
     -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
-    -webkit-transform-style: preserve-3d;
-    -webkit-perspective: 1000;
-    -webkit-backface-visibility: hidden;
     position: relative;
     list-style: none;
     overflow: hidden;
@@ -229,8 +226,11 @@ button {
       top: 0;
       color: #fff;
       font-size: 26px;
-      height: 100%;
+      bottom: 0;
+      margin-top: 0;
       padding: 5px; }
+      .carousel.carousel-slider .control-arrow:hover {
+        background: rgba(0, 0, 0, 0.2); }
   .carousel .slider-wrapper {
     overflow: hidden; }
   .carousel .slider {
@@ -244,9 +244,6 @@ button {
     -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
-    -webkit-transform-style: preserve-3d;
-    -webkit-perspective: 1000;
-    -webkit-backface-visibility: hidden;
     position: relative;
     list-style: none;
     overflow: hidden;

diff --git a/dev/index.html b/dev/index.html
@@ -22,8 +22,6 @@ <h2>Summary</h2>
 						<li><a href="#carousel">Carousel</a></li>
 					</ul>
 				</li>
-				<li><a href="#browser-support">Browser Support</a></li>
-				<li><a href="#todo">Todos</a></li>
 				<li><a href="#contribute">Contributing</a></li>
 			</ul>
 
@@ -34,95 +32,99 @@ <h2 id="install">Installing</h2>
 
 			<h2 id="demos">Demos</h2>
 			<section class="demos">
+
 				<article class="demo">
-					<h3 id="image-gallery">Image Gallery</h3>
-					<div class="demo-gallery"></div>
+					<h3 id="slider">Slider</h3>
+					<div class="demo-slider-controls"></div>
 					<h4>Javascript / Jsx:</h4>
 					<pre>
 						<code>
 /** @jsx React.DOM */
 var React = require('react');
-var ImageGallery = require('./components/ImageGallery');
+var Carousel = require('./components/Carousel');
 
-var DemoGallery = React.createClass({
+var DemoSliderControls = React.createClass({
 	render() {
 		return (
-			&lt;div className="demo-image-gallery"&gt;
-				&lt;ImageGallery images={ galleryImages } /&gt;
+			&lt;div className="demo-slider"&gt;
+				&lt;Carousel 
+					type="slider" 
+					items={ sliderImages } 
+					showControls={true} 
+					showStatus={true} /&gt;
 			&lt;/div&gt;
 		);
 	}
 });
 
-React.render(&lt;DemoGallery /&gt;, document.querySelector('.demo-gallery'));
+React.render(&lt;DemoSliderControls /&gt;, document.querySelector('.demo-slider-controls'));
 						</code>
 					</pre>
-					
+
 					<h4>Css:</h4>
 					<pre>
 						<code>
-&lt;link rel="stylesheet" href="imageGallery.css"/&gt;
 &lt;link rel="stylesheet" href="carousel.css"/&gt;
 						</code>
 					</pre>
 
 					<h4>Props:</h4>
 					<ul class="list-items">
-						<li>images</li>
+						<li>(Array) items</li>
+						<li>(Boolean) showControls</li>
+						<li>(Boolean) showStatus</li>
+						<li>(Function) onChange
+							<ul>
+								<li>Triggered when the carousel move</li>
+							</ul>
+						</li>
+						<li>(Function) onSelectItem
+							<ul>
+								<li>Triggered when an item is selected</li>
+							</ul>
+						</li>
 					</ul>
 				</article>
+
 				<article class="demo">
-					<h3 id="slider">Slider with controls</h3>
-					<div class="demo-slider-controls"></div>
+					<h3 id="image-gallery">Image Gallery (Slider and thumbs)</h3>
+					<div class="demo-gallery"></div>
 					<h4>Javascript / Jsx:</h4>
 					<pre>
 						<code>
 /** @jsx React.DOM */
 var React = require('react');
-var Carousel = require('./components/Carousel');
+var ImageGallery = require('./components/ImageGallery');
 
-var DemoSliderControls = React.createClass({
+var DemoGallery = React.createClass({
 	render() {
 		return (
-			&lt;div className="demo-slider"&gt;
-				&lt;Carousel 
-					type="slider" 
-					items={ sliderImages } 
-					showControls={true} 
-					showStatus={true} /&gt;
+			&lt;div className="demo-image-gallery"&gt;
+				&lt;ImageGallery images={ galleryImages } /&gt;
 			&lt;/div&gt;
 		);
 	}
 });
 
-React.render(&lt;DemoSliderControls /&gt;, document.querySelector('.demo-slider-controls'));
+React.render(&lt;DemoGallery /&gt;, document.querySelector('.demo-gallery'));
 						</code>
 					</pre>
-
+					
 					<h4>Css:</h4>
 					<pre>
 						<code>
+&lt;link rel="stylesheet" href="imageGallery.css"/&gt;
 &lt;link rel="stylesheet" href="carousel.css"/&gt;
 						</code>
 					</pre>
 
 					<h4>Props:</h4>
 					<ul class="list-items">
-						<li>(Array) items</li>
-						<li>(Boolean) showControls</li>
-						<li>(Boolean) showStatus</li>
-						<li>(Function) onChange
-							<ul>
-								<li>Triggered when the carousel move</li>
-							</ul>
-						</li>
-						<li>(Function) onSelectItem
-							<ul>
-								<li>Triggered when an item is selected</li>
-							</ul>
-						</li>
+						<li>images</li>
 					</ul>
 				</article>
+
+
 				<article class="demo">
 					<h3 id="carousel">Carousel</h3>
 					<div class="demo-carousel"></div>
@@ -174,21 +176,8 @@ <h4>Props:</h4>
 				</article>
 			</section>
 
-			<h2 id="browser-support">Browser Support</h2>
-			<p>Although I have implemented css transformations for all the browsers and fallback to left when 3d isn't supported, I haven't had time to test in browsers other than chrome yet. I reckon than it should just work but minor issues can be found.</p>
-
-			<h2 id="todo">TODO:</h2>
-			<ul class="list-items">
-				<li>Implement slides of content</li>
-				<li>Improve documentation</li>
-				<li>Improve tests</li>
-				<li>Improve swipe</li>
-				<li>Test cross-browser</li>
-				<li>...?</li>
-			</ul>
-
 			<h2 id="contributing">Contributing</h2>
-			<p>Feel free to contribute. Just Fork -> Change -> Pull request!</p>
+			<p>Please, feel free to contributing. You may file an issue or submit a pull request!</p>
 
 		</div>
 		<script src="es5-shim.min.js"></script>

diff --git a/dev/main.css b/dev/main.css
@@ -53,7 +53,9 @@ code {
   text-indent: 0;
   color: #333;
   display: block;
-  margin: auto; }
+  margin: auto;
+  overflow: scroll;
+  width: 100%; }
 
 .wrapper {
   padding: 30px; }