Ticket #4879 - Stories Module.

modules/boonex/stories/classes/BxStoriesTemplate.php

@@ -114,6 +114,7 @@ class BxStoriesTemplate extends BxBaseModTextTemplate
             'summary' => $sSummary,
             'author' => $oProfile->getDisplayName(),
             'author_url' => $oProfile->getUrl(),
+            'author_icon' => $oProfile->getUnit(0, ['template' => 'unit_wo_info']),
             'entry_posting_date' => bx_time_js($aData[$CNF['FIELD_ADDED']], BX_FORMAT_DATE),
             'module_name' => _t($CNF['T']['txt_sample_single']),
             'ts' => $aData[$CNF['FIELD_ADDED']],

modules/boonex/stories/template/css/main.css

@@ -1,4 +1,47 @@
-/* flexbox */
+/**-- Story styles ---*/
+.bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-unit-showcase .bx-base-text-unit-cnt {
+    max-width: 10rem;
+}
+
+/*-- Story: phone --*/
+.bx-media-phone .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+   width:calc(50%);
+}
+.bx-media-phone2 .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+   width:calc(33.3%);
+}
+
+/*-- Story: tablet --*/
+.bx-media-tablet .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+    width:calc(100%);
+}
+.bx-media-tablet .bx-layout-column-half .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase,
+.bx-media-tablet .bx-layout-column-wide .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase,
+.bx-media-tablet .bx-layout-column-fullwidth .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+   width: calc(25%);
+}
+.bx-media-tablet2 .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+    width: calc(50%);
+}
+.bx-media-tablet2 .bx-layout-column-fullwidth .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+   width: calc(20%);
+}
+
+/*-- Story: desktop --*/
+.bx-media-desktop .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+    width:calc(50%);
+}
+.bx-media-desktop .bx-layout-column-half .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+    width:calc(25%);
+}
+.bx-media-desktop .bx-layout-column-wide .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+    width:calc(20%);
+}
+.bx-media-desktop .bx-layout-column-fullwidth  .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
+    width:calc(16.66%);
+}
+
+/**-- Media styles in a story ---*/
 .bx-stories-medias-wrapper {
     display: -webkit-box;
     display: -webkit-flex;
@@ -166,16 +209,6 @@
     width:100%;
     overflow: hidden;
 }
