Okay
  Public Ticket #2070370
mobile optimizations
Closed

Comments

  •  2
    Calin started the conversation
    July 5, 2019 at 5:48am

    Hi. I have a few questions about some UI optimizations for mobile.

    1. when expanding a sub-menu on mobile, it does not collapse back when clicking again on the parent item or the dropdown arrow

    2. on pages such as these https://caligrafik.ro/servicii/caricaturi-personalizate-la-comanda/ i have photo galleries. On mobile, the images are displayed one under another, which make the page very long, essentially burying the content below it. It would be great if this could turn into a carousel with left/right arrows to navigate it. Is this possible?

    3. on the portfolio page, the portfolio categories flow on multiple lines on mobile, which makes it look cluttered and messy. Is is possible to replace this on mobile with an icon, which triggers a flyout or expandable section of the portfolio categories?

    Thanks.

  • [deleted] replied
    July 8, 2019 at 1:43pm

    Hi Calin,

    1. I saw this is issue of the theme so I have fixed it, to apply on your site please replace the JavaScript file (assets/js):

    https://d.pr/f/QASGkH

    2. I have accessed that page but didn't saw galleries. In order to turn galleries into carousels you need to add custom code for example:

    if ( $( window ).width() < 768 ) {
    $( '.gallery' ).slick( {
        // options
    } );
}
    3. Yes you can do this, basically you have to define your icons in images for example, and then on mobile devices you can remove the text and apply the icon for example:

    @media screen and (max-width: 768px) {
    .product-filter .portfolio-category-item a {
        width: 20px;
        background: red;
        height: 20px;
        overflow: hidden;
        color: transparent;
        background: url(../images/icon.png) no-repeat center;
    }
}
    I hope this will help you.

  •  2
    Calin replied
    July 8, 2019 at 3:45pm

    Hey,

    1. i uploaded the file but doesn't seem to work. when tapping on it again it changes adds "/#" at the end and doesn't close.

    2. can you check the page again? it should show now. what can i write instead of "//options"?

  •  2
    Calin replied
    July 8, 2019 at 8:21pm

    Regarding 3. i think you misunderstood my intention. I don't want to change all labels with icons. I need to have only 1 button, which, when clicked, opens a flyout in which there's a vertical list of my portfolio categories. It's more than changing text with icons. I think it needs more dev.

  • [deleted] replied
    July 9, 2019 at 11:46am

    Hi Calin,

    I have created a snippet to make gallery turn as carousel on screens smaller than 768px (Footer JavaScript):

    <script>
var slick = {
    js: document.createElement( 'script' ),
    css: document.createElement( 'link' ),
};
slick.js.src = 'https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js';
slick.css.href = 'https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.min.css';
slick.css.rel = 'stylesheet';
slick.js.onload = function() {
    initializeGallery();
    jQuery( window ).on( 'grid:items:added', jQuery.debounce( 50, initializeGallery ) );
}
function initializeGallery() {
    if ( initializeGallery.hasOwnProperty( 'initialized' ) ) {
        return;
    }    
    var $wrapper = jQuery( '.vc_grid-container .vc_pageable-slide-wrapper' ),
        winWidth = jQuery( window ).width();
    if ( winWidth <= 768 ) {
        if ( $wrapper.find( '.vc_grid-item' ).length > 1 ) {
            $wrapper.flickity( {
                pageDots: false,
            } );
            initializeGallery.initialized = true;
        }
    }
}
document.body.appendChild( slick.css );
document.body.appendChild( slick.js );
</script>

    And also add this CSS:

    .vc_grid.vc_row .vc_grid-item {
    width: 100%;
}

    Please note that this is not covered by our support, this is custom work and I did it for you this time only.

    Edit:

    The video how it works: https://d.pr/v/D68emK

  • [deleted] replied
    July 9, 2019 at 11:55am

    Regarding the menu slide down here is a video that shows how it works:

    https://d.pr/v/73tv9i