Fixes support for members. Footer improvements. Partials refactoring

stefanbc · Feb 13, 2020 · df4356b · df4356b
1 parent a3ade7a
commit df4356b
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 57 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
diff --git a/assets/scss/_dark-mode.scss b/assets/scss/_dark-mode.scss
@@ -41,6 +41,10 @@ body {
 
         blockquote {
             color: $dm-grey;
+
+            &::before {
+                color: $dm-light;
+            }
         }
 
         hr {
@@ -115,7 +119,10 @@ body {
         }
 
         footer {
-            border-color: $dm-grey;
+            .subscribe-form,
+            .copyright {
+                border-color: $dm-grey;
+            }
         }
 
         .kg-bookmark-card {

diff --git a/assets/scss/_globals.scss b/assets/scss/_globals.scss
@@ -92,6 +92,20 @@ input {
     }
 }
 
+.button {
+    &.button-primary {
+        position: relative;
+        background-color: $red;
+        border-color: $red;
+
+        &:hover,
+        &:focus {
+            background-color: $dark-red;
+            border-color: $dark-red;
+        }
+    }
+}
+
 ul {
     list-style-type: none;
     margin: 0;

diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss
@@ -53,13 +53,6 @@ nav {
             }
         }
     }
-
-    &.footer-navigation {
-        border-top: 0;
-        border-bottom: 1px solid $light;
-        margin: 0 0 3rem;
-        font-style: normal;
-    }
 }
 
 main {
@@ -199,6 +192,18 @@ main {
                     padding-bottom: 1rem;
                     border-bottom: 1px dotted $grey;
                 }
+
+                .post-tags {
+                    ul {
+                        display: grid;
+                        grid-template-columns: 1fr 1fr 1fr;
+                        margin-right: -1rem;
+
+                        li {
+                            margin-right: 1rem;
+                        }
+                    }
+                }
             }
         }
 
@@ -275,24 +280,50 @@ main {
             margin: 0 2rem;
         }
     }
