From e5c9703914b40a30b4628ca6d7d23eb60f6b853c Mon Sep 17 00:00:00 2001
From: wes <wjak56@gmail.com>
Date: Tue, 1 Aug 2017 11:04:52 -0400
Subject: [PATCH] update responsiveness and add side stuff

---
 src/posts.py             |   3 +-
 src/scripts/app.tag      | 140 +++++++++++++++++++++------------------
 src/scripts/editor.tag   |   1 -
 src/scripts/menu.tag     |  23 +++++++
 src/scripts/post.tag     |   3 +-
 src/scripts/social.tag   |  12 ++--
 src/styles/riotblog.scss |  21 ++++--
 src/templates/index.html |   2 +-
 8 files changed, 124 insertions(+), 81 deletions(-)
 create mode 100644 src/scripts/menu.tag

diff --git a/src/posts.py b/src/posts.py
index 484daa9..924b58a 100644
--- a/src/posts.py
+++ b/src/posts.py
@@ -27,7 +27,8 @@ class Posts:
             doc = {
                     "title" : title,
                     "content" : content,
-                    "author" : author
+                    "author" : author,
+                    "type" : "post"
                     }
 
         print("post was saved %s" % doc)
diff --git a/src/scripts/app.tag b/src/scripts/app.tag
index 6e7abea..49d5c8b 100644
--- a/src/scripts/app.tag
+++ b/src/scripts/app.tag
@@ -1,65 +1,81 @@
 <app>
-  <div class="show-md show-sm show-xs navigate-small dropdown dropdown-right">
-    <button onclick={this.menuOn} class="mobile-navigate btn btn-link navigate-item dropdown-toggle" tabindex="0">
-      <i class="bar-menu fa fa-bars" aria-hidden="true"></i>
-    </button>
-    <!-- menu component -->
-    <ul
-      if={this.menuActive}
-      class="mobile-menu tab tab-block menu">
-      <li
-        each="{page in ['posts', 'projects', 'links', 'about']}"
-        class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
-        data-is="navtab"
-        active={this.parent.active.get(page)}
-        to={this.parent.to(page)}
-        title={page}
-        onclick={this.menuOff}
-      >
-      </li>
-    </ul>
-  </div>
-  <ul class="hide-md hide-sm hide-xs navigate tab tab-block">
-    <li
-      each="{page in ['posts', 'projects', 'links', 'about']}"
-      class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
-      data-is="navtab"
-      active={this.parent.active.get(page)}
-      to={this.parent.to(page)}
-      title={page}
-    >
-    </li>
-  </ul>
-  <div class="projects-content">
-    <loading if={!this.state.loaded}></loading>
-    <projectsview
-      class="animated fadeInDown"
-      if={this.active.get("projects") && this.state.loaded}
-      state={this.state}
-      ref="projectsview"
-    >
-    </projectsview>
-  </div>
-  <div class="content">
-    <postsview
-      cached={this.cached}
-      state={this.state}
-      if={this.active.get("posts")}
-      ref="postsview"
-    >
-    </postsview>
-    <about
-      if={this.active.get("about")}
-    >
-    </about>
-    <links
-      cached={this.cached}
-      state={this.state}
-      if={this.active.get("links")}
-    >
-    </links>
+  <div class="container">
+    <div class="columns">
+
+      <div class="column hide-xs hide-sm hide-md col-1 col-xl-1 col-lg-2">
+        <div
+          data-is="menu"
+          name="Category"
+          items={["Programming", "Books", "Philosophy"]}>
+        </div>
+      </div>
+      <div class="column col-xl-11 col-lg-10 col-md-12 col-sm-12 col-xs-12">
+        <div class="show-md show-sm show-xs navigate-small dropdown dropdown-right">
+          <button onclick={this.menuOn} class="mobile-navigate btn btn-link navigate-item dropdown-toggle" tabindex="0">
+            <i class="bar-menu fa fa-bars" aria-hidden="true"></i>
+          </button>
+          <!-- menu component -->
+          <ul
+            if={this.menuActive}
+            class="mobile-menu tab tab-block menu">
+            <li
+              each="{page in ['posts', 'projects', 'links', 'about']}"
+              class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
+              data-is="navtab"
+              active={this.parent.active.get(page)}
+              to={this.parent.to(page)}
+              title={page}
+              onclick={this.menuOff}
+            >
+            </li>
+          </ul>
+        </div>
+        <ul class="hide-md hide-sm hide-xs navigate tab tab-block">
+          <li
+            each="{page in ['posts', 'projects', 'links', 'about']}"
+            class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
+            data-is="navtab"
+            active={this.parent.active.get(page)}
+            to={this.parent.to(page)}
+            title={page}
+          >
+          </li>
+        </ul>
+        <div class="projects-content">
+          <loading if={!this.state.loaded}></loading>
+          <projectsview
+            class="animated fadeInDown"
+            if={this.active.get("projects") && this.state.loaded}
+            state={this.state}
+            ref="projectsview"
+          >
+          </projectsview>
+        </div>
+
+        <div class="content">
+          <postsview
+            cached={this.cached}
+            state={this.state}
+            if={this.active.get("posts")}
+            ref="postsview"
+          >
+          </postsview>
+          <about
+            if={this.active.get("about")}
+          >
+          </about>
+          <links
+            cached={this.cached}
+            state={this.state}
+            if={this.active.get("links")}
+          >
+          </links>
+        </div>
+      </div>
+    </div>
   </div>
 <script>
+import './menu.tag';
 import './navtab.tag';
 import './projectsview.tag';
 import './postsview.tag';
