about page

7 files changed, 182 insertions, 45 deletions

diff --git a/site/db.json b/site/db.json
index 9f6498a..ab95019 100644
--- a/site/db.json
+++ b/site/db.json
@@ -1251,9 +1251,11 @@
     {
       "id": "about",
       "title": "WHO WE ARE",
-      "body": "TWO HUSTLERS IS A CREATIVE COLLECTIVE OF RADICAL THINKERS, DESIGNERS AND STORYTELLERS.\r\n\r\nWE BUILD TRANSFORMATIVE EXPERIENCES FOR PASSIONATE BRANDS. \r\n\r\nWE ARE PLAYFUL. WE ARE REBELLIOUS. WE ARE OBSESSED. \r\n\r\n\r\n\r\nFOR BRANDS WHO WANT TO PLAY WITH US, <a href=\"mailto:collaborate@twohustlers.com?subject=SAY HELLO!\">SAY HELLO!</a>\r\n\r\nFOR ANYONE WHO WANTS TO JOIN OUR FAMILY, <a href=\"mailto:jobs@twohustlers.com?subject=JOIN THE FAMILY!\"> SHOW US WHAT YOU ARE MADE OF!</a>\r\n\r\nWEBSITE BY <a href=\"http://okfoc.us/\">OKFOCUS</a>",
+      "body": "TWO HUSTLERS IS A CREATIVE COLLECTIVE OF RADICAL THINKERS, DESIGNERS AND STORYTELLERS.\r\n\r\nWE BUILD TRANSFORMATIVE EXPERIENCES FOR PASSIONATE BRANDS. \r\n\r\nWE ARE PLAYFUL. WE ARE REBELLIOUS. WE ARE OBSESSED. ",
       "image": "http://www.lansdowneresort.com/meetings/assets/images/masthead/meetings-team-building.jpg",
-      "__index": "1"
+      "__index": "1",
+      "contact": "FOR BRANDS WHO WANT TO PLAY WITH US, <a href=\"mailto:collaborate@twohustlers.com?subject=SAY HELLO!\">SAY HELLO!</a>\r\n\r\nFOR ANYONE WHO WANTS TO JOIN OUR FAMILY, <a href=\"mailto:jobs@twohustlers.com?subject=JOIN THE FAMILY!\"> SHOW US WHAT YOU ARE MADE OF!</a>\r\n\r\nWEBSITE BY <a href=\"http://okfoc.us/\">OKFOCUS</a>",
+      "dateCreated": ""
     },
     {
       "id": "contact",
@@ -1337,66 +1339,102 @@
       "__index": "1",
       "images": [
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fc9b7ab94-a319-48b4-871b-6d1f0a91c55b.gif",
-          "caption": "Sara@nicopanda.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F3031754c-9295-4690-bb38-d1b21249f542.gif",
+          "caption": "",
+          "label": "Nicola Formichetti"
+        },
+        {
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F06a6a4c3-10ad-4b75-8351-85ffc0e74c98.gif",
+          "caption": "",
+          "label": "Kevin Kollenda"
+        },
+        {
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F5bece78f-bf0b-4422-abc6-d306f8fae700.gif",
+          "caption": "propersavage@gmail.com",
+          "label": "Devin Savage"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F9303920a-07a1-457f-a33d-8959f0acc240.gif",
-          "caption": "propersavage@gmail.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F71c71033-d36f-4375-bdd1-271db3b9e75c.gif",
+          "caption": "",
+          "label": "Zak Krevitt"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F085bc32f-f3fa-485f-8411-4b0e33c87c34.gif",
-          "caption": "Tracy@Twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F742c60d2-9f3f-44bb-a445-71871ca28439.gif",
+          "caption": "",
+          "label": "Tyler Rose"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F3199e264-13d0-4331-9b3a-9f453e723d4e.gif",
-          "caption": "Kei@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F7eca88a2-94e1-4d41-ae77-af01a947ad44.gif",
+          "caption": "",
+          "label": "Tracy le Marquand"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fbe142c51-d613-41a9-9432-f96ce4493f01.gif",
-          "caption": "Steve@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fe85e3d1f-6191-496f-acca-f370687c69fe.gif",
+          "caption": "",
+          "label": "Max de Castro"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fc91b507a-9a1d-41d6-a500-138c14b8bed2.gif",
-          "caption": "Max@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F2b71ee1e-3de9-4a3d-9b39-a96065ae4ec1.gif",
+          "caption": "",
+          "label": "Ian Milan"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fb40d3a6d-1348-4861-a0ab-1280480d1c20.gif",
-          "caption": "tomorrowistheendoftheworld@gmail.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F17b0d9b9-cd22-43ac-9055-f8bc8cb54700.gif",
+          "caption": "Sara@nicopanda.com",
+          "label": "Sarah Kim"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F2306f2f9-e41b-46bb-9458-6d0624b8f6ba.gif",
-          "caption": "Tiffanie@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F343ae47e-8669-4c57-9975-e4c3fc5a02d4.gif",
+          "caption": "",
+          "label": "Steve Gershman"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fe4ee44a3-0b21-4767-8584-397425abb291.gif",
-          "caption": "kevin@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F55f0fef9-bc7c-4dbe-baa8-c0d74c9c9ab0.gif",
+          "caption": "",
+          "label": "Latif Newab"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fff60aa79-d4ad-43d2-915e-d8e253330ca4.gif",
-          "caption": "Latif@nicopanda.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F724e1ff5-7683-43cb-a637-9dae58214185.gif",
+          "caption": "",
+          "label": "Kei Furuichi"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fc8e8276c-3b7c-48e1-8e1f-de902ca1054d.gif",
-          "caption": "Ian@studioformichetti.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F70fffb9c-7fc9-4dd1-af65-e39ebd99e930.gif",
+          "caption": "dereklmurdock@gmail.com",
+          "label": "Derrick Murdock"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F4369b27f-095e-4e05-b7b8-3dc88f0a652f.gif",
-          "caption": "dereklmurdock@gmail.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F7655a0ec-e56c-4383-a22a-7e987949f52e.gif",
+          "caption": "Juan@nicopanda.com",
+          "label": "Juan Quiceno"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fa0eed5ee-1c19-41f4-be2e-d0655874be71.gif",
-          "caption": "Tyler@nicopanda.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F04b3e31f-b9ac-48c8-9c0c-7c88abe771b5.gif",
+          "caption": "",
+          "label": "Andreas Aresti"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F959c8f09-9562-4d43-8bfb-4f73b9f71dcc.gif",
-          "caption": "Daniel@studioformichetti.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fa547b434-b48d-43ff-986b-ed9c217b9257.gif",
+          "caption": "",
+          "label": "Tiffanie Baine"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fe9743a0f-7c5e-411a-b59e-683e6ff9d407.gif",
-          "caption": "Juan@nicopanda.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F97c09ed8-27d7-4a38-8877-c8712640cbd5.gif",
+          "caption": "",
+          "label": "Frankie The Pug"
+        },
+        {
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F4bd5a1e5-38b1-4dba-af04-48ce3f4bc74d.gif",
+          "caption": "",
+          "label": "Daniel Cingari"
+        },
+        {
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F7ee0e3d4-4312-41dc-8fff-943b68ae6171.gif",
+          "caption": "",
+          "label": "Angelo Balassone"
         }
-      ]
+      ],
+      "dateCreated": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/site/index.js b/site/index.js
index 4c5c2ca..04d2455 100644
--- a/site/index.js
+++ b/site/index.js
@@ -24,6 +24,7 @@ var app  = okcms.createApp({
       id: {type: 'string', hidden: true},
       title: {type: 'string'},
       body: {type: 'text'},
+      contact: {type: 'text'},
       image: {type: 'string'}
     },
     advertising: projectSchema,
@@ -33,7 +34,7 @@ var app  = okcms.createApp({
     shape: {
       id: {type: 'string', id: true, hidden: true},
       title: {type: 'string'},    
-      images: {type: 'captioned-image-list'},
+      images: {type: 'double-captioned-image-list'},
     }
   },
 
diff --git a/site/public/assets/javascripts/app.js b/site/public/assets/javascripts/app.js
index 0d51a3f..4e00f30 100644
--- a/site/public/assets/javascripts/app.js
+++ b/site/public/assets/javascripts/app.js
@@ -19,6 +19,12 @@ app.init = function () {
 
 app.launch = function () {
   // if ($.browser.msie || ! has3d()) { return app.fallback() }
+  if ($.browser.msie) {
+    $("html").addClass("msie")
+  }
+  else {
+    $("html").addClass("notmsie")
+  }
   
 	scene = new MX.Scene().addTo('#scene')
 
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index fe08fed..2d0bd5a 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -713,6 +713,9 @@ nav .sub.active a {
 	opacity: 1.0;
 	cursor:pointer;
 }
+.msie .entry .caption {
+  display: none;
+}
 .desktop .caption:hover {
 	background:#222;
 	color:#222;
@@ -824,16 +827,36 @@ nav .sub.active a {
 	top:0;
 }
 
+.entry .brady {
+  width: 72vw;
+}
 .brady {
   display: block;
-  max-width: 1001px;
 }
-.brady a, .brady img {
-  width: 200px; height: 200px;
+.brady > a {
+  width: 18vw; height: 18vw;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+  display: block;
+  float: left;
+}
+.brady div {
+  width: 17vw;
+  height: 16w;
   position: relative;
-  display: inline-block;
+  display: block;
+  float: left;
+  padding: 1vw;
+  font-size: 0.8vw;
+  line-height: 1.4vw;
+  border: 1px solid black;
+  margin: 0.5vw 0.5vw 0 0.5vw;
 }
-.desktop .brady a:hover:after {
+.brady > a:nth-child(3) {
+  margin-right: 1vw;
+}
+.desktop .brady > a:hover:after {
   content: 'SAY HELLO!';
   position: absolute;
   top: 40%;
@@ -843,6 +866,25 @@ nav .sub.active a {
   font-size: 22px;
   width: 100%;
 }
+.brady span {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: white;
+  opacity: 0;
+  color: black;
+  margin-top: -4px;
+  font-size: 1vw;
+  padding: 2px 0 1px 2px;
+  
+	transition: 0.1s opacity ease-in;
+  display: block;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+}
+.desktop .brady > a:hover span {
+  opacity: 1;
+}
 
 .project {
   float: left;
@@ -860,6 +902,9 @@ nav .sub.active a {
 .desktop .ready .project:hover {
 	opacity: 1.0;
 }
+.msie .project {
+  opacity: 1.0 !important;
+}
 .entry.hover .project { opacity: 0.5 }
 .entry.hover .project.hover { opacity: 1.0 }
 
@@ -884,7 +929,8 @@ nav .sub.active a {
   text-transform: uppercase;
 }
 .mobile .project span,
-.desktop .project:hover span {
+.desktop .project:hover span,
+.msie .project span {
   opacity: 1;
 }
 .undone .project:nth-child(1) { transition-delay:0.05s; }
@@ -1044,6 +1090,18 @@ nav .sub.active a {
 	  font-size: 0.6em;
 	  width: 120px;
 	}
+	nav .bottom {
+    height: 27%;
+  }
+  nav .sub.active a {
+    padding: 2px 0 4px 20px;
+  }
+  nav .cat {
+    padding: 2px 0 2px 10px;
+  }
+  .contact {
+    margin-top: 6px;
+  }
 	.menuActive #entry_container .entry.all {
     width:65%;
 	}
diff --git a/site/templates/about.liquid b/site/templates/about.liquid
index 6c762b2..c693b61 100644
--- a/site/templates/about.liquid
+++ b/site/templates/about.liquid
@@ -1,9 +1,9 @@
 <div class="entry page">
   <span>
-    <span class="postname">{{page.title}}</span>
-    <span class="brady">{% for image in shape.images %}<a href="mailto:{{image.caption}}?subject=SAY HELLO!"><img src="{{ image.uri }}"></a>{% endfor %}</span>
-    <div class="content">
-      {{page.body | newline_to_br}}
-    </div>
+    <span class="brady">
+      <div class="aboutcontent">{{page.body | newline_to_br}}</div>
+      {% for image in shape.images %}<a href="mailto:{{image.caption}}?subject=SAY HELLO!" style="background-image:url({{ image.uri }})"><span>{{ image.label }}</span></a>{% endfor %}
+      <div class="contactcontent">{{page.contact | newline_to_br}}</div>
+    </span>
   </span>
 </div>
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 5dbd910..e5af10c 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -335,9 +335,12 @@ button, input[type=submit] {
 .image-element .remove:hover {
 	color: red;
 }
+
+/* 
 .remove {
   display: none;
 }
+ */
 
 #delete_form button:hover { color: red }
 
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index b29a289..1ddbffd 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -139,7 +139,38 @@
           {% endfor %}
         </ol>
       </div>
+    {% elsif type == 'double-captioned-image-list' %}
+      <div class="image-list group loaded">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*" multiple>
+            <button>+ Add images</button>
+          </div>
+          <input class="add-url" type="text" placeholder="+ Add URL">
+        </div>
+
+        <script type="text/html" class="image-template">
+          <li class="image-element">
+            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input class="caption" name="{{name}}[][caption]">
+            <input class="caption" name="{{name}}[][label]">
+            <img alt="{{image.caption}}">
+            <button class="remove">x</button>
+          </li>
+        </script>
 
+        <ol>
+          {% for image in spec.value %}
+            <li class="image-element">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption}}">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label}}">
+              <img src="{{image.uri}}" alt="{{image.caption}}">
+              <button class="remove">x</button>
+            </li>
+          {% endfor %}
+        </ol>
+      </div>
     {% elsif type == 'meta' %}
       <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}">
     {% else %}