updates

blog.scss

@@ -1,3 +1,12 @@
+@mixin responsive-block($bw) {
+  @media (max-width: 700px) {
+    max-width: $bw+20%;
+  }
+  @media (max-width: 500px) {
+    max-width: $bw+40%;
+  }
+}
+
 .post-text {
   text-align: center;
 }
@@ -13,9 +22,48 @@
 .post-content {
   max-width: 50%;
   text-align: justify;
+  font-size: 1.5em;
+  @include responsive-block(50);
+}
+
+.comment-block {
+  max-width: 30%;
+  @include responsive-block(30);
 }
 
 .comments {
   margin-top: 5%;
-  max-width: 30%;
+  @extend .comment-block;
+}
+
+.comment {
+  margin-top: 2%;
+  max-width: 40%;
+  @include responsive-block(45);
+}
+
+.comments-loader {
+  margin-top: 2%;
+}
+
+.comment-body {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.postnav {
+  @extend .post-text;
+}
+
+.rounded-button {
+  border-radius: 13px;
+}
+
+.maxinput {
+  background-color: grey;
+}
+
+.maxwarn {
+  margin-top: 15px;
+  @extend .comment-block;
 }

comment.py

@@ -0,0 +1,18 @@
+from json import dumps
+
+def comment(author, title, text):
+    return {
+            "title"  : title,
+            "author" : author,
+            "text"   : text
+            }
+
+
+testcomments = {
+                1 : dumps(
+                            [
+                                comment("Anonymous Coward", "Some comment?", "super duper awesome comment here"),
+                                comment("Anonymous Coward 3", "Something? IDEK", "super duper worse comment here"),
+                                comment("Anonymous Coward 2", "Some other comment?", "super duper dang terrible comment here")
+                            ])
+                }

scripts/blog.js

@@ -3,3 +3,5 @@ riot.mount("post",
     "creator" : "wes",
     "title" : "A cool post here"
   });
+
+riot.mount("bbutton");

scripts/tags.js

@@ -1,13 +1,104 @@
-riot.tag2('comments', '<textarea class="form-input comments centered" name="textarea" rows="10" cols="50"> Comment here! </textarea>', '', '', function(opts) {
+riot.tag2('bbutton', '<button class="btn rounded-button"> </button>', '', '', function(opts) {
 });
 
-riot.tag2('post', '<div class="post centered"> <h4>{opts.title}</h4> <h5>By {opts.creator}</h5> <p class="post-content centered text-break">{content}</p> <comments> </comments> <button onclick="{prev}">Previous Post</button> <button onclick="{next}">Next Post</button> </div>', '', '', function(opts) {
+riot.tag2('comment', '<div class="comment centered"> <div class="card"> <div class="card-header"> <h4 class="card-title">{title} by {author}</h4> </div> <div class="card-body comment-body"> {R.join(⁗ ⁗)(R.repeat(text, 20))} </div> </div> </div>', '', '', function(opts) {
+});
+
+riot.tag2('comments', '<div if="{loading}" class="loading comments-loader"> </div> <comment if="{!loading}" each="{comments}" data="{this}"></comment> <textarea onfocus="{clearplaceholder}" onblur="{checkplaceholder}" oninput="{echo}" __disabled="{disabled}" class="{⁗form-input comments centered ⁗ + maxed}" name="textarea" rows="10" cols="50" maxlength="{maxlength}"> {placeholder} </textarea> <div if="{warn}" class="toast toast-danger maxwarn centered"> <button onclick="{closewarning}" class="btn btn-clear float-right"> </button> You\'ve reached the max comment size </div>', '', '', function(opts) {
+
+comments = [];
+maxlength = 700;
+
+placeholder = "Comment here!";
+focused = false;
+maxed = false;
+warn = false;
+disabled = "";
+loading = true;
+
+this.clearplaceholder = function() {
+  if (!this.focused) {
+    this.update({
+      "placeholder" : "",
+      "focused"     : true
+      })
+  }
+}.bind(this)
+
+this.checkplaceholder = function() {
+  if (this.textarea.value.trim().length == 0) {
+    this.update({
+      "placeholder" : "Comment here!",
+      "focused"     : false
+    });
+  }
+}.bind(this)
+
+this.closewarning = function() {
+  this.update({"warn" : false});
+}.bind(this)
+
+this.echo = function(ev) {
+  if (this.textarea.value.length >= maxlength) {
+    this.update({
+      "maxed" : "maxinput",
+      "warn"  : true
+    });
+  }
+  else {
+    this.update({
+      "maxed" : false,
+      "warn"  : false
+    });
+    window.setTimeout(this.closewarning, 5000);
+  }
+}.bind(this)
+
 var self = this;
+
+this.getComments = function(pid) {
+  fetch("/comments/"+pid)
+    .then(
+      function(resp) {
+        return resp.text();
+      })
+    .then(
+      function(body) {
+        self.update(
+          {
+            "comments" : JSON.parse(body),
+            "loading"  : false
+          });
+      });
+}.bind(this)
+
+this.on("mount",
+  function() {
+    this.getComments(self.opts.pid);
+  });
+
+});
+
+riot.tag2('post', '<div class="postnav centered"> <button class="{⁗btn btn-primary ⁗ + (this.pid <= 1 ? ⁗disabled⁗ : ⁗ ⁗) + this.prevloading}" onclick="{prev}">Previous Post</button> <button class="{⁗btn btn-primary ⁗ + (this.nomore ? ⁗disabled⁗ : ⁗ ⁗) + this.nextloading}" onclick="{next}">Next Post</button> </div> <div if="{!loading}" class="post centered"> <h4>{opts.title}</h4> <h5>By {opts.creator}</h5> <p class="post-content centered text-break">{content}</p> <div class="divider"></div> <comments pid="{pid}"> </comments> </div>', '', '', function(opts) {
+var self = this;
+
+this.loading = false;
+this.prevloading = "";
+this.nextloading = "";
+
+this.nomore = false
 this.pid = 1;
 content = "";
 
 this.prev = function() {
-  if (self.pid > 0) {
+  if (self.prevloading || self.nextloading) {
+    return;
+  }
+  self.prevloading = " loading";
+  if (self.nomore) {
+    self.nomore = false;
+  }
+  if (self.pid > 1) {
     self.pid--;
     self.setPost(self.pid);
     self.update();
@@ -15,12 +106,22 @@ this.prev = function() {
 }.bind(this)
 
 this.next = function() {
+  if (self.nextloading || self.prevloading) {
+    return;
+  }
+  self.nextloading = " loading";
+  console.log(self.pid);
+  console.log(self.nomore);
+  if (!self.nomore) {
     self.pid++;
     self.setPost(self.pid);
     self.update();
+  }
 }.bind(this)
 
 this.setPost = function(pid) {
+  self.update();
+  self.loading = true;
   fetch("/switchpost/"+pid)
     .then(
       function(resp) {
@@ -28,7 +129,16 @@ this.setPost = function(pid) {
       })
     .then(
       function(body) {
+        if (body === "false") {
+          self.nomore = true;
+        }
+        else {
           self.content = R.join(" ")(R.repeat(body, 20));
+        }
+
+        self.loading = false;
+        self.prevloading = "";
+        self.nextloading = "";
         self.update();
       });
 }

styles/blog.min.css

@@ -1,10 +0,0 @@
-.post-text, .blog-title, .post {
-  text-align: center; }
-
-.post-content {
-  max-width: 50%;
-  text-align: justify; }
-
-.comments {
-  margin-top: 5%;
-  max-width: 30%; }

tags/bbutton.tag

@@ -0,0 +1,4 @@
+<bbutton>
+  <button class="btn rounded-button">
+  </button>
+</bbutton>

tags/comment.tag

@@ -0,0 +1,12 @@
+<comment>
+  <div class="comment centered">
+    <div class="card">
+      <div class="card-header">
+        <h4 class="card-title">{title} by {author}</h4>
+      </div>
+      <div class="card-body comment-body">
+        {R.join(" ")(R.repeat(text, 20))}
+      </div>
+    </div>
+  </div>
+</comment>

tags/comments.tag

@@ -1,8 +1,103 @@
 <comments>
-  <textarea class="form-input comments centered"
+  <div if={loading}
+       class="loading comments-loader">
+  </div>
+  <comment
+    if={!loading}
+    each={comments}
+    data={this}
+  />
+  <textarea onfocus={clearplaceholder}
+            onblur={checkplaceholder}
+            oninput={echo}
+            __disabled={disabled}
+            class={"form-input comments centered " + maxed}
             name="textarea"
             rows="10"
-            cols="50">
-      Comment here!
+            cols="50"
+            maxlength={maxlength}
+            >
+      { placeholder }
   </textarea>
+  <div if={warn} class="toast toast-danger maxwarn centered">
+    <button
+      onclick={closewarning}
+      class="btn btn-clear float-right">
+    </button>
+    You've reached the max comment size
+  </div>
+
+comments = [];
+maxlength = 700;
+
+placeholder = "Comment here!";
+focused = false;
+maxed = false;
+warn = false;
+disabled = "";
+loading = true;
+
+clearplaceholder() {
+  if (!this.focused) {
+    this.update({
+      "placeholder" : "",
+      "focused"     : true
+      })
+  }
+}
+
+checkplaceholder() {
+  if (this.textarea.value.trim().length == 0) {
+    this.update({
+      "placeholder" : "Comment here!",
+      "focused"     : false
+    });
+  }
+}
+
+closewarning() {
+  this.update({"warn" : false});
+}
+
+echo(ev) {
+  if (this.textarea.value.length >= maxlength) {
+    this.update({
+      "maxed" : "maxinput",
+      "warn"  : true
+    });
+  }
+  else {
+    this.update({
+      "maxed" : false,
+      "warn"  : false
+    });
+    window.setTimeout(this.closewarning, 5000);
+  }
+}
+
+var self = this;
+
+getComments(pid) {
+  fetch("/comments/"+pid)
+    .then(
+      function(resp) {
+        return resp.text();
+      })
+    .then(
+      function(body) {
+        self.update(
+          {
+            "comments" : JSON.parse(body),
+            "loading"  : false
+          });
+      });
+}
+
+this.on("mount",
+  function() {
+    this.getComments(self.opts.pid);
+  });
+
+<script>
+</script>
 </comments>

tags/post.tag

@@ -1,21 +1,39 @@
 <post>
-  <div class="post centered">
+  <div class="postnav centered">
+    <button class={"btn btn-primary " + (this.pid <= 1 ? "disabled" : " ") + this.prevloading} onclick={prev}>Previous Post</button>
+    <button class={"btn btn-primary " + (this.nomore ? "disabled" : " ") + this.nextloading} onclick={next}>Next Post</button>
+  </div>
+
+  <div if={!loading} class="post centered">
     <h4>{ opts.title }</h4>
     <h5>By { opts.creator }</h5>
     <p class="post-content centered text-break">{ content }</p>
-    <comments>
+
+    <div class="divider"></div>
+    <comments pid={pid}>
     </comments>
-  <button onclick={prev}>Previous Post</button>
-  <button onclick={next}>Next Post</button>
   </div>
 
 <script>
 var self = this;
+
+this.loading = false;
+this.prevloading = "";
+this.nextloading = "";
+
+this.nomore = false
 this.pid = 1;
 content = "";
 
 prev() {
-  if (self.pid > 0) {
+  if (self.prevloading || self.nextloading) {
+    return;
+  }
+  self.prevloading = " loading";
+  if (self.nomore) {
+    self.nomore = false;
+  }
+  if (self.pid > 1) {
     self.pid--;
     self.setPost(self.pid);
     self.update();
@@ -23,13 +41,23 @@ prev() {
 }
 
 next() {
+  if (self.nextloading || self.prevloading) {
+    return;
+  }
+  self.nextloading = " loading";
+  console.log(self.pid);
+  console.log(self.nomore);
+  if (!self.nomore) {
     self.pid++;
     self.setPost(self.pid);
     self.update();
+  }
 }
 
 
 this.setPost = function(pid) {
+  self.update();
+  self.loading = true;
   fetch("/switchpost/"+pid)
     .then(
       function(resp) {
@@ -37,7 +65,16 @@ this.setPost = function(pid) {
       })
     .then(
       function(body) {
+        if (body === "false") {
+          self.nomore = true;
+        }
+        else {
           self.content = R.join(" ")(R.repeat(body, 20));
+        }
+
+        self.loading = false;
+        self.prevloading = "";
+        self.nextloading = "";
         self.update();
       });
 }

templates/index.html

@@ -2,7 +2,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 <header class="text-center nav navbar">
   <section class="centered page-top navbar-section">
-    <h1 class="blog-title">Neverwhere 1.5</h1>
+    <h1 class="blog-title">Null Quantification</h1>
   </section>
 </header>
 {% endblock %}

website.py

@@ -5,11 +5,15 @@ from flask import abort, Flask, render_template, flash, request, send_from_direc
 from flask_bootstrap import Bootstrap
 from flask_appconfig import AppConfig
 
+from time import sleep
+
 from urllib import unquote
 
 from urllib import quote, unquote
 from json import dumps, loads
 
+from comment import testcomments
+
 from werkzeug.contrib.cache import MemcachedCache
 cache = MemcachedCache(['127.0.0.1:11211'])
 
@@ -54,11 +58,20 @@ def NeverWhere(configfile=None):
     @app.route("/switchpost/<pid>")
     def switchPost(pid):
         posts = {
-                    "1" : "Post one! ",
-                    "2" : "Post two! "
+                    "1" : "Post one is changed! ",
+                    "2" : "Post two here! "
                 }
-        return posts.get(pid, "Nothing here!")
+        return posts.get(pid, "false")
+
 
+    @app.route("/comments/<pid>")
+    def comments(pid):
+        sleep(5);
+        try:
+            return testcomments.get(int(pid), dumps([]))
+        except ValueError as e:
+            print e
+            return dumps([])
 
 
     @app.route("/<path:path>")