@@ -82,11 +98,7 @@ self.cached = fetchCached({
   cache: {
     get: ((k) => {
       return new Promise((resolve, reject) => {
-        var result = self.cache[k];
-        if (result == undefined) {
-          resolve(undefined);
-        }
-        resolve(result);
+        resolve(self.cache[k]);
       });
     }),
     set: (k, v) => { self.cache[k] = v; }
diff --git a/src/scripts/editor.tag b/src/scripts/editor.tag
index 91ea0df..cc0af4d 100644
--- a/src/scripts/editor.tag
+++ b/src/scripts/editor.tag
@@ -92,7 +92,6 @@ this.defaultPost = {
   "author" : ""
 };
 
-
 var self = this;
 
 currentPost() {
diff --git a/src/scripts/menu.tag b/src/scripts/menu.tag
new file mode 100644
index 0000000..2927f99
--- /dev/null
+++ b/src/scripts/menu.tag
@@ -0,0 +1,23 @@
+<menu>
+  <div class="dropdown">
+    <a href="#" class="btn btn-primary menu-button dropdown-toggle" tabindex="0">
+      { opts.name }<i class="icon icon-caret"></i>
+    </a>
+    <ul class="menu">
+      <!-- menu header text -->
+      <li class="divider" data-content="LINKS">
+      </li>
+      <!-- menu item -->
+      <div each={item in opts.items} class="menu-item">
+        <a
+          class="btn btn-primary menu-button"
+          href="#"
+        >
+          { item }
+        </a>
+        <yield/>
+        <li class="divider"></li>
+      </div>
+    </ul>
+  </div>
+</menu>
diff --git a/src/scripts/post.tag b/src/scripts/post.tag
index 1ace858..85f47f0 100644
--- a/src/scripts/post.tag
+++ b/src/scripts/post.tag
@@ -13,6 +13,7 @@
     <loading if={this.loading && this.opts.state.loaded}></loading>
     <div class="text-break">
       <div class={"animated " + (this.loading ? "invisible" : "fadeIn")}>
+
         <social
           show={!this.loading}
           ref="social"
@@ -20,6 +21,7 @@
         >
         </social>
         <h4 class="post-title">{ this.title }</h4>
+
         <p class="post-content centered text-break">
           <raw
             content="{ this.converter.makeHtml(this.content) }"
@@ -41,7 +43,6 @@
     </div>
   </div>
 <script>
-
 import './raw.tag';
 import './social.tag';
 import { default as R } from 'ramda';
diff --git a/src/scripts/social.tag b/src/scripts/social.tag
index 7b47949..f3c8145 100644
--- a/src/scripts/social.tag
+++ b/src/scripts/social.tag
@@ -1,10 +1,8 @@
 <social>
-  <div class="social-wrapper">
-      <div class="btn-group">
-        <div onmouseover={test} data-is="raw" ref="twitter" content={this.tweetHtml}>
-        </div>
-        <div onmouseover={test} data-is="raw" ref="facebook" content={this.fbHtml}>
-        </div>
+  <div class="social-wrapper btn-group">
+      <div onmouseover={test} data-is="raw" ref="twitter" content={this.tweetHtml}>
+      </div>
+      <div onmouseover={test} data-is="raw" ref="facebook" content={this.fbHtml}>
       </div>
   </div>
 <script>
@@ -38,7 +36,7 @@ self.on("updated", () => {
     window.twttr.widgets.load(self.refs.twitter.root);
   }
 
-  if (FB !== undefined) {
+  if (FB !== undefined && FB.XFBML !== undefined) {
     FB.XFBML.parse(self.refs.facebook.root);
   }
   self.old_id = self._id;
diff --git a/src/styles/riotblog.scss b/src/styles/riotblog.scss
index 7c0e1bc..496dfa3 100644
--- a/src/styles/riotblog.scss
+++ b/src/styles/riotblog.scss
@@ -7,12 +7,10 @@ $menuWidth: 60px;
 
 .twitter-share-button-rendered {
   font-size: 1.5em;
-  margin: 2px;
 }
 
 .fb-share-button {
   font-size: 1.5em;
-  margin: 2px;
 }
 
 .social-wrapper {
@@ -23,6 +21,17 @@ $menuWidth: 60px;
   margin-top: 25%;
 }
 
+.menu-button {
+	display: block !important;
+	margin-top: 0;
+	text-decoration: none;
+  color: $branding !important;
+  background-color: white !important;
+  &:hover {
+    background-color: $brandingBG !important;
+  }
+}
+
 .branded, button {
   border-radius: 5px !important;
   border-color: $branding2 !important;
@@ -195,15 +204,15 @@ p, h6, h4 {
 
 .content {
   margin: auto;
-  max-width: 70%;
+  max-width: 80%;
   @media (max-width: 1000px) {
-    max-width: 80%;
+    max-width: 90%;
   }
   @media (max-width: 800px) {
-    max-width: 90%;
+    max-width: 95%;
   }
   @media (max-width: 400px) {
-    max-width: 93%;
+    max-width: 100%;
   }
 }
 
diff --git a/src/templates/index.html b/src/templates/index.html
index b73fe45..7e37e3e 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -9,7 +9,7 @@
 <html>
   <body>
     <section class="text-center nav navbar centered page-top navbar-section">
-      <h1 class="blog-title">Wes Kerfoot</h1>
+      <h1 class="blog-title"></h1>
     </section>
     <app csrf_token="{{ csrf_token() }}"></app>
     <footer class="footer">