phplist

NOTE:: Before reporting an issue, make sure you are running the latest version, currently 3.3.1


View Issue Details Jump to Notes ] Print ]
IDProjectCategoryView StatusDate SubmittedLast Update
0018390phplist applicationTheme - bootstrappublic07-11-16 18:5413-03-17 15:08
Reportersamtuke 
PrioritynormalSeverityminorReproducibilityhave not tried
StatusresolvedResolutionfixed 
PlatformOSOS Version
Product Version 
Target VersionFixed in Version 
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.
Attached Filespng file icon Selection_066.png [^] (11,868 bytes) 07-11-16 18:54

- Relationships Relation Graph ] Dependency Graph ]
has duplicate 0018448resolvedmariez Tabs not displayed properly when editing a campaign 

-  Notes
(0058536)
mariez (developer)
15-12-16 23:15

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.
(0058540)
samtuke (administrator)
16-12-16 11:34

Understood, thanks
(0058826)
samtuke (administrator)
28-02-17 15:27

Is there a plan to replace the current tabs with another UI element? Or is there another fix for this?
(0058831)
mariez (developer)
02-03-17 00:19

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.
(0058834)
mariez (developer)
03-03-17 01:37

jCarouselLite script already updated in this commit:
https://github.com/mariez/phplist-ui-bootlist/commit/6b8c61e1268ece6e25138fb860db31f19851940a [^]
(0058835)
mariez (developer)
03-03-17 02:05

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.
(0058836)
samtuke (administrator)
03-03-17 09:48

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.
(0058838)
mariez (developer)
03-03-17 14:51

Exactly.
(0058839)
mariez (developer)
03-03-17 18:18

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.
(0058840)
samtuke (administrator)
03-03-17 18:23

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?
(0058841)
mariez (developer)
03-03-17 18:54

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
    });
});
(0058842)
mariez (developer)
03-03-17 18:58

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


Copyright © 2000 - 2017 MantisBT Team
Powered by Mantis Bugtracker