[PATCH 5 of 5 saem_ref v4] Use 'nth-child' selector instead of classes to display striped lists

Frank Bessou frank.bessou at logilab.fr
Mon Oct 8 10:36:47 CEST 2018


# HG changeset patch
# User Frank Bessou <frank.bessou at logilab.fr>
# Date 1537796678 -7200
#      Mon Sep 24 15:44:38 2018 +0200
# Node ID 320247d480ef92574b0d0a2384752415461c0cbc
# Parent  2a47ef231d8d86dbef4a803451bbb9016ec53ebc
# Available At http://hg.logilab.org/review/cubes/saem_ref
#              hg pull http://hg.logilab.org/review/cubes/saem_ref -r 320247d480ef
# EXP-Topic CONSEJIRA-578-584
Use 'nth-child' selector instead of classes to display striped lists

Currently, the markup generated when rendering a list looks like:

<ul>
  <li class='odd'>..</li>
  <li class='even'>..</li>
  <li class='odd'>..</li>
  <li class='even'>..</li>
</ul>
... where 'odd' and 'even' classes are used to display a different
background on cells with an event index.

When the list is re-ordered dynamically (by drag and drop for example)
the stripes order can become inconsistent:

<ul>
  <li class='odd'>..</li>
  <li class='odd'>..</li>
  <li class='even'>..</li>
  <li class='even'>..</li>
</ul>

This is fixed by using the 'nth-child' selector

diff --git a/cubicweb_saem_ref/data/cubes.saem_ref.css b/cubicweb_saem_ref/data/cubes.saem_ref.css
--- a/cubicweb_saem_ref/data/cubes.saem_ref.css
+++ b/cubicweb_saem_ref/data/cubes.saem_ref.css
@@ -202,4 +202,12 @@ div.facet div.facetTitle {
 
 .jOrgChart .node {
   height: auto !important;
-}
\ No newline at end of file
+}
+
+ul.list-striped li:nth-child(2n+1) {
+  background-color: #F0F0F0;
+}
+
+ul.list-striped li:nth-child(2n+0) {
+  background-color: inherit;
+}



More information about the saem-devel mailing list