update responsiveness and add side stuff

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)

src/scripts/app.tag

@@ -1,4 +1,15 @@
 <app>
+  <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>
@@ -40,6 +51,7 @@
           >
           </projectsview>
         </div>
+
         <div class="content">
           <postsview
             cached={this.cached}
@@ -59,7 +71,11 @@
           >
           </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; }

src/scripts/editor.tag

@@ -92,7 +92,6 @@ this.defaultPost = {
   "author" : ""
 };
 
-
 var self = this;
 
 currentPost() {

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>

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';

src/scripts/social.tag

@@ -1,12 +1,10 @@
 <social>
-  <div class="social-wrapper">
-      <div class="btn-group">
+  <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>
-  </div>
 <script>
 
 import './raw.tag';
@@ -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;

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%;
-  @media (max-width: 1000px) {
   max-width: 80%;
+  @media (max-width: 1000px) {
+    max-width: 90%;
   }
   @media (max-width: 800px) {
-    max-width: 90%;
+    max-width: 95%;
   }
   @media (max-width: 400px) {
-    max-width: 93%;
+    max-width: 100%;
   }
 }
 

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">