added packery

Climb-social · Oct 5, 2015 · 91d9947 · 91d9947
1 parent e033634
commit 91d9947
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 12 deletions.
diff --git a/demo-packery.html b/demo-packery.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="themes/css/climb-brooke.css">
+        <title>Climb Theme Demos</title>
+        <style>
+            body {
+                font-family: "futura-pt", sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                margin: 0;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class="climb-wall climb-brooke" data-collection-id="55c1e00845284e26681c4929" data-limit="4">
+        </div>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
+        <script src="//rawgit.com/Climb-social/react-climb-social/master/dist/react-climb-social.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.min.js"></script>
+        <script type="text/javascript">
+        window.Climb = {
+            onUpdate: function () {
+                var container = document.querySelector('.climb-brooke')
+                var pckry = new Packery( container, {
+                    itemSelector: '.climb__tile',
+                    gutter: 10
+                });
+            }
+        };
+        </script>
+    </body>
+
+</html>
diff --git a/demo.html b/demo.html
@@ -6,8 +6,6 @@
         <link rel="stylesheet" type="text/css" href="themes/css/climb-red.css">
         <link rel="stylesheet" type="text/css" href="themes/css/climb-naked.css">
         <link rel="stylesheet" type="text/css" href="themes/css/climb-brooke.css">
-        <link rel="stylesheet" type="text/css" href="themes/css/climb-event.css">
-        <link rel="stylesheet" type="text/css" href="https://rawgit.com/anselmh/object-fit/master/dist/polyfill.object-fit.css">
         <title>Climb Theme Demos</title>
         <style>
             body {
@@ -20,17 +18,10 @@
     </head>
 
     <body>
-        <div class="climb-wall climb-event" data-collection-id="55c1e00845284e26681c4929" data-limit="4">
+        <div class="climb-wall climb-naked" data-collection-id="55c1e00845284e26681c4929" data-limit="4">
         </div>
         <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
         <script src="//rawgit.com/Climb-social/react-climb-social/master/dist/react-climb-social.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.min.js"></script>
-        <script src="https://rawgit.com/anselmh/object-fit/master/dist/polyfill.object-fit.min.js"></script>
-        <script type="text/javascript">
-        window.Climb = {
-
-        };
-        </script>
     </body>
 
 </html>
diff --git a/themes/css/climb-brooke.css b/themes/css/climb-brooke.css
diff --git a/themes/css/climb-brooke.css.map b/themes/css/climb-brooke.css.map
diff --git a/themes/sass/climb-brooke.scss b/themes/sass/climb-brooke.scss
@@ -7,6 +7,7 @@
         padding-bottom: 0;
         background-color: white;
         border-radius: 5px;
+        min-height: 200px;
     }
     .climb__tile__media {
         position: relative;