View Issue Details

IDProjectCategoryView StatusLast Update
0018390phplist applicationTheme - bootstrappublic19-07-17 15:48
Reportersamtuke 
PrioritynormalSeverityminorReproducibilityhave not tried
Status resolvedResolutionfixed 
Product Version 
Target Version3.3.2Fixed in Version3.3.2 
Summary0018390: Make all tabs on 'Send a campaign' page visible on wider screens
DescriptionCurrently the tabs on the 'send a campaign' page (e.g. content, format, scheduling) are hidden when more tabs are present than the container width allows. Various phpList plugins add tabs to this page (e.g. RSS Feed plugin, segment plugin). When more than 6 tabs are present, they must be scrolled using the small arrows that appear, even when the screen is wide enough to show them all.

Make the visible area of the tabs wide enough so that they can all be viewed side by side if the screen is wide enough.
TagsNo tags attached.

Relationships

has duplicate 0018448 resolvedmariez Tabs not displayed properly when editing a campaign 

Activities

samtuke

07-11-16 18:54

administrator  

Selection_066.png (11,868 bytes)
Selection_066.png (11,868 bytes)

mariez

15-12-16 23:15

developer   ~0058536

Sam, they are visible, i think what happened here is that you zoom or change the size of you window, when you do that, tabs reset to 6 visibles. I don't know why. I should take a look to the script or maybe find a newer script to manage this tabs, but this is not a quick fix/change. I will do first the issue about see submenu without change page, so we can start with community feedback with the new theme. Then i will continue with this tabs.

samtuke

16-12-16 11:34

administrator   ~0058540

Understood, thanks

samtuke

28-02-17 15:27

administrator   ~0058826

Is there a plan to replace the current tabs with another UI element? Or is there another fix for this?

mariez

02-03-17 00:19

developer   ~0058831

That object has more than one script involved, and none is a tab script.

The tabs are really buttons linking to same php page with a different value in the GET variable "tab".
That navigation method is the application.

In the theme side, they are buttons styled as tabs, with a custom script to manage the quantity of visible buttons in each screen size, and an old version of http://www.gmarwaha.com/jquery/jcarousellite/ script to manage the slider for navigate all buttons.

I can modify the custom script to show more buttons in larger screens. That will fix the problem in this issue, but i beleive this element has more problems in issues related. I can also try updating the jCarouselLite script to see if works better. But I dont know if that will fix all problems.

Maybe we should search for a deeper solution to this page. I will appreciate your opinion in this.

mariez

03-03-17 01:37

developer   ~0058834

jCarouselLite script already updated in this commit:
https://github.com/mariez/phplist-ui-bootlist/commit/6b8c61e1268ece6e25138fb860db31f19851940a

mariez

03-03-17 02:05

developer   ~0058835

the custom script that manage the quantity of buttons (tabs) in each screen size is on application, not on theme side. But i can modify it without problem, is a safe modification, will not affect application. so i will do it as a temporary fix of this issue.

samtuke

03-03-17 09:48

administrator   ~0058836

Thanks Marie. It sounds like you are having to customise the script to make the number of buttons adapt to the screen width (as the script does not have this feature by default). As a short term solution, just making more tabs/buttons appear on wider pages is enough. Longer term we will redesign these tabs/pages to group content differently, and we can look at replacing the current button and carousel script system then.

mariez

03-03-17 14:51

developer   ~0058838

Exactly.

mariez

03-03-17 18:18

developer   ~0058839

mmm... i cant do the change on the application because it will affect other themes, like dressprow, where the design container has 700px max.
I will see if i can do a fix to that custom script from Trevelin js.

samtuke

03-03-17 18:23

administrator   ~0058840

In dressprow the container is sometimes smaller then 700px on mobile view. Could the number of buttons be limited to the content area width and work with both themes therefore?

mariez

03-03-17 18:54

developer   ~0058841

That sound good, but actually the script works with media querys. This is the script:

$(document).ready(function() {
    var counttab = ' .$counttabs.";
    var currenttab = $('.current').attr('id');
    if(matchMedia('only screen and (max-width: 480px)').matches){ tabs=2; starttab=currenttab-2; }
    else if(matchMedia('only screen and (max-width: 767px)').matches){ tabs=3; starttab=currenttab-3;}
    else if(matchMedia('only screen and (max-width: 967px)').matches){ tabs=4; starttab=currenttab-4;}
    else{ tabs=6; starttab=currenttab-6; if ( counttab < 7 ){ $('.nexttab').addClass('disabled'); } }
    if ( starttab < 1 ){ starttab=0; $('.prevtab').addClass('disabled'); }
    if ( currenttab>=counttab ){ $('.nexttab').addClass('disabled'); }

    $('#sendtabs').jCarouselLite({
        btnNext: '.nexttab',
        btnPrev: '.prevtab',
        circular: false,
        visible: tabs,
        auto: null,
        speed:100,
        scroll:1,
        start: starttab
    });
});
$(window).resize(function(){
    var counttab = " .$counttabs.";
    var currenttab = $('.current').attr('id');
    if(matchMedia('only screen and (max-width: 480px)').matches){ tabs=2; $('.nexttab').removeClass('disabled'); starttab=currenttab-2;}
    else if(matchMedia('only screen and (max-width: 767px)').matches){ tabs=3; $('.nexttab').removeClass('disabled'); starttab=currenttab-3;}
    else if(matchMedia('only screen and (max-width: 967px)').matches){ tabs=4; $('.nexttab').removeClass('disabled'); starttab=currenttab-4;}
    else{ tabs=6; starttab=currenttab-6; if ( counttab < 7){ $('.nexttab').addClass('disabled'); } }
    if ( starttab < 1 ){ starttab=0; $('.prevtab').addClass('disabled'); }
    if ( currenttab>=counttab ){ $('.nexttab').addClass('disabled'); }
    $('#sendtabs').jCarouselLite({
        btnNext: '.nexttab',
        btnPrev: '.prevtab',
        circular: false,
        visible: tabs,
        auto: null,
        speed:100,
        scroll:1,
        start: starttab
    });
});

mariez

03-03-17 18:58

developer   ~0058842

i will try rewrite the script to work with the div size, not the window size.