j1_template 2019.4.8 → 2019.4.10

data/lib/starter_web/assets/data/messages.yml

@@ -35,9 +35,9 @@ debug:
   - dataFound:                           
       short_code:                       D0000
       message:
-        text:                           "Found "
+        text:                           "found "
         cookie:                         "cookie"
-        cookie_user_state:              "User state"
+        cookie_user_state:              "user state"
         data:                           "data"
 
 
@@ -49,36 +49,37 @@ info:
   - moduleInitialization:     
       short_code:                       I0000
       message:
-        text:                           "Initialization "
-        started:                        "is being started"
-        finished:                       "finished successfully"
+        text:                           "initialization "
+        started:                        "started"
+        finished:                       "finished"
 
   - moduleState:                           
       short_code:                       I0001
       message:
-        text:                           "Module state detected as "
+        text:                           "module state detected as "
         enabled:                        "enabled"
 
   - getData:                           
       short_code:                       I0002
       message:
-        text:                           "Data for "
+        text:                           "data for "
         message_catalog:                "message catalog "
-        finished:                       "loaded successfully"
+        finished:                       "loaded"
 
   - getState:                           
       short_code:                       I0003
       message:
-        text:                           "Data for "
+        text:                           "data for "
         data_objects:                   "data objects "
-        finished:                       "loaded successfully"
+        finished:                       "loaded"
 
   - setState:                           
       short_code:                       I0004
       message:
-        text:                           "State: "
+        text:                           "state: "
         started:                        "started"
         running:                        "running"
+        finished:                       "finished"
 
 # ------------------------------------------------------------------------------
 # WARNING messages
@@ -88,16 +89,16 @@ warn:
   - moduleState:                           
       short_code:                       W0000
       message:
-        text:                           "Module state detected as "
+        text:                           "module state detected as "
         disabled:                       "disabled"
         failed:                         "failed"
 
   - deleteData:     
       short_code:                       W0001
       message:
-        text:                           "Delete all "
-        cookies:                        "Cookies"
-        files:                          "Files"
+        text:                           "delete all "
+        cookies:                        "cookies"
+        files:                          "files"
 
 # ------------------------------------------------------------------------------
 # ERROR messages
@@ -107,20 +108,20 @@ error:
   - internalError:                           
       short_code:                       E0000
       message:
-        text:                           "Internal error. "
-        stopped:                        "Cannot continue"
+        text:                           "internal error. "
+        stopped:                        "cannot continue"
         
 
   - getData:     
       short_code:                       E0001
       message:
-        text:                           "Failed to get data "
+        text:                           "failed to get data "
         xhr:                            "from XHR request"
 
   - missingRequired:     
       short_code:                       E0002
       message:
-        text:                           "Missing required "
+        text:                           "missing required "
         parameters:                     "parameters"
         options:                        "options"
 

data/lib/starter_web/assets/data/panel.html

@@ -37,7 +37,7 @@ regenerate:                             true
 {% assign debug       = false %}
 
 
-{% comment %} Process YML config data 
+{% comment %} Process YML config data
 ================================================================================ {% endcomment %}
 
 {% comment %} Set config files
@@ -128,104 +128,130 @@ regenerate:                             true
         {% comment %} Collect INTRO panel
         ------------------------------------------------------------------------ {% endcomment %}
         {% when 'intro' %}
-        {% if debug %}<!-- panel_defaults:  {{panel_config_defaults.intro}} -->{% endif %}
-        {% if debug %}<!-- panel_settings:  {{panel_settings}} -->{% endif %}
         {% assign panel_options = panel_config_defaults.intro | merge: panel_settings %}
         {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}
-        <div id="{{panel_settings.id}}">
-          <div class="{{container_class}}">
-            <div class="{{row_class}}">
-
-                {% assign card_items = cards | size %}
-
-                {% for card in cards %}
-
-                  {% for items in card %}
-                    {% for item in items[1] %}
-                      {% assign key   = item[0] %}
-                      {% assign value = item[1] %}
-                      {% if key == 'enabled' %}     {% assign card_enabled      = value %}                   {% endif %}
-                      {% if key == 'type' %}        {% assign card_type         = value %}                   {% endif %}
-                      {% if key == 'icon' %}        {% assign card_icon         = value %}                   {% endif %}
-                      {% if key == 'icon_size' %}   {% assign card_icon_size    = value %}                   {% endif %}
-                      {% if key == 'icon_color' %}  {% assign card_icon_color   = value %}                   {% endif %}
-                      {% if key == 'title' %}       {% assign card_title        = value | strip_newlines%}   {% endif %}
-                      {% if key == 'tagline' %}     {% assign card_tagline      = value | strip_newlines%}   {% endif %}
-                      {% if key == 'text' %}        {% assign card_text         = value | strip_newlines %}  {% endif %}
-                      {% if key == 'buttons' %}     {% assign card_buttons      = value %}                   {% endif %}
-                    {% endfor %}
-                    {% if card_enabled == false %} {% assign card_items = card_items | minus:1 %} {% endif %}
+        <!-- Panel {{panel_settings.id}} -->
+        <section id="{{panel_settings.id}}">
+          <div class="container">
+
+            <!-- Heading -->
+            <div class="row g-g-mb-10">
+              <div class="col-lg-9">
+                <div class="{{panel_settings.animate}}">
+                  <h1 class="g-font-weight-500 g-mb-0">{{panel_settings.title}}</h1>
+                  <p class="tagline"><b>{{panel_settings.tagline}}</b></p>
+                  <div class="d-inline-block g-width-50 g-height-2 g-bg-primary g-mb-2"></div>
+                  <p class="lead mb-0">{{panel_settings.description}}</p>
+                </div>
+              </div>
+            </div>
+            <!-- End Heading -->
+
+            <!-- Cards -->
+            <div class="row mb-5">
+            {% assign card_items = cards | size %}
+            {% for card in cards %}
+
+              {% for items in card %}
+                {% for item in items[1] %}
+                  {% assign key   = item[0] %}
+                  {% assign value = item[1] %}
+                  {% if key == 'enabled' %}     {% assign card_enabled      = value %}                   {% endif %}
+                  {% if key == 'type' %}        {% assign card_type         = value %}                   {% endif %}
+                  {% if key == 'icon' %}        {% assign card_icon         = value %}                   {% endif %}
+                  {% if key == 'icon_size' %}   {% assign card_icon_size    = value %}                   {% endif %}
+                  {% if key == 'icon_color' %}  {% assign card_icon_color   = value %}                   {% endif %}
+                  {% if key == 'title' %}       {% assign card_title        = value | strip_newlines%}   {% endif %}
+                  {% if key == 'tagline' %}     {% assign card_tagline      = value | strip_newlines%}   {% endif %}
+                  {% if key == 'text' %}        {% assign card_text         = value | strip_newlines %}  {% endif %}
+                  {% if key == 'buttons' %}     {% assign card_buttons      = value %}                   {% endif %}
+                {% endfor %}
+                {% if card_enabled == false %} {% assign card_items = card_items | minus:1 %} {% endif %}
+              {% endfor %}
+
+              {% assign card_width_md = 12 | divided_by: card_items %}
+
+              {% include {{select_icon_size}} family=icon_family size=icon_size %}
+              {% assign icon_size = size %}
+
+              {% if card_width %}
+                {% assign card_enabled = true %}
+                {% assign card_width_md = card_width %}
+              {% else %}
+                {% assign card_width_md = 12 | divided_by: card_items %}
+              {% endif %}
+
+              {% if card_animate %}
+                {% assign card_animate = card_animate %}
+              {% else %}
+                {% assign card_animate = '' %}
+              {% endif %}
+
+              {% comment %} extract link for card icon
+              -------------------------------------------------------------- {% endcomment %}
+              {% for items in card_buttons %} {% for item in items %}
+                {% if item[0] == 'button' %}
+                  {% for elm in item[1] %}
+                    {% assign key   = elm[0] %}
+                    {% assign value = elm[1] %}
+                    {% if key == 'href' %} {% assign card_href = value %} {% endif %}
                   {% endfor %}