-
-.bx-stories-unit-image {
-    display: inline-block;
-    margin-right: 0.125rem;
-}
-
-.bx-stories-unit-image,
-.bx-stories-unit-image img {
-    height: 11.25rem;
-}
 .bx-stories-unit-image {
     display: -webkit-inline-flex;
     display: inline-flex;
@@ -183,9 +216,15 @@
     justify-content: center;
     -webkit-align-items: center;
     align-items: center;
+
+    margin-right: 0.125rem;
+}
+.bx-stories-unit-image,
+.bx-stories-unit-image img {
+    height: 11.25rem;
 }
 .bx-base-text-unit-gallery .bx-stories-unit-images-cont {
-    padding: 0.125rem 0.125rem 0 0.125rem;
+    padding: 0;
 }
 .bx-base-text-unit-gallery .bx-stories-unit-text-cont {
     line-height: 150%;
@@ -193,6 +232,15 @@
 .bx-base-text-unit-gallery .bx-stories-unit-text-cont .bx-base-text-unit-title {
     text-align: left;
 }
+.bx-stories-unit-author-icon {
+    position: absolute;
+    top: 0;
+}
+.bx-stories-unit-author-name {
+    position: absolute;
+    bottom: 0;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+}
 
 .bx-stories-media-file {
     text-align: center;    

modules/boonex/stories/template/images/icons/std-icon.svg

@@ -1,40 +1,27 @@
-<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_935_6804)">
-<path d="M160 0C281.326 0 320 38.6737 320 160C320 281.326 281.326 320 160 320C38.6736 320 0 281.326 0 160C0 38.6737 38.6736 0 160 0Z" fill="url(#paint0_linear_935_6804)"/>
-<path d="M160 2C220.573 2 259.85 11.6833 284.083 35.9168C308.317 60.1504 318 99.4272 318 160C318 220.573 308.317 259.85 284.083 284.083C259.85 308.317 220.573 318 160 318C99.4272 318 60.1504 308.317 35.9168 284.083C11.6833 259.85 2 220.573 2 160C2 99.4272 11.6833 60.1504 35.9168 35.9168C60.1504 11.6833 99.4272 2 160 2Z" stroke="#0F172A" stroke-opacity="0.2" stroke-width="4"/>
-<g clip-path="url(#clip1_935_6804)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M81.9394 81.0474C79.5575 84.9494 83.9695 89.1266 88.2974 87.6542C104.079 82.2851 124.353 80.0001 150 80.0001C233.412 80.0001 260 104.171 260 180V180C260 183.888 264.49 184.914 265.521 181.165C268.63 169.855 270 156.245 270 140C270 71.7539 245.829 50 170 50C122.941 50 95.7774 58.3782 81.9394 81.0474Z" fill="url(#paint1_linear_935_6804)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M50 180C50 111.754 74.1711 90 150 90C225.829 90 250 111.754 250 180C250 248.246 225.829 270 150 270C74.1711 270 50 248.246 50 180ZM147.679 150C155.377 136.667 174.623 136.667 182.321 150L216.962 210C224.66 223.333 215.037 240 199.641 240H130.359C114.963 240 105.34 223.333 113.038 210L147.679 150ZM105 170C118.807 170 130 158.807 130 145C130 131.193 118.807 120 105 120C91.1929 120 80 131.193 80 145C80 158.807 91.1929 170 105 170Z" fill="url(#paint2_linear_935_6804)"/>
-<path d="M156.34 155C160.189 148.333 169.811 148.333 173.66 155L208.301 215C212.15 221.667 207.339 230 199.641 230H130.359C122.661 230 117.85 221.667 121.699 215L156.34 155Z" fill="url(#paint3_linear_935_6804)"/>
-<circle cx="105" cy="145" r="15" fill="url(#paint4_linear_935_6804)"/>
-</g>
-</g>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="80" height="80" fill="url(#paint0_linear_2420_10315)"/>
+<path d="M22.2529 27C23.015 27 23.5862 27.7018 23.5007 28.4591C23.2782 30.4306 23.2782 32.9531 23.2782 36.3V47.6667C23.2782 51.4779 23.2782 54.2201 23.6068 56.297C23.742 57.1513 23.1178 58 22.2529 58C17.4196 58 15.003 58 13.5015 56.4867C12 54.9734 12 52.5378 12 47.6667V37.3333C12 32.4622 12 30.0266 13.5015 28.5133C15.003 27 17.4196 27 22.2529 27Z" fill="black" fill-opacity="0.2"/>
+<path d="M56.3932 56.297C56.258 57.1513 56.8822 58 57.7471 58C62.5804 58 64.997 58 66.4985 56.4867C68 54.9734 68 52.5378 68 47.6667V37.3333C68 32.4622 68 30.0266 66.4985 28.5133C64.997 27 62.5804 27 57.7471 27C56.985 27 56.4138 27.7018 56.4993 28.4591C56.7218 30.4306 56.7218 32.9531 56.7218 36.3V47.6667C56.7218 51.4779 56.7218 54.2201 56.3932 56.297Z" fill="black" fill-opacity="0.2"/>
+<path d="M27 34C27 29.286 27 26.9289 28.4645 25.4645C29.9289 24 32.286 24 37 24H43C47.714 24 50.0711 24 51.5355 25.4645C53 26.9289 53 29.286 53 34V51C53 55.714 53 58.0711 51.5355 59.5355C50.0711 61 47.714 61 43 61H37C32.286 61 29.9289 61 28.4645 59.5355C27 58.0711 27 55.714 27 51V34Z" fill="black" fill-opacity="0.2"/>
+<path d="M22.2529 21C23.0231 21 23.6053 21.6973 23.5242 22.4633C23.2782 24.7859 23.2782 27.7812 23.2782 31.8V45C23.2782 49.5901 23.2782 52.8451 23.6448 55.2876C23.7754 56.1581 23.1332 57 22.2529 57V57C17.4196 57 15.003 57 13.5015 55.2426C12 53.4853 12 50.6569 12 45V33C12 27.3431 12 24.5147 13.5015 22.7574C15.003 21 17.4196 21 22.2529 21V21Z" fill="url(#paint1_linear_2420_10315)"/>
+<path d="M56.3552 55.2876C56.2246 56.1581 56.8668 57 57.7471 57V57C62.5804 57 64.997 57 66.4985 55.2426C68 53.4853 68 50.6569 68 45V33C68 27.3431 68 24.5147 66.4985 22.7574C64.997 21 62.5804 21 57.7471 21V21C56.9769 21 56.3947 21.6973 56.4758 22.4633C56.7218 24.7859 56.7218 27.7812 56.7218 31.8V45C56.7218 49.5901 56.7218 52.8451 56.3552 55.2876Z" fill="url(#paint2_linear_2420_10315)"/>
+<rect x="27" y="18" width="26" height="42" rx="5" fill="url(#paint3_linear_2420_10315)"/>
 <defs>
-<linearGradient id="paint0_linear_935_6804" x1="160" y1="0" x2="160" y2="320" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F8FAFC"/>
-<stop offset="1" stop-color="#E2E8F0"/>
+<linearGradient id="paint0_linear_2420_10315" x1="40" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41948D"/>
+<stop offset="1" stop-color="#21413F"/>
 </linearGradient>
-<linearGradient id="paint1_linear_935_6804" x1="175.635" y1="50" x2="175.635" y2="183.504" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7DD3FC"/>
-<stop offset="1" stop-color="#0EA5E9"/>
+<linearGradient id="paint1_linear_2420_10315" x1="18" y1="21" x2="18" y2="57" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9FAFB"/>
+<stop offset="1" stop-color="#9CA3AF"/>
 </linearGradient>
-<linearGradient id="paint2_linear_935_6804" x1="150" y1="90" x2="150" y2="270" gradientUnits="userSpaceOnUse">
-<stop stop-color="#60A5FA"/>
-<stop offset="1" stop-color="#2563EB"/>
+<linearGradient id="paint2_linear_2420_10315" x1="62" y1="21" x2="62" y2="57" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9FAFB"/>
+<stop offset="1" stop-color="#9CA3AF"/>
 </linearGradient>
-<linearGradient id="paint3_linear_935_6804" x1="165" y1="140" x2="165" y2="260" gradientUnits="userSpaceOnUse">
-<stop stop-color="#34D399"/>
-<stop offset="1" stop-color="#059669"/>
-</linearGradient>
-<linearGradient id="paint4_linear_935_6804" x1="105" y1="130" x2="105" y2="160" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FB923C"/>
+<linearGradient id="paint3_linear_2420_10315" x1="40" y1="18" x2="40" y2="60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCD34D"/>
 <stop offset="1" stop-color="#EA580C"/>
 </linearGradient>
-<clipPath id="clip0_935_6804">
-<rect width="320" height="320" fill="white"/>
-</clipPath>
-<clipPath id="clip1_935_6804">
-<rect width="240" height="240" fill="white" transform="translate(40 40)"/>
-</clipPath>
 </defs>
 </svg>

modules/boonex/stories/template/unit_showcase.html

@@ -1,18 +1,20 @@
 <div class="__class__ bx-base-text-unit bx-base-text-unit-gallery bx-def-gal-unit-size p-2">
-    <div class="bx-base-text-unit-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box mb-3 md:mb-4 lg:mb-6 text-left">
+    <div class="bx-base-text-unit-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box relative text-left">
+        <div class="bx-stories-unit-author-icon pl-4 pt-4 ">__author_icon__</div>
         <div class="bx-stories-unit-images-cont">
             <bx_if:thumb>
                 <a href="__content_url__" <bx_if:show_thumb_onclick>onclick="javascript:__content_onclick__"</bx_if:show_thumb_onclick> title="__summary_attr__">
-                    <div class="shrink-0 m-1">
-                        <img class="bx-def-round-corners aspect-video object-cover bg-cover w-full" alt="__title__" style="background-image:url(__gallery_url__); __image_settings__" src="<bx_icon_url:spacer.gif />"  />
+                    <div class="shrink-0">
+                        <img class="bx-def-box-round-corners aspect-portrait object-cover bg-cover w-full" alt="__title__" style="background-image:url(__gallery_url__); __image_settings__" src="<bx_icon_url:spacer.gif />"  />
                     </div>
                 </a>
             </bx_if:thumb>
             <bx_if:no_thumb>
-                <div class="bx-def-gal-img-column shrink-0 m-1">
-                    <div class="bx-base-text-unit-no-thumb bx-def-round-corners flex flex-col items-center justify-center aspect-video p-4 bg-gradient-to-b from-red-400 to-red-500 box-border"></div>
+                <div class="shrink-0">
+                    <div class="bx-base-text-unit-no-thumb bx-def-box-round-corners flex flex-col items-center justify-center aspect-portrait p-4 bg-gradient-to-b from-red-400 to-red-500 box-border"></div>
                 </div>
             </bx_if:no_thumb>
         </div>
+        <div class="bx-stories-unit-author-name pl-4 pb-4 text-white font-base font-medium">__author__</div>
     </div>
 </div>

tailwind.config.full.js

@@ -75,6 +75,7 @@ module.exports = {
           auto: 'auto',
           square: '1 / 1',
           video: '16 / 9',
+          portrait: '9 / 16',
           1: '1',
           2: '2',
           3: '3',

tailwind.config.js

@@ -164,6 +164,7 @@ module.exports = {
           auto: 'auto',
           square: '1 / 1',
           video: '16 / 9',
+          portrait: '9 / 16',
           1: '1',
           2: '2',
           3: '3',