Merge pull request #66 from crowdint/feature/inline-disquss

[#84604518][3pts] Adds comments per paragraph
crowdint · Mar 13, 2015 · 1e2fcae · 1e2fcae
2 parents e556187 + ece6ea2
commit 1e2fcae
Show file tree

Hide file tree

Showing 6 changed files with 423 additions and 16 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -17,6 +17,7 @@
 //= require highlight.pack
 //= require pickadate/picker
 //= require pickadate/picker.date
+//= require inline-disqussions
 //= require mixpanel
 //= require pages
 //= require mobile-menu

diff --git a/app/assets/stylesheets/modules/inline-disqussions.scss b/app/assets/stylesheets/modules/inline-disqussions.scss
@@ -0,0 +1,108 @@
+.disqussion {
+  font-family: sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  left: 0;
+  line-height: 16px;
+  padding: 5px 10px 10px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  z-index: 7;
+
+  &:hover a, &.hovered a {
+    background: #999999;
+    opacity: 1;
+  }
+
+  &:hover a:after, &.hovered a:after {
+    border-top-color: #999999;
+  }
+
+  a {
+    -moz-border-radius: 2px;
+    -moz-transition: all 0.5s;
+    -ms-border-radius: 2px;
+    -o-border-radius: 2px;
+    -o-transition: all 0.5s;
+    -webkit-border-radius: 2px;
+    -webkit-transition: all 0.5s;
+    background: #bbbbbb;
+    border-radius: 2px;
+    color: white;
+    cursor: pointer;
+    display: block;
+    height: 17px;
+    opacity: 0;
+    overflow: hidden;
+    text-decoration: none;
+    transition: all 0.5s;
+    width: 20px;
+
+    &.has-comments { opacity: .8; }
+
+    &:after {
+      -moz-transition: all 0.5s;
+      -o-transition: all 0.5s;
+      -webkit-transition: all 0.5s;
+      border-left: 7px solid transparent;
+      border-top: 7px solid #bbbbbb;
+      content: " ";
+      display: block;
+      height: 0;
+      left: 19px;
+      position: absolute;
+      top: 22px;
+      transition: all 0.5s;
+      width: 0;
+    }
+  }
+}
+
+.disqussion-contain:hover .disqussion a {
+  opacity: 1;
+}
+
+#disqussions_wrapper {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+#disqus_thread.positioned {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  left: 0;
+  padding: 5px 15px 0 15px;
+  position: absolute;
+  top: 0;
+}
+
+.disqussion-highlight #disqus_thread.positioned {
+  background: #fff;
+  z-index: 9;
+}
+
+#disqussions_overlay {
+  background: rgba(0, 0, 0, 0.5);
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 8;
+}
+
+.disqussion-highlighted {
+  background: #fff;
+  position: relative;
+  z-index: 9;
+}
+
+.main-disqussion-link-wrp {
+  font-family: "Helvetica Neue", arial, sans-serif;
+  text-align: center;
+  a { color: $darkgray; }
+}
diff --git a/app/views/crowdblog/posts/_disqus.html.slim b/app/views/crowdblog/posts/_disqus.html.slim
@@ -0,0 +1,20 @@
+#disqus_thread
+
+javascript:
+  var tabletSize = 1024;
+  var disqus_shortname = "#{ ENV['DISQUS_SHORTNAME'] }";
+  var dsq = document.createElement('script');
+  dsq.type = 'text/javascript';
+  dsq.async = true;
+  dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+
+  if ($(document).width() > tabletSize) {
+    $(document).ready(function() {
+      $('.body p').inlineDisqussions({ highlighted: true });
+    });
+  }
+
+a href="http://disqus.com" class="dsq-brlink"
+  | blog comments powered by
+  span class="logo-disqus" Disqus
diff --git a/app/views/crowdblog/posts/show.html.slim b/app/views/crowdblog/posts/show.html.slim
@@ -18,19 +18,4 @@
     = previous_link_mobile(@post)
 .posts
   = render :partial => 'crowdblog/posts/post', :object => @post, :locals => { index_view: false }
-  #disqus_thread
-
-  - if Rails.env.production?
-    coffee:
-      disqus_shortname = 'crowdinttech'
-
-      dsq = document.createElement('script')
-      dsq.type = 'text/javascript'
-      dsq.async = true
-      dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'
-      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq)
-
-
-    a href="http://disqus.com" class="dsq-brlink"
-      | blog comments powered by
-      span class="logo-disqus" Disqus
+  = render 'disqus'
diff --git a/config/application.yml.example b/config/application.yml.example
@@ -3,9 +3,11 @@
 defaults: &defaults
   GOOGLE_APP_ID: 'your_google_app_id'
   GOOGLE_SECRET_KEY: 'your_google_secret_key'
+  DISQUS_SHORTNAME: 'your_disqus_shortname'
 
 development:
   <<: *defaults
 
 production:
   <<: *defaults
+  DISQUS_SHORTNAME: 'your_disqus_shortname'