+                {% endif %}
+              {% endfor %} {% endfor %}
 
-                  {% assign card_width_md = 12 | divided_by: card_items %}
-
-                  {% include {{select_icon_size}} family=icon_family size=icon_size %}
-                  {% assign icon_size = size %}
-
-                  {% if card_width %}
-                    {% assign card_enabled = true %}
-                    {% assign card_width_md = card_width %}
-                  {% else %}
-                    {% assign card_width_md = 12 | divided_by: card_items %}
-                  {% endif %}
-
-                  {% if card_animate %}
-                    {% assign card_animate = card_animate %}
-                  {% else %}
-                    {% assign card_animate = '' %}
-                  {% endif %}
-
-                  {% comment %} extract link for card icon
-                  -------------------------------------------------------------- {% endcomment %}
-                  {% for items in card_buttons %} {% for item in items %}
-                    {% if item[0] == 'button' %}
-                      {% for elm in item[1] %}
-                        {% assign key   = elm[0] %}
-                        {% assign value = elm[1] %}
-                        {% if key == 'href' %} {% assign card_href = value %} {% endif %}
-                      {% endfor %} 
-                    {% endif %}
-                  {% endfor %} {% endfor %}
-
-                  {% comment %} TODO: Style should be configurable
-                  -------------------------------------------------------------- {% endcomment %}
-                  {% assign card_style  = 'flat' %}
-
-                  {% if card_type == 'text' and card_enabled and card_style == 'flat' %}
-                    {% assign card_raised = 'raised-z0' %}
-
-                    <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-12">
-                      <div class="card card-profile mb-4 {{card_raised}}">                      
-                        <div class="card-icon">
-                          <a href="{{card_href}}">
-                            <i class="card-icon-rectangle {{card_raised}} {{icon_family}} {{icon_family}}-{{card_icon}} {{icon_family}}-{{card_icon_size}} {{icon_family}}-{{card_icon_color}} card-icon-background-no-color card-icon-{{icon_family}}"></i>
-                          </a>
-                        </div>
-
-                        <div class="content">
-                          {% if card_title %}
-                          <h6 class="notoc category text-gray">{{card_title}}</h6>
-                          {% endif %}
-                          <h4 class="notoc card-title">{{card_tagline}}</h4>
-                          <p class="card-description">{{card_text}}</p>
-                          <div class="card-footer">
-                            {% for button_hash in card_buttons %}
-                            {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
-                            {{bs_button_html}}
-                            {% endfor %}
-                          </div>
-                        </div>
+              {% comment %} TODO: Style should be configurable
+              -------------------------------------------------------------- {% endcomment %}
+              {% assign card_style  = 'flat' %}
 
-                      </div>
-                    </div>
-                  {% endif %}
+              {% if card_type == 'text' and card_enabled and card_style == 'flat' %}
+              {% assign card_raised = 'raised-z0' %}
+
+              <!-- Card Block -->
+              <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-12">
+                <div class="media g-mb-15 {{card_raised}}">
+
+                  <div class="d-flex mr-4">
+                    <span class="g-color-primary">
+                      {% if card_icon_color == 'bg-primary' %}                      
+                        <i class="{{icon_family}} {{icon_family}}-{{card_icon}} {{icon_family}}-{{card_icon_size}} mdi-md-bg-primary"></i>
+                      {% else %}
+                        <i class="{{icon_family}} {{icon_family}}-{{card_icon}} {{icon_family}}-{{card_icon_size}} {{icon_family}}-{{card_icon_color}}"></i>
+                      {% endif %}
+                    </span>
+                  </div>
+
+                  <div class="media-body">
+                    <h4 class="g-font-weight-400 mt-3 g-mb-10">{{card_title}}</h4>
+                    <p class="md-grey-600 g-line-height-1_4">{{card_text}}</p>
+
+                    {% for data in card_buttons %} {% for item in data %} {% for button in item[1] %}
+                      {% assign key   = button[0] %}
+                      {% assign value = button[1] %}
+                      {% if key == 'text' %}       {% assign button_text       = value %} {% endif %}
+                      {% if key == 'class' %}      {% assign button_class      = value %} {% endif %}
+                      {% if key == 'icon' %}       {% assign button_icon       = value %} {% endif %}
+                      {% if key == 'icon_color' %} {% assign button_icon_color = value %} {% endif %}
+                      {% if key == 'icon_size' %}  {% assign button_icon_size  = value %} {% endif %}
+                      {% if key == 'href' %}       {% assign button_href       = value %} {% endif %}
+                      {% if key == 'target' %}     {% assign button_target     = value %} {% endif %}
+                    {% endfor %} {% endfor %}{% endfor %}
+
+                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover g-text-upper" href="{{button_href}}">{{button_text}}</a -->
+                  </div>
 
+                </div>
+              {% endif %}
+              </div>
+              <!-- End Card Block -->
               {% endfor %}
               {% comment %} END cards
               ------------------------------------------------------------------ {% endcomment %}
             </div>
+            <!-- End Cards -->
+
           </div>
-        </div> <!-- End panel {{ id }} -->
+        </section>
+        <!-- End Panel {{panel_settings.id}} -->
 
         {% comment %} Reset element variables (already processed)
         ------------------------------------------------------------------------ {% endcomment %}
@@ -307,9 +333,9 @@ regenerate:                             true
                 <!-- end service card -->
               {% endif %}
 
-          {% endfor %}
-          {% comment %} END cards
-          ---------------------------------------------------------------------- {% endcomment %}
+            {% endfor %}
+            {% comment %} END cards
+            ---------------------------------------------------------------------- {% endcomment %}
             </div>
           </div>
         </div>
@@ -325,207 +351,97 @@ regenerate:                             true
         {% comment %} Collect NEWS panel
         ------------------------------------------------------------------------ {% endcomment %}
         {% when 'news' %}
-        {% if debug %}<!-- panel_defaults:  {{panel_config_defaults.news}} -->{% endif %}
-        {% if debug %}<!-- panel_settings:  {{panel_settings}} -->{% endif %}
+
         {% assign panel_options = panel_config_defaults.news | merge: panel_settings %}
         {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}
-        <div id="{{panel_settings.id}}">
-          <div class="{{container_class}} j1-panel-block">
+        <section id="{{panel_settings.id}}">
+          <div class="container">
 
             {% if panel_options.title %}
-            <div class="panel-headline">
-              {% if panel_options.title %} {% assign title_id = "news_panel" %} {% endif %}
-              {% if panel_options.title %} <h2 id="{{title_id}}" class="title">{{panel_options.title}}</h2>{% endif %}
-              {% if panel_options.tagline %}<div class="tagline"> <p>{{panel_options.tagline}}</p> </div>{% endif %}
+            <!-- Heading -->
+            <div class="row g-g-mb-10">
+              <div class="col-lg-9">
+                <div class="{{panel_settings.animate}}">
+                  <h1 class="g-font-weight-500 g-mb-0">{{panel_options.title}}</h1>
+                  <p class="tagline"><b>{{panel_options.tagline}}</b></p>
+                  <div class="d-inline-block g-width-50 g-height-2 g-bg-primary g-mb-2"></div>
+                  <p class=" lead mb-10">{{panel_options.description}}</p>
+                </div>
+              </div>
             </div>
+            <!-- End Heading -->
             {% endif %}
 
-            <div class="row">
+            {% assign header_available  = false %}
+            {% assign card_items        = panel_options.cards | size %}
 
-              {% assign header_available = false %}
-              {% assign card_items = panel_options.cards | size %}
-
-              {% for card in panel_options.cards %}
-                {% for items in card %}
-                  {% for item in items[1] %}
-                    {% assign key   = item[0] %}
-                    {% assign value = item[1] %}
-                    {% if key == 'enabled' %}   {% assign card_enabled  = value %} {% endif %}
-                    {% if key == 'type' %}      {% assign card_type     = value %} {% endif %}
-                    {% if key == 'style' %}     {% assign card_style    = value %} {% endif %}
-                    {% if key == 'raised' %}    {% assign card_raised   = value %} {% endif %}
-                    {% if key == 'category' %}  {% assign post_category = value %} {% endif %}
-                    {% if key == 'max_posts' %} {% assign posts_max     = value %} {% endif %}
-                    {% if key == 'buttons' %}   {% assign card_buttons  = value %} {% endif %}
-                  {% endfor %}
-                  {% if card_enabled == false %}
-                    {% assign card_items = card_items | minus:1 %}
-                  {% endif %}
+            {% for card in panel_options.cards %}
+              {% for items in card %}
+                {% for item in items[1] %}
+                  {% assign key   = item[0] %}
+                  {% assign value = item[1] %}
+                  {% if key == 'enabled' %}       {% assign card_enabled  = value %} {% endif %}
+                  {% if key == 'type' %}          {% assign card_type     = value %} {% endif %}
+                  {% if key == 'style' %}         {% assign card_style    = value %} {% endif %}
+                  {% if key == 'raised' %}        {% assign card_raised   = value %} {% endif %}
+                  {% if key == 'category' %}      {% assign post_category = value %} {% endif %}
+                  {% if key == 'max_posts' %}     {% assign posts_max     = value %} {% endif %}
+                  {% if key == 'readmore_text' %} {% assign readmore_text = value %} {% endif %}
+                  {% if key == 'truncatewords' %} {% assign truncatewords = value %} {% endif %}
+                  {% if key == 'buttons' %}       {% assign card_buttons  = value %} {% endif %}
                 {% endfor %}
-
-                {% comment %} calculate columns
-                ---------------------------------------------------------------- {% endcomment %}
-                {% assign card_width = 12 | divided_by: card_items %}
-
-                <!-- Collect last current post -->
-                {% if card_type == "last_current" and card_enabled %}
-                {% assign posts_written = 0 %}
-                <div class="col-md-{{card_width}} col-sm-{{card_width}} col-xs-12">
-                  <div class="content">
-
-                  <!-- Last current post -->
-                  {% assign last_post_written = false %}
-                  {% for post in site.posts %}
-
-                    {% for category in post.categories %}
-                      {% if category == post_category and last_post_written != true %}
-
-                        <!-- Collect image data from frontmatter -->
-                        {% if post.image %}
-                          {% assign image_name = post.image.name %}
-                          {% assign image_path = post.image.path %}
-                          {% if post.image.random %}
-                            {% assign max_random  = image_name | regex_replace: '[a-zA-Z_-]*' %}
-                            {% assign max_random  = max_random | regex_replace: '\.' %}
-                            {% assign random      = max_random | rand %}
-                            {% assign image_name  = image_name | regex_replace: '\d+', random %}
-                          {% endif %}
-                          {% capture image %}{{image_path}}/{{image_name}}{% endcapture %}
-                        {% else %}
-                          {% assign image = 'false' %}
-                        {% endif %}
-
-                        <!-- Collect icon data from post frontmatter -->
-                        <!-- Set the default icon|family -->
-                        {% assign icon        = 'comment-alt' %}
-                        {% assign icon_family = 'zmdi' %}
-                        {% assign icon_color  = '#3F51B5' %}
-                        {% assign icon_size   = 'large' %}
-
-                        {% if post.icon %}
-
-                          {% assign icon         = post.icon.name | downcase %}
-                          {% assign icon_family  = post.icon.family %}
-                          {% assign icon_color   = post.icon.color %}
-                          {% assign icon_size    = post.icon.size %}
-
-                          {% if icon_family == "FontAwesome" %}
-                            {% assign icon_family = "fa" %}
-                          {% elsif icon_family == "Glyphicon" %}
-                            {% assign icon_family = "glyphicon" %}
-                          {% elsif icon_family == "MDI" %}
-                            {% assign icon_family = "mdi" %}
-                          {% elsif icon_family == "ZMDI" %}
-                            {% assign icon_family = "zmdi" %}
-                          {% endif %}
-
-                        {% endif %}
-
-                        {% include {{select_icon_size}} family=icon_family size="xxxlarge" %}
-                        {% assign icon_size = size %}
-
-                        {% include {{select_color}} color=icon_color fallback="#000"%}
-                        {% assign icon_color = color %}
-
-                        {% if icon != 'false' and image == 'false' %}
-                          <!-- icon != 'false' and image == 'false' -->
-                        {% endif %}
-
-                        {% if icon == 'false' and image == 'false' %}
-                          <!-- icon == 'false' and image == 'false' -->
-                        {% endif %}
-
-                        {% if image != 'false' %}
-                          <!-- image != 'false' -->
-                          <div class="card {{card_style}}">
-                            <div class="card-image">
-                              <img class="img" src="{{post.image}}" alt="{{post.title}}">
-                            </div>
-                            <div class="card-body">
-                              <span class="post-meta">{{post.date|date:"%Y %B, %e"}}</span>
-                              <h2 id="{{100000 | rand}}" class="card-title">{{post.title}}</h2>
-                              <h6 class="card-subtitle text-muted mb-2">{{post.tagline}}</h6>
-                              <div class="card-text"><p>{{post.excerpt}}</p></div>
-
-                              <div class="card-footer">
-                                <a href="{{post.url}}" target="blank" 
-                                  class="btn btn-primary btn-raised btn-flex">
-                                  <i class="mdi mdi-eye mdi-lg mdi-md-grey-50 mr-1"></i> 
-                                  Read More 
-                                </a>
-                              </div>
-
-                            </div>
-                          </div>
-                        {% endif %}                        
-
-                        {% assign last_post_written = true %}
-                        {% assign last_post_title = post.title %}
-                        {% break%}
-
-                      {% endif %}
-                    {% endfor %}
-                  {% endfor %}
-                  </div> <!-- end box current item -->
-                </div> <!-- end content current item -->
+                {% if card_enabled == false %}
+                  {% assign card_items = card_items | minus:1 %}
                 {% endif %}
+              {% endfor %}
 
-                <!-- Collect recent posts -->
-                {% if card_type == "recent" and card_enabled %}
-                <div class="col-md-{{card_width}} col-sm-{{card_width}} col-xs-12">
-                  <!-- Recent News (NewsBox) -->
-                  <div class="recent-news">
-                    <!-- loop counter correction -->
-                    {% comment %} 
-                    {% assign max_posts         = posts_max | minus:'1' %} 
-                    {% endcomment %}
-                    
-                    {% assign posts_written     = 0 %}
-                    {% assign last_post_written = false %}
-
-                    {% for post in site.posts %}
-                      {% for category in post.categories %}
-                        {% if category == post_category and last_post_written != true %}
-                        <div class="card-list-element">
-                          {% if post.title == last_post_title %} {% continue %} {% endif %}
-                          {% assign posts_written = posts_written | plus:'1' %}
-                          {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}
-                          <div class="card {{card_style}} mb-2">
-                            <div class="card-body">
-
-                              <span class="post-meta">{{post.date|date:"%Y %B, %e"}}</span>
-                              <h2 id="{{100000 | rand}}" class="card-title">{{post.title}}</h2>
-                              <h6 class="card-subtitle text-muted mb-2">{{post.tagline}}</h6>
-                              <div class="card-text"><p>{{post.excerpt | truncatewords: 100}}</p></div>
-
-                              <div class="card-footer">
-                                <a href="{{post.url}}" target="blank" 
-                                  class="btn btn-primary btn-raised btn-flex">
-                                  <i class="mdi mdi-eye mdi-lg mdi-md-grey-50 mr-1"></i> 
-                                  Read More 
-                                </a>
-                              </div>
-
-                            </div>
-                          </div>
-                        </div> <!-- end list-element -->
-                        {% endif %}
-
-                      {% endfor %}
-                    {% endfor %}
-
-                  </div> <!-- end recent news -->
-                </div> <!-- end recent news box -->
+              {% assign posts_written     = 0 %}
+              {% assign last_post_written = false %}
+              {% assign card_width = 12 | divided_by: posts_max %}
+
+              <!-- Recent posts -->
+              <div class="row">
+              {% for post in site.posts %} {% for category in post.categories %}
+                {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}
+
+                {% if category == post_category and last_post_written != true %}
+                  {% assign posts_written = posts_written | plus:'1' %}
+                  <!-- Post -->
+                  <div class="col-md-{{card_width}} col-sm-{{card_width}} col-xs-12">
+                    <article>
+                      {% if post.image %}
+                        <img class="img-fluid w-100" src="{{post.image}}" alt="{{post.title}}">
+                        {% assign post_width = '80x' %}
+                      {% else %}
+                        <img class="g-mt-50" src="" alt="">
+                        {% assign post_width = '100x' %}
+                      {% endif %}
+                      <div class="g-width-{{post_width}} g-bg-white-opacity-0_8 g-pos-rel g-z-index-1 g-pa-25 g-mt-minus-50 mx-auto">
+                        <span class="d-block md-grey-600 g-font-weight-600 g-font-size-12 g-text-upper g-mb-10">{{post.date|date:"%Y %B, %e"}}</span>
+                        <h4 class="g-font-weight-400 g-line-height-1_6 g-mb-10">
+                          <a class="g-text-underline--none--hover g-cursor-pointer" href="{{post.url}}">{{post.title}}</a>
+                        </h4>
+                        <!-- Excerpt -->
+                        <p class="g-line-height-1_4">
+                          {{post.excerpt|truncatewords:30|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}}
+                        </p>
+                        <!-- End Excerpt -->
+                        <a class="g-text-underline--none--hover g-font-weight-600 g-font-size-12 g-text-upper" href="{{post.url}}"><b>{{readmore_text}}</b></a>
+                      </div>
+                    </article>
+                   </div>
+                   <!-- End Post -->
                 {% endif %}
 
-              {% endfor %}
-            </div> <!-- end row -->
-
-            {% comment %} END boxes
-            -------------------------------------------------------------------- {% endcomment %}
+              {% endfor %} {% endfor %}
+              </div>
+              <!-- End recent posts -->
+            {% endfor %}
 
-          </div> <!-- end {{container_class}} -->
-        </div> <!-- end NEWS panel -->
+          </div>
+          <!-- END container -->
+        </section>
+        <!-- End news panel: {{panel_settings.id}} -->
 
         {% comment %} Reset element variables (already processed)
         ------------------------------------------------------------------------ {% endcomment %}
@@ -552,7 +468,7 @@ regenerate:                             true
                     Don't worry about this. Maybe you've a typo in the panel configuration.
                     Check the panel config file for the unknown type. <br />
                     Check for something wrong like:
-                    <div class="mt-2 mb-2">
+                    <div class="mt-2 g-mb-10">
                       <b>id:       {{panel_settings.id}}</b>  <br />
                       <b>type:     {{panel_settings.type}}</b> <br />
                       <b>comment:  {{panel_settings.comment}}</b>
@@ -572,7 +488,7 @@ regenerate:                             true
         {% comment %} END EXEPTION panel
         ------------------------------------------------------------------------ {% endcomment %}
 
-      {% endcase %}
+        {% endcase %}
       {% endif %} {% comment %} endif enabled {% endcomment %}
 
     {% endfor %}  {% comment %} END panels {% endcomment %}