Template talk:COVID-19 pandemic data/styles.css/Archive 1
Permission
edit@Bawolff: Do you mind if I copy some of your codes to my templates for COVID-19 pandemic? Thanks! —hueman1 (talk • contributions) 14:27, 17 March 2020 (UTC)
Adding to `box-sizing` change
editWe should also provide vendor properties:
/* For mobile to not stick table to the left gutter. See https://phabricator.wikimedia.org/T247702#5976282 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
- Jdlrobson explained to me, that this is not possible due to outstanding https://phabricator.wikimedia.org/T162379 Volker E. (WMF) (talk) 21:33, 18 March 2020 (UTC)
Cleaning up the table for mobile web
edit@Bawolff: @HueMan1: @Pppery: @Volker E. (WMF): — I would like to propose some mobile-only styles that result in the table rendering better on mobile web. The css is here (link) and you can preview the table (on your phone) here (link). To compare the results:
 |
 |
|---|
It seems like I am able to edit the template stylesheet directly but thought it would be best to run things by you all first, since I have not done any template stylesheet editing before. Thanks for your consideration!
Here is the proposed CSS:
/* For mobile devices */
@media only screen and (max-width: 500px) {
#covid19-container {
/* the scrollbar problem reference above doesn't seem to be an issue on mobile, */
/* and is currently causing the table to be clipped */
/* checked iOS (Firefox, Safari, Chrome), and Android (Firefox, Chrome) */
padding-right: 0;
/* create space between table and the section hatnote above */
margin-top: 10px;
}
/* float the [show more] element to the left */
.covid-show-table {
float: left;
}
/* hide the V • T • E element */
.plainlinks.hlist.navbar.mini {
display: none;
}
/* float the table header left */
.plainlinks.hlist.navbar.mini + div {
margin: 0 !important;
float: left;
}
/* text align left for the country heading left */
.covid-country-narrow-on-mobile {
text-align: left !important;
}
/* text align left for the first total-row cell left */
.covid-total-row:first-of-type {
text-align: left !important;
}
/* text align left for all country names */
#covid19-container table tbody > tr > :nth-child(2) {
text-align: left;
padding-left: 5px !important;
}
/* reduce font-weight for all country names */
#covid19-container table tbody > tr > :nth-child(2) > a {
font-weight: 500;
}
}
— Preceding unsigned comment added by AHollender (WMF) (talk • contribs)
- @AHollender (WMF): In future I think it would make more sense to post such proposed changes on the template's main talk page rather than the /styles.css subpage, since barely anyone watches this page (usually these pages are redirected to the main talk page). The CSS change seems fine, although I'm not sure if the left float is necessary. Jc86035 (talk) 18:51, 24 March 2020 (UTC)
- @Jc86035: thanks for your message, I was wondering why there were no replies :) Good to know for future reference. And yea, I went back and forth about the float. With a few additional lines of CSS I was able to get "[show all]" to appear underneath the table header, which seemed more appropriate. AHollender (WMF) (talk) 20:08, 24 March 2020 (UTC)
- AHollender (WMF): The result looks pretty good. Thank you! --MarioGom (talk) 23:18, 25 March 2020 (UTC)
- @Jc86035: thanks for your message, I was wondering why there were no replies :) Good to know for future reference. And yea, I went back and forth about the float. With a few additional lines of CSS I was able to get "[show all]" to appear underneath the table header, which seemed more appropriate. AHollender (WMF) (talk) 20:08, 24 March 2020 (UTC)
- Compared to a squashed desktop view, your mobile view seems to trim off the references without having a scroll option. (perhaps there is one though). And on the desktop version it seems to lose the flags when squashed, so this might be useful on a smaller mobile screen too. But I may ask why are the number columns so wide on the existing mobile view? On the desktop the are much thinner, and the top header becomes wrapped to fir in. Graeme Bartlett (talk) 01:00, 26 March 2020 (UTC)
- Graeme Bartlett: I'm not sure I understand your comment. Perhaps you could include screenshots of what you're seeing? AHollender (WMF) (talk) 21:22, 27 March 2020 (UTC)
Solved. Collapse link needed to collapse back to the original scroll box
editAfter the "Show all" link is clicked there needs to be a collapse link to collapse back to the original scroll box.
The collapse link is also needed on this related template:
See discussions:
- Template talk:COVID-19 pandemic data#Need a link to collapse it back to its original scroll box size
- Template talk:COVID-19 pandemic death rates by country#Link to scrollable sandbox version and Help:Table discussion about it
- Help talk:Table#Partially collapsed table with vertical scrolling and show/hide links?
--Timeshifter (talk) 10:56, 30 August 2020 (UTC)
- This has been solved. Check the templates to see. --Timeshifter (talk) 04:01, 29 October 2020 (UTC)
Small bit of CSS for John Hopkins table
editTo avoid duplication see discussion here:
Section currently titled: "CSS to left-align column of country names. When country names are in the first column". --Timeshifter (talk) 06:18, 6 September 2020 (UTC)
- I tried it out and it works. We no longer need to source the other CSS page. --Timeshifter (talk) 06:30, 6 September 2020 (UTC)
Solved. On another template using this CSS need to make sorting row sticky too
editBawolff, AHollender (WMF), Jc86035, etc.. Please see discussion here:
It is referring to this table, and how to partially collapse it, and make it less wide:
Then it can be incorporated into this much more popular article (40,000 views per day):
class=covid-sticky only seems to work on one header row. It also needs to work on the sorting row, which is also a header row. This will narrow the table, allowing it to be viewed without horizontal scrolling in smaller screens.
--Timeshifter (talk) 19:45, 17 October 2020 (UTC)
- This has been solved. See User:Timeshifter/Sandbox130 and its talk page: User talk:Timeshifter/Sandbox130.
- --Timeshifter (talk) 04:05, 29 October 2020 (UTC)
Firefox problems
edit2 scrollbars. There should only be one. Sticky headers no longer working. Jroberson108. See:
In Firefox there are 2 scroll bars to the right of each yearly table. One of them has no dragging button.
There is only one scrollbar just to the right of the yearly tables in Edge or Chrome. --Timeshifter (talk) 23:00, 12 January 2022 (UTC)
Sticky headers are not working in the yearly tables in Firefox.
They are working in Edge and Chrome. --Timeshifter (talk) 23:05, 12 January 2022 (UTC)
- I reverted the styles.css change. There is some wakiness going on that I will have to take a closer look at. IDs are suppose to be unique per a page and shouldn't be repeated in all those tables since they all can appear on the same page. The class is what should be duplicated. Jroberson108 (talk) 23:17, 12 January 2022 (UTC)