added slick css

sarmadsangi · Oct 18, 2016 · b52d002 · b52d002
1 parent 33cca7d
commit b52d002
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,11 @@
     <meta name="theme-color" content="#ffffff" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
+    <style>
+      /* TODO: remove this from here, add it to vendor dir and config webpack to bundle it */
+      /* Slider */
+      .slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/KanbanBoard.css b/src/components/KanbanBoard.css
@@ -14,6 +14,15 @@
   padding: 15px;
 }
 
+.slider_wrapper {
+  display: flex;
+  flex-flow: row;
+  height: 100%;
+  left: 0;
+  overflow: hidden;
+  margin-top: 15px;
+}
+
 :global(.slick-track) {
   display: flex !important;
 }

diff --git a/src/components/KanbanBoard.js b/src/components/KanbanBoard.js
@@ -32,14 +32,14 @@ class KanbanBoard extends Component {
     const settings = {
       dots: false,
       infinite: false,
-      speed: 500,
+      speed: 300,
       slidesToShow: 1,
       nextArrow: '',
-      // swipe: true,
+      swipe: true,
       prevArrow: '',
       slidesToScroll: 1,
       variableWidth: true,
-      className: styles.lists_wrapper,
+      className: styles.slider_wrapper,
     };
 
     const listElements = lists.map(list => (
@@ -54,7 +54,7 @@ class KanbanBoard extends Component {
       </div>
     ));
 
-    if (window.__md.mobile()) {
+    if (window.__md.isPhoneSized()) {
       return (
         <Slider {...settings}>
           {listElements}