rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/article.liquid

@@ -0,0 +1,242 @@
+{% assign number_of_comments = article.comments_count %}
+{% if comment and comment.created_at %}
+{% assign number_of_comments = article.comments_count | plus: 1 %}
+{% endif %}
+
+<div class="grid blog-design-4 blog-detail-section">
+  <div class="container">
+    <div class="blog-section">
+      <article class="grid__item" itemscope itemtype="http://schema.org/Article">
+        <h4 class="text-center"><a href="{{ article.url }}">{{ article.title }}</a></h4>
+        {% if article.image %}
+        {% assign image_alt = article.title | escape %}
+        {{ article | img_url: 'master' | img_tag: image_alt, 'article__image' | link_to: article.url }}
+        {% endif %}
+        <div class="blog-description">
+          <div class="blog_section_detail">
+            <div class="blogs-sub-title">
+              {% if section.settings.show_blog_4_date %}
+              <p class="blog-date">
+                <i class="far fa-calendar"></i>
+                <span data-datetime="{{ article.published_at | date: '%Y-%m-%d' }}"><span class="date">{{ article.published_at | date: '%b' }} {{ article.published_at | date: '%d' }} , {{ article.published_at | date: '%Y' }}</span></span>             
+              </p>
+              {% endif %}
+
+              {% if article.comments_enabled? %}
+              {% assign number_of_comments = article.comments_count %}
+              <p class="comments-count">
+                <i class="far fa-comments"></i>
+                <span>{{  number_of_comments }} {{ 'blogs.comments.comments' | t }}</span>
+              </p>
+              {% endif %}
+              {% if section.settings.show_blog_4_author %}            
+              <p class="author">
+                <i class="far fa-user"></i>
+                <span> {{ article.author }}</span>
+              </p> 
+              {% endif %}          
+            </div>
+
+            <div class="blog-det-desc"><p>{{ article.content }}</p></div>
+
+            {% if article.tags.size > 0 and section.settings.show_blog_4_tag %}
+            <div class="blog-tag">
+              <p>Tagged in</p>
+              <i class="fas fa-tag"></i>
+              {% for tag in article.tags %}
+              <a class="blog-tags" href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %} <span class="meta-sep"></span> {% endunless %}
+              {% endfor %}
+            </div>
+            {% endif %}
+
+
+            {% if settings.social_sharing_blog %}  
+            {% include 'social-sharing' %}
+            {% endif %}
+            {% if blog.next_article or blog.previous_article %}
+            <div class="action-btn">
+              {% if blog.previous_article %}
+              <div class="btn-left">
+                <i class="fa fa-angle-left" aria-hidden="true"></i>
+                {{ 'blogs.article.older_post' | t | link_to: blog.previous_article }}
+              </div>    
+              {% endif %}
+
+              {% if blog.next_article %}
+              <div class="btn-right">
+                {{ 'blogs.article.newer_post' | t | link_to: blog.next_article }}
+                <i class="fa fa-angle-right" aria-hidden="true"></i>
+              </div>
+              {% endif %}
+            </div>
+            {% endif %}
+            {% if blog.comments_enabled? %}
+            <div id="comments">
+              {% if comment and comment.created_at %}
+              <p class="note form-success">
+                {% if blog.moderated? %}
+                {{ 'blogs.comments.success_moderated' | t }}
+                {% else %}
+                {{ 'blogs.comments.success' | t }}
+                {% endif %}
+              </p>
+              {% endif %}
+
+              {% if number_of_comments > 0 %}
+              {% paginate article.comments by 5 %}
+              <h6> {% if blog.comments_enabled? %}
+                {% assign number_of_comments = article.comments_count %}
+                <p class="comments-count">{{  number_of_comments }} {{ 'blogs.comments.comments' | t }}</p>
+                {% endif %}  
+              </h6>
+              <ul>               
+                {% if comment and comment.created_at %}
+                <li id="{{ comment.id }}" class="comment first{% if article.comments_count == 0 %} last{% endif %}">
+                  {% include 'comment' %}
+                </li>
+                {% endif %}
+                {% for comment in article.comments %}
+                <li id="{{ comment.id }}" class="comment{% unless number_of_comments > article.comments_count %}{% if forloop.first %} first{% endif %}{% endunless %}{% if forloop.last %} last {% endif %}">
+                  {% include 'comment' %}
+                </li>
+                {% endfor %}
+              </ul>
+              {% if paginate.pages > 1 %}
+              <hr class="--clear hr--small">
+              <div class="text-center">
+                {% include 'pagination-default' %}
+              </div>
+              {% endif %}
+              {% endpaginate %}
+              {% endif %}
+
+              {% form 'new_comment', article %}
+
+              <h6>{{ 'blogs.comments.title' | t }}</h6>
+
+              {{ form.errors | default_errors }}
+
+              <div class="grid-uniform">
+                <div class="grid__item wide--one-half post-large--one-half large--one-half">
+                  <label for="CommentAuthor" class="label--hidden">{{ 'blogs.comments.name' | t }}</label>
+                  <input {% if form.errors contains "author" %} class="error"{% endif %} type="text" name="comment[author]" placeholder="{{ 'blogs.comments.name' | t }}" id="CommentAuthor" value="{{ form.author }}" autocapitalize="words">
+                </div>
+                <div class="grid__item wide--one-half post-large--one-half large--one-half">
+                  <label for="CommentEmail" class="label--hidden">{{ 'blogs.comments.email' | t }}</label>
+                  <input {% if form.errors contains "email" %} class="error"{% endif %} type="email" name="comment[email]" placeholder="{{ 'blogs.comments.email' | t }}" id="CommentEmail" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
+                </div>
+               
+                <label for="CommentBody" class="label--hidden">{{ 'blogs.comments.message' | t }}</label>
+                <textarea {% if form.errors contains "body" %} class="error"{% endif %} name="comment[body]" id="CommentBody" placeholder="{{ 'blogs.comments.message' | t }}">{{ form.body }}</textarea>
+                  
+              </div>
+              {% if blog.moderated? %}
+              <p><small>{{ 'blogs.comments.moderated' | t }}</small></p>
+              {% endif %}
+              <button type="submit" class="btn"><span>{{ 'blogs.comments.post' | t }}</span></button>
+              {% endform %}
+            </div>
+            {% endif %}
+          </div>
+
+        </div>
+      </article>
+    </div>
+  </div>
+</div>
+
+<style>
+
+  .blog-design-4.blog-detail-section h4 a,.blog-design-4 .article-detail h6 a { color:{{ section.settings.blog_design_4_title }}; }
+  .blog-design-4.blog-detail-section h4 a:hover,.blog-design-4 .article-detail h6 a:hover { color:{{ section.settings.blog_design_4_titlehover }}; }
+  .blog-design-4.blog-detail-section .blog-detail .blog-date,.blog-design-4.blog-detail-section .blog-date { color:{{ section.settings.blog_design_4_datecolor }}; }
+
+  .blog-design-4.blog-detail-section .blog-detail .author, .blog-design-4 .author, .blog-design-4.blog-detail-section .comments-count { color:{{ section.settings.blog_design_4_authorcolor }}; }
+
+  .blog-design-4.blog-detail-section .blog-detail .author { color:{{ section.settings.blog_design_4_authorcolor }}; }
+  
+  .blog-design-4.blog-detail-section  .article .blog-detail i,.blog-design-4 .article .blogs-sub-title i   {  margin-right: 5px;color:{{ section.settings.blog_design_4_titlehover }}; }
+  
+  .blog-detail-section .blog-section .blog_section_detail #comments .comments-count { margin: 0; display: inline-block; width: 100%;
+  color:{{ section.settings.blog_design_commentcolor }}; }
+
+  .blog-detail-section .blog-section .blog_section_detail .blog-tag a { font-size: 13px; color:{{ section.settings.blog_design_4_tag }}; border-bottom: 1px solid {{ section.settings.blog_design_4_tag }}; text-transform: uppercase; text-decoration: none; position: relative; }
+
+  .blog-design-4.blog-detail-section  .blog-tag a:hover {color:{{ section.settings.blog_design_4_taghover }}; }
+  
+  .blog-detail-section .blog-section .blog_section_detail .blog-tag a:before { bottom: 0; content: ''; height: 1px; margin: auto; position: absolute; width: 0; bottom: -1px; left: 0; background-color: {{ section.settings.blog_design_4_taghover }}; }
+  .blog-detail-section .blog-section .blog_section_detail .blog-tag a:after { bottom: 0; content: ''; height: 1px; margin: auto; position: absolute; width: 0; bottom: -1px; right: 0; -webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -moz-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -ms-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -o-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); background-color: {{ section.settings.blog_design_4_taghover }}; }
+  
+  .blog-detail-section .blog-section .blog_section_detail .blog-tag a:hover:before { -webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -moz-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -ms-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -o-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); width: 100%; }
+  .blog-detail-section .blog-section .blog_section_detail .blog-tag a:hover:after { background: transparent; width: 100%; }
+
+  .blog-detail-section .blog-section .blog_section_detail .social-sharing a { color:{{ section.settings.blog_design_4_tag }}; }
+  .blog-detail-section .blog-section .blog_section_detail .social-sharing a:hover { color:{{ section.settings.blog_design_4_taghover }}; }
+</style>
+
+
+{% schema %}
+{
+"name": "Blog Page",
+"settings": [
+{
+"type": "checkbox",
+"id": "show_blog_4_author",
+"label": "Display Blog author name"
+},
+
+{
+"type": "checkbox",
+"id": "show_blog_4_date",
+"label": "Display Blog date"
+},
+{
+"type": "checkbox",
+"id": "show_blog_4_tag",
+"label": "Display Blog tag"
+},
+{
+"type": "color",
+"id": "blog_design_4_title",
+"label": "Blog  title color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_4_titlehover",
+"label": "Blog  title hover color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_4_datecolor",
+"label": "Blog date color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_4_authorcolor",
+"label": "Blog author  color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_commentcolor",
+"label": "Blog comment color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_4_tag",
+"label": "Blog tag color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_4_taghover",
+"label": "Blog tag hover",
+"default": "#000"
+}
+]
+}
+{% endschema %}