[PATCH 0/3] cross focus in NIC overview HTML table

In order to make the NIC overview easier to read
(http://dpdk.org/doc/guides/nics/overview.html)
the row and column pointed by the mouse are highlighted.

Thomas Monjalon (3):
  doc: set alignments in NIC overview table
  doc: highlight pointed row in NIC overview table
  doc: highlight pointed column in NIC overview table

 doc/guides/nics/overview.rst | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)


A next step could be to highlight every implemented features when
pointing a driver, or every drivers implenting a pointed feature.
The latter could be done by this patch:

       table#id1 th:not(:first-child):hover::after,
-      table#id1 td:not(:first-child):hover::after {
+      table#id1 td:not(:first-child):hover::after,
+      table#id1 td:first-child:hover ~ td:not(:empty)::after {
          content: '';
          height: 6000px;
          top: -3000px;

Unfortunately, I cannot make it work, probably because the cells are not
really empty. A javascript function could help to trim the cells.
Any help to implement this next step would be welcome.

Some CSS alignments were not explicitly set.
The pointer is also set to default for the table.

Signed-off-by: Thomas Monjalon <redacted>
---
 doc/guides/nics/overview.rst | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/doc/guides/nics/overview.rst b/doc/guides/nics/overview.rst
index 2c7f5eb..3b733f7 100644
--- a/doc/guides/nics/overview.rst
+++ b/doc/guides/nics/overview.rst

@@ -53,10 +53,15 @@ Most of these differences are summarized below.
 .. raw:: html
 
    <style>
+      table#id1 {
+         cursor: default;
+      }
+      table#id1 th, table#id1 td {
+         text-align: center;
+      }
       table#id1 th {
          font-size: 80%;
          white-space: pre-wrap;
-         text-align: center;
          vertical-align: top;
          padding: 2px;
       }

@@ -69,6 +74,7 @@ Most of these differences are summarized below.
       }
       table#id1 td:first-child {
          padding-left: 1em;
+         text-align: left;
       }
    </style>
 

-- 
2.7.0

-----Original Message-----
From: dev [mailto:dev-bounces@dpdk.org] On Behalf Of Thomas Monjalon
Sent: Monday, February 20, 2017 9:27 PM
To: dev@dpdk.org
Subject: [dpdk-dev] [PATCH 1/3] doc: set alignments in NIC overview table

Some CSS alignments were not explicitly set.
The pointer is also set to default for the table.

Signed-off-by: Thomas Monjalon <redacted>

Nice.

Acked-by: John McNamara <redacted>

-----Original Message-----
From: dev [mailto:dev-bounces@dpdk.org] On Behalf Of Thomas Monjalon
Sent: Monday, February 20, 2017 9:27 PM
To: dev@dpdk.org
Subject: [dpdk-dev] [PATCH 1/3] doc: set alignments in NIC overview table

Some CSS alignments were not explicitly set.
The pointer is also set to default for the table.

On a related note, a while ago we looked at rotating the text of the NICs
to make the table slightly more readable.

I've attached an example.

It might be nice to add this as well, if it doesn't interfere with the other
formatting.

John

2017-02-23 12:51, Mcnamara, John:

On a related note, a while ago we looked at rotating the text of the NICs
to make the table slightly more readable.

Me too I've looked at it while ago.

I've attached an example.

It might be nice to add this as well, if it doesn't interfere with the other
formatting.

If I remember well, the issue is that it cannot be applied in PDF version which
will be rendered with large columns outside of the page (driver names on one
line instead of the current "one letter per line").

Every cells of a feature row are painted in yellow.

Signed-off-by: Thomas Monjalon <redacted>
---
 doc/guides/nics/overview.rst | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/doc/guides/nics/overview.rst b/doc/guides/nics/overview.rst
index 3b733f7..a8a8f26 100644
--- a/doc/guides/nics/overview.rst
+++ b/doc/guides/nics/overview.rst

@@ -76,6 +76,9 @@ Most of these differences are summarized below.
          padding-left: 1em;
          text-align: left;
       }
+      table#id1 tr:hover td {
+         background-color: #ffb;
+      }
    </style>
 
 .. include:: overview_table.txt

-- 
2.7.0

-----Original Message-----
From: dev [mailto:dev-bounces@dpdk.org] On Behalf Of Thomas Monjalon
Sent: Monday, February 20, 2017 9:27 PM
To: dev@dpdk.org
Subject: [dpdk-dev] [PATCH 2/3] doc: highlight pointed row in NIC overview
table

Every cells of a feature row are painted in yellow.

Signed-off-by: Thomas Monjalon <redacted>

Acked-by: John McNamara <redacted>

Every cells of a driver column are painted in yellow.

The trick is to generate some empty content as a big column
above and below the pointed cell.

The position: relative attribute is used for the highlight position
but it makes the border to disappear.

The overflow: hidden attribute is used to mask the generated content
outside of the table.

The class .wy-nav-content has a background which masks the highlighting.
Setting an opacity lower than 1, creates a new stack context and let
the column highlight to be shown.

The background of odd rows was grey and opaque. It is redefined with
a transparent alpha ratio in order to see highlighting on such rows.

Signed-off-by: Thomas Monjalon <redacted>
---
 doc/guides/nics/overview.rst | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/doc/guides/nics/overview.rst b/doc/guides/nics/overview.rst
index a8a8f26..afb6503 100644
--- a/doc/guides/nics/overview.rst
+++ b/doc/guides/nics/overview.rst

@@ -53,8 +53,12 @@ Most of these differences are summarized below.
 .. raw:: html
 
    <style>
+      .wy-nav-content {
+         opacity: .99;
+      }
       table#id1 {
          cursor: default;
+         overflow: hidden;
       }
       table#id1 th, table#id1 td {
          text-align: center;

@@ -76,6 +80,24 @@ Most of these differences are summarized below.
          padding-left: 1em;
          text-align: left;
       }
+      table#id1 tr:nth-child(2n-1) td {
+         background-color: rgba(210, 210, 210, 0.2);
+      }
+      table#id1 th:not(:first-child):hover,
+      table#id1 td:not(:first-child):hover {
+         position: relative;
+      }
+      table#id1 th:not(:first-child):hover::after,
+      table#id1 td:not(:first-child):hover::after {
+         content: '';
+         height: 6000px;
+         top: -3000px;
+         width: 100%;
+         left: 0;
+         position: absolute;
+         z-index: -1;
+         background-color: #ffb;
+      }
       table#id1 tr:hover td {
          background-color: #ffb;
       }

-- 
2.7.0

-----Original Message-----
From: dev [mailto:dev-bounces@dpdk.org] On Behalf Of Thomas Monjalon
Sent: Monday, February 20, 2017 9:27 PM
To: dev@dpdk.org
Subject: [dpdk-dev] [PATCH 3/3] doc: highlight pointed column in NIC
overview table

Acked-by: John McNamara <redacted>

On 2/20/2017 9:26 PM, Thomas Monjalon wrote:

In order to make the NIC overview easier to read
(http://dpdk.org/doc/guides/nics/overview.html)
the row and column pointed by the mouse are highlighted.

Thomas Monjalon (3):
  doc: set alignments in NIC overview table
  doc: highlight pointed row in NIC overview table
  doc: highlight pointed column in NIC overview table

Series Acked-by: Ferruh Yigit [off-list ref]

<...>

A next step could be to highlight every implemented features when
pointing a driver, or every drivers implenting a pointed feature.
The latter could be done by this patch:

       table#id1 th:not(:first-child):hover::after,
-      table#id1 td:not(:first-child):hover::after {
+      table#id1 td:not(:first-child):hover::after,
+      table#id1 td:first-child:hover ~ td:not(:empty)::after {
          content: '';
          height: 6000px;
          top: -3000px;

Unfortunately, I cannot make it work, probably because the cells are not
really empty. A javascript function could help to trim the cells.
Any help to implement this next step would be welcome.

Overall I agree that some readability improvements would be good for NIC
overview table.

2017-02-23 11:00, Ferruh Yigit:

On 2/20/2017 9:26 PM, Thomas Monjalon wrote:

quoted

In order to make the NIC overview easier to read
(http://dpdk.org/doc/guides/nics/overview.html)
the row and column pointed by the mouse are highlighted.

Thomas Monjalon (3):
  doc: set alignments in NIC overview table
  doc: highlight pointed row in NIC overview table
  doc: highlight pointed column in NIC overview table

Series Acked-by: Ferruh Yigit [off-list ref]

Applied, see it online:
	http://dpdk.org/doc/guides/nics/overview.html#id1

quoted

A next step could be to highlight every implemented features when
pointing a driver, or every drivers implenting a pointed feature.
The latter could be done by this patch:

       table#id1 th:not(:first-child):hover::after,
-      table#id1 td:not(:first-child):hover::after {
+      table#id1 td:not(:first-child):hover::after,
+      table#id1 td:first-child:hover ~ td:not(:empty)::after {
          content: '';
          height: 6000px;
          top: -3000px;

Unfortunately, I cannot make it work, probably because the cells are not
really empty. A javascript function could help to trim the cells.
Any help to implement this next step would be welcome.

Overall I agree that some readability improvements would be good for NIC
overview table.

Yes I feel we need a CSS/Javascript expert to go further.