Merge pull request #408 from magefan/6047-improve-module-blog

6047-improve-module-blog [in progress]

Author: magefan

view/frontend/templates/post/view-modern.phtml

@@ -37,7 +37,7 @@
             <?php }  ?>
 
             <!-- block data -->
-            <div class="post-data-wrap mb-5">
+            <div class="post-data-wrap mb-4">
                 <!-- post author -->
                 <?php if ($block->authorEnabled()) { ?>
                     <?php if ($_author = $_post->getAuthor()) { ?>
@@ -127,7 +127,7 @@
         </div>
 
         <div class="post-bottom">
-            <div class="post-sharing-bottom mb-4">
+            <div class="post-sharing-bottom">
                 <!-- Go to www.addthis.com/dashboard to customize your tools -->
                 <div class="addthis_inline_share_toolbox" addthis:url="<?= $block->escapeUrl($_postUrl) ?>"></div>
             </div>

view/frontend/templates/post/view/gallery.phtml

@@ -27,7 +27,7 @@
                data-fancybox="gallery"
                href="<?= $block->escapeUrl($image) ?>"
                rel="nofollow">
-                <img class="gallery-image" src="<?= $block->escapeUrl($image->resize(200)) ?>" alt="" />
+                <img class="gallery-image" src="<?= $block->escapeUrl($image->resize(200, 133)) ?>" alt="" />
             </a>
         <?php } ?>
     </div>

view/frontend/templates/post/view/relatedproducts.phtml

@@ -38,7 +38,7 @@ if ($exist = $block->getItems()->getSize()) {
 
     <?php if ($type == 'related' || $type == 'upsell'): ?>
         <?php if ($type == 'related'): ?>
-            <div class="block <?= $block->escapeHtml($class); ?>"
+            <div class="mfblog-replated-products-block block <?= $block->escapeHtml($class); ?>"
                  data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}'
                  data-limit="<?= $block->escapeHtml($limit); ?>"
                  data-shuffle="<?= $block->escapeHtml($shuffle); ?>">

view/frontend/web/css/blog-m.css

@@ -41,11 +41,20 @@
 
 .post-content .post-description img {margin: 15px 0;max-width: 100%;height: auto}
 .post-content .post-description ul,
-.post-content .post-description ol {list-style-position: inside;}
+.post-content .post-description ol {list-style-position: outside;}
+
+.post-content .post-description .mfblog-contents li {display: list-item;}
+.post-content .post-description .mfblog-contents li li {margin-left: 15px;}
 
 .post-content .post-description .post-ftimg-hld {margin: 0 0 10px 0;}
 .post-content .post-description .post-ftimg-hld img {width:100%; padding:0; margin:0;}
 
+.post-content .post-description .mfblog-contents-toc {list-style: decimal;}
+.post-content .post-description .mfblog-contents-toc li {margin-bottom: 1rem;}
+.post-content .post-description .mfblog-contents-toc li:before {content: none;}
+.post-content .post-description .mfblog-contents-toc li a {display: inline;}
+
+
 /* Post Title */
 .post-list .post-header .post-title-holder {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}
 .post-list .post-header .post-title {margin: 0;padding: 10px 0;}
@@ -60,7 +69,7 @@
 .post-view .post-nextprev-hld .prev-link {float:left}
 .post-view .post-nextprev-hld .next-link {float:right}
 
-/* Post Gallery */ 
+/* Post Gallery */
 .post-view .post-gallery {margin:15px 0 15px 0}
 .post-view .post-gallery .gallery-image-hld {margin: 0 14px 14px 0; border:1px solid #ccc; display: block; float:left}
 .post-view .post-gallery .gallery-image{padding: 0; margin:0; display:block}

view/frontend/web/css/blog-new.css

@@ -1,11 +1,22 @@
 /* All Widget Templates ************************************************************************************************
 ***********************************************************************************************************************/
-.fav-color-green {color: #4caf50;color: #28a745;}
-.fav-color-yellow {color: #f9c100;color: #ffc107;}
+body.blog-page {
+    --color-white: #ffffff;
+    --color-green: #28a745;
+    --color-yellow: #ffc107;
+    --color-blue: #4db2ec;
+    --color-black: #222222;
+    --color-gray: #6c757d;
+    --color-red: #dc3545;
+    --border-color: #d5d6da;
+}
+
+.fav-color-green {color: #28a745;}
+.fav-color-yellow {color: #ffc107;}
 .fav-color-blue {color: #4db2ec;}
 .fav-color-black {color: #222222;}
-.fav-color-gray {color: #607d8b;color: #6c757d;}
-.fav-color-red {color: #f44336;color: #dc3545;}
+.fav-color-gray {color: #6c757d;}
+.fav-color-red {color: #dc3545;}
 
 
 /* Buttons */
@@ -25,15 +36,11 @@
 .clearfix:after {content:"";display:table;clear:both;}
 
 .post-holder {margin-bottom: 40px;border-radius: 0;}
-/*
-.fa, .fas {font-family:'FontAwesome';font-weight: 900;font-size: 48px;}
-button {box-shadow: none !important;}
- */
-/** {zoom: 1;}*/
+
 
 
 /* Blog Post List *****************************************************************************************************/
-.post-list {margin-top: 0px;margin-bottom: 20px;list-style: none;padding-left: 0}
+.post-list {margin-top: 0;margin-bottom: 20px;list-style: none;padding-left: 0}
 .post-list .post-item.post-holder {margin: 0 0 30px 0;padding: 0;display: block;}
 .post-list .post-container {display: -ms-flexbox;display: flex;}
 
@@ -119,11 +126,10 @@ button {box-shadow: none !important;}
 .blog-post-view .post-featured-image {font-size: 0;margin-bottom: 20px;}
 /* Tags */
 .blog-post-view .post-tag {margin-bottom: 20px;}
-.blog-post-view .post-tag .post-tag-title {display: inline-block;padding: 7px 12px;border: 1px solid #222;background: #222; color: #fff;line-height: 1;margin-right: 10px;text-transform: uppercase;font-size: 11px;}
-.blog-post-view .post-tag .post-tags a {display: inline-block;border: 1px solid #e8e8e8;color: #222;background: #fff;padding: 7px 12px;margin-right: 10px;line-height: 1;font-weight: 600;letter-spacing: 1px;font-size: 11px;text-transform: capitalize;}
+.blog-post-view .post-tag .post-tag-title {display: inline-block;padding: 7px 12px;border: 1px solid #222;background: #222;color: #fff;line-height: 1;margin: 0 10px 10px 0;text-transform: uppercase;font-size: 11px;}
+.blog-post-view .post-tag .post-tags a {display: inline-block;border: 1px solid var(--border-color);color: #222;background: #fff;padding: 7px 12px;margin-right: 10px;line-height: 1;font-weight: 600;letter-spacing: 1px;font-size: 11px;text-transform: capitalize;}
 .blog-post-view .post-tag .post-tags a.current,
-.blog-post-view .post-tag .post-tags a:hover {text-decoration: none;opacity: .9; background: #333;color: #fff;}
-
+.blog-post-view .post-tag .post-tags a:hover {text-decoration: none;opacity: .9;background: #333;color: #fff;}
 
 /* Post Text */
 .blog-post-view .post-description {margin-bottom: 30px;}
@@ -133,20 +139,27 @@ button {box-shadow: none !important;}
 .post-view .post-bottom {margin-top:30px;}
 
 /* Post Sharing Bottom */
-.post-sharing-bottom {padding: 30px 0;margin-bottom: 20px;border-top: 1px solid #d5d6da;border-bottom: 1px solid #d5d6da;}
+.post-sharing-bottom {padding: 30px 0;margin-bottom: 30px;border-top: 1px solid var(--border-color);border-bottom: 1px solid var(--border-color);}
 .post-sharing-bottom .addthis_inline_share_toolbox {text-align: center;}
 
+/* Post Gallery */
+/*.blog-post-view .post-gallery {display: flex;flex-wrap: wrap;}*/
+.blog-post-view .post-gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));grid-gap: 1rem;margin-bottom: 20px;}
+.blog-post-view .post-gallery .gallery-image-hld {display: inline-block;}
+.blog-post-view .post-gallery .gallery-image-hld img {}
+
 /* Post Navigation */
-.blog-post-view .post-nextprev  {margin-bottom: 30px;display: flex;padding: 20px 0;}
+.blog-post-view .post-nextprev  {display: flex;padding: 20px 0;margin-bottom: 30px;border-top: 1px solid var(--border-color);border-bottom: 1px solid var(--border-color);}
 .blog-post-view .post-nextprev .nextprev-link {display: block;font-size: 20px;color: #222222;font-weight: 600;}
 .blog-post-view .post-nextprev .nextprev-link:hover {text-decoration: none;}
 .blog-post-view .post-nextprev .nextprev-link span {display: block;color: #bbbbbb;font-size: 14px;font-weight: normal;}
 
 /* Block Related */
 .blog-post-view .post-bottom .block.related {margin-bottom: 0;}
-.mfblog-replated-posts-block.block.related .block-title {margin: 0 0 25px;padding: 5px 0;border-bottom: 1px solid #222222;line-height: 1.42857143;}
-.mfblog-replated-posts-block.block.related .block-title strong {border-bottom: 3px solid #222222;padding-bottom: 2px;font-weight: 400;font-size: 18px;}
+.blog-post-view .post-bottom .block.related .block-title {margin: 0 0 25px;padding: 5px 0;border-bottom: 1px solid #222222;line-height: 1.42857143;}
+.blog-post-view .post-bottom .block.related .block-title strong {border-bottom: 3px solid #222222;padding-bottom: 2px;font-weight: 400;font-size: 18px;}
 
+/* Related Posts */
 .mfblog-replated-posts-block.block.related .post-list {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;
     position: relative;overflow: hidden;margin-left: -10px;margin-right: -10px;}
 .mfblog-replated-posts-block.block.related .post-list .post-item {-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;margin-bottom: 2rem !important;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;padding-left: 10px;padding-right: 10px;width: 25%; box-sizing: border-box;}
@@ -161,6 +174,10 @@ button {box-shadow: none !important;}
     .mfblog-replated-posts-block.block.related .post-list .post-item {flex: 0 0 50%;max-width: 50%;}
 }
 
+/* Related Products */
+.mfblog-replated-products-block.block.related .block-title {margin: 0 0 25px;padding: 5px 0;border-bottom: 1px solid #222222;line-height: 1.42857143;}
+.mfblog-replated-products-block.block.related .block-title strong {border-bottom: 3px solid #222222;padding-bottom: 2px;font-weight: 400;font-size: 18px;}
+
 /* Block Comments */
 .block.comments .c-count {margin: 0 0 20px;padding: 0;border-bottom: 1px solid #222222;font-weight: 400;}
 .block.comments .c-count strong {border-bottom: 3px solid #222222;padding-bottom: 2px;font-weight: 400;font-size: 18px;display: inline-block;}
@@ -172,19 +189,22 @@ button {box-shadow: none !important;}
 }
 /* END Post View ******************************************************************************************************/
 
+
 /* Animation Zoom */
 .image-wrap .animation-type-zoom {display: block;line-height: 0;overflow: hidden;position: relative;}
 .image-container .animation-type-zoom {-webkit-transition: transform .3s ease,opacity .3s;transition: transform .3s ease,opacity .3s;}
 .image-container:hover .animation-type-zoom {transform: scale3d(1.1,1.1,1);  -webkit-transform: scale3d(1.1,1.1,1);}
 
+
+/* Sidebar ************************************************************************************************************/
 /* Block Search */
 .widget.blog-search {width:100%;margin-bottom: 40px;position: relative;float: right;}
 .widget.blog-search .block-content {margin-bottom: 0;}
 .widget.blog-search .block-content .form {position: relative;}
 .widget.blog-search  label {border: 0;clip: rect(0, 0, 0, 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;text-decoration: none;display: inline-block;float: right;}
 .widget.blog-search .control {border-top: 0;margin: 0;padding: 0;clear: both;}
 .widget.blog-search input {position: static;padding-right: 35px;margin: 0;left: -300%;border: 1px solid #bbbbbb;}
-.widget.blog-search .action.search {position: absolute;top: 0;right: 0px;bottom: 0;height: 100%;z-index: 1;display: inline-block;background: #222222;-moz-box-sizing: content-box;border: 0;box-shadow: none;line-height: inherit;margin: 0;padding: 0 10px;text-decoration: none;text-shadow: none;font-weight: 400;border-radius: 0;}
+.widget.blog-search .action.search {position: absolute;top: 0;right: 0;bottom: 0;height: 100%;z-index: 1;display: inline-block;background: #222222;-moz-box-sizing: content-box;border: 0;box-shadow: none;line-height: inherit;margin: 0;padding: 0 10px;text-decoration: none;text-shadow: none;font-weight: 400;border-radius: 0;}
 .widget.blog-search .action.search:before {-webkit-font-smoothing: antialiased;content: '';margin: 0;vertical-align: top;display: inline-block;overflow: hidden;speak: none;width: 16px;height: 32px;background: url(../images/search-icon-white.svg) no-repeat -10px -7px;background-size: 35px;opacity: 1;}
 .widget.blog-search .action.search > span {border: 0;clip: rect(0, 0, 0, 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
 /*.blog-search .actions .action.search {background: #222222;right: 0;padding: 0 10px;border-radius: 0;}*/

view/frontend/web/css/bootstrap-4.4.1-custom-min.css

@@ -1,6 +1,5 @@
 /* Bootstrap v4.4.1 custom min ***************************************************************************************************/
 /* padding */
-
 .p-0 {padding: 0 !important;}
 .p-2 {padding: 0.5rem !important;}
 .pl-2, .px-2 {padding-left: 0.5rem !important;}
@@ -32,7 +31,7 @@
 .mt-4, .my-4 {margin-top: 1.5rem !important;}
 .mb-4, .my-4 {margin-bottom: 1.5rem !important;}
 .mt-5, .my-5 {margin-top: 3rem !important;}
-.mb-5, .my-5 {margin-bottom: 5px !important;}
+.mb-5, .my-5 {margin-bottom: 3rem !important;}
 @media (min-width: 768px) {
     .mb-md-0 {margin-bottom: 0 !important;}
     .mb-md-3 {margin-bottom: 1rem !important;}