Refactor repo header/list

[wxiaoguang]

1. Use general "mobile-only" and "not-mobile" CSS styles, remove some @media (max-width: 767.98px) tricks
2. Use CountFmt for repo list, just like the repo header (and it matches GitHub, to avoid big numbers bloat the page)

[silverwind]

Sidenote: longterm we should use the tailwind responsive prefixes over .not-mobile:

https://tailwindcss.com/docs/responsive-design

[wxiaoguang]

Sidenote: longterm we should use th tailwind responsive prefixes over .not-mobile:

https://tailwindcss.com/docs/responsive-design

It could be. At the moment, "not-mobile" and "mobile-only" have been widely used. So I think it's good to keep using them, and refactor them together later.

[wxiaoguang]

Oh by the way, I think for this special case, "not-mobile" and "mobile-only" are still good enough. And they selectors need to be doubled to win the chance (see the old comment)

[silverwind]

Yeah we need to work out how to use those tailwind classes. To me it's confusing that they use min-width instead of max-width like all our media queries do. I think we might want to reverse that behaviour in tailwind config.

[silverwind]

I wonder, can we figure out a tailwind class that does what mobile-only does, avoiding that introduction?

[wxiaoguang]

I wonder, can we figure out a tailwind class that does what mobile-only does, avoiding that introduction?

not-mobile and mobile-only have been widely used, this PR doesn't introduce them, but only uses them.

[silverwind]

Huh, according to the CSS diff the class was only on #navbar .mobile-only?

[silverwind]

I see the 4 matches:

templates/base/head_navbar.tmpl:61:					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
templates/base/head_navbar.tmpl:83:				<span class="mobile-only gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
templates/base/head_navbar.tmpl:125:					<span class="mobile-only">{{ctx.Locale.Tr "create_new"}}</span>
templates/base/head_navbar.tmpl:147:					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
web_src/css/modules/navbar.css:113:  #navbar .mobile-only {

Can we at least rename it to only-mobile so it's consistent with word order of not-mobile?

[wxiaoguang]

I see the 4 matches:

Yup, there were 4 matches, and I added 4~5 in this PR, not too many, and they have a clear / non-conflicting name, it could be easily refactored later (which is not in this PR's scope)

Can we at least rename it to only-mobile so it's consistent with word order of not-mobile?

If you really would like: 8cda574