iframes

6 files changed, 55 insertions, 8 deletions

diff --git a/db.json b/db.json
index 6800fd7..06c584f 100644
--- a/db.json
+++ b/db.json
@@ -26,7 +26,22 @@
       "client": "Annapurna Pictures",
       "containImage": "true",
       "iframe": "",
-      "video": ""
+      "video": "",
+      "media": [
+        {
+          "uri": "http://okfoc.us/",
+          "caption": "",
+          "type": "link"
+        },
+        {
+          "type": "vimeo",
+          "token": "33424808",
+          "width": "640",
+          "height": "360",
+          "title": "MEGA UPLOAD SONG!!!! HTTP://OKFOC.US",
+          "thumb": "https://i.vimeocdn.com/video/226874497_640.jpg"
+        }
+      ]
     },
     {
       "id": "test-2",
diff --git a/package.json b/package.json
index 57fcbae..d5c04db 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "dotenv": "^2.0.0",
     "flickity": "^1.2.1",
     "object-assign": "^2.0.0",
-    "okcms": "git+ssh://git@github.com:okfocus/okcms.git#v0.1.20"
+    "okcms": "git+ssh://git@github.com:okfocus/okcms.git#v0.1.21"
   },
   "homepage": "https://github.com/okfocus/portfolio"
 }
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index fb01ff1..a58854c 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -1,4 +1,3 @@
-
 var app = (function() {
   var app = {}
 
@@ -41,6 +40,10 @@ var app = (function() {
 
 app.init()
 
+
+$(".cell").css({ 'height': ($(".top").height() + 'px') });
+
+
 $('.top').flickity({
   cellAlign: 'left',
   contain: true,
@@ -61,3 +64,22 @@ $('.index').click( function(){
 $('.item').click( function(){
   $('body').removeClass('navopen');
 });
+
+
+var delay = (function() {
+    var timer = 0;
+    return function(callback, ms) {
+        clearTimeout(timer);
+        timer = setTimeout(callback, ms);
+    };
+})();
+
+$(window).resize(function() {
+    $(".cell").css({ 'display': 'none' });
+    $('body').addClass('resizing');
+    delay(function() {
+        $(".cell").css({ 'height': ($(".top").height() + 'px'), 'display': 'inline-block' });
+        $('.top').flickity('resize');
+        $('body').removeClass('resizing');
+    }, 400);
+});
\ No newline at end of file
diff --git a/public/assets/ok.css b/public/assets/ok.css
index e4193b8..4696d95 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -116,8 +116,14 @@ nav span {
 
 #burger {
     width: 10px;
+    vertical-align: top
+}
+.index:after {
+    content:"INDEX";
+}
+.navopen .index:after {
+    content:"CLOSE";
 }
-
 .index:hover,
 .navopen .index {
     color: white;
@@ -228,7 +234,6 @@ button.previous:active svg {
 
 .cell {
     width: 100vw;
-    height: 70vh;
     /*THIS SHOULD BE DYNAMIC*/
     background-position: center;
     background-size: cover;
@@ -240,6 +245,10 @@ button.previous:active svg {
     background-color: #eee;
 }
 
+.resizing .top {
+    background: url(tomato20dancing.gif)center;
+}
+
 .bottom {
     /*height: 20vh;*/
     flex: 0 auto;
diff --git a/public/assets/tomato20dancing.gif b/public/assets/tomato20dancing.gif
new file mode 100644
index 0000000..0416665
--- /dev/null
+++ b/public/assets/tomato20dancing.gif
diff --git a/templates/index.liquid b/templates/index.liquid
index 69f3b3a..341734b 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -55,8 +55,8 @@
         <rect y="40" width="57.4" height="13"/>
     </g>
 </g>
-</svg>
-INDEX</div>
+            </svg>
+            </div>
             <div>OKFocus LLC. • 2016</div>
             <div>SLIDE.1 • PG.1</div>
         </span>
@@ -69,9 +69,10 @@ INDEX</div>
                 <div class="cell {% if project.containImage == 'true' %}contain{% endif %}" style="background-image:url({{ media.uri }})"></div>
               {% elsif media.type == 'vimeo' %}
                 <div class="cell video" data-video="{{ media.token }}"></div>
+              {% elsif media.type == 'link' %}
+                <iframe class="cell" src="{{ media.uri }}"></iframe>
               {% endif %}
             {% endfor %}
-            <iframe class="cell" src="http://okfoc.us"></iframe>
         </div>
         <div class="bottom {% if project.press %}press{% else %}nopress{% endif %}">
             <div class="headings five">