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

Drop jquery.dotdotdot for a lighter css-only solution #853

Merged
merged 2 commits into from Apr 13, 2017
Merged

Drop jquery.dotdotdot for a lighter css-only solution #853

merged 2 commits into from Apr 13, 2017

Conversation

noirbizarre
Copy link
Contributor

@noirbizarre noirbizarre commented Apr 6, 2017

This PR drop jquery-dotdotdot for a lighter css-only solution that should improve memory consumption

Line clamping, webkit version:
screenshot-www data dev 2017-04-06 13-25-35

Firefox/IE version (only difference, no ... ellipsis :
screenshot-www data dev-2017-04-06-14-12-21

@davidbgk
Copy link
Member

davidbgk commented Apr 6, 2017

I'm confused with provided screenshots 🤔

@noirbizarre
Copy link
Contributor Author

noirbizarre commented Apr 6, 2017

Confused ? Why ? Because the Firefox one is more blurry ?
The only part that matter is the title: ellipsis on 2 lines. The only difference: no ... on firefox.

Another one with less impact from image

Webkit:
screenshot-www data dev 2017-04-06 15-25-53

Others:
screenshot-www data dev-2017-04-06-15-26-25

@davidbgk
Copy link
Member

davidbgk commented Apr 6, 2017

Alright thanks, the example confused me because it looks spam-y :)

Anyway, I don't get why sometimes you use ellipsis, sometimes clamp-2 and sometimes nothing to replace the previous ellipsis-dot

@noirbizarre
Copy link
Contributor Author

noirbizarre commented Apr 6, 2017

  • ellipsis: standard css-only truncation on 1 line
  • clamp-2: trick to perform a 2 line truncation:
    • webkit: use -webkit-box/-webkit-line-clamp trick
    • others: simply overflow hidden (but I just found a possible amelioration I'll try with :atfer pseudo element to add the ellipsis symbol)

On some element, the ellipsis-dot wasn't doing anythin anymore so I simply removed it.

CHANGELOG.md Outdated
@@ -22,6 +22,9 @@
- bleach and html5lib have been updated leading to more secure html/markdown cleanup
and (better performances)[http://bluesock.org/~willkg/blog/dev/bleach_2_0.html]
[#838](https://github.com/opendatateam/udata/pull/838)
- drop jquery.dotdotdot for a lighter css-only solution (less memomry consumption)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: memory

@@ -8,8 +8,8 @@
width="70" height="70">
</div>
{{ badge_if_certified(organization) }}
<div class="result-body ellipsis-dot">
<h4 class="result-title">{{ organization.name }}</h4>
<div class="result-body ellipsis">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not ellipsis on h4 below and clamp-2 on the following div following the same pattern as others?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mistake on this one, it should be on the h4

@noirbizarre noirbizarre merged commit 054a294 into opendatateam:dev Apr 13, 2017
@noirbizarre noirbizarre deleted the drop-dotdotdot branch April 13, 2017 05:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants