preliminary formatting.. need to add a couple new datatypes

author: Jules Laplace <jules@okfoc.us> 2016-03-26 17:25:41 -0400
committer: Jules Laplace <jules@okfoc.us> 2016-03-26 17:25:41 -0400
commit: 1ac9385f0e106a67c9cac159a88f1ef53ecc8f79 (patch)
tree: 65aab20ece8fe8647d459d36e632af86158a6459
parent: d1283fbd4aca467162fffeae1ea42effb155bf56 (diff)
4 files changed, 208 insertions, 1 deletions
diff --git a/db.json b/db.json
new file mode 100644
index 0000000..b23375b
--- /dev/null
+++ b/db.json
@@ -0,0 +1,22 @@
+{
+  "project": [
+    {
+      "id": "annapurna-pictures",
+      "year": 2016,
+      "title": "Annapurna Pictures",
+      "link": "http://annapurna.pictures/",
+      "NatureOfWork": "Design\r\nProgramming",
+      "brief": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\r\n",
+      "image": {
+        "uri": "https://ltho.s3.amazonaws.com/ebd3062e-1cf4-4a2d-a7f3-240f66e32258.png",
+        "caption": ""
+      },
+      "press": [
+        "http://asdf.us/"
+      ],
+      "__index": "0",
+      "dateCreated": "Sat, 26 Mar 2016 20:34:21 GMT",
+      "client": "Annapurna Pictures"
+    }
+  ]
+}
+\ No newline at end of file
diff --git a/index.js b/index.js
index 5f2586a..28b70b8 100644
--- a/index.js
+++ b/index.js
@@ -21,8 +21,9 @@ var app = okcms.createApp({
       id: {type: 'string', hidden: true},
       year: {type: 'number'},
       title: {type: 'string'},
+      client: {type: 'string'},
       link: {type: 'string'},
-      NatureOfWork: {type: 'text'},
+      NatureOfWork: {type: 'tag-list'},
       brief: {type: 'text'},
       image: {type: 'image'},
       press: {type: 'link-list'},
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
new file mode 100644
index 0000000..84919fd
--- /dev/null
+++ b/public/assets/js/app.js
@@ -0,0 +1,11 @@
+var is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i));
+var is_ipad = (navigator.userAgent.match(/iPad/i));
+var is_android = (navigator.userAgent.match(/Android/i))
+var is_mobile = is_iphone || is_ipad || is_android;
+$(function() {
+  if (is_mobile) {
+    $("html").addClass("mobile");
+  } else {
+    $("html").addClass("desktop");
+  }
+});
diff --git a/templates/index.liquid b/templates/index.liquid
index e69de29..492dbcd 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>OKFOCUS</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="keywords" content="OKFocus, " />
+  <meta name="description" content="OKFocus" />
+  <meta property="og:title" content="OKFocus" />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content="/icon.jpg" />
+  <meta property="og:url" content="http://" />
+  <meta property="og:site_name" content="OKFocus" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <link rel="image_src" href="/icon.jpg" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="apple-touch-icon" href="/icon.jpg" />
+  <link rel="apple-touch-icon-precomposed" href="/icon.jpg" />
+  <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,700,700italic|Roboto:400,300italic,300,500italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
+    <style>
+    html {
+        box-sizing: border-box;
+    }
+    
+    *,
+    *:before,
+    *:after {
+        box-sizing: inherit;
+        padding: 0;
+        margin: 0;
+    }
+    
+    a,
+    a:visited {
+        color: blue;
+    }
+    
+    body {
+        font-family: 'Roboto Mono', monospace;
+        font-size: 11px;
+    }
+    
+    div,
+    span {
+        display: inline-block;
+        float: left;
+    }
+    
+    .top {
+        background: yellow;
+        width: 100%;
+        height: 80vh;
+    }
+    
+    .bottom {
+        height: 20vh;
+        background: #eee;
+    }
+    
+    .five {
+        width: 100%;
+    }
+
+    .headings {
+    	font-size:10px;
+    	font-weight: 700;
+    }
+    .texts {
+    	font-weight:400;
+    	padding:5px 0 0 0;
+    }
+    .five span {
+        width:calc(12% - 8px);
+        margin:0 4px;
+    }
+
+    .press .headings span:nth-child(5){
+        width: calc(40% - 8px);
+    }
+    .headings span {
+        border-bottom: 1px solid;
+        padding:5px 0;
+    }
+    
+    .press .headings span:last-child:before {
+        content: "PRESS";
+    }
+    .five .description {
+        width: 50%;
+        -webkit-column-count: 3;
+        font-size:12px;
+    }    
+    .press .five .description {
+        width: calc(40% - 8px);
+        -webkit-column-count: 2;
+    }
+    
+    .press .texts span:last-child a {
+        width: 100%;
+        display: inline-block;
+    }
+    
+    ul li {
+        list-style-type: none;
+    }
+
+    .nopress span:last-child{
+    	width: calc(51.5555555555% - 2px);
+    }
+    </style>
+</head>
+
+<body>
+
+{% for project in projects %}
+    <div class="item">
+        <div class="top" style="background-image:url({{ project.image.uri }})">
+        </div>
+        <div class="bottom {% if project.press %}press{% else %}nopress{% endif %}">
+            <div class="headings five">
+                <span>YEAR</span>
+                <span>CLIENT</span>
+                <span>TITLE</span>
+                <span>NATURE OF WORK</span>
+                <span>BRIEF</span>
+                <span>&nbsp;</span>
+            </div>
+            <div class="five texts">
+                <span>{{ project.year }}</span>
+                <span>{{ project.client }}</span>
+                <span>{{ project.title }}</span>
+                <span>
+                <ul>
+                  {% assign categories = project.NatureOfWork | split "\n" %}
+                  {% for category in categories %}
+                		<li>
+                			{{ category }}
+                		</li>
+                  {% endfor %}
+                </ul>
+                </span>
+                <span class="description">
+                  {{ project.brief }}
+                </span>
+                <span>
+                	<ul>
+                	{% for link in project.links %}
+                		<li>
+                			<a href="{{ link.url }}">{{ link.name }}</a>
+                		</li>
+                	{% endfor %}
+                	</ul>
+                </span>
+            </div>
+        </div>
+    </div>
+{% endfor %}
+
+</body>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+{% if meta.production %}
+<script src="/assets/js/app.min.js"></script>
+{% else %}
+<script src="/assets/js/app.js"></script>
+{% endif %}
+</html>
author	Jules Laplace <jules@okfoc.us>	2016-03-26 17:25:41 -0400
committer	Jules Laplace <jules@okfoc.us>	2016-03-26 17:25:41 -0400
commit	1ac9385f0e106a67c9cac159a88f1ef53ecc8f79 (patch)
tree	65aab20ece8fe8647d459d36e632af86158a6459
parent	d1283fbd4aca467162fffeae1ea42effb155bf56 (diff)