update last released timestamp to visually connect it more to the latest version box #3481

cheungnj · 2018-03-30T22:03:22Z

This is a WIP to get quicker feedback regarding #3335

This is what I have so far

cheungnj · 2018-03-30T22:15:21Z

warehouse/filters.py

@@ -177,3 +177,8 @@ def contains_valid_uris(items):

 def parse_version(version_str):
    return packaging.version.parse(version_str)
+
+
+def uncapitalize(text):


jinja has the built-in capitalize filter so I could also:

remove this filter

update convertToReadableText to return all lowercase values

then invoke the capitalize filter on any existing references to humanize

I could also use the lower filter. There's a lot of options...

lower would be the easiest approach, yet it reads wrong when displaying a date, i.e Released apr 19 2018 vs Released Apr 19 2018 (ideally Released on April 19 2018).

I think we should separate the Jinja side from the Javascript side. If you're up for it we could:

Extend the function timeago.js to read an optional suffix from a second attribute and deal with the capitalization if present.

Remove Released text and the uncapitalized filter so it simply displays the date as before.

Definitely up for it but if I'm reverting my changes so the date is displayed as before, then do we really need to extend timeago.js? It seems like the optional parameter would never get used unless I'm misunderstanding something because it seems like we're still going to display the date as Apr 19 2018 regardless.

I think prefixing the Released would be a nice touch, but it might not justify the change? thoughts @brainwane @nlhkabu?

cheungnj · 2018-03-30T22:15:59Z

warehouse/templates/packaging/detail.html

@@ -91,7 +91,12 @@ <h1 class="package-header__name">
      {% else %}
      <a class="status-badge status-badge--good" href="{{ request.route_path('packaging.project', name=release.project.name) }}">Latest Version</a>
      {% endif %}
-      <p class="package-header__date">{{ humanize(release.created) }}</p>
+      <p class="package-header__date">
+        <span class="status-badge">


I wasn't sure if this was acceptable use of the status-badge class but I could also try using the badge class.

I think it's the appropriate class

brainwane · 2018-03-31T18:44:10Z

@yeraydiazdiaz if you have any time to give your thoughts here, I'd appreciate it.

yeraydiazdiaz

Hi @cheungnj and thanks for your PR, looks much nicer. Left some comments for you, one in particular for changes in Javascript, let me know if you need any help.

yeraydiazdiaz · 2018-04-01T18:24:47Z

warehouse/templates/packaging/detail.html

@@ -91,7 +91,12 @@ <h1 class="package-header__name">
      {% else %}
      <a class="status-badge status-badge--good" href="{{ request.route_path('packaging.project', name=release.project.name) }}">Latest Version</a>
      {% endif %}
-      <p class="package-header__date">{{ humanize(release.created) }}</p>
+      <p class="package-header__date">
+        <span class="status-badge">


I think it's the appropriate class

yeraydiazdiaz · 2018-04-01T18:48:04Z

warehouse/filters.py

@@ -177,3 +177,8 @@ def contains_valid_uris(items):

 def parse_version(version_str):
    return packaging.version.parse(version_str)
+
+
+def uncapitalize(text):


lower would be the easiest approach, yet it reads wrong when displaying a date, i.e Released apr 19 2018 vs Released Apr 19 2018 (ideally Released on April 19 2018).

I think we should separate the Jinja side from the Javascript side. If you're up for it we could:

Extend the function timeago.js to read an optional suffix from a second attribute and deal with the capitalization if present.

Remove Released text and the uncapitalized filter so it simply displays the date as before.

yeraydiazdiaz · 2018-04-01T18:50:08Z

warehouse/static/sass/blocks/_package-header.scss

