Problem/Motivation

The new theme Olivero doesn't allow table zebra. Therefore distinguish different rows in a table may be difficult. Some others themes like the old Bartik or the new Claro ones do it using odd/even classes through table.html.twig and convenient css rules. Theme Olivero hasn't such table twig. Thus for this theme the default table twig
core/modules/system/templates/table.html.twig,
is used, which does not implement odd/even classes. Moreover the table.css exists for that theme but has no rules for odd/even classes.

Therefore does this lack is intentional or is a forgetfulness? Why an other approach is used for table zebra? Which one is expected instead?

Steps to reproduce

Proposed resolution

Add a table.html.twig file to Olivero theme, like the Claro theme one.
Add a rule for tr.odd in table.pcss.css.

Remaining tasks

Modify table.pcss.css.
Add a table.html.twig file to Olivero theme, like the Claro theme one.: not necessary.

User interface changes

API changes

Data model changes

Release notes snippet

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Chris64 created an issue. See original summary.

Gauravvvv’s picture

Issue tags: +Needs design
Santosh_Verma’s picture

Adding a patch for table zebra styling

before
before

after
after

Santosh_Verma’s picture

Status: Active » Needs review
Chris64’s picture

The patch 3332049-1.patch has a little space problem:
s/&:nth-child(even){/&:nth-child(even) {/
With Drupal 9.5.8 the patch does not apply. With Drupal 10.0.x-dev the patch applied cleanly. But the table has no zebra. Since the tr elements in the table have no even/odd classes. If now in the Olivero theme the Claro table.html.twig file is used, then the table has zebra. A suitable table.html.twig file seems missing for the theme Olivero. Yes, Screenshot 2023-04-28 at 8.37.03 PM.png is what is expected.

Chris64’s picture

Status: Needs review » Needs work
Santosh_Verma’s picture

Rerolling the patch for D10 with Custom Commands Failed issue fixes.
#Chris64 it's working on css odd even rule.

Testing steps
1.Go to content tab >> edit and create a content >> go to editor >> choose text formate full html
2.Create or paste your table HTML
3. save the content and check the table on frontend
4. You can see the table in zebra style

if this solution is fine then i will create a patch for D9.5

Santosh_Verma’s picture

Status: Needs work » Needs review
Santosh_Verma’s picture

Rerolling the patch for D10.0.x

Chris64’s picture

@ Santosh_Verma I can't get the same result than you.

In my case, the page theme is Olivero. And the html table in this page is built through an html.twig file. On a Drupal 10.1.0 installation.
0) Apply your patch: 3332049-8.patch: OK: applied cleanly.
1) With the original Olivero theme the table html look like,

<table data-striping="1" class="dated">
	<thead>...</thead>
	<tbody>
		<tr data-info="paragraph/21294" id="paragraph/21294">...</tr>
		<tr data-info="paragraph/21286" id="paragraph/21286">...</tr>
		<tr data-info="paragraph/21287" id="paragraph/21287">...</tr>
		...

Visually: PB: table is not zebra. And there is no table.html.twig in the core/themes/olivero/templates/.
2) I alter the Olivero theme, by coping the table.html.twig file from Claro theme in core/themes/olivero/templates/dataset/.
Then (drush cr needed) the table html look like,

<table data-striping="1" class="dated">
	<thead>...</thead>
	<tbody>
		<tr data-info="paragraph/21294" id="paragraph/21294" class="odd">...</tr>
		<tr data-info="paragraph/21286" id="paragraph/21286" class="even">...</tr>
		<tr data-info="paragraph/21287" id="paragraph/21287" class="odd">...</tr>
		...

Visually: OK: table is zebra.

Chris64’s picture

Issue summary: View changes
Chris64’s picture

Status: Needs review » Needs work
Santosh_Verma’s picture

Status: Needs work » Needs review
FileSize
3.12 KB

#Chris64 i have attached the latest patch please test with this.

Chris64’s picture

Fine @Santosh_Verma! Zebra gets in the table without table.html.twig file. Patch 3332049-13 applied cleanly.
Few remarks,
- The final/bottom horizontal line is missing in the table.
- In my case, better without,
padding-block: var(--sp1);: row less height, table more compact.
vertical-align: top;: no horizontal alignment problem in rows.
The full corresponding rule,

:is(.forum table, .text-content table, .views-table, .draggable-table, table) td, :is(.forum table, .text-content table, .views-table, .draggable-table, table) th {
	/* padding-block: var(--sp1); */
	padding-inline-start: 0;
	padding-inline-end: var(--sp1);
	/* vertical-align: top; */
}
Chris64’s picture

Issue summary: View changes
Status: Needs review » Needs work
Chris64’s picture

Issue summary: View changes
Kaustab_Roy’s picture

FileSize
1.41 KB

Added patch based comment #14 requirement.

But I think it will be better to create a subtheme of Olivero theme, then add changes or override them as needed.
Even the changes in above patches can be problematic if we run postcss.

Kindly review.

Chris64’s picture

@Kaustab_Roy, patch 3332049-17 applied cleanly, and makes what was missing. Only one little objection: the final line now exists, but its color if different from the first one. After a look to the patch and the page style, what about rather?,

 :is(.forum table, .text-content table, .views-table, .draggable-table, table) tr:last-child td {
-  border-block-end: 0;
+  border-block-end: 2px solid var(--color--primary-50);
 }

and,

     &:last-child {
       & td {
-        border-block-end: 0;
+        border-block-end: 2px solid var(--color--primary-50);
       }
     }

The file structure would be more the same. Nothing else in view.

If we can avoid to create a subtheme and only use the default Drupal theme it would be much better!

Santosh_Verma’s picture

#Chris64 : Regarding the recent modifications and changes in CSS that you requested in the last patch, implementing them may have an adverse impact on the styling of other sections of the website.While I agree that your suggested solution is better than creating a generic rule for all tables, I have encountered an issue where the even/odd classes are not being applied when I copied the table.html.twig file from Claro to Olivero.
Could you provide more information, such as the folder structure (mine is core/themes/olivero/templates/dataset/table.html.twig) and how to view the table in the frontend (I am creating a view with a format:table)?

Chris64’s picture

@Santosh_Verma, I suggested to use a table.html.twig from an other theme for Olivero, since in the old Bartik theme it was made this way, and some other themes have it. But not sure it is the good solution for Olivero. Yes, same folder for me, for the file table.html.twig in Olivero. We use this to mimic the old system. I enjoy your solution: using css nth-child(even)/nth-child(2n) instead of a twig. Only verified for our particular case. But no problems seen on our site. It is believable that problems occur with yours solutions or my suggestions in some cases. Is it possible to avoid this cases? May be reducing the ambitions of the patch. Seems important: our table does not come from a view: it is a table of paragraphs gets from modules reference_table_formatter and paragraph through a field of type entity_reference_revision. Basic for the style configuration. Surely, no enough images from our part, and so not easy to see how look like the problem. Here some images (from different places):
Olivero Original:
Olivero Original
Olivero + Claro table.html.twig:
Olivero + Claro table.html.twig
Olivero + Css Patch 3332049-13:
Olivero Css Patch 3332049-13
Olivero + Css Patch 3332049-13+17:
Olivero Css Patch 3332049-13+17

Chris64’s picture

Status: Needs work » Postponed (maintainer needs more info)

Version: 10.0.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.