-
-    form.subscribe {
-        * {
-            margin: 0;
-        }
-
-        .form-group {
-            display: inline-block;
-        }
-    }
 }
 
 footer {
     margin: 3rem 0 6rem;
-    border-top: 1px solid $light;
     font-style: italic;
 
+    .subscribe-form {
+        padding-top: 3rem;
+        border-top: 1px solid $light;
+        font-style: normal;
+
+        form {
+            margin-bottom: 3rem;
+
+            .button-loader {
+                display: none;
+            }
+
+            &.loading {
+                .button-content {
+                    visibility: hidden;
+                }
+
+                .button-loader {
+                    display: inline-block;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    font-size: 1.6em;
+                }
+            }
+        }
+    }
+
+    .footer-navigation {
+        border-bottom: 0;
+        margin: 0;
+        font-style: normal;
+    }
+
     .copyright {
+        padding-top: 3rem;
+        border-top: 1px solid $light;
         font-size: .8em;
     }
 

diff --git a/author.hbs b/author.hbs
@@ -44,6 +44,6 @@
         </section>
     </div>
     <div class="offset-by-two six columns">
-        {{> "loop-side"}}
+        {{> "loop-author"}}
     </div>
 </div>
diff --git a/page-about.hbs b/page-about.hbs
@@ -33,7 +33,14 @@
                             </dt>
                         </dl>
                         <section class="about-list">
-                            {{> "social"}}
+                            {{#if twitter}}
+                            <a href="{{twitter_url twitter}}" target="_blank" rel="noopener"><i class="fab fa-twitter"
+                                    aria-hidden="true"></i></a>
+                            {{/if}}
+                            {{#if facebook}}
+                            <a href="{{facebook_url facebook}}" target="_blank" rel="noopener"><i
+                                    class="fab fa-facebook" aria-hidden="true"></i></a>
+                            {{/if}}
                         </section>
                     </div>
                 </div>

diff --git a/partials/footer.hbs b/partials/footer.hbs
@@ -1,4 +1,22 @@
 <footer>
+    {{#if @labs.members}}
+    <section id="subscribe" class="subscribe-form">
+        <div class="row">
+            <div class="twelve columns text-center">
+                <h2>Subscribe</h2>
+                <p>Stay up to date! Get all the latest & greatest posts delivered straight to your inbox</p>
+                <form data-members-form="subscribe">
+                    <input data-members-email type="email" required="true" placeholder="Your email address" />
+                    <button class="button button-primary" type="submit">
+                        <span class="button-content">Subscribe</span>
+                        <span class="button-loader"><i class="fas fa-circle-notch fa-spin"></i></span>
+                    </button>
+                    <p data-members-error></p>
+                </form>
+            </div>
+        </div>
+    </section>
+    {{/if}}
     {{navigation type="secondary"}}
     <section class="copyright">
         <div class="row">
@@ -9,8 +27,8 @@
                     href="https://github.com/stefanbc/Asgar" class="text-underline">Asgar v1.0.6</a>.
             </div>
             <div class="one-third column text-right">
-                <a class="going-up" href="#" title="Ascending!">Going up?</a> <a title="Going dark!"
-                    class="color-switcher"><i class="fas fa-adjust"></i></a>
+                <a class="going-up" href="#" title="Ascending!"><i class="fas fa-arrow-up"></i></a> <a
+                    title="Going dark!" class="color-switcher"><i class="fas fa-adjust"></i></a>
             </div>
         </div>
     </section>

diff --git a/partials/header.hbs b/partials/header.hbs
@@ -14,7 +14,7 @@
         </div>
         {{#if @labs.members}}
         <div class="two columns">
-            <a class="button" href="/subscribe">Subscribe</a>
+            <a class="button button-primary" href="#subscribe">Subscribe</a>
         </div>
         {{/if}}
         {{else}}
@@ -26,7 +26,7 @@
         </div>
         {{#if @labs.members}}
         <div class="two columns">
-            <a class="button" href="/subscribe">Subscribe</a>
+            <a class="button button-primary" href="#subscribe">Subscribe</a>
         </div>
         {{/if}}
         {{/if}}

diff --git a/partials/loop-side.hbs → partials/loop-author.hbs b/partials/loop-side.hbs → partials/loop-author.hbs
diff --git a/partials/share.hbs b/partials/share.hbs
@@ -8,14 +8,14 @@
             <a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
                 onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">Facebook</a>
         </li>
-        <li class="share-item google-plus">
+        <li class="share-item reddit">
             <a href="http://www.reddit.com/submit?url={{url absolute="true"}}"
-                onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">Reddit</a>
+                onclick="window.open(this.href, 'reddit-share', 'width=490,height=530');return false;">Reddit</a>
         </li>
-        <li class="share-item google-plus">
+        <li class="share-item hacker-news">
             <a href="http://news.ycombinator.com/submitlink?u={{url absolute="true"}}"
-                onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">Hacker
+                onclick="window.open(this.href, 'hacker-news-share', 'width=490,height=530');return false;">Hacker
                 News</a>
         </li>
     </ul>
-</section>ß
+</section>
diff --git a/partials/sidebar.hbs b/partials/sidebar.hbs
@@ -5,17 +5,40 @@
     </div>
 </section>
 
+{{#if primary_tag}}
+{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit=@config.posts_per_page as |related_posts|}}
+{{#if related_posts}}
+<section class="widget recent-posts">
+    {{#../primary_tag}}
+    <h6 class="widget-title">More in {{name}}</h6>
+    {{/../primary_tag}}
+    <div class="widget-content">
+        <ul>
+            {{#foreach related_posts}}
+            <li>
+                <a href="{{url}}" title="{{title}}">{{title}}</a>
+            </li>
+            {{/foreach}}
+        </ul>
+    </div>
+</section>
+{{/if}}
+{{/get}}
+{{/if}}
+
 <section class="widget recent-posts">
     <h6 class="widget-title">Recent posts</h6>
     <div class="widget-content">
-        {{#get "posts" filter="id:-{{id}}" limit=@config.posts_per_page}}
+        {{#get "posts" filter="id:-{{id}}" limit=@config.posts_per_page as |recent_posts|}}
+        {{#if recent_posts}}
         <ul>
-            {{#foreach posts}}
+            {{#foreach recent_posts}}
             <li>
                 <a href="{{url}}" title="{{title}}">{{title}}</a>
             </li>
             {{/foreach}}
         </ul>
+        {{/if}}
         {{/get}}
     </div>
 </section>

diff --git a/partials/social.hbs b/partials/social.hbs
diff --git a/subscribe.hbs b/subscribe.hbs