+      margin-top: 10px;
+
+      &:before {
+        border-color: rgba(0, 0, 0, 0.4);


maybe best to use the border color defined in colours.scss

cheungnj · 2018-04-01T19:53:06Z

This is what I have now. I addressed all of the comments besides extending the functionality of timeago.js because I wanted some clarification.

di · 2018-04-02T16:23:45Z

warehouse/templates/packaging/detail.html

-      <p class="package-header__date">{{ humanize(release.created) }}</p>
+      <p class="package-header__date">
+        <span class="status-badge">
+          {{ humanize(release.created) }}


I think prefixing this with a Released: would be appropriate (not sure I totally follow the discussion in this PR about this).

Maybe @yeraydiazdiaz meant prefix instead of suffix and the presence of that would cause the human readable date to be lowercase?

I don't see how adding a prefix would make the date lowercase? To be clear, I'm talking about changing this line to something like:

Released on: {{ humanize(release.created) }}

I get that but doesn't Released on: Just now or Released on: About 2 hours ago sound kinda weird? I think the discussion earlier was talking about passing the optional prefix and if it was a truthy value then we'd make the return value of convertToReadableText lowercase. In that case we'd need to pass the prefix only when we're converting the value for the time element in .package-header__date. Maybe just doing Released: is the way to go.

Yeah, I'll leave it to you to decide what sounds best, but I think the simplest approach possible here is probably ideal. Last released: might also work.

That sounds like a winner to me

cheungnj · 2018-04-06T21:21:51Z

I forgot to add a new image so this is what it looks like right now:

nlhkabu · 2018-04-17T17:40:47Z

hi @cheungnj thanks for this PR. Just to let you know that this is on my list of things to pull down and review this week, so I'll have feedback for you soon :) Thanks for your patience.

nlhkabu · 2018-04-23T05:40:31Z

hi @cheungnj thanks again for this PR :)

Right now, we have some feedback asking us to reduce the whitespace in our UIs (see #1988), so I think my preference here is to keep this style simple (and taking up less space), and just add the 'Last updated' text for now.

It is likely that we will redesign this header altogether based on user feedback, so I will keep this design in mind for then.

…est version box

cheungnj · 2018-04-28T20:59:37Z

Here's what I have now:

addressed/out of date

cheungnj commented Mar 30, 2018

View reviewed changes

yeraydiazdiaz previously requested changes Apr 1, 2018

View reviewed changes

di reviewed Apr 2, 2018

View reviewed changes

nlhkabu self-requested a review April 3, 2018 06:31

di assigned nlhkabu Apr 5, 2018

cheungnj added 4 commits April 28, 2018 13:40

update last released timestamp to visually connect it more to the lat…

8084cf3

…est version box

display date as before and use border color defined in colours.scss

df16052

add 'Last released:' to package header date status badge

88de063

keep the style simple WRT pypi#1988

ee756d6

cheungnj force-pushed the add-last-released-to-timestamp branch from 9921488 to ee756d6 Compare April 28, 2018 20:58

di approved these changes Apr 28, 2018

View reviewed changes

di merged commit cc0ab5d into pypi:master Apr 28, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

update last released timestamp to visually connect it more to the latest version box #3481

update last released timestamp to visually connect it more to the latest version box #3481

cheungnj commented Mar 30, 2018 •

edited by di

Loading

cheungnj Mar 30, 2018

cheungnj Mar 30, 2018

yeraydiazdiaz Apr 1, 2018

cheungnj Apr 1, 2018 •

edited

Loading

yeraydiazdiaz Apr 1, 2018

cheungnj Mar 30, 2018

yeraydiazdiaz Apr 1, 2018

brainwane commented Mar 31, 2018

yeraydiazdiaz left a comment

yeraydiazdiaz Apr 1, 2018

yeraydiazdiaz Apr 1, 2018

yeraydiazdiaz Apr 1, 2018

cheungnj commented Apr 1, 2018

di Apr 2, 2018

cheungnj Apr 3, 2018

di Apr 3, 2018

cheungnj Apr 3, 2018

di Apr 3, 2018

cheungnj Apr 3, 2018

cheungnj commented Apr 6, 2018

nlhkabu commented Apr 17, 2018

nlhkabu commented Apr 23, 2018

cheungnj commented Apr 28, 2018

update last released timestamp to visually connect it more to the latest version box #3481

update last released timestamp to visually connect it more to the latest version box #3481

Conversation

cheungnj commented Mar 30, 2018 • edited by di Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cheungnj Apr 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brainwane commented Mar 31, 2018

yeraydiazdiaz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cheungnj commented Apr 1, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cheungnj commented Apr 6, 2018

nlhkabu commented Apr 17, 2018

nlhkabu commented Apr 23, 2018

cheungnj commented Apr 28, 2018

cheungnj commented Mar 30, 2018 •

edited by di

Loading

cheungnj Apr 1, 2018 •

edited

Loading