First load Scrolling content in mobile viewport to show 1.5 items like desktop

Chi-K

Hi, is there a way i can enable the same behavior of the scrolling content for blog items like that in desktop, but on the mobile. Something like below. Right now the mobile view will have the content showing exactly 1 content on load.

it would be nice to retain the same behavior on desktop with no "locking to grid" effect just a smooth left right scroll and 1 and quarter or 1 half content visible on load.

dominic

Hi Chi-K,
At the moment, showing this layout on a mobile is not a good view. If you want to show this, you can try with the following CSS code:

@media (max-width: 480px) {
.section-articles .owl-carousel .owl-stage-outer .owl-item.active:not(:last-child) {
    width: 282px !important;
    margin-bottom: 40px;
}
}

Hope this helps!

Chi-K

Ive added it. It looks fine, but doesnt work fine because there is the "lock to grid" effect blocking a smooth pull. I've included the login details if you could see how that effect can be turned off in mobile.

We are trying to mimic the effect found in booking.com mobile site below.

dominic

Hi Chi-K,
I have updated the following js code in the: /templates/ja_alpha/html/mod_articles_category/slide.php file:

<script>
(function($){
  jQuery(document).ready(function($) {
    
    if ( $(window).width() > 480 ) {
        startCarousel();
      } else {
        $('#mod-articles-<?php echo $module->id; ?> .owl-carousel').addClass('off');
      }

    $(window).resize(function() {
        if ( $(window).width() > 480 ) {
          startCarousel();
        } else {
          stopCarousel();
        }
    });
  
  function startCarousel(){
    
    $("#mod-articles-<?php echo $module->id; ?> .owl-carousel").owlCarousel({
      addClassActive: true,
      items: 2,
      singleItem : true,
      itemsScaleUp : true,
      nav : true,
      navText : ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"],
      dots: true,
      merge: false,
      mergeFit: true,
      margin: 36,
      slideBy: 1,
      autoHeight: false,
      animateOut: 'fadeOut',
      autoplaySpeed: 1200,
      smartSpeed: 1400,
      loop: false,
      autoplay: false,
      responsive : {
				0 : {
			    items: 1,
			    autoHeight: true
				},
				767 : {
			    items: 1,
			    autoHeight: true
				},
				1200 : {
			    items: 2,
			    autoHeight: false
				}
			}
    });
  }
  
  function stopCarousel() {
    var owl = $('#mod-articles-<?php echo $module->id; ?> .owl-carousel');
    owl.trigger('destroy.owl.carousel');
    owl.addClass('off');
  }
    
  });
})(jQuery);
</script>

And add the following CSS code to the Backend > Site template styles > JA Alpha - default > Tools > Custom CSS:

/*dominic - cto owl-carousel*/
@media (max-width: 480px) {
.owl-carousel.off {
    display: block;
}
.owl-carousel.off .item-inner {
    width: 300px;
    flex: 0 0 auto;
    margin-right: 15px;
}

.owl-carousel.off .item-inner:last-child {
    margin-right: 0;
}

.owl-carousel.off {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    scroll-behavior: smooth;
    justify-content: flex-start;
}
}

You can check your site now.

Chi-K

Oh wow that actually worked! There is one other small thing. Is it possible to remove the left right padding (Right removed if its the first results onwards) and left padding when its scrolled.

This same behavior is also already on the desktop version as well. Its an awesome stuff though even at its current iteration.

A sample from booking.com

(1) has padding because no more content left. (2) no padding because more content right.

(3) no padding as has content left, (4) has padding as no more content right

Chi-K

It would be awesome if we could control the radius as well of the 4 edges

Chi-K

I found one more little improvement that could be made.. the line height at (1) on mobile is too much, while the height between the two content (2) is too little...

Chi-K

I have also tried to add this same module in section-3 and trying to do this following modifications. How should i add these mods such that it only affects the module in section-3 and wont affect the same module further below? Thanks!

dominic

Hi Chi-K,
I have helped you update the CSS code, you can check your site now. Also, I have added the following class to the module to fix the 1-2, 3-4 issues.

About the last issue, if the module does not enable the button, we need to hide this HTML tag and I have added the "hidden-btn-group" class to the module:

Also, to resolve the color issue, you can go to the Backend > site template styles > ja alpha - default > theme color > Palettes section and edit the color for the primary section.

And I have used the following CSS code to change the color of the title and content in the items:

.item-black-color .owl-item .article-content, .item-black-color .owl-item .article-content .title a {
    color: #2e2e2e !important;
}

Chi-K

Thanks. thats awesome.. this could actually be a module by itself for a future booking.com like template. Would love to see a template like that.

There is bit of issue still though.

1) In mobile, the category is off. In desktop its aligned with the text below

Chi-K

A side question, why do you not add a space here, when in some places need the space before the classname

dominic

Hi Chi-K,
You can add the following CSS code to your site:

@media (max-width: 480px) {
.mod-article-list .intro-image .category-name {
      left: 32px;
} 
}

About the class, we have improved this section. So, you don't need the space before the class name.

Chi-K

dominic referring back to this, may i know then why if i add a space, then the styling will break.

dominic

Hi Chi-K,
Could you let me know the position that you mentioned here? send me a screenshot for further checking.

If you add a space between class names in the class attribute of an HTML element, it shouldn't break styling by default. HTML parsers typically ignore extra white spaces, including multiple spaces, within attribute values. Therefore,
<div class="classname1 space space classname2"></div> is functionally equivalent to <div class="classname1 space classname2"></div>.

Chi-K

its this one

if there is a space .. this happens

dominic

Hi Chi-K,
I have checked and I was mistaken in this section, I have updated the following CSS code:

.section.mobile-mr-none {
    margin-left: -18px;
    margin-right: -18px;
}

.section.mobile-mr-none .top-articles-info,
.section.mobile-mr-none .section-title-wrap.spacer-small{
    padding: 0 18px;
}

NOTE: You should add a space before the class name.

Chi-K

Thanks so much for the clarification that was awesome. I think its all good .