Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Segment dropdown enhancements #6958

Merged
merged 5 commits into from Jan 10, 2015

Conversation

Irrational86
Copy link

I have changed the mechanism used to shorten the displayed Segment names. The original implementation used a direct character count via JavaScript:

if(name.length > length) {
    return name.slice(0, length).trim() + "...";
}

Whereas now it uses a set of CSS rules for shortening the displayed Segment names based on actual element width:

{
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

The CSS rules applied, just like the JavaScript used, appears to be supported by all major browsers.

Lowest supported versions by all CSS rules:

Browser MDN caniuse.com
Chrome v1.0 v4.0
Firefox v7.0 v7.0
Internet Explorer v6.0 v7.0
Opera v11.0 v11.0
Safari v2.0.2 v3.1
Safari iOS (Yes) v3.2

I will be posting pre/post screenshots of the major browsers in a few hours.

@Irrational86
Copy link
Author

Screenshots:

Browser Original Implementation New Implementation
Chrome Original Dropdown - Chrome Original Editing - Chrome New Dropdown - Chrome New Editing - Chrome
Firefox Original Dropdown - Firefox Original Editing - Firefox New Dropdown - Firefox New Editing - Firefox
Internet Explorer No Screenshots Available New Dropdown - IE New Editing - IE
Internet Explorer (Modern) Original Dropdown - IE (Modern) Original Editing - IE (Modern) New Dropdown - IE (Modern) New Editing - IE (Modern)
Opera Original Dropdown - Opera Original Editing - Opera New Dropdown - Opera New Editing - Opera
Safari (iOS) Original Dropdown - Safari (iOS) New Dropdown - Safari (iOS) New Editing - Safari (iOS)

@mattab
Copy link
Member

mattab commented Jan 10, 2015

Hi @Irrational86 thanks so much for the nice usability improvement, and also posting the screenshots! great PR 👍

@mattab mattab added this to the Piwik 2.11.0 milestone Jan 10, 2015
@mattab mattab added Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. c: Usability For issues that let users achieve a defined goal more effectively or efficiently. labels Jan 10, 2015
mattab pushed a commit that referenced this pull request Jan 10, 2015
@mattab mattab merged commit 5ceebd9 into matomo-org:master Jan 10, 2015
@Irrational86
Copy link
Author

Definitely glad to be of help. Piwik helps me put things in perspective on a daily basis, so it's the least I can do to return the favor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: Usability For issues that let users achieve a defined goal more effectively or efficiently. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants