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

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

[Thomas Monjalon]

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.

[PATCH 1/3] doc: set alignments in NIC overview table

[Thomas Monjalon]

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

Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>
---
 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

[PATCH 2/3] doc: highlight pointed row in NIC overview table

[Thomas Monjalon]

Every cells of a feature row are painted in yellow.

Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>
---
 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

[PATCH 3/3] doc: highlight pointed column in NIC overview table

[Thomas Monjalon]

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 <thomas.monjalon@6wind.com>
---
 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

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

[Ferruh Yigit]

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 <ferruh.yigit@intel.com>

<...>

> 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.

Re: [PATCH 1/3] doc: set alignments in NIC overview table

[Mcnamara, John]

> -----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 <thomas.monjalon@6wind.com>

Nice.

Acked-by: John McNamara <john.mcnamara@intel.com>

Re: [PATCH 2/3] doc: highlight pointed row in NIC overview table

[Mcnamara, John]

> -----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 <thomas.monjalon@6wind.com>

Acked-by: John McNamara <john.mcnamara@intel.com>

Re: [PATCH 3/3] doc: highlight pointed column in NIC overview table

[Mcnamara, John]

> -----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 <john.mcnamara@intel.com>

Re: [PATCH 1/3] doc: set alignments in NIC overview table

[Mcnamara, John]

> -----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

Re: [PATCH 1/3] doc: set alignments in NIC overview table

[Thomas Monjalon]

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").

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

[Thomas Monjalon]

2017-02-23 11:00, Ferruh Yigit:
> 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 <ferruh.yigit@intel.com>

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

> > 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.